Merge pull request #306 from sharetribe/topnav-ixd

topnav ixd and hero search bar fixes

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;

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

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

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

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 {

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;