From f549ec9d834fcf737fca0e279f5f8b23fd6c6fc5 Mon Sep 17 00:00:00 2001 From: Ross Chapman Date: Mon, 30 Sep 2024 10:10:11 -0700 Subject: [PATCH] [OUR415-281] Refactors mobile menu with new design (#214) --- .../SearchResults/SearchResults.module.scss | 6 +- .../search/SearchResults/SearchResults.tsx | 2 +- .../MobileMapToggleButtons.module.scss | 2 +- .../search/Sidebar/Sidebar.module.scss | 1 - .../ClientHandouts.module.scss | 47 ---- app/components/ui/Modal/Modal.module.scss | 44 ---- .../Navigation/MobileNavigation.module.scss | 78 +++++-- .../ui/Navigation/MobileNavigation.test.tsx | 12 +- .../ui/Navigation/MobileNavigation.tsx | 201 +++++++++++------- .../ui/Navigation/Navigation.module.scss | 89 +++++--- app/components/ui/Navigation/Navigation.tsx | 147 ++++--------- .../ui/QrCodeModal/QrCodeModal.module.scss | 29 --- app/components/ui/SiteSearch.module.scss | 24 --- app/components/ui/SiteSearch.tsx | 52 ----- app/components/ui/SiteSearchInput.module.scss | 5 +- app/components/ui/SiteSearchInput.tsx | 6 +- .../ui/inline/Button/Button.module.scss | 5 + app/components/ui/inline/Button/Button.tsx | 11 + app/styles/st-base/_forms.scss | 12 -- app/styles/utils/_layoututils.scss | 4 +- package.json | 1 - 21 files changed, 311 insertions(+), 467 deletions(-) delete mode 100644 app/components/ui/ClientHandoutsModal/ClientHandouts.module.scss delete mode 100644 app/components/ui/Modal/Modal.module.scss delete mode 100644 app/components/ui/QrCodeModal/QrCodeModal.module.scss delete mode 100644 app/components/ui/SiteSearch.module.scss delete mode 100644 app/components/ui/SiteSearch.tsx diff --git a/app/components/search/SearchResults/SearchResults.module.scss b/app/components/search/SearchResults/SearchResults.module.scss index 78c15050e..f1c077208 100644 --- a/app/components/search/SearchResults/SearchResults.module.scss +++ b/app/components/search/SearchResults/SearchResults.module.scss @@ -30,8 +30,10 @@ z-index: 2; background: #fff; transition: top 200ms ease-in-out; - &.mobileMapIsCollapsed { - top: calc(-50vh + 20px); + + // Sets height from top of the viewport on mobile + &.resultsPositionWhenMapCollapsed { + top: calc(-50vh + 10px); z-index: 1; } } diff --git a/app/components/search/SearchResults/SearchResults.tsx b/app/components/search/SearchResults/SearchResults.tsx index 300ed0418..c1e01c9f8 100644 --- a/app/components/search/SearchResults/SearchResults.tsx +++ b/app/components/search/SearchResults/SearchResults.tsx @@ -68,7 +68,7 @@ const SearchResults = ({

Search results

diff --git a/app/components/search/Sidebar/MobileMapToggleButtons.module.scss b/app/components/search/Sidebar/MobileMapToggleButtons.module.scss index e68d6c389..dc870b36a 100644 --- a/app/components/search/Sidebar/MobileMapToggleButtons.module.scss +++ b/app/components/search/Sidebar/MobileMapToggleButtons.module.scss @@ -5,7 +5,7 @@ border-radius: $rounded-lg; border: 2px solid $secondary-button-outline; - @media screen and (min-width: $min-tablet-p) { + @media screen and (min-width: $break-tablet-s) { display: none; } diff --git a/app/components/search/Sidebar/Sidebar.module.scss b/app/components/search/Sidebar/Sidebar.module.scss index 6d138b20c..e03c60a17 100644 --- a/app/components/search/Sidebar/Sidebar.module.scss +++ b/app/components/search/Sidebar/Sidebar.module.scss @@ -35,7 +35,6 @@ height: auto; width: 100%; padding: 0; - z-index: $z-index-modal; align-self: flex-start; border-right: 0; background-color: #fff; diff --git a/app/components/ui/ClientHandoutsModal/ClientHandouts.module.scss b/app/components/ui/ClientHandoutsModal/ClientHandouts.module.scss deleted file mode 100644 index 2de6248c3..000000000 --- a/app/components/ui/ClientHandoutsModal/ClientHandouts.module.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import "~styles/utils/_helpers.scss"; - -.clientHandoutModal { - width: 500px; -} - -.title { - font-size: 26px; - font-weight: 700; - line-height: 1; - color: #000; -} - -.modalContent { - display: grid; - gap: 32px; -} - -.handoutLink { - display: flex; - align-items: center; - gap: 10px; - font-size: 20px; - font-weight: 400; - line-height: 1.33; - padding: 10px 16px; - width: 400px; - border: 1px solid #e0e0e0; - border-radius: 3px; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); - - &:hover { - background-color: $color-brand; - border-color: transparent; - box-shadow: none; - color: #fff; - } - - @media screen and (max-width: $break-tablet-s) { - width: 100%; - } -} - -.buttonBar { - display: flex; - justify-content: end; -} diff --git a/app/components/ui/Modal/Modal.module.scss b/app/components/ui/Modal/Modal.module.scss deleted file mode 100644 index f6a328074..000000000 --- a/app/components/ui/Modal/Modal.module.scss +++ /dev/null @@ -1,44 +0,0 @@ -@import "~styles/utils/_helpers.scss"; - -.modalOverlay { - position: fixed; - z-index: $z-index-modal; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: grid; - justify-content: center; - align-content: center; - overflow: auto; - background: rgba(14, 14, 14, 0.45); -} - -.modal { - position: relative; - max-width: 100vw; - max-height: 100vh; - overflow: auto; - padding: 50px; - background-color: #fff; - box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.2); - border-radius: 16px; - @media screen and (max-width: $break-tablet-s) { - padding: 30px; - // Prevent ugly/confusing rounding of corners when - // modal takes up entirety of mobile screen - border-radius: 0; - } -} - -.closeModalIcon { - position: absolute; - right: 30px; - top: 30px; - z-index: 1; - cursor: pointer; - @media screen and (max-width: $break-tablet-s) { - top: 10px; - right: 10px; - } -} diff --git a/app/components/ui/Navigation/MobileNavigation.module.scss b/app/components/ui/Navigation/MobileNavigation.module.scss index 5ce1c6aee..8f241e857 100644 --- a/app/components/ui/Navigation/MobileNavigation.module.scss +++ b/app/components/ui/Navigation/MobileNavigation.module.scss @@ -1,10 +1,18 @@ @import "../../../styles/utils/_helpers.scss"; @import "../../../styles/utils/_colors.scss"; -.sidebar { - @media screen and (min-width: $break-tablet-s) { - display: none; - } +.mobileNavigationContainer { + position: absolute; + border-top: 1px solid $gray-300; + border-bottom: 1px solid $gray-300; + right: $spacing-6; + top: $header-height; + background: $white; + width: 400px; +} + +.menuActivator { + display: none; } .mobileNavigationMenuContainer { @@ -57,6 +65,26 @@ } } +.mobileNavigationMenuBack { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: $spacing-3 $spacing-4; + font-size: 16px; + border-bottom: 1px solid #d1d5db; + background: $color-grey1; + + &:focus { + border-radius: 0; + margin: 3px; + } + + .chevron { + font-size: 14px; + } +} + // Should not be the same class for both single level and dropdown item .mobileNavigationMenuLink { // flex ensures each menu link fills width of widest item @@ -83,18 +111,20 @@ overflow: hidden; top: 0; border-radius: 0; - transition: transform 0.5s ease; width: 100%; - transform: translateX(100%); background: $white; + visibility: hidden; } -.mobileNavigationMenuListOpen { - transform: translateX(0); +.mobileNavigationMenuHeader:has(+ .mobileNavigationMenuListOpen), +.mobileNavigationMenuListOpen + { + visibility: hidden; + display: none; +} - // Fills out entire sidebar +.mobileNavigationMenuListOpen { + visibility: visible; width: 100%; - height: 100%; } .mobileTopLevelNavigationMenuItem { @@ -105,8 +135,28 @@ .mobileNavigationMenuTranslate { padding: $general-spacing-md; - position: absolute; - bottom: 0px; - // Keeps on top of active submenu - z-index: $z-index-top; +} + +.activatePushPanelButton { + font-size: 18px !important; + font-family: Montserrat; + font-weight: 500; +} + +// Less than desktop +@include r_max($break-desktop-s) { + .menuActivator { + display: flex; + align-items: center; + } + .mobileNavigationContainer { + top: $header-mobile-height; + } +} + +// Less than tablet +@include r_max($break-tablet-s) { + .mobileNavigationContainer { + top: $header-mobile-height; + } } diff --git a/app/components/ui/Navigation/MobileNavigation.test.tsx b/app/components/ui/Navigation/MobileNavigation.test.tsx index 1e58708b4..05b6ba32e 100644 --- a/app/components/ui/Navigation/MobileNavigation.test.tsx +++ b/app/components/ui/Navigation/MobileNavigation.test.tsx @@ -6,16 +6,6 @@ import { MobileNavigation } from "components/ui/Navigation/MobileNavigation"; describe("", () => { it("checks a valid user should render the appropriate fields in the right place", () => { - render( - { - return; - }} - activeSubMenu="" - menuData={[]} - />, - { wrapper: BrowserRouter } - ); + render(, { wrapper: BrowserRouter }); }); }); diff --git a/app/components/ui/Navigation/MobileNavigation.tsx b/app/components/ui/Navigation/MobileNavigation.tsx index c94e3b845..d88fdac27 100644 --- a/app/components/ui/Navigation/MobileNavigation.tsx +++ b/app/components/ui/Navigation/MobileNavigation.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import mobileNavigationStyles from "components/ui/Navigation/MobileNavigation.module.scss"; import { Link } from "react-router-dom"; import { @@ -7,106 +7,147 @@ import { Link as LinkModel, } from "models/Strapi"; import { GoogleTranslate } from "../GoogleTranslate"; +import { Button } from "components/ui/inline/Button/Button"; interface MobileNavigationProps { - isOpen: boolean; - activeSubMenu: string; - setSubMenu: (value: string) => void; menuData: ExtractedNavigationMenusFromNavigationResponse; } -export const MobileNavigation = ({ - isOpen = false, - activeSubMenu, - setSubMenu, - menuData, -}: MobileNavigationProps) => { +export const MobileNavigation = ({ menuData }: MobileNavigationProps) => { function menuItemHasLinks( menuItem: ExtractedNavigationMenusFromNavigationResponse[number] ): menuItem is NavigationMenu { return "link" in menuItem; } + const [activeMobileSubMenu, setActiveMobileSubMenu] = useState(""); const closeMobileMenu = () => { - setSubMenu(""); + setActiveMobileSubMenu(""); + }; + const [mobileNavigationIsOpen, setMobileNavigationIsOpen] = useState(false); + const toggleMobileNav = () => setMobileNavigationIsOpen((prev) => !prev); + const mobileSubMenuIsActive = !!activeMobileSubMenu; + const inSubNavigation = mobileNavigationIsOpen && mobileSubMenuIsActive; + const mobileNavIconDisplay = mobileNavigationIsOpen ? "xmark" : "bars"; + const mobileNavTextDisplay = mobileNavigationIsOpen ? "Close" : "Menu"; + + const handleOpenMobileNavigation = () => { + if (inSubNavigation) { + setActiveMobileSubMenu(""); + } else if (mobileSubMenuIsActive) { + setMobileNavigationIsOpen(true); + } else { + toggleMobileNav(); + } }; return ( <> -
- {menuData?.map((menuDataItem) => { - if (menuItemHasLinks(menuDataItem)) { - const uid = menuDataItem.title; - return ( -
- -
    + +
+ {mobileNavigationIsOpen && ( +
+ {menuData?.map((menuDataItem) => { + if (menuItemHasLinks(menuDataItem)) { + const uid = menuDataItem.title; + return ( +
- {menuDataItem.link.map((linkItem: LinkModel) => { - const uuid = crypto.randomUUID(); - return ( -
  • - setActiveMobileSubMenu(uid)} + className={ + mobileNavigationStyles.mobileNavigationMenuHeader + } + > + {menuDataItem.title} + + +
      + + {menuDataItem.link.map((linkItem: LinkModel) => { + const uuid = crypto.randomUUID(); + return ( +
    • - {linkItem.text} - -
      • - ); - })} -
    -
    • - ); - } + + {linkItem.text} + + + ); + })} + +
    + ); + } - return ( -
  • - - {menuDataItem.text} - -
    • - ); - })} -
    - {isOpen && ( -
    - + + {menuDataItem.text} + + + ); + })} + +
    + +
    )} diff --git a/app/components/ui/Navigation/Navigation.module.scss b/app/components/ui/Navigation/Navigation.module.scss index 3e52ccad7..ef7215ee1 100644 --- a/app/components/ui/Navigation/Navigation.module.scss +++ b/app/components/ui/Navigation/Navigation.module.scss @@ -18,26 +18,31 @@ display: flex; flex-wrap: nowrap; align-items: center; - height: $header-height; - justify-content: space-between; margin: 0 auto; - padding: 0 $general-spacing-lg; - @include r_max($break-tablet-s) { - height: $header-mobile-height; + padding: $spacing-6; + height: $header-height; + gap: 32px; + + > :last-child { + margin-left: auto; } } .navLeft { display: flex; - align-items: center; + flex-direction: row; + gap: 32px; + + @media screen and (max-width: $break-tablet-s) { + gap: 5px; + flex-direction: column; + width: 345px; + } } .navRight { display: flex; align-items: center; - @include r_max($break-tablet-s) { - display: none; - } } .navLogo img { @@ -48,23 +53,6 @@ } } -.activatePushPanelButton { - font-size: 18px !important; - font-family: Montserrat; - font-weight: 500; - - @include r_min($break-tablet-s) { - display: none !important; // !important is needed to override .form-row - } -} - -// Until new nav is introduced, screen reader is reading hamburger links on desktop. This fixes that. -.hamburgerContainer { - @media screen and (min-width: $break-tablet-s) { - display: none; - } -} - .navigationMenuTranslate { width: 154px; @@ -79,12 +67,53 @@ flex-direction: row; align-items: center; - // Adds separator - border-right: 1px solid black; - padding-right: $spacing-4; - margin-right: $spacing-6; + > :nth-last-child(2) { + // Adds separator + border-right: 1px solid black; + padding-right: $spacing-4; + margin-right: $spacing-4; + } + // margin-right: $spacing-6; > * { font-weight: 600; } } + +// Less than desktop +@include r_max($break-desktop-s) { + .desktopNavigationContainer { + display: none; + } + .primaryRow { + height: $header-mobile-height; + flex-wrap: wrap; + padding: $spacing-4_5; + gap: $spacing-2_5; + + :nth-child(3) { + margin-left: auto; + } + } +} +// Less than tablet +@include r_max($break-tablet-s) { + .primaryRow { + height: $header-mobile-height; + flex-wrap: wrap; + padding: $spacing-4_5; + gap: $spacing-2_5; + + :nth-child(1) { + order: 1; + } + :nth-child(2) { + order: 3; + width: 100%; + } + :nth-child(3) { + margin-left: auto; + order: 2; + } + } +} diff --git a/app/components/ui/Navigation/Navigation.tsx b/app/components/ui/Navigation/Navigation.tsx index 74125cedc..5eeade230 100644 --- a/app/components/ui/Navigation/Navigation.tsx +++ b/app/components/ui/Navigation/Navigation.tsx @@ -1,6 +1,4 @@ import React, { useState } from "react"; -import mobileNavigationStyles from "components/ui/Navigation/MobileNavigation.module.scss"; -import { push as SidebarPushPanel } from "react-burger-menu"; // TODO: use slide instead of push and move close button into sidebar import { Link } from "react-router-dom"; import styles from "components/ui/Navigation/Navigation.module.scss"; import { GoogleTranslate } from "components/ui/GoogleTranslate"; @@ -17,49 +15,26 @@ import { useNavigationData } from "hooks/StrapiAPI"; import { Router } from "../../../Router"; import NavigationFocusReset from "./NavigationFocusReset"; import SkipButton from "./SkipButton"; -import { OUTER_CONTAINER_ID } from "../../../App"; import { SiteSearchInput } from "components/ui/SiteSearchInput"; import { InstantSearch } from "react-instantsearch-core"; import { liteClient } from "algoliasearch/lite"; import config from "./../../../config"; import { history as historyRouter } from "instantsearch.js/es/lib/routers"; +import { Loader } from "components/ui/Loader"; const searchClient = liteClient( config.ALGOLIA_APPLICATION_ID, config.ALGOLIA_READ_ONLY_API_KEY ); -const BURGER_STYLES = { - bmBurgerButton: { - display: "none", - }, - bmCrossButton: { - display: "none", - }, - bmMenu: { - padding: "0", - borderLeft: "1px solid #f4f4f4", - background: "white", - }, - bmOverlay: { - display: "none", - }, -}; - -const PAGE_WRAP_ID = "page-wrap"; const INDEX_NAME = `${config.ALGOLIA_INDEX_PREFIX}_services_search`; export const Navigation = () => { const { data: navigationResponse } = useNavigationData(); - const [mobileNavigationIsOpen, setMobileNavigationIsOpen] = useState(false); - const [activeMobileSubMenu, setActiveMobileSubMenu] = useState(""); - const toggleMobileNav = () => setMobileNavigationIsOpen((prev) => !prev); const logoData = extractLogoFromNavigationResponse(navigationResponse); const menuData = extractNavigationMenusFromNavigationResponse(navigationResponse); - const mobileSubMenuIsActive = !!activeMobileSubMenu; - const inSubNavigation = mobileNavigationIsOpen && mobileSubMenuIsActive; function menuItemHasLinks( menuItem: ExtractedNavigationMenusFromNavigationResponse[number] @@ -67,26 +42,9 @@ export const Navigation = () => { return "link" in menuItem; } - const mobileNavIconDisplay = () => { - if (inSubNavigation) { - return "fa-arrow-left"; - } - if (mobileNavigationIsOpen) { - return "fa-xmark"; - } - - return ` fa-bars`; - }; - - const handleOpenMobileNavigation = () => { - if (inSubNavigation) { - setActiveMobileSubMenu(""); - } else if (mobileSubMenuIsActive) { - setMobileNavigationIsOpen(true); - } else { - toggleMobileNav(); - } - }; + if (!menuData) { + return ; + } return ( { > - - {menuData && ( - - )} - -
    +
    diff --git a/app/components/ui/QrCodeModal/QrCodeModal.module.scss b/app/components/ui/QrCodeModal/QrCodeModal.module.scss deleted file mode 100644 index d4dfbb252..000000000 --- a/app/components/ui/QrCodeModal/QrCodeModal.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import "~styles/utils/_helpers.scss"; - -.qrCodeModal { - width: 500px; - padding: 50px 32px; -} - -.modalContent { - display: grid; - justify-items: center; - gap: 70px; -} - -.description { - text-align: center; - display: grid; - gap: 20px; -} - -.title { - color: #000; - font-size: 26px; - font-weight: 700; -} - -.body { - color: #000; - font-size: 20px; -} diff --git a/app/components/ui/SiteSearch.module.scss b/app/components/ui/SiteSearch.module.scss deleted file mode 100644 index b3adc5204..000000000 --- a/app/components/ui/SiteSearch.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../styles/utils/_helpers.scss"; - -.navSearch { - display: inline-block; - - .searchField { - $font-size: calc-em(15px); - background-repeat: no-repeat; - background-image: url(../../assets/img/ic-search.png); - background-size: 18px 18px; - background-position: calc-em(15px) center; - font-size: $font-size; - padding-left: calc-em(45px); - width: calc-em(400px); - height: calc-em(40px); - border: 0; - background-color: $color-grey1; - - &::placeholder { - font-size: $font-size; - font-style: normal; - } - } -} diff --git a/app/components/ui/SiteSearch.tsx b/app/components/ui/SiteSearch.tsx deleted file mode 100644 index 39bb9de70..000000000 --- a/app/components/ui/SiteSearch.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { FormEvent, useState } from "react"; -import { useHistory } from "react-router-dom"; -import cn from "classnames"; -import qs from "qs"; -import styles from "./SiteSearch.module.scss"; - -// Doesn't seem like this is being used anywhere - -// TODO: Previously used as a global search in Our415. Can be repurposed for Our415 as a Top Level Category -// search per designs or similar. See: -// https://www.figma.com/proto/iDBeNK7SnZXF8wc3pbPTCY/Our415-Site?node-id=2629-11357&t=q9JDI7LISYb2Ok6T-1 -export const SiteSearch = ({ extraClasses }: { extraClasses?: string }) => { - const [query, setQuery] = useState(""); - const history = useHistory(); - - const submitSearch = (e: FormEvent) => { - e.preventDefault(); - const searchState = qs.parse(window.location.search.slice(1)); - - if (query) { - searchState.query = query; - } else { - delete searchState.query; - } - - history.push(`/search?${qs.stringify(searchState)}`); - return false; - }; - - return ( -
    - setQuery(e.target.value)} - value={query} - type="text" - className={styles.searchField} - placeholder="Search for a service or organization" - name="srch-term" - id="srch-term" - /> -
    - ); -}; diff --git a/app/components/ui/SiteSearchInput.module.scss b/app/components/ui/SiteSearchInput.module.scss index 1b3d091c6..aff71a157 100644 --- a/app/components/ui/SiteSearchInput.module.scss +++ b/app/components/ui/SiteSearchInput.module.scss @@ -7,6 +7,8 @@ $focus-height: calc(#{$input-height} - (#{$border-width} * 2)); // TODO: need design consult for being in top bar .navSearch { display: flex; + // Fixes alignment on focus since box expands with outline set. Is there another way to handle + // outline that won't affect height so dramatically? align-items: center; .searchField { @@ -15,7 +17,7 @@ $focus-height: calc(#{$input-height} - (#{$border-width} * 2)); border-right: none; border-radius: $rounded-full 0 0 $rounded-full; flex: 1; - width: 500px; + width: 400px; max-width: 100%; height: $input-height; @@ -37,6 +39,7 @@ $focus-height: calc(#{$input-height} - (#{$border-width} * 2)); border-radius: 0 $rounded-full $rounded-full 0; cursor: pointer; height: $input-height; + width: 48px; } .searchField, diff --git a/app/components/ui/SiteSearchInput.tsx b/app/components/ui/SiteSearchInput.tsx index ef7611bec..60a4b13b6 100644 --- a/app/components/ui/SiteSearchInput.tsx +++ b/app/components/ui/SiteSearchInput.tsx @@ -40,11 +40,7 @@ export const SiteSearchInput = () => { }, [query]); return ( -
    + setQuery(e.target.value)} value={inputValue} diff --git a/app/components/ui/inline/Button/Button.module.scss b/app/components/ui/inline/Button/Button.module.scss index 8ba2a00e9..704565393 100644 --- a/app/components/ui/inline/Button/Button.module.scss +++ b/app/components/ui/inline/Button/Button.module.scss @@ -137,6 +137,11 @@ margin-left: 8px; } } + + &--transparent { + background: none; + color: $black; + } } .icon-before { diff --git a/app/components/ui/inline/Button/Button.tsx b/app/components/ui/inline/Button/Button.tsx index 6ee86720d..c6546668a 100644 --- a/app/components/ui/inline/Button/Button.tsx +++ b/app/components/ui/inline/Button/Button.tsx @@ -7,6 +7,17 @@ type StyleType = "transparent" | "text" | "default"; type SizeType = "xs" | "sm" | "base" | "lg" | "xl"; type VariantType = "primary" | "secondary" | "linkBlue" | "linkWhite"; +/** + * NOTE: 😅 This component is an impressively complicated piece of code that + * supports a combinatorial number of possibilities. It's a challenge to reason + * about what particular combination of parameters to use to achieve your + * desired presentation. It also appears incomplete as some style types are not + * implemented yet. There's got to be a better way to express button variations + * than a single component with over a dozen parameter levers. Let's continue + * to use this component with caution until we emerge from the MVP stage of + * this project and better understand our north star for subsequent rounds of + * development. + */ export const Button = ({ children, onClick, diff --git a/app/styles/st-base/_forms.scss b/app/styles/st-base/_forms.scss index 9278b00af..b295e31c9 100644 --- a/app/styles/st-base/_forms.scss +++ b/app/styles/st-base/_forms.scss @@ -1,15 +1,3 @@ -//////////////////////////////////////////////////////////////////////////////////////// -// FORM ELEMENTS - -.form-row { - display: flex; - flex-wrap: nowrap; - align-items: center; - > button { - flex-grow: 0; - } -} - input, textarea { @extend %font-size-default; diff --git a/app/styles/utils/_layoututils.scss b/app/styles/utils/_layoututils.scss index c4fd2a904..e91d5fcc8 100644 --- a/app/styles/utils/_layoututils.scss +++ b/app/styles/utils/_layoututils.scss @@ -5,7 +5,6 @@ $font-size: 16px; $break-tablet-s: 767px; -$min-tablet-p: 768px; $break-tablet-p: 960px; $break-tablet-l: 1184px; $min-desktop: 1184px; @@ -20,13 +19,12 @@ $padding-xxlarge: $general-spacing-xl; $max-container-width: 1280px; $header-height: 100px; -$header-mobile-height: 50px; +$header-mobile-height: 110px; // Z-Index values $z-index-edit-address-modal: 1; $z-index-site-nav: 3; $z-index-filters-menu: 4; -$z-index-modal: 5; $z-index-top: 9; body { diff --git a/package.json b/package.json index d11c5b8a7..db77a2b29 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "moment": "^2.24.0", "node-polyfill-webpack-plugin": "^4.0.0", "prop-types": "^15.5.10", - "qrcode.react": "^3.0.2", "qs": "^6.5.1", "react": "^18.3.1", "react-burger-menu": "^3.0.9",