From adc30b69b3a8195abc575189ea9d9377d86d55a3 Mon Sep 17 00:00:00 2001
From: Piotr Grundas <piotrgrundas@gmail.com>
Date: Fri, 4 Jan 2019 13:35:20 +0100
Subject: [PATCH] Storefron adjustments

---
 src/components/App/scss/variables.scss     |  2 +-
 src/components/MainMenu/MainMenu.tsx       |  6 +++---
 src/components/MainMenu/scss/index.scss    |  6 ------
 src/components/ProductsFeatured/index.tsx  |  4 ++--
 src/components/SelectField/index.tsx       |  4 ++--
 src/components/SelectField/scss/index.scss | 21 +++++++++++++++++----
 src/views/Home/queries.ts                  |  2 +-
 src/views/Home/scss/index.scss             | 12 ++++++++----
 src/views/Search/index.tsx                 |  6 +++++-
 9 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/components/App/scss/variables.scss b/src/components/App/scss/variables.scss
index 3ffd8a410f..c3f2dfe397 100644
--- a/src/components/App/scss/variables.scss
+++ b/src/components/App/scss/variables.scss
@@ -13,7 +13,7 @@ $turquoise-light: #f1f5f5;
 $turquoise: #51e9d2;
 $white: #fff;
 
-$blue-overlay: rgba($blue, 0.8);
+$blue-overlay: rgba($blue, 0.15);
 
 // typography
 $base-font-family: "montserrat";
diff --git a/src/components/MainMenu/MainMenu.tsx b/src/components/MainMenu/MainMenu.tsx
index b0eb602064..35382d5386 100644
--- a/src/components/MainMenu/MainMenu.tsx
+++ b/src/components/MainMenu/MainMenu.tsx
@@ -1,3 +1,6 @@
+import { mediumScreen, smallScreen } from "../App/scss/variables.scss";
+import "./scss/index.scss";
+
 import * as React from "react";
 import Media from "react-media";
 import { Link } from "react-router-dom";
@@ -14,9 +17,6 @@ import { UserContext } from "../User/context";
 import NavDropdown from "./NavDropdown";
 import { TypedMainMenuQuery } from "./queries";
 
-import { mediumScreen, smallScreen } from "../App/scss/variables.scss";
-import "./scss/index.scss";
-
 const cartIcon = require("../../images/cart.svg");
 const hamburgerHoverIcon = require("../../images/hamburger-hover.svg");
 const hamburgerIcon = require("../../images/hamburger.svg");
diff --git a/src/components/MainMenu/scss/index.scss b/src/components/MainMenu/scss/index.scss
index 2c2c58a7eb..c0492752e8 100644
--- a/src/components/MainMenu/scss/index.scss
+++ b/src/components/MainMenu/scss/index.scss
@@ -135,12 +135,6 @@
       line-height: 1rem;
       transition: 0.3s;
     }
-
-    &:hover {
-      span {
-        background-color: $turquoise;
-      }
-    }
   }
 
   &__user {
diff --git a/src/components/ProductsFeatured/index.tsx b/src/components/ProductsFeatured/index.tsx
index d2d0c81a9e..d143759571 100644
--- a/src/components/ProductsFeatured/index.tsx
+++ b/src/components/ProductsFeatured/index.tsx
@@ -8,7 +8,7 @@ import { TypedFeaturedProductsQuery } from "./queries";
 import "./scss/index.scss";
 
 interface ProductsFeaturedProps {
-  title?: string;
+  title?: string | false;
 }
 
 const ProductsFeatured: React.SFC<ProductsFeaturedProps> = ({ title }) => {
@@ -24,7 +24,7 @@ const ProductsFeatured: React.SFC<ProductsFeaturedProps> = ({ title }) => {
           return (
             <div className="products-featured">
               <div className="container">
-                <h3>{title}</h3>
+                {title !== false && <h3>{title}</h3>}
                 <Carousel>
                   {products.map(({ node: product }) => (
                     <Link
diff --git a/src/components/SelectField/index.tsx b/src/components/SelectField/index.tsx
index fbc122c9a4..cd2d158960 100644
--- a/src/components/SelectField/index.tsx
+++ b/src/components/SelectField/index.tsx
@@ -1,10 +1,10 @@
+import "./scss/index.scss";
+
 import * as React from "react";
 import Select from "react-select";
 // tslint:disable
 import { Props as SelectProps } from "react-select/lib/Select";
 
-import "./scss/index.scss";
-
 export interface SelectValue {
   label: string;
   value: string;
diff --git a/src/components/SelectField/scss/index.scss b/src/components/SelectField/scss/index.scss
index fcd4dee2fc..22c16b20d0 100644
--- a/src/components/SelectField/scss/index.scss
+++ b/src/components/SelectField/scss/index.scss
@@ -48,19 +48,32 @@
 
     &__menu-list {
       box-shadow: $select-menu-shadow;
+      padding-bottom: 0;
+      padding-top: 0;
 
       div {
-        padding: $spacer $spacer / 2;
-        margin: 0 $spacer;
+        padding: $spacer;
         width: auto;
+        position: relative;
 
-        &:not(:last-child) {
-          border-bottom: 1px solid $gray;
+        &:not(:last-child)::after {
+          background-color: $gray;
+          bottom: 0;
+          content: "";
+          height: 1px;
+          left: $spacer / 2;
+          position: absolute;
+          width: calc(100% - #{$spacer});
         }
       }
     }
 
     &__option {
+      &:hover {
+        cursor: pointer;
+        background-color: rgba(33, 18, 94, 0.1);
+      }
+
       &--is-focused {
         background-color: $white;
       }
diff --git a/src/views/Home/queries.ts b/src/views/Home/queries.ts
index f3ff250ec8..355a814948 100644
--- a/src/views/Home/queries.ts
+++ b/src/views/Home/queries.ts
@@ -16,7 +16,7 @@ export const homePageQuery = gql`
         name
       }
     }
-    categories(level: 0, first: 4) {
+    categories(level: 0, first: 3) {
       edges {
         node {
           id
diff --git a/src/views/Home/scss/index.scss b/src/views/Home/scss/index.scss
index 89eaf210ed..e9b900b827 100644
--- a/src/views/Home/scss/index.scss
+++ b/src/views/Home/scss/index.scss
@@ -9,6 +9,10 @@
     text-align: center;
     padding: 12rem 0;
 
+    &-text {
+      overflow: hidden;
+    }
+
     @media (max-width: $small-screen) {
       align-items: center;
       display: flex;
@@ -74,12 +78,12 @@
       grid-template-columns: 1fr;
       grid-gap: 2rem;
 
-      @media (min-width: $medium-screen) {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
-
       @media (min-width: $small-screen) {
         grid-template-columns: 1fr 1fr;
+
+        > div:last-child {
+          grid-column: 3 / 1;
+        }
       }
 
       a {
diff --git a/src/views/Search/index.tsx b/src/views/Search/index.tsx
index 6b772c1039..a73e180020 100644
--- a/src/views/Search/index.tsx
+++ b/src/views/Search/index.tsx
@@ -72,7 +72,11 @@ export const SearchView: React.SFC<SearchViewProps> = ({
   return (
     <NetworkStatus>
       {isOnline => (
-        <TypedSearchProductsQuery variables={variables} errorPolicy="all">
+        <TypedSearchProductsQuery
+          loaderFull
+          variables={variables}
+          errorPolicy="all"
+        >
           {({ error, data, loading, loadMore }) => {
             const canDisplayFilters = maybe(
               () => !!data.attributes.edges.length