diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css index 8e9745f4..756394dc 100644 --- a/src/components/HeroSection/HeroSection.css +++ b/src/components/HeroSection/HeroSection.css @@ -52,7 +52,7 @@ .heroSubTitle { color: var(--matterColorLight); - margin-bottom: 47px; + margin-bottom: 63px; margin-top: 0; @media (--desktopViewport) { @@ -81,6 +81,9 @@ .desktopSearchForm { display: none; background-color: var(--matterColorLight); + border-bottom: 4px solid var(--marketplaceColor); + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; @media (--desktopViewport) { display: block; diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index 2c0bb89d..80e8096b 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -40,6 +40,7 @@ padding-left: 10px; margin: 0; line-height: unset; + border-bottom-width: 2px; /* Safari bugfix: without this Safari will print placeholder to a wrong place */ &::-webkit-input-placeholder { @@ -98,20 +99,25 @@ bottom of the container. & li { color: var(--matterColorLight); + transition: var(--transitionStyleButton); margin: 0; /* Remove the double white space */ /* Assign enough vertical padding to make the element at least 44px high */ padding: 9px var(--sidePadding); @media (--desktopViewport) { - padding: 8px var(--sidePaddingDesktop); + color: var(--matterColorLightTransparent); + padding: 10px var(--sidePaddingDesktop); margin: 0; } &:hover, &.highlighted { - text-decoration: underline; cursor: pointer; + border-left: 6px solid var(--matterColorLight); + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + color: var(--matterColorLight); } } } diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 96fc8019..0059e731 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -23,7 +23,7 @@ import { MenuContent, MenuLabel } from '../../components'; import css from './Menu.css'; const KEY_CODE_ESCAPE = 27; -const CONTENT_PLACEMENT_OFFSET = 22; +const CONTENT_PLACEMENT_OFFSET = 0; // This should work, but it doesn't
{}} role="button" /> /* eslint-disable jsx-a11y/no-static-element-interactions */ diff --git a/src/components/MenuContent/MenuContent.css b/src/components/MenuContent/MenuContent.css index bd425afd..e042ba8f 100644 --- a/src/components/MenuContent/MenuContent.css +++ b/src/components/MenuContent/MenuContent.css @@ -1,19 +1,23 @@ @import '../../marketplace.css'; .root { - visibility: hidden; + visibility:hidden; + opacity: 0; pointer-events: none; position: absolute; z-index: var(--zIndexPopup); background-color: var(--matterColorLight); - border: 1px solid var(--matterColorAnti); + border-top: 1px solid var(--matterColorAnti); box-shadow: var(--boxShadowPopup); + border-radius: 0 0 2px 2px; + transition: var(--transitionStyleButton); } .isOpen { - visibility: visible; + visibility:visible; + opacity: 1; pointer-events: auto; } diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index 2ca7fafa..fe44b4ac 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -167,9 +167,14 @@ height: 100%; margin: 0; padding: 0 12px 0 12px; + + &:active { + border-bottom: 0; + } } .avatar { + margin: 16px 0; width: 41px; height: 41px; } @@ -180,21 +185,35 @@ /* Authentication */ .signupLink { + @apply --linkHoverState; flex-shrink: 0; height: 100%; - margin-right: 24px; + padding: 0 12px 0 12px; + + color: var(--matterColor); + + &:hover { + color: var(--matterColorDark); + } } .loginLink { + @apply --linkHoverState; flex-shrink: 0; height: 100%; + padding: 0 12px 0 12px; + + color: var(--matterColor); + + &:hover { + color: var(--matterColorDark); + } } .signup, .login { @apply --marketplaceH4FontStyles; @apply --topbarDesktopLabelStyles; - color: var(--matterColor); } .logoutButton { @@ -206,6 +225,13 @@ color: var(--matterColor); text-align: left; white-space: nowrap; + transition: var(--transitionStyleButton); + + &:hover { + color: var(--matterColorDark); + text-decoration: none; + border-left: 6px solid var(--marketplaceColor); + } @media (--desktopViewport) { margin: 0; @@ -213,6 +239,5 @@ &:focus { outline: none; - text-decoration: underline; } } diff --git a/src/containers/LocationSearchForm/LocationSearchForm.css b/src/containers/LocationSearchForm/LocationSearchForm.css index 9eaa5b61..0b4fb906 100644 --- a/src/containers/LocationSearchForm/LocationSearchForm.css +++ b/src/containers/LocationSearchForm/LocationSearchForm.css @@ -1,5 +1,7 @@ -.root { +@import '../../marketplace.css'; +.root { + border-radius: 2px; } .searchInputIcon { @@ -10,6 +12,18 @@ .searchInput { height: 69px; + + &:hover::placeholder, + &:focus::placeholder { + color: var(--matterColor); + } + + &::placeholder { + text-overflow: ellipsis; + overflow-x: hidden; + font-weight: var(--fontWeightRegular); + transition: var(--transitionStyleButton); + } } .searchPredictions { diff --git a/src/marketplace.css b/src/marketplace.css index 97887094..19f1753f 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -29,6 +29,8 @@ --matterColorBright: #FDFDFD; --matterColorLight: #FFFFFF; + --matterColorLightTransparent: rgba(255,255,255,0.65); + /* Spacing units */ /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */ --spacingUnit: 6px;