From 12dee109532b8e941044bf90925229e7a370e2f2 Mon Sep 17 00:00:00 2001 From: Antonella Sgarlatta Date: Wed, 3 Jan 2024 12:11:04 -0300 Subject: [PATCH 1/4] LF-3950: remove tabs --- .../Profile/ProfileLayout/index.jsx | 34 ++----------------- 1 file changed, 3 insertions(+), 31 deletions(-) diff --git a/packages/webapp/src/components/Profile/ProfileLayout/index.jsx b/packages/webapp/src/components/Profile/ProfileLayout/index.jsx index 0db58d6dbc..05bf2ef9e6 100644 --- 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 ( -
-
- - {children} -
+ +
{children}
{buttonGroup}
); From d5c820b2164815d82ca4ca47cf16e13c2669ca8b Mon Sep 17 00:00:00 2001 From: Antonella Sgarlatta Date: Wed, 3 Jan 2024 13:34:05 -0300 Subject: [PATCH 2/4] LF-3948: update subitem active styling --- packages/webapp/src/assets/colors.scss | 3 +++ .../Navigation/SideMenu/styles.module.scss | 13 ++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/webapp/src/assets/colors.scss b/packages/webapp/src/assets/colors.scss index e1bc9fcf3f..342f26b2e3 100644 --- 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/Navigation/SideMenu/styles.module.scss b/packages/webapp/src/components/Navigation/SideMenu/styles.module.scss index f8f352331c..1e8d895fe7 100644 --- 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 { From 876c62ad68f9f4fa306dd560929c3abdead217d5 Mon Sep 17 00:00:00 2001 From: Antonella Sgarlatta Date: Thu, 4 Jan 2024 10:53:50 -0300 Subject: [PATCH 3/4] LF-3952 make map full width and center buttons --- packages/webapp/src/App.jsx | 12 ++++++--- .../Map/DrawingManager/styles.module.scss | 5 ++-- .../components/Map/Header/styles.module.scss | 2 +- packages/webapp/src/containers/Map/index.jsx | 10 +++++-- .../src/containers/Map/styles.module.scss | 12 +++------ packages/webapp/src/routes/index.jsx | 26 ++++++++++++++++--- packages/webapp/src/styles.module.scss | 4 +++ 7 files changed, 49 insertions(+), 22 deletions(-) diff --git a/packages/webapp/src/App.jsx b/packages/webapp/src/App.jsx index af4a681451..0a0916042b 100644 --- a/packages/webapp/src/App.jsx +++ b/packages/webapp/src/App.jsx @@ -14,10 +14,12 @@ */ 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'; @@ -25,6 +27,8 @@ 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 (
@@ -34,7 +38,7 @@ function App() { isCompactSideMenu={isCompactSideMenu} setIsCompactSideMenu={setIsCompactSideMenu} > -
+
} > - +
diff --git a/packages/webapp/src/components/Map/DrawingManager/styles.module.scss b/packages/webapp/src/components/Map/DrawingManager/styles.module.scss index e3df4b9f1e..a1d228dd8c 100644 --- 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 index 62cb8b504d..31eae7e32d 100644 --- 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/containers/Map/index.jsx b/packages/webapp/src/containers/Map/index.jsx index 87eb4da74b..01f41fbb82 100644 --- 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 }) { />
{drawingState.type && ( -
+
import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'), ); -const Routes = () => { +const Routes = ({ isCompactSideMenu }) => { useScrollToTop(); useReduxSnackbar(); const userFarm = useSelector( @@ -509,7 +509,13 @@ const Routes = () => { /> - + ( + + )} + /> { - + ( + + )} + /> { exact component={ManagementDetails} /> - + ( + + )} + /> diff --git a/packages/webapp/src/styles.module.scss b/packages/webapp/src/styles.module.scss index 11b6b15799..e64639411a 100644 --- 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)); From 3f30dad7b98ec92b77e1ee6142f3b64037c1250a Mon Sep 17 00:00:00 2001 From: Antonella Sgarlatta Date: Thu, 4 Jan 2024 12:16:31 -0300 Subject: [PATCH 4/4] fix routes error --- packages/webapp/src/routes/index.jsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/webapp/src/routes/index.jsx b/packages/webapp/src/routes/index.jsx index e67ec29895..37dca60d55 100644 --- a/packages/webapp/src/routes/index.jsx +++ b/packages/webapp/src/routes/index.jsx @@ -512,9 +512,7 @@ const Routes = ({ isCompactSideMenu }) => { ( - - )} + component={(props) => } /> { ( - - )} + component={(props) => } /> { ( - - )} + component={(props) => } />