diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
index 2c0bb89d..02e530eb 100644
--- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
+++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
@@ -16,7 +16,7 @@
display: flex;
width: 24px;
align-self: stretch;
- border-bottom: 2px solid var(--marketplaceColor);
+ border-bottom: 4px solid var(--marketplaceColor);
background-color: var(--matterColorLight);
}
@@ -40,6 +40,7 @@
padding-left: 10px;
margin: 0;
line-height: unset;
+ border-bottom-width: 4px;
/* Safari bugfix: without this Safari will print placeholder to a wrong place */
&::-webkit-input-placeholder {
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..47670c82 100644
--- a/src/components/MenuContent/MenuContent.css
+++ b/src/components/MenuContent/MenuContent.css
@@ -1,7 +1,7 @@
@import '../../marketplace.css';
.root {
- visibility: hidden;
+ opacity: 0;
pointer-events: none;
position: absolute;
@@ -10,10 +10,12 @@
background-color: var(--matterColorLight);
border: 1px solid var(--matterColorAnti);
box-shadow: var(--boxShadowPopup);
+ border-radius: 0 0 2px 2px;
+ transition: var(--transitionStyleButton);
}
.isOpen {
- visibility: visible;
+ opacity: 1;
pointer-events: auto;
}
diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css
index 2ca7fafa..12749439 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,12 @@
color: var(--matterColor);
text-align: left;
white-space: nowrap;
+ transition: var(--transitionStyleButton);
+
+ &:hover {
+ color: var(--matterColorDark);
+ text-decoration: none;
+ }
@media (--desktopViewport) {
margin: 0;
@@ -213,6 +238,5 @@
&:focus {
outline: none;
- text-decoration: underline;
}
}
diff --git a/src/containers/LocationSearchForm/LocationSearchForm.css b/src/containers/LocationSearchForm/LocationSearchForm.css
index 9eaa5b61..dd3b71c3 100644
--- a/src/containers/LocationSearchForm/LocationSearchForm.css
+++ b/src/containers/LocationSearchForm/LocationSearchForm.css
@@ -1,15 +1,31 @@
-.root {
+@import '../../marketplace.css';
+.root {
+ border-radius: 2px;
}
.searchInputIcon {
box-sizing: content-box;
padding-left: 24px;
margin-top: 2px;
+ border-bottom-left-radius: 2px;
}
.searchInput {
height: 69px;
+ border-bottom-right-radius: 2px;
+
+ &:hover::placeholder,
+ &:focus::placeholder {
+ color: var(--matterColor);
+ }
+
+ &::placeholder {
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ font-weight: var(--fontWeightRegular);
+ transition: var(--transitionStyleButton);
+ }
}
.searchPredictions {