initial commit

nix-project/package-lock.json

@@ -1243,6 +1243,29 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
       "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@@ -3319,6 +3342,22 @@
         "@babel/helper-define-polyfill-provider": "^0.3.0"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz",
+      "integrity": "sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -3568,6 +3607,11 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3923,6 +3967,11 @@
         "postcss-selector-parser": "^6.0.8"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-declaration-sorter": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@@ -4030,6 +4079,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -9497,6 +9556,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -9628,6 +9692,11 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-scroll-top": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-scroll-top/-/react-scroll-top-1.0.4.tgz",
+      "integrity": "sha1-A1AJVVUEtLLBv6lLEbZ/H1FWLjU="
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -10201,6 +10270,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10507,6 +10581,23 @@
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
     },
+    "styled-components": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.0.tgz",
+      "integrity": "sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",

nix-project/package.json

@@ -9,12 +9,15 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.5.1",
+    "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
+    "react-scroll-top": "^1.0.4",
     "redux": "^4.1.2",
     "redux-saga": "^1.1.3",
     "redux-thunk": "^2.4.1",
+    "styled-components": "^5.3.0",
     "web-vitals": "^2.1.2"
   },
   "scripts": {

nix-project/public/index.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>React App</title>
+    <script src="https://kit.fontawesome.com/365c1b8218.js" crossorigin="anonymous"></script>
+    <title>STORE</title>
   </head>
   <body>
     <div id="root"></div>

nix-project/src/App.js

@@ -7,6 +7,7 @@ import { CHeader } from "./components/Header/Header";
 import { CMain } from "./components/Main/Main";
 import Footer from "./components/Footer/Footer";
 import createHistory from "history/createBrowserHistory";
+import ScrollButton from "./components/JumpTop/JumpTop";
 
 export const history = createHistory()
 
@@ -17,6 +18,7 @@ function App() {
         <div className="App">
           <CHeader />
           <CMain />
+          <ScrollButton />
           <Footer />
         </div>
       </Provider>

nix-project/src/App.scss

@@ -1,3 +1,14 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
 @mixin btn {
     margin-top: 1rem;
     width: 50%;
@@ -102,11 +113,35 @@
         }
     }
 
-    header {        
-        img {
-            width: 100%;
-            max-width: 100px;
-            height: auto; 
+    .header {        
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        height: 4rem;
+        background-color: black;
+        border-bottom: 1px solid white;
+
+        &_left {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            &-title {
+                text-decoration: none;
+                letter-spacing: .3rem;
+                color: white;
+                margin-right: 2rem;
+                margin-left: 2rem;
+            }
+        }
+
+        &_right {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-right: 2rem;
+            margin-left: 2rem;
         }
     }
 
@@ -116,6 +151,7 @@
 
         aside {
             width: 30%;
+            margin-top: 2px;
         }
     }
 }
@@ -129,30 +165,20 @@ li {
     background-color: black;
 
    .sub-link {
-    display: block;
-    color: white;
-    padding: 15px 20px;
-    text-decoration: none;
-    letter-spacing: .2rem;
-    display: block;
-
+        display: block;
+        color: white;
+        padding: 15px 20px;
+        text-decoration: none;
+        letter-spacing: .2rem;
+        display: block;
 
-    &:hover {
-        background-color: rgb(255, 255, 255);
-        color: black;
-    }
+        &:hover {
+            background-color: rgb(255, 255, 255);
+            color: black;
+        }
    }
 }
 
-.Koshik {
-    text-decoration: none;
-    color: white;
-    border: 1px solid black;
-    background-color: black;
-    border-radius: 50%;
-    padding: .5rem;
-}
-
 .loginButtons {
     display: flex;
     flex-direction: column;
@@ -175,41 +201,47 @@ li {
     }
 }
 
-.exit {
-    display: block;
-    width: 100%;
-    background-color: black; 
-    border: none;
-    color: white;
-    padding: 15px 32px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    letter-spacing: .2rem;
-    &:hover {
-        border: 1px solid black;
-        background-color: white; 
-        color: black;
+.LoginButtons {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    .exit {
+        display: flex;
+        background-color: black; 
+        border: none;
+        color: white;
+        padding: 15px 32px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        letter-spacing: .2rem;
+
+        &:hover {
+            border: 1px solid black;
+            background-color: white; 
+            color: black;
+        }
     }
 }
 
 .dropzone {
     display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-    border-width: 2;
-    border-radius: 2;
-    border-color: #eeeeee;
-    border-style: dashed;
+    border: none;
     background-color: #fafafa;
     color: #bdbdbd;
     outline: none;
     transition:  .24s ease-in-out;
+    height: 3rem;
+    text-align: center;
+    align-items: center;
 
     &:hover {
+        border-width: 1px;
+        border-radius: 2;
+        border-color: #ffffff;
+        border-style: dashed;
         border-color: black;
         color: black;
     }
@@ -286,7 +318,8 @@ li {
     flex-wrap: wrap;
 
     .category {
-        
+        margin-top: 2px;
+        margin-left: 1px;
         &-row {
             display: flex;
             flex-direction: row;
@@ -423,11 +456,15 @@ li {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    flex: 70%;
 }
 
 .cartPage {
+    
+    width: 100%;
+
     &-btns {
+        display: flex;
+        flex-direction: row;
         &-btn {
             @include btn();
         }
@@ -473,7 +510,7 @@ li {
 
         &-title {
             letter-spacing: .2rem;
-
+            margin-bottom: 1rem
         }
 
         &-goodChange {
@@ -481,6 +518,7 @@ li {
 
             select {
                 @include select();
+                margin-bottom: 1rem;
             }
         }
 
@@ -489,14 +527,17 @@ li {
 
             input {
                 @include textarea();
+                margin-bottom: 1rem;
             }
 
             button {
                 @include btn();
+                margin-bottom: 1rem;
             }
 
             select {
                 @include select();
+                margin-bottom: 1rem;
             }
         }
 
@@ -514,6 +555,7 @@ li {
 
                 select {
                     @include select();
+                    margin-bottom: 1rem
                 }
 
                 button {
@@ -524,3 +566,45 @@ li {
     }
 }
 
+.search {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    &-input {
+        border: 1px solid white;
+        padding: .4rem 2rem;
+        border-radius: 100px;
+        width: 3rem;
+        transition: all .2s;
+
+
+        &:focus {
+            outline: none;
+            width: 10rem;
+        }
+    }
+}
+
+.cart {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &_counter {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        text-decoration: none;
+        color: white;
+
+
+        &-icon {
+            color: white;
+            font-size: 1.4rem;
+        }
+    }
+}
+

nix-project/src/components/CartCounter/CartCounter.js

@@ -8,12 +8,14 @@ const CartCounter = ({cart}) => {
     let sum = Object.entries(cart).map(([, val]) => val.count)
     count = sum.reduce((a, b) => a + b, 0)
     return (
-      <>
-          <img className='logo' src={logo} />
-        <Link className='Koshik' to='/cart'>
-          {count}
-        </Link>
-      </>
+      <div className="cart">  
+          <Link className='cart_counter' to='/cart'>
+            <div className="cart_counter-icon">
+                <i class="fas fa-shopping-cart"></i>
+            </div>
+            {count}
+          </Link>
+      </div>
     )
   }
 

nix-project/src/components/Dropzone/Dropzone.js

@@ -36,9 +36,9 @@ const Avatar = ({ avatarURL = {}, open, children }) => {
 
     console.log(avatarURL);
     return (
-        <div className='Avatar' >
+        <>
+        <div className='Avatar'>
             <img 
-                className='round' 
                 open={isOpen} 
                 onClick={() => onOpen(isOpen)} 
                 style={{
@@ -47,8 +47,11 @@ const Avatar = ({ avatarURL = {}, open, children }) => {
                 border: '1px solid black'
                 }} 
                 src={backURL + "/" + avatarURL.avatar?.url}></img>
+        </div>
+        <div className='setAvatar'>
             {isOpen === true ? children : <></>}
         </div>
+        </>
     )
 };
 

nix-project/src/components/Header/Header.js

@@ -11,13 +11,17 @@ import './../../App.scss';
 
 const Header = ({ auth }) => (
     <>
-      <header>
-        <Link to='/'><h1>S T O R E</h1></Link>
-        <CCartCounter />
-        <CSearch />
-        {auth ? <CAvatar open={false}>
-          <CDropzone />
-        </CAvatar> : <></>}
+      <header className="header">
+        <div className="header_left">
+          <Link to='/' className="header_left-title"><h1>S T O R E</h1></Link>
+          <CSearch />
+        </div>
+        <div className="header_right">
+          <CCartCounter />
+            {auth ? <CAvatar open={false}>
+              <CDropzone />
+            </CAvatar> : <></>}
+        </div>
       </header>
       <Switch>
         <Route path="/login" component={CLoginForm} />

nix-project/src/components/JumpTop/JumpTop.js

@@ -0,0 +1,38 @@
+import React, {useState} from 'react';
+import {FaArrowCircleUp} from 'react-icons/fa';
+import { Button } from './Styles';
+  
+const ScrollButton = () =>{
+  
+  const [visible, setVisible] = useState(false)
+  
+  const toggleVisible = () => {
+    const scrolled = document.documentElement.scrollTop;
+    if (scrolled > 300){
+      setVisible(true)
+    } 
+    else if (scrolled <= 300){
+      setVisible(false)
+    }
+  };
+  
+  const scrollToTop = () =>{
+    window.scrollTo({
+      top: 0, 
+      behavior: 'smooth'
+      /* you can also use 'auto' behaviour
+         in place of 'smooth' */
+    });
+  };
+  
+  window.addEventListener('scroll', toggleVisible);
+  
+  return (
+    <Button>
+     <FaArrowCircleUp onClick={scrollToTop} 
+     style={{display: visible ? 'inline' : 'none'}} />
+    </Button>
+  );
+}
+  
+export default ScrollButton;

nix-project/src/components/JumpTop/Styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+  
+export const Heading = styled.h1`
+   text-align: center;
+   color: black;
+`;
+  
+export const Content = styled.div`
+   overflowY: scroll;
+   height: 2500px;
+`;
+  
+export const Button = styled.div`
+   position: fixed; 
+   width: 100%;
+   left: 95%;
+   bottom: 40px;
+   height: 20px;
+   font-size: 3rem;
+   z-index: 1;
+   cursor: pointer;
+   color: black;
+`

nix-project/src/components/LoginButtons/LoginButtons.js

@@ -19,8 +19,7 @@ const LoginButtons = ({onLogout, history, token}) => {
                 :
                 (
                 <div className='LoginButtons'>
-                    <strong>{`Привет, ${JSON.parse(atob(token.split(".")[1])).sub.login}!`}</strong>
-                    <Link to='/orderhistory'><button className='exit'>ORDER HISTORY</button></Link>
+                    <Link to='/orderhistory' className='exit'>ORDER HISTORY</Link>
                     <button className='exit' onClick={() => {onLogout(); history.push('/')}}>LOGOUT</button>
                 </div>
                 )

nix-project/src/components/Pages/Cart/Cart.js

@@ -4,8 +4,9 @@ import { actionCartClear } from "../../../actions/actionsCartReducer";
 import { actionNewOrder } from "../../../actions/GQLActions";
 import CGoodInCart from "../../GoodInCart/GoodInCart";
 import { CPreloaded } from "../../Preloader/Preloader";
-
+import './../../../App.scss';
 export const Cart = ({cart, onCartClear, onNewOrder}) => (
+
     <div className="cartPage">
       <div className="cartPage-btns">
         {cart.length === 0 ? <><h2>Your cart is empty 🤷‍♂️</h2></> : <button className="cartPage-btns-btn" onClick={() => onCartClear()}>CLEAR CART</button>} 

nix-project/src/components/Pages/Page404/Page404.js

@@ -2,7 +2,6 @@ import React from "react";
 
 const Page404 = () => 
  <>
-    <h1>Sorry...</h1>
-    <p>Page does not exist  😢</p>
+    <h1>Sorry...Page does not exist  😢</h1>
  </>
 export default Page404;

nix-project/src/components/Preloader/Preloader.css

@@ -32,50 +32,51 @@
 }
 .ldio-dyp4ain7tnv div { box-sizing: content-box; }
 
-@keyframes ldio-goyrn3odou {
+
+@keyframes ldio-90dx90z6p5k {
     0%    { transform: translate(2px,2px) }
-   33.33% { transform: translate(102px,2px) }
-   66.66% { transform: translate(42px,102px) }
-  100%    { transform: translate(2px,2px) }
+    33.33% { transform: translate(102px,2px) }
+    66.66% { transform: translate(42px,102px) }
+    100%    { transform: translate(2px,2px) }
 }
 
 
-.ldio-goyrn3odou > div {
+.ldio-90dx90z6p5k > div {
   transform: scale(0.8);
   transform-origin: 100px 100px;
 }
 
-.ldio-goyrn3odou > div > div {
-  animation: ldio-goyrn3odou 1s linear infinite;
+.ldio-90dx90z6p5k > div > div {
+  animation: ldio-90dx90z6p5k 1s linear infinite;
   position: absolute
 }
 
-.ldio-goyrn3odou > div > div div:nth-child(1) {
+.ldio-90dx90z6p5k > div > div div:nth-child(1) {
   width: 72px;
   height: 72px;
   border-radius: 50%;
-  border: 12px solid #0a0a0a;
+  border: 12px solid #000000;
   background: #ffffff
 }
 
-.ldio-goyrn3odou > div > div div:nth-child(2) {
+.ldio-90dx90z6p5k > div > div div:nth-child(2) {
   width: 17px;
   height:  51px;
   transform: rotate(-45deg);
-  background: #0a0a0a;
+  background: #000000;
   border-radius: 0 0 8px 8px;
   position: absolute;
   top: 68px;
   left: 85px
 }
-.loadingio-spinner-magnify-0s35v20g8pke {
+.loadingio-spinner-magnify-sta92o4wstq {
   width: 200px;
   height: 200px;
   display: inline-block;
   overflow: hidden;
-  background: #f1f2f3;
+  background: none;
 }
-.ldio-goyrn3odou {
+.ldio-90dx90z6p5k {
   width: 100%;
   height: 100%;
   position: relative;
@@ -83,4 +84,4 @@
   backface-visibility: hidden;
   transform-origin: 0 0; /* see note above */
 }
-.ldio-goyrn3odou div { box-sizing: content-box; }
+.ldio-90dx90z6p5k div { box-sizing: content-box; }

nix-project/src/components/Preloader/Preloader.js

@@ -9,7 +9,7 @@ export const Preloader = () =>
 </div></div>
 
 export const SearchPreloader = () => 
-<div className="loadingio-spinner-magnify-0s35v20g8pke"><div class="ldio-goyrn3odou">
+<div className="loadingio-spinner-magnify-sta92o4wstq"><div class="ldio-90dx90z6p5k">
 <div><div><div></div><div></div></div></div>
 </div></div>
 

nix-project/src/components/Search/Search.js

@@ -6,14 +6,17 @@ import { actionGoodFind } from "../../actions/GQLActions";
 import { Link } from "react-router-dom/cjs/react-router-dom.min";
 import './../../App.scss';
 import { CSearchPreloaded } from "../Preloader/Preloader";
-
+import { history } from "../../App";
+import Page404 from "../Pages/Page404/Page404";
 const Search = ({ onSearch }) => {
   const [value, setValue] = useState('');
 
   return (
-    <div>
-      <input type="text" placeholder='Search...' value={value} onChange={e => setValue(e.target.value)}/>
-      <Link to='/search'><button onClick={() => onSearch(value)}>Найти</button></Link>
+    <div className="search">
+      <input type="text" onKeyPress={e => e.key === 'Enter' ? (onSearch(value), history.push('/search')) : null} className="search-input" placeholder='Search...' value={value} onChange={e => setValue(e.target.value)} />
+      {/* <Link to='/search'>
+        <button onClick={() => onSearch(value)}>Найти</button>
+      </Link> */}
     </div>
   )
 }
@@ -35,5 +38,4 @@ export const CSearchResult = connect((state) => ({
   goodFind: state.promise.goodFind?.payload || [],
 }))(SearchResult);
 
-export const CSearch = connect(null, {onSearch: actionGoodFind})(Search);
-
+export const CSearch = connect(null, {onSearch: actionGoodFind})(Search);