Storefron adjustments

saleor · Jan 4, 2019 · 74d4dc4 · 74d4dc4
1 parent ace8c66
commit 74d4dc4
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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,18 @@
       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 {
+          &:nth-child(3) {
+            grid-column: 3 / 1;
+          }
+
+          &:last-child {
+            display: none;
+          }
+        }
       }
 
       a {

diff --git 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