Feature/mobile camera admin

src/app/utils.js

@@ -194,3 +194,11 @@ export const createBreakpoints = (breakpointValues) => {
     greaterThanOrEqual: (bp1, bp2) => compareBreakpoints(bp1, bp2) >= 0,
   };
 };
+
+// Shorten words for mobile screens
+export const shortenedField = (fieldVal) => {
+  if (fieldVal.length <= 8) {
+    return fieldVal;
+  }
+  return `${fieldVal.substring(0, 5)}...`;
+};

src/components/CategorySelector.jsx

@@ -89,6 +89,7 @@ const CategorySelector = forwardRef(function CategorySelector(
   const options = enabledLabels
     .sort((lbl1, lbl2) => compareLabelNames(lbl1.name, lbl2.name))
     .map(createOption);
+
   const dispatch = useDispatch();
 
   const defaultHandleBlur = () => dispatch(addLabelEnd());

src/components/DatePicker.jsx

@@ -4,6 +4,9 @@ import 'react-dates/initialize';
 import { SingleDatePicker } from 'react-dates';
 import 'react-dates/lib/css/_datepicker.css';
 import { inViewportTopHalf } from '../app/utils';
+import { useSelector } from 'react-redux';
+import { selectGlobalBreakpoint } from '../features/projects/projectsSlice';
+import { globalBreakpoints } from '../config';
 
 // NOTE: Date Picker style overrides are in theme/globalStyles.js
 // Had to override them there b/c the actual Date Picker element gets
@@ -27,6 +30,9 @@ const DatePickerWithFormik = ({
     setFocusedInput(focused);
   };
 
+  const currentBreakpoint = useSelector(selectGlobalBreakpoint);
+  const isSmallScreen = globalBreakpoints.lessThanOrEqual(currentBreakpoint, 'xs');
+
   return (
     <div ref={containerEl}>
       <SingleDatePicker
@@ -44,6 +50,7 @@ const DatePickerWithFormik = ({
         onFocusChange={onFocusChange}
         id="startDate"
         small={true}
+        numberOfMonths={isSmallScreen ? 1 : 2}
         hideKeyboardShortcutsPanel={true}
         enableOutsideDays={true}
         isOutsideRange={() => false}

src/components/HamburgerMenu.jsx

@@ -5,6 +5,13 @@ import { Menu, X, ExternalLinkIcon } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import Button from './Button.jsx';
 import IconButton from './IconButton.jsx';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  selectModalOpen,
+  selectSelectedProject,
+  setModalContent,
+  setModalOpen,
+} from '../features/projects/projectsSlice.js';
 
 const openOverlayAnimation = keyframes({
   from: { opacity: 0 },
@@ -94,7 +101,7 @@ const Overlay = styled(Dialog.Overlay, {
 });
 
 const Content = styled(Dialog.Content, {
-  zIndex: '$6',
+  zIndex: '$5',
   width: '100vw',
   height: '80dvh',
   position: 'fixed',
@@ -152,8 +159,47 @@ const LinkWithIcon = styled('span', {
   },
 });
 
+const InternalButton = styled('div', {
+  ...linkStyles,
+  '&:hover': {
+    cursor: 'pointer',
+    color: '$gray12',
+    borderBottom: '1px solid $gray7',
+  },
+  variants: {
+    disabled: {
+      true: {
+        color: '$gray5',
+        '&:hover': {
+          pointerEvents: 'none',
+          cursor: 'auto',
+        },
+      },
+      false: {},
+    },
+  },
+});
+
+const ModalTrigger = ({ text, disabled, handleClick }) => {
+  const onClick = disabled ? () => {} : handleClick;
+
+  return (
+    <InternalButton disabled={disabled} onClick={onClick}>
+      {text}
+    </InternalButton>
+  );
+};
+
 export const HamburgerMenu = ({ signedIn, appActive, signOut }) => {
+  const modalOpen = useSelector(selectModalOpen);
+  const selectedProject = useSelector(selectSelectedProject);
   const [isOpen, setIsOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const handleModalToggle = (content) => {
+    dispatch(setModalOpen(!modalOpen));
+    dispatch(setModalContent(content));
+  };
 
   return (
     <MenuRoot onOpenChange={(newState) => setIsOpen(newState)}>
@@ -170,6 +216,11 @@ export const HamburgerMenu = ({ signedIn, appActive, signOut }) => {
                     Documentation
                   </A>
                 </Dialog.Close>
+                <ModalTrigger
+                  disabled={!selectedProject}
+                  handleClick={() => handleModalToggle('camera-admin-modal')}
+                  text={'Manage cameras'}
+                />
                 <Dialog.Close asChild>
                   <SignOut onClick={signOut}>Sign out</SignOut>
                 </Dialog.Close>

src/components/Modal.jsx

@@ -15,7 +15,7 @@ const ModalBody = styled('div', {
   variants: {
     fullHeight: {
       true: {
-        height: 'calc(95vh - $7)',
+        height: 'calc(95dvh - $7)',
       },
     },
   },
@@ -32,7 +32,7 @@ const overlayShow = keyframes({
 // });
 
 const StyledOverlay = styled(DialogPrimitive.Overlay, {
-  zIndex: '$4',
+  zIndex: '$5',
   backgroundColor: blackA.blackA9,
   position: 'fixed',
   inset: 0,
@@ -57,20 +57,26 @@ const StyledContent = styled(DialogPrimitive.Content, {
   variants: {
     size: {
       sm: {
-        width: '30vw',
-        minWidth: '430px',
+        width: '95dvw',
+        '@bp1': {
+          width: '30dvw',
+          minWidth: '430px',
+        },
       },
       md: {
-        width: '60vw',
+        width: '95dvw',
+        '@bp1': {
+          width: '60dvw',
+        },
       },
       lg: {
-        width: '95vw',
-        maxHeight: '95vh',
+        width: '95dvw',
+        maxHeight: '95dvh',
       },
     },
     fullHeight: {
       true: {
-        height: '95vh',
+        height: '95dvh',
       },
     },
   },

src/components/PermanentActionConfirmation.jsx

@@ -1,5 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { FieldRow, StandAloneInput } from './Form.jsx';
+import { styled } from '../theme/stitches.config.js';
+
+const StyledField = styled(StandAloneInput, {
+  padding: '$2',
+  '@bp2': {
+    padding: '$3',
+  },
+});
 
 const PermanentActionConfirmation = ({ text, setConfirmed }) => {
   const [value, setValue] = useState('');
@@ -15,7 +23,7 @@ const PermanentActionConfirmation = ({ text, setConfirmed }) => {
         field:
       </p>
       <FieldRow>
-        <StandAloneInput
+        <StyledField
           type="text"
           value={value}
           onChange={(e) => {

src/components/SelectField.jsx

@@ -7,10 +7,29 @@ import InfoIcon from './InfoIcon';
 // TODO: refactor using radix select primative.
 // I don't love the incongruous approach to styling react-select forces
 
+const valueContainerStyles = (isSearchable) => {
+  return (provided) => ({
+    ...provided,
+    padding: 'var(--space-2)',
+    '@media screen only and (min-width: 768px)': {
+      padding: '0px 16px',
+    },
+    fontSize: 'var(--fontSizes-3)',
+    fontFamily: 'var(--fonts-sourceSansPro)',
+    color: 'var(--colors-gray7)',
+    ...(!isSearchable && {
+      '> div': { margin: '2px' },
+      '> input': { display: 'none' },
+    }),
+  });
+};
+
 const customStyles = {
   control: (provided, state) => ({
     ...provided,
-    height: '55px',
+    '@bp2': {
+      height: '55px',
+    },
     boxSizing: 'border-box',
     border: '1px solid',
     borderColor: 'var(--colors-border) !important',
@@ -26,21 +45,6 @@ const customStyles = {
       },
     }),
   }),
-  input: (provided) => ({
-    ...provided,
-    'input:focus': {
-      boxShadow: 'none !important',
-      transition: 'none',
-    },
-  }),
-  valueContainer: (provided) => ({
-    ...provided,
-    height: '100%',
-    padding: '0px 16px',
-    fontSize: 'var(--fontSizes-3)',
-    fontFamily: 'var(--fonts-sourceSansPro)',
-    color: 'var(--colors-gray7)',
-  }),
   menu: (provided) => ({
     ...provided,
     color: 'var(--colors-hiContrast)',
@@ -57,6 +61,13 @@ const customStyles = {
       backgroundColor: 'var(--colors-gray3)',
     }),
   }),
+  input: (provided, state) => ({
+    ...provided,
+    boxShadow: 'none',
+    ...(state.isFocused && {
+      boxShadow: 'none',
+    }),
+  }),
 };
 
 const SelectField = ({
@@ -81,6 +92,11 @@ const SelectField = ({
     onBlur(name, true);
   };
 
+  const styles = {
+    ...customStyles,
+    ...{ valueContainer: valueContainerStyles(isSearchable ?? false) },
+  };
+
   return (
     <div>
       {label && (
@@ -90,7 +106,7 @@ const SelectField = ({
         </label>
       )}
       <Select
-        styles={customStyles}
+        styles={styles}
         inputId={name}
         options={options}
         multi={true}