From 455c81eaafdbc889c7ed0caa10534a387518e81a Mon Sep 17 00:00:00 2001
From: Janne Koivistoinen <janne@sharetribe.com>
Date: Mon, 17 Jul 2017 17:51:20 +0300
Subject: [PATCH] topnav ixd and hero search bar fixes

---
 .../LocationAutocompleteInput.css             |  3 +-
 src/components/Menu/Menu.js                   |  2 +-
 src/components/MenuContent/MenuContent.css    |  6 ++--
 .../TopbarDesktop/TopbarDesktop.css           | 30 +++++++++++++++++--
 .../LocationSearchForm/LocationSearchForm.css | 18 ++++++++++-
 5 files changed, 51 insertions(+), 8 deletions(-)

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 <div className="foo" onClick={() => {}} 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 {