Merge pull request #3059 from LiteFarmOrg/styling-fixes

Nav menu styling fixes
LiteFarmOrg · Jan 4, 2024 · 93b96b9 · 93b96b9
2 parents ddbcc28 + 3f30dad
commit 93b96b9
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 54 deletions.
diff --git a/packages/webapp/src/App.jsx b/packages/webapp/src/App.jsx
@@ -14,17 +14,21 @@
  */
 
 import { Suspense, useState } from 'react';
-import Navigation from './containers/Navigation';
-import history from './history';
+import { matchPath } from 'react-router-dom';
 import clsx from 'clsx';
 import { SnackbarProvider } from 'notistack';
+
+import Navigation from './containers/Navigation';
+import history from './history';
 import { NotistackSnackbar } from './containers/Snackbar/NotistackSnackbar';
 import { OfflineDetector } from './containers/hooks/useOfflineDetector/OfflineDetector';
 import styles from './styles.module.scss';
 import Routes from './routes';
 
 function App() {
   const [isCompactSideMenu, setIsCompactSideMenu] = useState(false);
+  const FULL_WIDTH_ROUTES = ['/map'];
+  const isFullWidth = FULL_WIDTH_ROUTES.some((path) => matchPath(history.location.pathname, path));
 
   return (
     <div className={clsx(styles.container)}>
@@ -34,7 +38,7 @@ function App() {
           isCompactSideMenu={isCompactSideMenu}
           setIsCompactSideMenu={setIsCompactSideMenu}
         >
-          <div className={styles.app}>
+          <div className={clsx(styles.app, isFullWidth && styles.fullWidthApp)}>
             <OfflineDetector />
             <SnackbarProvider
               anchorOrigin={{
@@ -47,7 +51,7 @@ function App() {
               }}
               content={(key, message) => <NotistackSnackbar id={key} message={message} />}
             >
-              <Routes />
+              <Routes isCompactSideMenu={isCompactSideMenu} />
             </SnackbarProvider>
           </div>
         </Navigation>

diff --git a/packages/webapp/src/assets/colors.scss b/packages/webapp/src/assets/colors.scss
@@ -11,6 +11,9 @@
   --green400: #a8e6bd;
   --green200: #c7efd3;
   --green100: #e3f8ec;
+  --secondaryGreen800: #495c51;
+  --secondaryGreen200: #C1E6D2;
+  --secondaryGreen50: #F2FAF5;
   --yellow700: #ffb800;
   --yellow400: #fed450;
   --yellow300: #fce38d;

diff --git a/packages/webapp/src/components/Map/DrawingManager/styles.module.scss b/packages/webapp/src/components/Map/DrawingManager/styles.module.scss
@@ -1,8 +1,9 @@
 .container {
-  padding: 24px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
 }
 
 .backButton {
@@ -27,7 +28,7 @@
 
 .drawingButton {
   display: inline;
-  margin: 0 6px 12px 6px;
+  margin: 0 6px 0 6px;
   min-width: 96px;
   pointer-events: auto;
 }

diff --git a/packages/webapp/src/components/Map/Header/styles.module.scss b/packages/webapp/src/components/Map/Header/styles.module.scss
@@ -4,7 +4,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 15px 24px;
+  padding: 16px 24px;
   overflow: hidden;
   word-break: break-word;
 }

diff --git a/packages/webapp/src/components/Navigation/SideMenu/styles.module.scss b/packages/webapp/src/components/Navigation/SideMenu/styles.module.scss
@@ -312,9 +312,20 @@
 .activeListItem {
   background-color: #A2D2CD;
 
+  &.subItem:not(:hover) {
+    background-color: var(--secondaryGreen50);
+
+    .subItemText {
+      span {
+        text-shadow: var(--secondaryGreen200) 0px 1px;
+        color: var(--secondaryGreen800);
+      }
+    }
+  }
+
   @include xs-breakpoint {
     &.subItem {
-      background-color: #A2D2CD;
+      background-color: var(--secondaryGreen50);
     }
 
     &.adminActionListItem {

diff --git a/packages/webapp/src/components/Profile/ProfileLayout/index.jsx b/packages/webapp/src/components/Profile/ProfileLayout/index.jsx
@@ -3,39 +3,11 @@ import React from 'react';
 import styles from './styles.module.scss';
 import Footer from '../../Footer';
 import PropTypes from 'prop-types';
-import RouterTab from '../../RouterTab';
-import { useTranslation } from 'react-i18next';
-
-export default function ProfileLayout({ children, buttonGroup, onSubmit, history }) {
-  const { t } = useTranslation();
-  const onKeyDown = (e) => {
-    if (document.activeElement.tagName !== 'BUTTON' && e.key === 'Enter') {
-      e.preventDefault();
-    }
-  };
 
+export default function ProfileLayout({ children, buttonGroup, onSubmit }) {
   return (
-    <form onSubmit={onSubmit} className={styles.form} onKeyDown={onKeyDown}>
-      <div className={styles.container}>
-        <RouterTab
-          history={history}
-          tabs={[
-            {
-              label: t('PROFILE.ACCOUNT_TAB'),
-              path: `/profile`,
-            },
-            {
-              label: t('PROFILE.PEOPLE_TAB'),
-              path: `/people`,
-            },
-            {
-              label: t('PROFILE.FARM_TAB'),
-              path: `/farm`,
-            },
-          ]}
-        />
-        {children}
-      </div>
+    <form onSubmit={onSubmit} className={styles.form}>
+      <div className={styles.container}>{children}</div>
       <Footer>{buttonGroup}</Footer>
     </form>
   );

diff --git a/packages/webapp/src/containers/Map/index.jsx b/packages/webapp/src/containers/Map/index.jsx
@@ -76,8 +76,9 @@ import {
   setMapAddDrawerHide,
   setMapAddDrawerShow,
 } from './mapAddDrawerSlice';
+import clsx from 'clsx';
 
-export default function Map({ history }) {
+export default function Map({ history, isCompactSideMenu }) {
   const { farm_name, grid_points, is_admin, farm_id } = useSelector(userFarmSelector);
   const filterSettings = useSelector(mapFilterSettingSelector);
   const mapAddDrawer = useSelector(mapAddDrawerSelector);
@@ -509,7 +510,12 @@ export default function Map({ history }) {
             />
           </div>
           {drawingState.type && (
-            <div className={styles.drawingBar}>
+            <div
+              className={clsx(
+                styles.drawingBar,
+                isCompactSideMenu && styles.drawingBarWithCompactMenu,
+              )}
+            >
               <DrawingManager
                 drawingType={drawingState.type}
                 isDrawing={drawingState.isActive}

diff --git a/packages/webapp/src/containers/Map/styles.module.scss b/packages/webapp/src/containers/Map/styles.module.scss
@@ -61,24 +61,18 @@
 }
 
 .drawingBar {
-  width: 100%;
+  width: calc(100vw - var(--global-side-menu-width));
   position: fixed;
   top: 72px;
   align-self: center;
   z-index: 10;
   pointer-events: none;
-}
 
-@media (max-width: 960px) {
-  .drawingBar {
-    top: 56px;
+  &.drawingBarWithCompactMenu {
+    width: calc(100vw - var(--global-compact-side-menu-width));
   }
 }
 
-.mapContainer {
-  width: 100%;
-}
-
 .clusterIcon {
   background-color: white;
   color: var(--teal700);

diff --git a/packages/webapp/src/routes/index.jsx b/packages/webapp/src/routes/index.jsx
@@ -279,7 +279,7 @@ const UnknownRecord = React.lazy(() =>
   import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
 );
 
-const Routes = () => {
+const Routes = ({ isCompactSideMenu }) => {
   useScrollToTop();
   useReduxSnackbar();
   const userFarm = useSelector(
@@ -509,7 +509,11 @@ const Routes = () => {
             />
             <Route path="/tasks/:task_id/harvest_uses" exact component={HarvestUses} />
             <Route path="/tasks/:task_id/abandon" exact component={TaskAbandon} />
-            <Route path="/map" exact component={Map} />
+            <Route
+              path="/map"
+              exact
+              component={(props) => <Map isCompactSideMenu={isCompactSideMenu} {...props} />}
+            />
             <Route path="/map/videos" exact component={MapVideo} />
             <Route
               path="/create_location/farm_site_boundary"
@@ -780,7 +784,11 @@ const Routes = () => {
             <Route path="/documents/add_document" exact component={AddDocument} />
             <Route path="/documents/:document_id/edit_document" exact component={EditDocument} />
             <Route path="/documents/:document_id" exact component={MainDocument} />
-            <Route path="/map" exact component={Map} />
+            <Route
+              path="/map"
+              exact
+              component={(props) => <Map isCompactSideMenu={isCompactSideMenu} {...props} />}
+            />
             <Route path="/map/videos" exact component={MapVideo} />
             <Route
               path="/create_location/farm_site_boundary"
@@ -922,7 +930,11 @@ const Routes = () => {
               exact
               component={ManagementDetails}
             />
-            <Route path="/map" exact component={Map} />
+            <Route
+              path="/map"
+              exact
+              component={(props) => <Map isCompactSideMenu={isCompactSideMenu} {...props} />}
+            />
             <Route path="/farm_site_boundary/:location_id" component={FarmSiteBoundaryDetails} />
             <Route path="/barn/:location_id" component={BarnDetails} />
             <Route path="/natural_area/:location_id" component={NaturalAreaDetails} />

diff --git a/packages/webapp/src/styles.module.scss b/packages/webapp/src/styles.module.scss
@@ -33,6 +33,10 @@
   flex-direction: column;
   position: relative;
 
+  &.fullWidthApp {
+    max-width: 100%;
+  }
+
   @include sm-breakpoint {
     .containerRoot {
       left: calc((100vw - var(--global-side-menu-width)) / 2 + var(--global-side-menu-width));