topnav ixd and hero search bar fixes

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 {

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 <div className="foo" onClick={() => {}} role="button" />
 /* eslint-disable jsx-a11y/no-static-element-interactions */

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;
 }
 

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;
   }
 }

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 {