File/Folder architecture fixed up, increased Popovers reusability

package-lock.json

@@ -4912,6 +4912,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -5744,6 +5749,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
       "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
     },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -6252,6 +6262,11 @@
         }
       }
     },
+    "easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+    },
     "ecdsa-sig-formatter": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -7588,6 +7603,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
+    },
     "finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -11989,6 +12009,22 @@
         "prepend-http": "^1.0.0",
         "query-string": "^4.1.0",
         "sort-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==",
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ=="
+        }
       }
     },
     "npm-run-path": {
@@ -13898,12 +13934,14 @@
       "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
     },
     "query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
+      "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
       "requires": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
       }
     },
     "querystring": {
@@ -14196,6 +14234,16 @@
         }
       }
     },
+    "react-indiana-drag-scroll": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.2.0.tgz",
+      "integrity": "sha512-+W/3B2OQV0FrbdnsoIo4dww/xpH0MUQJz6ziQb7H+oBko3OCbXuzDFYnho6v6yhGrYDNWYPuFUewb89IONEl/A==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.1.1"
+      }
+    },
     "react-input-autosize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
@@ -15927,6 +15975,11 @@
         "wbuf": "^1.7.3"
       }
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -16140,9 +16193,9 @@
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
     },
     "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
     },
     "string-length": {
       "version": "4.0.2",

package.json

@@ -24,10 +24,12 @@
     "lodash": "^4.17.21",
     "lodash.isempty": "^4.4.0",
     "owasp-password-strength-test": "^1.3.0",
+    "query-string": "^7.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.10.0",
+    "react-indiana-drag-scroll": "^2.2.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

public/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link  rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Mulish">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

src/App.js

@@ -5,22 +5,25 @@ import i18next from 'i18next';
 import history from './store/utils/history';
 import AppRoutes from './AppRoutes';
 import Header from './components/Header/Header';
+import { StyledEngineProvider } from '@mui/material';
+import GlobalStyle from './components/Styles/globalStyles';
 
-const App = () => (
+const App = () => {
+  return (
     <>
       <Router history={history}>
         <Helmet>
-          <title>
-            {i18next.t('app.title')}
-          </title>
+          <title>{i18next.t("app.title")}</title>
         </Helmet>
           <Header/>
-            <main className="l-page">
-                <AppRoutes />
-            </main>
+        <StyledEngineProvider injectFirst>
+          <GlobalStyle />
+          <AppRoutes />
+        </StyledEngineProvider>
+        {/* </main> */}
       </Router>
-
     </>
   );
+};
 
-export default App;
+export default App;

src/AppRoutes.js

@@ -8,25 +8,36 @@ import {
   NOT_FOUND_PAGE,
   ERROR_PAGE,
   BASE_PAGE,
+  FORGOT_PASSWORD_MAIL_SENT,
+  REGISTER_PAGE,
+  REGISTER_SUCCESSFUL_PAGE,
+  RESET_PASSWORD_PAGE,
 } from './constants/pages';
-
-// import LoginPage from './pages/LoginPage/LoginPage';
-import LoginPage from './pages/LoginPage/LoginPageMUI';
-// import HomePage from './pages/HomePage/HomePage';
+import LoginPage from './pages/LoginPage/LoginPage';
 import HomePage from './pages/HomePage/HomePageMUI';
 import NotFoundPage from './pages/ErrorPages/NotFoundPage';
 import ErrorPage from './pages/ErrorPages/ErrorPage';
-// import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPage';
-import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPageMUI';
+import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPage';
 import PrivateRoute from './components/Router/PrivateRoute';
+import MailSent from './pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent';
+import Register from './pages/RegisterPages/Register/Register';
+import RegisterSuccessful from './pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful';
+import ResetPasswordPage from './pages/ResetPasswordPage/ResetPasswordPage';
+
 
-const AppRoutes = () => (
+const AppRoutes = () => {
+  return (
   <Switch>
     <Route exact path={BASE_PAGE} component={LoginPage} />
     <Route exact path={LOGIN_PAGE} component={LoginPage} />
     <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
+    <Route path={REGISTER_SUCCESSFUL_PAGE} component={RegisterSuccessful} />
+    <Route path={REGISTER_PAGE} component={Register} />
     <Route path={ERROR_PAGE} component={ErrorPage} />
+    <Route path={FORGOT_PASSWORD_MAIL_SENT} component={MailSent} />
     <Route path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
+    <Route path={RESET_PASSWORD_PAGE} component={ResetPasswordPage}/>
+    
     <PrivateRoute
       exact
       path={HOME_PAGE}
@@ -34,7 +45,7 @@ const AppRoutes = () => (
     />
     <Redirect from="*" to={NOT_FOUND_PAGE} />
   </Switch>
-);
+)};
 
 
 export default AppRoutes;

src/assets/images/profile-picture.svg

@@ -0,0 +1,3 @@
+<svg width="72" height="82" viewBox="0 0 72 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.9821 20.9284C55.9821 32.1726 46.8691 41.2856 35.625 41.2856C24.3809 41.2856 15.2679 32.1726 15.2679 20.9284C15.2679 9.68588 24.3809 0.571289 35.625 0.571289C46.8691 0.571289 55.9821 9.68588 55.9821 20.9284ZM33.2553 57.6985L27.9911 48.9195H43.2589L37.9947 57.6985L43.2907 77.4036L49.5728 51.7663C61.8507 53.6748 71.25 64.2987 71.25 77.1173C71.25 79.8051 69.0552 81.9999 66.3675 81.9999H4.88571C2.1868 81.9999 0 79.8051 0 77.1173C0 64.2987 9.39769 53.6748 21.6772 51.7663L27.9593 77.4036L33.2553 57.6985Z" fill="#D4D4D4"/>
+</svg>

src/assets/images/svg/briefcase.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3334 6.41663H3.66671C2.65419 6.41663 1.83337 7.23744 1.83337 8.24996V17.4166C1.83337 18.4291 2.65419 19.25 3.66671 19.25H18.3334C19.3459 19.25 20.1667 18.4291 20.1667 17.4166V8.24996C20.1667 7.23744 19.3459 6.41663 18.3334 6.41663Z" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6667 19.25V4.58333C14.6667 4.0971 14.4736 3.63079 14.1297 3.28697C13.7859 2.94315 13.3196 2.75 12.8334 2.75H9.16671C8.68048 2.75 8.21416 2.94315 7.87035 3.28697C7.52653 3.63079 7.33337 4.0971 7.33337 4.58333V19.25" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/category-chosen.svg

@@ -0,0 +1,13 @@
+<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_86_8377)">
+<path d="M7.49117 6.3122L1.21472 7.6463L2.54882 13.9227L8.82527 12.5886L7.49117 6.3122Z" stroke="#9677BE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.3542 4.21577L11.0778 5.54987L12.4119 11.8263L18.6883 10.4922L17.3542 4.21577Z" stroke="#9677BE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.4506 14.0787L13.1742 15.4128L14.5083 21.6893L20.7847 20.3552L19.4506 14.0787Z" stroke="#9677BE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5876 16.1752L3.31116 17.5093L4.64526 23.7857L10.9217 22.4516L9.5876 16.1752Z" stroke="#9677BE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_86_8377">
+<rect width="22" height="22" fill="white" transform="translate(-2.04688 5.52814) rotate(-12)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/svg/category.svg

@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.16667 2.75H2.75V9.16667H9.16667V2.75Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.2499 2.75H12.8333V9.16667H19.2499V2.75Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.2499 12.8333H12.8333V19.25H19.2499V12.8333Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.16667 12.8333H2.75V19.25H9.16667V12.8333Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/check-circle.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 8.31002V9.00002C16.4991 10.6173 15.9754 12.191 15.007 13.4864C14.0386 14.7818 12.6775 15.7294 11.1265 16.1879C9.57557 16.6465 7.91794 16.5914 6.40085 16.031C4.88376 15.4705 3.58849 14.4346 2.70822 13.0778C1.82795 11.721 1.40984 10.1161 1.51626 8.50226C1.62267 6.88844 2.24791 5.35227 3.29871 4.12283C4.34951 2.89338 5.76959 2.03656 7.34714 1.68013C8.92469 1.3237 10.5752 1.48677 12.0525 2.14502" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 3L9 10.5075L6.75 8.2575" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 5.2L3.85714 8L11 1" stroke="#FEB005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/close-black.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50024 3.4978L2.50006 8.49799" stroke="black" stroke-linecap="round"/>
+<path d="M2.50024 3.4978L7.50043 8.49799" stroke="black" stroke-linecap="round"/>
+</svg>

src/assets/images/svg/close-white.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50024 3.4978L2.50006 8.49799" stroke="white" stroke-linecap="round"/>
+<path d="M2.50024 3.4978L7.50043 8.49799" stroke="white" stroke-linecap="round"/>
+</svg>

src/assets/images/svg/coffee.svg

@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 4H9.5C10.0304 4 10.5391 4.21071 10.9142 4.58579C11.2893 4.96086 11.5 5.46957 11.5 6C11.5 6.53043 11.2893 7.03914 10.9142 7.41421C10.5391 7.78929 10.0304 8 9.5 8H9" stroke="#FEB005" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 4H9V8.5C9 9.03043 8.78929 9.53914 8.41421 9.91421C8.03914 10.2893 7.53043 10.5 7 10.5H3C2.46957 10.5 1.96086 10.2893 1.58579 9.91421C1.21071 9.53914 1 9.03043 1 8.5V4Z" stroke="#FEB005" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 0.5V2" stroke="#FEB005" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 0.5V2" stroke="#FEB005" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 0.5V2" stroke="#FEB005" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/down-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 1.25L7 6.75L12.5 1.25" stroke="#5A3984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/edit.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.25 3H3C2.60218 3 2.22064 3.15804 1.93934 3.43934C1.65804 3.72064 1.5 4.10218 1.5 4.5V15C1.5 15.3978 1.65804 15.7794 1.93934 16.0607C2.22064 16.342 2.60218 16.5 3 16.5H13.5C13.8978 16.5 14.2794 16.342 14.5607 16.0607C14.842 15.7794 15 15.3978 15 15V9.75" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.875 1.87505C14.1734 1.57668 14.578 1.40906 15 1.40906C15.422 1.40906 15.8266 1.57668 16.125 1.87505C16.4234 2.17342 16.591 2.57809 16.591 3.00005C16.591 3.422 16.4234 3.82668 16.125 4.12505L9 11.25L6 12L6.75 9.00005L13.875 1.87505Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/eye-striked.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9999 7.99994C13.9999 8.79557 13.6838 9.55862 13.1212 10.1212C12.5586 10.6838 11.7956 10.9999 10.9999 10.9999C10.2043 10.9999 9.44126 10.6838 8.87866 10.1212C8.31606 9.55862 8 8.79557 8 7.99994C8 7.20431 8.31606 6.44126 8.87866 5.87866C9.44126 5.31606 10.2043 5 10.9999 5C11.7956 5 12.5586 5.31606 13.1212 5.87866C13.6838 6.44126 13.9999 7.20431 13.9999 7.99994V7.99994Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.45898 7.99986C2.73296 3.94294 6.52388 1 11.0008 1C15.4787 1 19.2686 3.94294 20.5426 7.99986C19.2686 12.0568 15.4787 14.9997 11.0008 14.9997C6.52388 14.9997 2.73296 12.0568 1.45898 7.99986Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/eye.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="18" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.24741 12.2086L1.42675 15M7.02641 13.3083C7.51222 13.3992 8.00558 13.4448 8.5 13.4444C12.0193 13.4444 14.998 11.1554 16 8C15.7302 7.15074 15.3147 6.3538 14.7716 5.64411L7.02641 13.3083ZM10.1677 6.35033C9.72551 5.91271 9.12576 5.66686 8.50039 5.66686C7.87502 5.66686 7.27527 5.91271 6.83307 6.35033C6.39087 6.78796 6.14244 7.3815 6.14244 8.00039C6.14244 8.61928 6.39087 9.21282 6.83307 9.65044L10.1677 6.35033ZM10.1677 6.34956L6.83386 9.64889L10.1677 6.34956ZM10.1661 6.35111L12.7518 3.79222L10.1661 6.35111ZM6.83228 9.65044L4.24662 12.2093L6.83228 9.65044ZM15.5732 1L12.7518 3.79222L15.5732 1ZM12.7518 3.79222C11.4846 2.983 10.0081 2.55354 8.5 2.55556C4.98067 2.55556 2.00204 4.84456 1 8C1.55325 9.7348 2.702 11.2236 4.24741 12.2086L12.7518 3.79222Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/globe.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 12H22" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/home.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 4.5L6 1L10.5 4.5V10C10.5 10.2652 10.3946 10.5196 10.2071 10.7071C10.0196 10.8946 9.76522 11 9.5 11H2.5C2.23478 11 1.98043 10.8946 1.79289 10.7071C1.60536 10.5196 1.5 10.2652 1.5 10V4.5Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 11V6H7.5V11" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/location.svg

@@ -0,0 +1,11 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_29355)">
+<path d="M19.25 9.16663C19.25 15.5833 11 21.0833 11 21.0833C11 21.0833 2.75 15.5833 2.75 9.16663C2.75 6.97859 3.61919 4.88017 5.16637 3.333C6.71354 1.78582 8.81196 0.916626 11 0.916626C13.188 0.916626 15.2865 1.78582 16.8336 3.333C18.3808 4.88017 19.25 6.97859 19.25 9.16663Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 11.9166C12.5188 11.9166 13.75 10.6854 13.75 9.16663C13.75 7.64784 12.5188 6.41663 11 6.41663C9.48122 6.41663 8.25 7.64784 8.25 9.16663C8.25 10.6854 9.48122 11.9166 11 11.9166Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2_29355">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/svg/logo-horizontal.svg

@@ -0,0 +1,43 @@
+<svg
+  width="129"
+  height="53"
+  viewBox="0 0 129 53"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M65.864 17.896H74.63V19.912H71.246V31H69.158V19.912H65.864V17.896ZM77.6259 23.386L77.8059 25.546L77.7339 25.24C77.9499 24.784 78.2439 24.394 78.6159 24.07C78.9999 23.734 79.3899 23.482 79.7859 23.314C80.1819 23.134 80.5059 23.044 80.7579 23.044L80.6679 25.06C80.0919 25.012 79.5879 25.12 79.1559 25.384C78.7359 25.636 78.4059 25.972 78.1659 26.392C77.9379 26.812 77.8239 27.256 77.8239 27.724V31H75.8079V23.386H77.6259ZM85.8146 31.198C85.0946 31.198 84.4406 31.048 83.8526 30.748C83.2766 30.448 82.8206 30.004 82.4846 29.416C82.1486 28.816 81.9806 28.078 81.9806 27.202C81.9806 26.338 82.1546 25.6 82.5026 24.988C82.8626 24.364 83.3306 23.884 83.9066 23.548C84.4946 23.212 85.1306 23.044 85.8146 23.044C86.5466 23.044 87.1346 23.188 87.5786 23.476C88.0346 23.764 88.3886 24.106 88.6406 24.502L88.5326 24.79L88.7306 23.386H90.5846V31H88.5686V29.146L88.7666 29.632C88.7186 29.704 88.6226 29.824 88.4786 29.992C88.3346 30.148 88.1366 30.322 87.8846 30.514C87.6326 30.706 87.3326 30.868 86.9846 31C86.6486 31.132 86.2586 31.198 85.8146 31.198ZM86.3726 29.542C86.7326 29.542 87.0566 29.476 87.3446 29.344C87.6446 29.212 87.8966 29.026 88.1006 28.786C88.3166 28.546 88.4726 28.258 88.5686 27.922V26.266C88.4726 25.954 88.3166 25.684 88.1006 25.456C87.8846 25.216 87.6206 25.03 87.3086 24.898C87.0086 24.766 86.6726 24.7 86.3006 24.7C85.8926 24.7 85.5146 24.802 85.1666 25.006C84.8186 25.21 84.5366 25.492 84.3206 25.852C84.1166 26.212 84.0146 26.626 84.0146 27.094C84.0146 27.55 84.1226 27.964 84.3386 28.336C84.5546 28.708 84.8426 29.002 85.2026 29.218C85.5626 29.434 85.9526 29.542 86.3726 29.542ZM95.1864 23.386L95.3664 24.934L95.2944 24.808C95.5824 24.256 95.9724 23.824 96.4644 23.512C96.9684 23.2 97.5504 23.044 98.2104 23.044C98.6304 23.044 99.0024 23.11 99.3264 23.242C99.6504 23.374 99.9204 23.56 100.136 23.8C100.364 24.04 100.514 24.34 100.586 24.7L100.478 24.736C100.79 24.22 101.192 23.812 101.684 23.512C102.176 23.2 102.698 23.044 103.25 23.044C103.994 23.044 104.588 23.26 105.032 23.692C105.476 24.112 105.704 24.658 105.716 25.33V31H103.718V26.122C103.706 25.75 103.628 25.444 103.484 25.204C103.34 24.952 103.07 24.814 102.674 24.79C102.242 24.79 101.87 24.928 101.558 25.204C101.246 25.468 101 25.816 100.82 26.248C100.652 26.668 100.568 27.118 100.568 27.598V31H98.5344V26.122C98.5224 25.75 98.4384 25.444 98.2824 25.204C98.1264 24.952 97.8504 24.814 97.4544 24.79C97.0344 24.79 96.6684 24.928 96.3564 25.204C96.0444 25.468 95.8044 25.816 95.6364 26.248C95.4684 26.668 95.3844 27.112 95.3844 27.58V31H93.3684V23.386H95.1864ZM113.112 31.198C112.584 31.198 112.074 31.084 111.582 30.856C111.09 30.628 110.694 30.316 110.394 29.92L110.502 29.308V34.654H108.486V23.242H110.232L110.502 25.006L110.322 24.466C110.694 24.058 111.144 23.722 111.672 23.458C112.212 23.182 112.818 23.044 113.49 23.044C114.21 23.044 114.852 23.212 115.416 23.548C115.98 23.884 116.424 24.364 116.748 24.988C117.084 25.6 117.252 26.326 117.252 27.166C117.252 28.006 117.072 28.726 116.712 29.326C116.352 29.926 115.86 30.388 115.236 30.712C114.612 31.036 113.904 31.198 113.112 31.198ZM112.716 29.596C113.16 29.596 113.568 29.494 113.94 29.29C114.324 29.086 114.63 28.804 114.858 28.444C115.086 28.072 115.2 27.658 115.2 27.202C115.2 26.722 115.092 26.302 114.876 25.942C114.672 25.57 114.39 25.282 114.03 25.078C113.682 24.862 113.292 24.754 112.86 24.754C112.464 24.754 112.11 24.82 111.798 24.952C111.486 25.084 111.222 25.276 111.006 25.528C110.79 25.768 110.622 26.056 110.502 26.392V27.922C110.586 28.246 110.73 28.534 110.934 28.786C111.138 29.038 111.396 29.236 111.708 29.38C112.02 29.524 112.356 29.596 112.716 29.596ZM122.588 31.198C121.868 31.198 121.214 31.048 120.626 30.748C120.05 30.448 119.594 30.004 119.258 29.416C118.922 28.816 118.754 28.078 118.754 27.202C118.754 26.338 118.928 25.6 119.276 24.988C119.636 24.364 120.104 23.884 120.68 23.548C121.268 23.212 121.904 23.044 122.588 23.044C123.32 23.044 123.908 23.188 124.352 23.476C124.808 23.764 125.162 24.106 125.414 24.502L125.306 24.79L125.504 23.386H127.358V31H125.342V29.146L125.54 29.632C125.492 29.704 125.396 29.824 125.252 29.992C125.108 30.148 124.91 30.322 124.658 30.514C124.406 30.706 124.106 30.868 123.758 31C123.422 31.132 123.032 31.198 122.588 31.198ZM123.146 29.542C123.506 29.542 123.83 29.476 124.118 29.344C124.418 29.212 124.67 29.026 124.874 28.786C125.09 28.546 125.246 28.258 125.342 27.922V26.266C125.246 25.954 125.09 25.684 124.874 25.456C124.658 25.216 124.394 25.03 124.082 24.898C123.782 24.766 123.446 24.7 123.074 24.7C122.666 24.7 122.288 24.802 121.94 25.006C121.592 25.21 121.31 25.492 121.094 25.852C120.89 26.212 120.788 26.626 120.788 27.094C120.788 27.55 120.896 27.964 121.112 28.336C121.328 28.708 121.616 29.002 121.976 29.218C122.336 29.434 122.726 29.542 123.146 29.542Z"
+    fill="#5A3984"
+  />
+  <rect
+    x="17.5078"
+    width="24.7529"
+    height="24.7529"
+    rx="6.3546"
+    transform="rotate(45 17.5078 0)"
+    fill="#5A3984"
+  />
+  <rect
+    x="35.0078"
+    y="17.5032"
+    width="24.7529"
+    height="24.7529"
+    rx="6.3546"
+    transform="rotate(45 35.0078 17.5032)"
+    fill="#FEB005"
+  />
+  <circle
+    cx="29.5859"
+    cy="22.7096"
+    r="4.85659"
+    transform="rotate(45 29.5859 22.7096)"
+    fill="#FEB005"
+  />
+  <circle
+    cx="22.8281"
+    cy="29.6886"
+    r="4.85659"
+    transform="rotate(45 22.8281 29.6886)"
+    fill="#5A3984"
+  />
+</svg>

src/assets/images/svg/magnifying-glass.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z" fill="#5A3984"/>
+</svg>

src/assets/images/svg/mail.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33341 3.33337H16.6667C17.5834 3.33337 18.3334 4.08337 18.3334 5.00004V15C18.3334 15.9167 17.5834 16.6667 16.6667 16.6667H3.33341C2.41675 16.6667 1.66675 15.9167 1.66675 15V5.00004C1.66675 4.08337 2.41675 3.33337 3.33341 3.33337Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3334 5L10.0001 10.8333L1.66675 5" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/offer-grid-line.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#E4E4E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 14C13 13.7348 13.1054 13.4804 13.2929 13.2929C13.4804 13.1054 13.7348 13 14 13H26C26.2652 13 26.5196 13.1054 26.7071 13.2929C26.8946 13.4804 27 13.7348 27 14C27 14.2652 26.8946 14.5196 26.7071 14.7071C26.5196 14.8946 26.2652 15 26 15H14C13.7348 15 13.4804 14.8946 13.2929 14.7071C13.1054 14.5196 13 14.2652 13 14ZM13 18C13 17.7348 13.1054 17.4804 13.2929 17.2929C13.4804 17.1054 13.7348 17 14 17H26C26.2652 17 26.5196 17.1054 26.7071 17.2929C26.8946 17.4804 27 17.7348 27 18C27 18.2652 26.8946 18.5196 26.7071 18.7071C26.5196 18.8946 26.2652 19 26 19H14C13.7348 19 13.4804 18.8946 13.2929 18.7071C13.1054 18.5196 13 18.2652 13 18ZM13 22C13 21.7348 13.1054 21.4804 13.2929 21.2929C13.4804 21.1054 13.7348 21 14 21H26C26.2652 21 26.5196 21.1054 26.7071 21.2929C26.8946 21.4804 27 21.7348 27 22C27 22.2652 26.8946 22.5196 26.7071 22.7071C26.5196 22.8946 26.2652 23 26 23H14C13.7348 23 13.4804 22.8946 13.2929 22.7071C13.1054 22.5196 13 22.2652 13 22ZM13 26C13 25.7348 13.1054 25.4804 13.2929 25.2929C13.4804 25.1054 13.7348 25 14 25H26C26.2652 25 26.5196 25.1054 26.7071 25.2929C26.8946 25.4804 27 25.7348 27 26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H14C13.7348 27 13.4804 26.8946 13.2929 26.7071C13.1054 26.5196 13 26.2652 13 26Z" fill="#5A3984"/>
+</svg>

src/assets/images/svg/offer-grid-square.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#E4E4E4"/>
+<path d="M12 14C12 13.4696 12.2107 12.9609 12.5858 12.5858C12.9609 12.2107 13.4696 12 14 12H16C16.5304 12 17.0391 12.2107 17.4142 12.5858C17.7893 12.9609 18 13.4696 18 14V16C18 16.5304 17.7893 17.0391 17.4142 17.4142C17.0391 17.7893 16.5304 18 16 18H14C13.4696 18 12.9609 17.7893 12.5858 17.4142C12.2107 17.0391 12 16.5304 12 16V14ZM22 14C22 13.4696 22.2107 12.9609 22.5858 12.5858C22.9609 12.2107 23.4696 12 24 12H26C26.5304 12 27.0391 12.2107 27.4142 12.5858C27.7893 12.9609 28 13.4696 28 14V16C28 16.5304 27.7893 17.0391 27.4142 17.4142C27.0391 17.7893 26.5304 18 26 18H24C23.4696 18 22.9609 17.7893 22.5858 17.4142C22.2107 17.0391 22 16.5304 22 16V14ZM12 24C12 23.4696 12.2107 22.9609 12.5858 22.5858C12.9609 22.2107 13.4696 22 14 22H16C16.5304 22 17.0391 22.2107 17.4142 22.5858C17.7893 22.9609 18 23.4696 18 24V26C18 26.5304 17.7893 27.0391 17.4142 27.4142C17.0391 27.7893 16.5304 28 16 28H14C13.4696 28 12.9609 27.7893 12.5858 27.4142C12.2107 27.0391 12 26.5304 12 26V24ZM22 24C22 23.4696 22.2107 22.9609 22.5858 22.5858C22.9609 22.2107 23.4696 22 24 22H26C26.5304 22 27.0391 22.2107 27.4142 22.5858C27.7893 22.9609 28 23.4696 28 24V26C28 26.5304 27.7893 27.0391 27.4142 27.4142C27.0391 27.7893 26.5304 28 26 28H24C23.4696 28 22.9609 27.7893 22.5858 27.4142C22.2107 27.0391 22 26.5304 22 26V24Z" stroke="#8C8C8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/plus.svg

@@ -0,0 +1,4 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36 15V57" stroke="#5A3984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 36H57" stroke="#5A3984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/quantity.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L1 3.5L6 6L11 3.5L6 1Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 8.5L6 11L11 8.5" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 6L6 8.5L11 6" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/radio-checked.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="13" height="13" rx="6.5" fill="#64468B" stroke="#5A3984"/>
+</svg>

src/assets/images/svg/radio-unchecked.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="13" height="13" rx="6.5" stroke="#5A3984"/>
+</svg>

src/assets/images/svg/refresh.svg

@@ -0,0 +1,12 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_86_8725)">
+<path d="M0.75 3V7.5H5.25" stroke="#FEB005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.25 15V10.5H12.75" stroke="#FEB005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.3675 6.75006C14.9871 5.67515 14.3407 4.71411 13.4884 3.95662C12.6361 3.19913 11.6059 2.66988 10.4938 2.41825C9.38167 2.16662 8.22393 2.20081 7.12861 2.51764C6.03328 2.83446 5.03606 3.42359 4.23 4.23006L0.75 7.50006M17.25 10.5001L13.77 13.7701C12.9639 14.5765 11.9667 15.1657 10.8714 15.4825C9.77607 15.7993 8.61833 15.8335 7.50621 15.5819C6.3941 15.3302 5.36385 14.801 4.5116 14.0435C3.65935 13.286 3.01288 12.325 2.6325 11.2501" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_86_8725">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/svg/star.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 1.5L11.3175 6.195L16.5 6.9525L12.75 10.605L13.635 15.765L9 13.3275L4.365 15.765L5.25 10.605L1.5 6.9525L6.6825 6.195L9 1.5Z" stroke="#4D4D4D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/subcategory.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1.75V18.25M10 1.75H16.4167C16.9029 1.75 17.3692 1.94315 17.713 2.28697C18.0568 2.63079 18.25 3.0971 18.25 3.58333V16.4167C18.25 16.9029 18.0568 17.3692 17.713 17.713C17.3692 18.0568 16.9029 18.25 16.4167 18.25H10V1.75ZM10 1.75H3.58333C3.0971 1.75 2.63079 1.94315 2.28697 2.28697C1.94315 2.63079 1.75 3.0971 1.75 3.58333V16.4167C1.75 16.9029 1.94315 17.3692 2.28697 17.713C2.63079 18.0568 3.0971 18.25 3.58333 18.25H10V1.75Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/thumbs-down.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49999 11.25V14.25C7.49999 14.8468 7.73704 15.4191 8.159 15.841C8.58096 16.263 9.15326 16.5 9.74999 16.5L12.75 9.75003V1.50003H4.28999C3.92825 1.49594 3.57721 1.62272 3.30156 1.85702C3.02592 2.09132 2.84423 2.41735 2.78999 2.77503L1.75499 9.52503C1.72236 9.74001 1.73686 9.95952 1.79749 10.1683C1.85811 10.3772 1.96342 10.5703 2.1061 10.7344C2.24878 10.8985 2.42543 11.0296 2.62381 11.1186C2.82219 11.2076 3.03756 11.2525 3.25499 11.25H7.49999ZM12.75 1.50003H14.7525C15.177 1.49252 15.5894 1.64113 15.9116 1.91764C16.2337 2.19415 16.4431 2.57932 16.5 3.00003V8.25003C16.4431 8.67073 16.2337 9.0559 15.9116 9.33241C15.5894 9.60892 15.177 9.75753 14.7525 9.75003H12.75" fill="#FF3A3A"/>
+</svg>

src/assets/images/svg/thumbs-up.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 6.75V3.75C10.5 3.15326 10.2629 2.58097 9.84099 2.15901C9.41903 1.73705 8.84674 1.5 8.25 1.5L5.25 8.25V16.5H13.71C14.0717 16.5041 14.4228 16.3773 14.6984 16.143C14.9741 15.9087 15.1558 15.5827 15.21 15.225L16.245 8.475C16.2776 8.26002 16.2631 8.04051 16.2025 7.83169C16.1419 7.62287 16.0366 7.42972 15.8939 7.26564C15.7512 7.10155 15.5746 6.97045 15.3762 6.88141C15.1778 6.79238 14.9624 6.74754 14.745 6.75H10.5ZM5.25 16.5H3C2.60218 16.5 2.22064 16.342 1.93934 16.0607C1.65804 15.7794 1.5 15.3978 1.5 15V9.75C1.5 9.35218 1.65804 8.97064 1.93934 8.68934C2.22064 8.40804 2.60218 8.25 3 8.25H5.25" fill="#0FB834"/>
+</svg>

src/assets/images/svg/trash.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.25 4.5H3.75H15.75" stroke="#5A3984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5M14.25 4.5V15C14.25 15.3978 14.092 15.7794 13.8107 16.0607C13.5294 16.342 13.1478 16.5 12.75 16.5H5.25C4.85218 16.5 4.47064 16.342 4.18934 16.0607C3.90804 15.7794 3.75 15.3978 3.75 15V4.5H14.25Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/truck.svg

@@ -0,0 +1,6 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1.5H0.5V8H8V1.5Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 4H10L11.5 5.5V8H8V4Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.75 10.5C3.44036 10.5 4 9.94036 4 9.25C4 8.55964 3.44036 8 2.75 8C2.05964 8 1.5 8.55964 1.5 9.25C1.5 9.94036 2.05964 10.5 2.75 10.5Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.25 10.5C9.94036 10.5 10.5 9.94036 10.5 9.25C10.5 8.55964 9.94036 8 9.25 8C8.55964 8 8 8.55964 8 9.25C8 9.94036 8.55964 10.5 9.25 10.5Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/up-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 6.75L7 1.25L1.5 6.75" stroke="#5A3984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/user.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6666 17.5V15.8333C16.6666 14.9493 16.3154 14.1014 15.6903 13.4763C15.0652 12.8512 14.2173 12.5 13.3333 12.5H6.66659C5.78253 12.5 4.93468 12.8512 4.30956 13.4763C3.68444 14.1014 3.33325 14.9493 3.33325 15.8333V17.5" stroke="#5A3984" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.0001 9.16667C11.841 9.16667 13.3334 7.67428 13.3334 5.83333C13.3334 3.99238 11.841 2.5 10.0001 2.5C8.15913 2.5 6.66675 3.99238 6.66675 5.83333C6.66675 7.67428 8.15913 9.16667 10.0001 9.16667Z" stroke="#5A3984" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/styles/_base.scss

@@ -3,6 +3,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-anchor: none;
+  background-color: #F1F1F1;
 }
 
 * {

src/components/Buttons/IconButton/IconButton.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconButtonContainer, IconButtonStyled } from "./IconButton.styled"
+import PropTypes from "prop-types";
+
+export const IconButton = (props) => {
+    return <IconButtonContainer style={props.containerStyle} className={props.className}>
+        <IconButtonStyled onClick={props.onClick} sx={props.style} iconcolor={props.iconColor}>
+            {props.children}
+        </IconButtonStyled>
+    </IconButtonContainer>
+}
+
+IconButton.propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+    containerStyle: PropTypes.any,
+    style: PropTypes.any,
+    className: PropTypes.string,
+    iconColor: PropTypes.string
+}

src/components/Buttons/IconButton/IconButton.styled.js

@@ -0,0 +1,16 @@
+import { Box, IconButton } from "@mui/material";
+import styled from "styled-components";
+
+export const IconButtonContainer = styled(Box)`
+`
+
+export const IconButtonStyled = styled(IconButton)`
+    height: ${props => props.height ? props.height : "36px"};
+    width: ${props => props.width ? props.width : "36px"};
+    padding: 0;
+    ${props => props.iconcolor && `
+        & svg path {
+            stroke: ${props.iconcolor};
+        }
+    `}
+`

src/components/Buttons/LoginButton/LoginButton.js

@@ -1,16 +1,16 @@
 import React from "react";
-import { ComponentContainer, LoginButtonStyled } from "./LoginButton.styled";
+import { LoginButtonContainer, LoginButtonStyled } from "./LoginButton.styled";
 import PropTypes from "prop-types";
 
 
 //Currently not in use
 export const LoginButton = (props) => {
   return (
-    <ComponentContainer style={props.containerStyle}>
+    <LoginButtonContainer style={props.containerStyle}>
       <LoginButtonStyled {...props} sx={props.style} variant="contained">
         Dugme
       </LoginButtonStyled>
-    </ComponentContainer>
+    </LoginButtonContainer>
   );
 };
 
@@ -20,6 +20,7 @@ LoginButton.propTypes = {
   variant: PropTypes.string,
   style: PropTypes.any,
   containerStyle: PropTypes.any,
-  fullWidth: PropTypes.string,
+  fullWidth: PropTypes.bool,
   buttonColor: PropTypes.string,
+  onClick: PropTypes.func
 };

src/components/Buttons/LoginButton/LoginButton.styled.js

@@ -1,8 +1,8 @@
-import { Button } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import styled from "styled-components";
 
 
-export const ComponentContainer = styled.div`
+export const LoginButtonContainer = styled(Box)`
 `
 
 export const LoginButtonStyled = styled(Button)`

src/components/Buttons/PrimaryButton/PrimaryButton.js

@@ -1,27 +1,38 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  ComponentContainer,
+  PrimaryButtonContainer,
   PrimaryButtonStyled,
 } from "./PrimaryButton.styled";
 
 export const PrimaryButton = (props) => {
+  console.log(props);
   return (
-    <ComponentContainer style={props.containerStyle}>
-      <PrimaryButtonStyled fullWidth {...props} sx={props.style}>
+    <PrimaryButtonContainer
+      style={props.containerStyle}
+      className={props.className}
+    >
+      <PrimaryButtonStyled {...props} buttoncolor={props.buttoncolor} sx={props.style}>
         {props.children}
       </PrimaryButtonStyled>
-    </ComponentContainer>
+    </PrimaryButtonContainer>
   );
 };
 
 PrimaryButton.propTypes = {
   children: PropTypes.node,
-  type: PropTypes.string,
-  variant: PropTypes.string,
+  type: PropTypes.oneOf(["button", "reset", "submit"]),
+  variant: PropTypes.oneOf(["contained", "outlined", "text"]),
   style: PropTypes.any,
   containerStyle: PropTypes.any,
-  fullWidth: PropTypes.string,
-  buttonColor: PropTypes.string,
-  textColor: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  buttoncolor: PropTypes.string,
+  textcolor: PropTypes.string,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  font: PropTypes.string,
+};
+
+PrimaryButton.defaultProps = {
+  font: "Open Sans",
 };

src/components/Buttons/PrimaryButton/PrimaryButton.styled.js

@@ -1,23 +1,39 @@
 import { Button } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../../themes";
 
-export const ComponentContainer = styled.div`
+export const PrimaryButtonContainer = styled.div`
   min-width: fit-content;
 `;
 
 export const PrimaryButtonStyled = styled(Button)`
-  background-color: ${props => props.variant === "contained" ? props.buttonColor : "transparent"};
-  border-color: ${props => props.variant === "outlined" ? props.buttonColor : "transparent"};
-  color: ${props => props.textColor};
+  background-color: ${(props) =>
+    props.disabled
+      ? selectedTheme.primaryPurpleDisabled
+      : props.variant === "contained"
+      ? props.buttoncolor
+      : "transparent"} !important;
+  border-color: ${(props) =>
+    props.variant === "outlined" ? props.buttoncolor : "transparent"};
+  color: ${(props) =>
+    props.disabled
+      ? selectedTheme.primaryTextDisabled
+      : props.textcolor} !important;
   box-shadow: 0 0 0 0;
-  font-size: 10px;
+  font-size: 12px;
   letter-spacing: 1px;
-  line-height: 0;
-  font-weight: 600;
-  width: ${props => props.width};
-  height: ${props => props.height};
+  font-weight: 100;
+  width: ${(props) => props.width};
+  font-family: ${(props) => props.font};
+
+  height: ${(props) => props.height};
   &:hover {
-    background-color: ${props => props.variant === "contained" ? props.buttonColor : "transparent"};
+    background-color: ${(props) =>
+      props.variant === "contained" ? props.buttoncolor : "transparent"};
     box-shadow: 0 0 0 0;
   }
+  &:disabled {
+    background-color: ${selectedTheme.primaryPurpleDisabled};
+    color: ${(props) => props.textcolor};
+  }
 `;

src/components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon.js

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  PrimaryButtonWithIconContainer,
+  IconStyled,
+  PrimaryButtonWithIconStyled,
+} from "./PrimaryButtonWithIcon.styled";
+
+const PrimaryButtonWithIcon = (props) => {
+  return (
+    <PrimaryButtonWithIconContainer
+      style={props.containerStyle}
+      className={props.className}
+    >
+      <PrimaryButtonWithIconStyled sx={props.style} {...props.buttonProps} onClick={props.onClick}>
+        <IconStyled style={props.iconStyle}>{props.icon}</IconStyled>
+        {props.children}
+      </PrimaryButtonWithIconStyled>
+    </PrimaryButtonWithIconContainer>
+  );
+};
+
+PrimaryButtonWithIcon.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  className: PropTypes.string,
+  containerStyle: PropTypes.any,
+  style: PropTypes.any,
+  iconStyle: PropTypes.any,
+  buttonProps: PropTypes.any,
+  onClick: PropTypes.func,
+};
+
+export default PrimaryButtonWithIcon;

src/components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon.styled.js

@@ -0,0 +1,28 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { Icon } from "../../Icon/Icon";
+import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
+
+export const PrimaryButtonWithIconContainer = styled(Box)``;
+
+export const PrimaryButtonWithIconStyled = styled(PrimaryButton)`
+  position: relative;
+`;
+
+export const IconStyled = styled(Icon)`
+  position: absolute;
+  padding: 0;
+  left: 10px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 21px;
+  & span {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+`;

src/components/CheckBox/CheckBox.js

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import {
+  CheckBoxStyled,
+  CheckBoxContainer,
+  FormControlLabelStyled,
+} from "./CheckBox.styled";
+import PropTypes from "prop-types";
+import { Label } from "./Label";
+import selectedTheme from "../../themes";
+
+export const CheckBox = (props) => {
+  const [checked, setChecked] = useState(false);
+
+  const handleClick = () => {
+    if (props.onChange) props.onChange(!checked);
+    setChecked((prevState) => !prevState);
+  };
+
+  return (
+    <CheckBoxContainer
+      style={props.containerStyle}
+      fullWidth={props.fullWidth}
+      className={props.className}
+    >
+      <FormControlLabelStyled
+        fullwidth={props.fullWidth ? 1 : 0}
+        control={
+          <CheckBoxStyled
+            sx={props.checkBoxStyle}
+            boxcolor={props.color}
+            checked={props.checked}
+            onClick={handleClick}
+            value={props.value}
+          />
+        }
+        label={
+          <Label
+            sx={props.labelStyle}
+            onClick={handleClick}
+            leftText={props.leftText}
+            rightText={props.rightText}
+            maxWidth={props.maxWidth}
+          />
+        }
+      />
+    </CheckBoxContainer>
+  );
+};
+
+CheckBox.propTypes = {
+  fullWidth: PropTypes.bool,
+  color: PropTypes.string,
+  name: PropTypes.string,
+  leftText: PropTypes.string,
+  rightText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxWidth: PropTypes.string,
+  checked: PropTypes.bool,
+  value: PropTypes.number,
+  onChange: PropTypes.func,
+  containerStyle: PropTypes.any,
+  checkBoxStyle: PropTypes.any,
+  labelStyle: PropTypes.any,
+  className: PropTypes.string,
+};
+
+CheckBox.defaultProps = {
+  color: selectedTheme.primaryPurple,
+};

src/components/CheckBox/CheckBox.styled.js

@@ -0,0 +1,38 @@
+import { Box, Checkbox, FormControlLabel } from "@mui/material";
+import styled from "styled-components";
+
+export const CheckBoxContainer = styled(Box)`
+  ${(props) =>
+    props.fullWidth &&
+    `
+        width: 100%;
+        display: flex;
+        flex: 1;
+    `}
+`;
+
+export const CheckBoxStyled = styled(Checkbox)`
+  color: ${(props) => props.boxcolor} !important;
+  padding: 6px;
+`;
+export const FormControlLabelStyled = styled(FormControlLabel)`
+  ${(props) =>
+    props.fullwidth &&
+    `
+        width: 100%;
+        display: flex;
+        flex: 1;
+    `}
+  margin-right: 0;
+  & label {
+    font-family: "Open Sans";
+    font-size: 12px;
+  }
+  & span:nth-child(1) svg {
+    width: 18px;
+    height: 18px;
+  }
+  & span:nth-child(2) {
+    flex: 1;
+  }
+`;

src/components/CheckBox/Label.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { LabelContainer, LeftLabel, RightLabel } from "./Label.styled";
+import PropTypes from "prop-types";
+
+export const Label = (props) => {
+  return (
+    <LabelContainer
+      onClick={props.onClick}
+      maxWidth={props.maxWidth}
+      style={props.containerStyle}
+      className={props.className}
+    >
+      <LeftLabel style={props.leftTextStyle}>{props.leftText}</LeftLabel>
+      {props.rightText && <RightLabel>{props.rightText}</RightLabel>}
+    </LabelContainer>
+  );
+};
+
+Label.propTypes = {
+  onClick: PropTypes.func,
+  leftText: PropTypes.string,
+  rightText: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  maxWidth: PropTypes.string,
+  leftTextStyle: PropTypes.any,
+  rightTextStyle: PropTypes.any,
+  containerStyle: PropTypes.any,
+  className: PropTypes.any,
+};

src/components/CheckBox/Label.styled.js

@@ -0,0 +1,32 @@
+import { Box, FormLabel } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../themes";
+
+export const LabelContainer = styled(Box)`
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    max-width: ${props => props.maxWidth};
+`
+
+export const LeftLabel = styled(FormLabel)`
+    font-family: "Open Sans";
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    flex: 1;
+    cursor: pointer;
+    color: ${selectedTheme.primaryText};
+`
+export const RightLabel = styled(FormLabel)`
+    margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100px;
+    cursor: pointer;
+    color: ${selectedTheme.primaryText};
+    font-family: "Open Sans";
+
+`

src/components/Dropdown/DropdownItem/DropdownItem.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { DropdownItemContainer, DropdownItemStyled } from './DropdownItem.styled'
+
+const DropdownItem = (props) => {
+  return (
+    <DropdownItemContainer onClick={props.onClick}>
+        <DropdownItemStyled>
+            {props.children}
+        </DropdownItemStyled>
+    </DropdownItemContainer>
+  )
+}
+
+DropdownItem.propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+}
+
+export default DropdownItem;

src/components/Dropdown/DropdownItem/DropdownItem.styled.js

@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const DropdownItemContainer = styled(Box)`
+`
+
+export const DropdownItemStyled = styled(Box)`
+    font-family: "Open Sans";
+`

src/components/Dropdown/DropdownList/DropdownList.js

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import {
+  DropdownListContainer,
+  DropdownHeader,
+  DropdownIcon,
+  DropdownTitle,
+  ListContainer,
+  ToggleIconClosed,
+  ToggleIconOpened,
+  DropdownOptions,
+  ToggleContainer,
+} from "./DropdownList.styled";
+import PropTypes from "prop-types";
+
+const DropdownList = (props) => {
+  const [listShown, setListShown] = useState(props.defaultOpen);
+  const handleShow = () => {
+    if (props.setIsOpened) {
+      props.setIsOpened(!listShown);
+    }
+    setListShown((prevState) => !prevState);
+  };
+  return (
+    <DropdownListContainer fullwidth={props.fullWidth ? 1 : 0}>
+      <DropdownHeader>
+        {props.dropdownIcon && (
+          <DropdownIcon onClick={() => handleShow()}>
+            {props.dropdownIcon}
+          </DropdownIcon>
+        )}
+        <DropdownTitle onClick={() => handleShow()} textcolor={props.textcolor}>
+          {props.title}
+        </DropdownTitle>
+        {listShown ? (
+          <ToggleIconOpened
+            style={props.toggleIconStyles}
+            onClick={() => handleShow()}
+          >
+            {props.toggleIconOpened}
+          </ToggleIconOpened>
+        ) : (
+          <ToggleIconClosed
+            style={props.toggleIconStyles}
+            onClick={() => handleShow()}
+          >
+            {props.toggleIconClosed}
+          </ToggleIconClosed>
+        )}
+      </DropdownHeader>
+      <ToggleContainer shouldShow={listShown}>
+        <DropdownOptions>{props.headerOptions}</DropdownOptions>
+        <ListContainer>{props.children}</ListContainer>
+      </ToggleContainer>
+    </DropdownListContainer>
+  );
+};
+
+export default DropdownList;
+
+DropdownList.propTypes = {
+  title: PropTypes.string,
+  dropdownIcon: PropTypes.node,
+  toggleIconOpened: PropTypes.node,
+  toggleIconClosed: PropTypes.node,
+  children: PropTypes.node,
+  fullWidth: PropTypes.bool,
+  defaultOpen: PropTypes.bool,
+  toggleIconStyles: PropTypes.any,
+  headerOptions: PropTypes.node,
+  textcolor: PropTypes.string,
+  setIsOpened: PropTypes.func,
+};
+
+DropdownList.defaultProps = {
+  fullWidth: false,
+  defaultOpen: false,
+};

src/components/Dropdown/DropdownList/DropdownList.styled.js

@@ -0,0 +1,66 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { IconButton } from "../../Buttons/IconButton/IconButton";
+
+export const DropdownListContainer = styled(Box)`
+  width: ${(props) =>
+    props.fullwidth ? "100%" : props.width ? props.width : "250px"};
+  padding: 8px 0;
+`;
+
+export const DropdownTitle = styled(Typography)`
+  display: flex;
+  flex: 1;
+  cursor: pointer;
+  padding-left: 9px;
+  font-size: 16px;
+  font-weight: 400;
+  padding-bottom: 10px;
+  padding-top: 5px;
+  padding-right: 0.9rem;
+  font-family: "Open Sans";
+  color: ${props => props.textcolor ? props.textcolor : selectedTheme.primaryText};
+`;
+
+export const ToggleIconOpened = styled(IconButton)`
+  cursor: pointer;
+  color: ${selectedTheme.primaryPurple};
+  & span {
+    ${props => props.backgroundColor ? `background-color: ${props.backgroundColor}` : ``}
+  }
+`;
+
+export const ToggleIconClosed = styled(IconButton)`
+  cursor: pointer;
+  color: ${selectedTheme.primaryPurple};
+  & span {
+    ${props => props.backgroundColor ? `background-color: ${props.backgroundColor}` : ``}
+  }
+`;
+
+export const DropdownIcon = styled(IconButton)`
+  font-size: 22px !important;
+
+  & span {
+    font-size: 22px;
+    & svg {
+      font-size: 22px;
+    }
+  }
+`;
+
+export const ListContainer = styled(Box)`
+  padding-left: 15px;
+  margin-left: 15px;
+`;
+
+export const DropdownHeader = styled(Box)`
+  display: flex;
+  flex-direction: row;
+`;
+export const DropdownOptions = styled(Box)`
+`;
+export const ToggleContainer = styled(Box)`
+  display: ${(props) => (props.shouldShow ? "block" : "none")};
+`;

src/components/Header/Header.js

@@ -1,13 +1,21 @@
 import React, { useState, useMemo } from "react";
-import { HeaderContainer, SearchInput } from "./Header.styled";
+import {
+  AddOfferButton,
+  DrawerContainer,
+  LogoContainer,
+  SearchIcon,
+  SearchInput,
+  ToggleDrawerButton,
+  ToolsButtonsContainer,
+  ToolsContainer,
+  UserButton,
+  UserName,
+} from "./Header.styled";
 import {
   AppBar,
   Badge,
-  Box,
-  IconButton,
   Toolbar,
   useMediaQuery,
-  SvgIcon,
   Typography,
 } from "@mui/material";
 import { useTheme } from "@mui/system";
@@ -15,18 +23,21 @@ import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
 import MailIcon from "@mui/icons-material/EmailOutlined";
 import Autorenew from "@mui/icons-material/Autorenew";
 import AccountCircle from "@mui/icons-material/PersonOutlineOutlined";
-import SearchIcon from "@mui/icons-material/Search";
 import Drawer from "../MUI/DrawerComponent";
 import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton";
-import { PRIMARY_YELLOW_COLOR } from "../../constants/stylesConstants";
-import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
-import PopoverComponent from "./PopoverComponent";
+import PopoverComponent from "../Popovers/PopoverComponent";
 import { MyPosts } from "../Popovers/MyPosts/MyPosts";
 import { MyMessages } from "../Popovers/MyMessages/MyMessages";
 import { MyProfile } from "../Popovers/MyProfile/MyProfile";
+import { ReactComponent as LogoHorizontal } from "../../assets/images/svg/logo-horizontal.svg";
+import selectedTheme from "../../themes";
+import { useTranslation } from "react-i18next";
+import { IconButton } from "../Buttons/IconButton/IconButton";
+import { Icon } from "../Icon/Icon";
 
 const Header = () => {
   const [openDrawer, setOpenDrawer] = useState(false);
+  const { t } = useTranslation();
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("md"));
 
@@ -45,27 +56,19 @@ const Header = () => {
 
   const drawerContent = useMemo(
     () => (
-      <HeaderContainer>
+      <DrawerContainer>
         <PrimaryButton
           type="submit"
           variant="contained"
           height="36px"
           fullWidth
-          buttonColor={PRIMARY_YELLOW_COLOR}
-          textColor="black"
+          buttoncolor={selectedTheme.primaryYellow}
+          textcolor="black"
           onClick={() => handleToggleDrawer()}
         >
-          DODAJ PROIZVOD
+          {t("header.addOffer")}
         </PrimaryButton>
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "start",
-            mt: 3,
-          }}
-        >
+        <ToolsContainer mobile>
           <IconButton
             onClick={(e) => {
               setPostsPopoverOpen(true);
@@ -98,8 +101,8 @@ const Header = () => {
             <AccountCircle />
             <Typography sx={{ ml: 2 }}>Moj profil</Typography>
           </IconButton>
-        </Box>
-      </HeaderContainer>
+        </ToolsContainer>
+      </DrawerContainer>
     ),
     [handleToggleDrawer]
   );
@@ -108,128 +111,57 @@ const Header = () => {
     <AppBar
       elevation={0}
       positionFixed
-      sx={{ backgroundColor: "background.default", px: 4, py: 1 }}
+      sx={{ backgroundColor: "white"}}
     >
       <Toolbar>
-        <Box
-          component="div"
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            width: "100%",
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <SvgIcon sx={{ overflow: "visible", width: "81%", mb: 2.7 }}>
-              <svg
-                width="129"
-                height="53"
-                viewBox="0 0 129 53"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M65.864 17.896H74.63V19.912H71.246V31H69.158V19.912H65.864V17.896ZM77.6259 23.386L77.8059 25.546L77.7339 25.24C77.9499 24.784 78.2439 24.394 78.6159 24.07C78.9999 23.734 79.3899 23.482 79.7859 23.314C80.1819 23.134 80.5059 23.044 80.7579 23.044L80.6679 25.06C80.0919 25.012 79.5879 25.12 79.1559 25.384C78.7359 25.636 78.4059 25.972 78.1659 26.392C77.9379 26.812 77.8239 27.256 77.8239 27.724V31H75.8079V23.386H77.6259ZM85.8146 31.198C85.0946 31.198 84.4406 31.048 83.8526 30.748C83.2766 30.448 82.8206 30.004 82.4846 29.416C82.1486 28.816 81.9806 28.078 81.9806 27.202C81.9806 26.338 82.1546 25.6 82.5026 24.988C82.8626 24.364 83.3306 23.884 83.9066 23.548C84.4946 23.212 85.1306 23.044 85.8146 23.044C86.5466 23.044 87.1346 23.188 87.5786 23.476C88.0346 23.764 88.3886 24.106 88.6406 24.502L88.5326 24.79L88.7306 23.386H90.5846V31H88.5686V29.146L88.7666 29.632C88.7186 29.704 88.6226 29.824 88.4786 29.992C88.3346 30.148 88.1366 30.322 87.8846 30.514C87.6326 30.706 87.3326 30.868 86.9846 31C86.6486 31.132 86.2586 31.198 85.8146 31.198ZM86.3726 29.542C86.7326 29.542 87.0566 29.476 87.3446 29.344C87.6446 29.212 87.8966 29.026 88.1006 28.786C88.3166 28.546 88.4726 28.258 88.5686 27.922V26.266C88.4726 25.954 88.3166 25.684 88.1006 25.456C87.8846 25.216 87.6206 25.03 87.3086 24.898C87.0086 24.766 86.6726 24.7 86.3006 24.7C85.8926 24.7 85.5146 24.802 85.1666 25.006C84.8186 25.21 84.5366 25.492 84.3206 25.852C84.1166 26.212 84.0146 26.626 84.0146 27.094C84.0146 27.55 84.1226 27.964 84.3386 28.336C84.5546 28.708 84.8426 29.002 85.2026 29.218C85.5626 29.434 85.9526 29.542 86.3726 29.542ZM95.1864 23.386L95.3664 24.934L95.2944 24.808C95.5824 24.256 95.9724 23.824 96.4644 23.512C96.9684 23.2 97.5504 23.044 98.2104 23.044C98.6304 23.044 99.0024 23.11 99.3264 23.242C99.6504 23.374 99.9204 23.56 100.136 23.8C100.364 24.04 100.514 24.34 100.586 24.7L100.478 24.736C100.79 24.22 101.192 23.812 101.684 23.512C102.176 23.2 102.698 23.044 103.25 23.044C103.994 23.044 104.588 23.26 105.032 23.692C105.476 24.112 105.704 24.658 105.716 25.33V31H103.718V26.122C103.706 25.75 103.628 25.444 103.484 25.204C103.34 24.952 103.07 24.814 102.674 24.79C102.242 24.79 101.87 24.928 101.558 25.204C101.246 25.468 101 25.816 100.82 26.248C100.652 26.668 100.568 27.118 100.568 27.598V31H98.5344V26.122C98.5224 25.75 98.4384 25.444 98.2824 25.204C98.1264 24.952 97.8504 24.814 97.4544 24.79C97.0344 24.79 96.6684 24.928 96.3564 25.204C96.0444 25.468 95.8044 25.816 95.6364 26.248C95.4684 26.668 95.3844 27.112 95.3844 27.58V31H93.3684V23.386H95.1864ZM113.112 31.198C112.584 31.198 112.074 31.084 111.582 30.856C111.09 30.628 110.694 30.316 110.394 29.92L110.502 29.308V34.654H108.486V23.242H110.232L110.502 25.006L110.322 24.466C110.694 24.058 111.144 23.722 111.672 23.458C112.212 23.182 112.818 23.044 113.49 23.044C114.21 23.044 114.852 23.212 115.416 23.548C115.98 23.884 116.424 24.364 116.748 24.988C117.084 25.6 117.252 26.326 117.252 27.166C117.252 28.006 117.072 28.726 116.712 29.326C116.352 29.926 115.86 30.388 115.236 30.712C114.612 31.036 113.904 31.198 113.112 31.198ZM112.716 29.596C113.16 29.596 113.568 29.494 113.94 29.29C114.324 29.086 114.63 28.804 114.858 28.444C115.086 28.072 115.2 27.658 115.2 27.202C115.2 26.722 115.092 26.302 114.876 25.942C114.672 25.57 114.39 25.282 114.03 25.078C113.682 24.862 113.292 24.754 112.86 24.754C112.464 24.754 112.11 24.82 111.798 24.952C111.486 25.084 111.222 25.276 111.006 25.528C110.79 25.768 110.622 26.056 110.502 26.392V27.922C110.586 28.246 110.73 28.534 110.934 28.786C111.138 29.038 111.396 29.236 111.708 29.38C112.02 29.524 112.356 29.596 112.716 29.596ZM122.588 31.198C121.868 31.198 121.214 31.048 120.626 30.748C120.05 30.448 119.594 30.004 119.258 29.416C118.922 28.816 118.754 28.078 118.754 27.202C118.754 26.338 118.928 25.6 119.276 24.988C119.636 24.364 120.104 23.884 120.68 23.548C121.268 23.212 121.904 23.044 122.588 23.044C123.32 23.044 123.908 23.188 124.352 23.476C124.808 23.764 125.162 24.106 125.414 24.502L125.306 24.79L125.504 23.386H127.358V31H125.342V29.146L125.54 29.632C125.492 29.704 125.396 29.824 125.252 29.992C125.108 30.148 124.91 30.322 124.658 30.514C124.406 30.706 124.106 30.868 123.758 31C123.422 31.132 123.032 31.198 122.588 31.198ZM123.146 29.542C123.506 29.542 123.83 29.476 124.118 29.344C124.418 29.212 124.67 29.026 124.874 28.786C125.09 28.546 125.246 28.258 125.342 27.922V26.266C125.246 25.954 125.09 25.684 124.874 25.456C124.658 25.216 124.394 25.03 124.082 24.898C123.782 24.766 123.446 24.7 123.074 24.7C122.666 24.7 122.288 24.802 121.94 25.006C121.592 25.21 121.31 25.492 121.094 25.852C120.89 26.212 120.788 26.626 120.788 27.094C120.788 27.55 120.896 27.964 121.112 28.336C121.328 28.708 121.616 29.002 121.976 29.218C122.336 29.434 122.726 29.542 123.146 29.542Z"
-                  fill="#5A3984"
-                />
-                <rect
-                  x="17.5078"
-                  width="24.7529"
-                  height="24.7529"
-                  rx="6.3546"
-                  transform="rotate(45 17.5078 0)"
-                  fill="#5A3984"
-                />
-                <rect
-                  x="35.0078"
-                  y="17.5032"
-                  width="24.7529"
-                  height="24.7529"
-                  rx="6.3546"
-                  transform="rotate(45 35.0078 17.5032)"
-                  fill="#FEB005"
-                />
-                <circle
-                  cx="29.5859"
-                  cy="22.7096"
-                  r="4.85659"
-                  transform="rotate(45 29.5859 22.7096)"
-                  fill="#FEB005"
-                />
-                <circle
-                  cx="22.8281"
-                  cy="29.6886"
-                  r="4.85659"
-                  transform="rotate(45 22.8281 29.6886)"
-                  fill="#5A3984"
-                />
-              </svg>
-            </SvgIcon>
-          </Box>
-          {matches ? (
+        <ToolsContainer>
+          <LogoContainer>
+            <LogoHorizontal />
+          </LogoContainer>
+          {matches && (
             <Drawer
               open={openDrawer}
               toggleOpen={handleToggleDrawer}
               content={drawerContent}
             />
-          ) : (
-            <></>
           )}
           <SearchInput
             fullWidth
-            endAdornment={<SearchIcon />}
-            size="small"
-            label="Pretražite proizvode..."
-            id="fullWidth"
-          />
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
+            InputProps={{
+              startAdornment: (
+                <Icon size="36px">
+                  <SearchIcon />
+                </Icon>
+              ),
             }}
-          >
+            label={t("header.searchOffers")}
+          />
+          <ToolsButtonsContainer mobile={matches}>
             {matches ? (
-              <Box>
+              <ToggleDrawerButton>
                 <IconButton onClick={handleToggleDrawer}>
                   <MenuOutlinedIcon />
                 </IconButton>
-              </Box>
+              </ToggleDrawerButton>
             ) : (
-              <Box
-                sx={{
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <PrimaryButton
+              <React.Fragment>
+                <AddOfferButton
                   type="submit"
                   variant="contained"
-                  height="36px"
                   fullWidth
-                  buttonColor={PRIMARY_YELLOW_COLOR}
-                  textColor="black"
+                  buttoncolor={selectedTheme.primaryYellow}
+                  textcolor={selectedTheme.primaryDarkText}
                 >
-                  DODAJ PROIZVOD
-                </PrimaryButton>
+                  {t("header.addOffer")}
+                </AddOfferButton>
                 <IconButton
                   onClick={(e) => {
                     setPostsPopoverOpen(true);
                     setPostsAnchorEl(e.currentTarget);
                   }}
-                  sx={{
-                    ml: 4,
-                    mr: 2,
-                    background: "#E4E4E4",
-                    color: PRIMARY_PURPLE_COLOR,
+                  style={{
+                    background: selectedTheme.primaryIconBackgroundColor,
+                    color: selectedTheme.primaryPurple,
                   }}
                 >
                   <Autorenew />
@@ -239,29 +171,35 @@ const Header = () => {
                     setMsgPopoverOpen(true);
                     setMsgAnchorEl(e.currentTarget);
                   }}
-                  sx={{
-                    mr: 2,
-                    background: "#E4E4E4",
-                    color: PRIMARY_PURPLE_COLOR,
+                  style={{
+                    background: selectedTheme.primaryIconBackgroundColor,
+                    color: selectedTheme.primaryPurple,
                   }}
                 >
                   <Badge badgeContent={3} color="primary">
                     <MailIcon />
                   </Badge>
                 </IconButton>
-                <IconButton
-                  onClick={(e) => {
-                    setUserPopoverOpen(true);
-                    setUserAnchorEl(e.currentTarget);
-                  }}
-                  sx={{ background: "#E4E4E4", color: PRIMARY_PURPLE_COLOR }}
-                >
-                  <AccountCircle />
-                </IconButton>
-              </Box>
+                <UserButton onClick={(e) => {
+                      setUserPopoverOpen(true);
+                      setUserAnchorEl(e.currentTarget);
+                    }}>
+                  <UserName>
+                    Username korisnika
+                  </UserName>
+                  <IconButton
+                    style={{
+                      background: selectedTheme.primaryIconBackgroundColor,
+                      color: selectedTheme.primaryPurple,
+                    }}
+                  >
+                    <AccountCircle />
+                  </IconButton>
+                </UserButton>
+              </React.Fragment>
             )}
-          </Box>
-        </Box>
+          </ToolsButtonsContainer>
+        </ToolsContainer>
       </Toolbar>
       <PopoverComponent
         anchorEl={postsAnchorEl}

src/components/Header/Header.styled.js

@@ -1,24 +1,90 @@
-import { Box, TextField } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
+import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton";
+import { TextField } from "../TextFields/TextField/TextField";
+import { ReactComponent as Search } from "../../assets/images/svg/magnifying-glass.svg";
+import selectedTheme from "../../themes";
 
 export const SearchInput = styled(TextField)`
   margin-left: 3.8rem;
   background-color: #f4f4f4;
   width: 45%;
-  max-width: 100%;
+  max-width: 520px;
+  margin-right: 30px;
+  font-family: "Open Sans";
   @media (max-width: 1100px) {
     width: 36%;
   }
-  @media (max-width: 900px) {
+  @media (max-width: 1000px) {
     width: 54%;
+    margin-left: 2.8rem;
+    margin-right: 10px;
   }
   @media (max-width: 600px) {
-    width: 36%;
+    width: 60%;
+    margin-left: 2rem;
   }
 `;
-export const HeaderContainer = styled(Box)`
+export const DrawerContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin: 25px;
+  & div {
+    flex-direction: column;
+  }
+`;
+export const ToolsContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: ${(props) => (props.mobile ? "center" : "space-between")};
+  align-items: ${(props) => (props.mobile ? "start" : "center")};
+  ${(props) => !props.mobile && `width: 100%;`}
+  & div button {
+    ${props => props.mobile && `width: auto;`}
+  }
+`;
+export const LogoContainer = styled(Box)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ToolsButtonsContainer = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  min-width: ${props => props.mobile ? "40px" : "600px"};
+  align-items: center;
+  flex-wrap: nowrap;
+`;
+export const ToggleDrawerButton = styled(Box)`
+  max-width: 40px;
+`;
+export const AddOfferButton = styled(PrimaryButton)`
+  height: 49px;
+  width: 180px;
+  font-weight: 600;
+`;
+export const SearchIcon = styled(Search)`
+  position: relative;
+  top: 11px;
+  left: 4px;
+  color: ${selectedTheme.primaryPurple};
+  & path {
+    width: 18px;
+    height: 18px;
+  }
+`;
+export const UserButton = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+`;
+export const UserName = styled(Typography)`
+  color: ${selectedTheme.primaryPurple};
+  padding-top: 5px;
+  padding-right: 10px;
+  font-family: "Open Sans";
+  font-weight: 600;
+  white-space: nowrap;
 `;

src/components/Header/PopoverComponent.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box, Popover } from '@mui/material';
-
-const PopoverComponent = ({ open, anchorEl, onClose, content }) => {
-	const handleClose = () => {
-		onClose();
-	};
-
-	return (
-		<Box component="div">
-			<Popover
-				sx={{ p: 5 }}
-				open={open}
-				anchorEl={anchorEl}
-				onClose={handleClose}
-				anchorOrigin={{
-					vertical: 'bottom',
-					horizontal: 'left',
-				}}
-			>
-				{content}
-			</Popover>
-		</Box>
-	);
-};
-
-PopoverComponent.propTypes = {
-	anchorEl: PropTypes.object,
-	open: PropTypes.bool.isRequired,
-	onClose: PropTypes.func.isRequired,
-	content: PropTypes.any,
-};
-
-export default PopoverComponent;

src/components/Icon/Icon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconContainer, IconStyled } from './Icon.styled';
+import PropTypes from "prop-types";
+
+
+export const Icon = (props) => {
+  return (
+    <IconContainer style={props.containerStyle} className={props.className} onClick={props.onClick} component={props.component}>
+        <IconStyled sx={props.style} color={props.color} size={props.size} fontSize={props.iconsize}>
+            {props.children}
+        </IconStyled>
+    </IconContainer>
+  )
+}
+
+Icon.propTypes = {
+    children: PropTypes.node,
+    containerStyle: PropTypes.any,
+    style: PropTypes.any,
+    color: PropTypes.string,
+    size: PropTypes.string,
+    iconsize: PropTypes.string,
+    className: PropTypes.any,
+    onClick: PropTypes.func,
+    component: PropTypes.any,
+}

src/components/Icon/Icon.styled.js

@@ -0,0 +1,15 @@
+import { Box, Icon } from "@mui/material";
+import styled from "styled-components";
+
+export const IconContainer = styled(Box)`
+    
+`
+
+export const IconStyled = styled(Icon)`
+    color: ${props => props.color};
+    width: ${props => props.size};
+    height: ${props => props.size};
+    & svg path {
+        stroke: ${props => props.color};
+    }
+`

src/components/Icon/IconWithNumber/IconWithNumber.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { IconWithNumberContainer, Number } from './IconWithNumber.styled'
+
+const IconWithNumber = (props) => {
+  return (
+    <IconWithNumberContainer>
+        {props.children}
+        {props.number > 0 && <Number>{props.number}</Number>}
+    </IconWithNumberContainer>
+  )
+}
+
+IconWithNumber.propTypes = {
+    children: PropTypes.node,
+    number: PropTypes.number,
+}
+
+export default IconWithNumber

src/components/Icon/IconWithNumber/IconWithNumber.styled.js

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+export const IconWithNumberContainer = styled(Box)`
+    position: relative;
+`
+export const Number = styled(Box)`
+    background-color: ${selectedTheme.primaryPurple};
+    border-radius: 100%;
+    color: white;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    bottom: 0;
+    right: -5px;
+    font-family: "Open Sans";
+`

src/components/ImagePicker/ImagePicker.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import {
+  AddFile,
+  AddIcon,
+  ImageOverlay,
+  ImagePickerContainer,
+  ImageUploaded,
+  Tools,
+} from "./ImagePicker.styled";
+import { IconButton } from "../Buttons/IconButton/IconButton";
+import { ReactComponent as EditIcon } from "../../assets/images/svg/edit.svg";
+import { ReactComponent as TrashIcon } from "../../assets/images/svg/trash.svg";
+
+// import { Input } from "@mui/material";
+
+const ImagePicker = (props) => {
+  const fileInputRef = useRef(null);
+  const imageRef = useRef(null);
+  const [image, setImage] = useState("");
+  const [isEditing, setIsEditing] = useState(false);
+
+  let listener;
+  useEffect(() => {
+    listener = (event) => {
+      if (imageRef.current) {
+        if (imageRef.current.contains(event.target)) {
+          setIsEditing(true);
+        } else {
+          setIsEditing(false);
+        }
+      }
+    };
+    window.addEventListener("click", listener);
+    return () => window.removeEventListener("click", listener);
+  }, [imageRef]);
+
+  const handleChange = () => {
+    fileInputRef.current.value = "";
+    fileInputRef.current.click();
+  };
+  const handleImage = (event) => {
+    let reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]);
+    reader.onload = () => {
+      if (props.setImage) props.setImage(reader.result);
+      setImage(reader.result);
+    };
+    reader.onerror = (error) => {
+      console.log(error);
+    };
+  };
+
+  const handleDelete = () => {
+    if (props.deleteImage) props.deleteImage();
+    setImage("");
+    setIsEditing(false);
+  };
+  return (
+    <ImagePickerContainer
+      className={props.className}
+      onClick={!image ? handleChange : () => {}}
+      hasImage={props.image}
+    >
+      <AddFile type="file" ref={fileInputRef} onInput={handleImage} />
+      {image ? (
+        <React.Fragment>
+          <ImageUploaded src={image} draggable={false} ref={imageRef} />
+          {isEditing && (
+            <React.Fragment>
+              <ImageOverlay />
+              <Tools showDeleteIcon={props.showDeleteIcon}>
+                <IconButton onClick={handleChange}>
+                  <EditIcon />
+                </IconButton>
+                {props.showDeleteIcon && (
+                  <IconButton onClick={handleDelete}>
+                    <TrashIcon />
+                  </IconButton>
+                )}
+              </Tools>
+            </React.Fragment>
+          )}
+        </React.Fragment>
+      ) : (
+        <AddIcon />
+      )}
+      {props.children}
+    </ImagePickerContainer>
+  );
+};
+
+ImagePicker.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  setImage: PropTypes.func,
+  image: PropTypes.func,
+  deleteImage: PropTypes.func,
+  showDeleteIcon: PropTypes.bool,
+};
+
+export default ImagePicker;

src/components/ImagePicker/ImagePicker.styled.js

@@ -0,0 +1,111 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../themes";
+import { ReactComponent as Plus } from "../../assets/images/svg/plus.svg";
+import { ReactComponent as TrashIcon } from "../../assets/images/svg/trash.svg";
+
+export const ImagePickerContainer = styled(Box)`
+  flex: 1;
+  display: flex;
+  flex-basis: 144px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 144px;
+  width: 144px;
+  margin: 0 9px;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+  background-color: ${selectedTheme.imagePickerBackground};
+  background-image: linear-gradient(
+      to right,
+      ${selectedTheme.primaryPurple} 50%,
+      rgba(255, 255, 255, 0) 0%
+    ),
+    linear-gradient(
+      ${selectedTheme.primaryPurple} 50%,
+      rgba(255, 255, 255, 0) 0%
+    ),
+    linear-gradient(
+      to right,
+      ${selectedTheme.primaryPurple} 50%,
+      rgba(255, 255, 255, 0) 0%
+    ),
+    linear-gradient(
+      ${selectedTheme.primaryPurple} 50%,
+      rgba(255, 255, 255, 0) 0%
+    );
+  background-position: bottom, right, top, left;
+  background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px;
+  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
+  &:first-of-type {
+    margin-left: 0;
+  }
+  &:last-of-type {
+    margin-right: 0;
+  }
+  ${(props) =>
+    props.hasImage &&
+    `
+    background-image: none;
+    border: 1px solid ${selectedTheme.primaryPurple};
+  `}
+`;
+export const AddIcon = styled(Plus)`
+  margin: auto;
+  z-index: 1;
+  width: 60px;
+  height: 60px;
+`;
+export const AddFile = styled.input`
+  display: none;
+`;
+export const ImageUploaded = styled.img`
+  width: 144px;
+  height: 144px;
+  border-radius: 100px;
+  object-fit: scale-down;
+  z-index: 1;
+`;
+export const ImageOverlay = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  z-index: 3;
+  overflow: hidden;
+`
+export const Tooltip = styled(Box)`
+  background-color: rgba(255, 255, 255, 0.5);
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  left: 0;
+  top: 0;
+`;
+export const Trash = styled(TrashIcon)`
+  cursor: pointer;
+  margin: auto;
+  width: 22px;
+  height: 22px;
+  & path {
+    stroke: white;
+  }
+`;
+export const Tools = styled(Box)`
+  position: absolute;
+  padding-top: 44px;
+  padding-left: ${props => props.showDeleteIcon ? "16px" : "45px"};
+  z-index: 4;
+  flex-direction: row;
+  display: flex;
+  & div {
+    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    border-radius: 100px;
+    display: flex;
+    flex: 1;
+    margin: 10px;
+  }
+`;

src/components/Link/Link.js

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { LinkStyled } from "./Link.styled";
+
+const Link = (props) => {
+  return (
+    <LinkStyled {...props} href={props.href} onClick={props.onClick}>
+      {props.children}
+    </LinkStyled>
+  );
+};
+
+Link.propTypes = {
+  href: PropTypes.string,
+  children: PropTypes.node,
+  font: PropTypes.string,
+  align: PropTypes.oneOf(["left", "right", "center"]),
+  textsize: PropTypes.string,
+  lineheight: PropTypes.string,
+  onClick: PropTypes.func,
+};
+Link.defaultProps = {
+  font: "Poppins",
+  align: "left",
+  textsize: "14px",
+};
+
+export default Link;

src/components/Link/Link.styled.js

@@ -0,0 +1,18 @@
+import { Link } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../themes";
+
+export const LinkStyled = styled(Link)`
+  cursor: pointer;
+  color: ${selectedTheme.primaryPurple};
+  font-family: ${(props) => props.font};
+  font-style: normal;
+  font-weight: 400;
+  font-size: ${props => props.textsize ? props.textsize : "14px"};
+  line-height: ${props => props.lineheight ? props.lineheight : "14px"};
+  text-decoration-line: underline;
+  display: block;
+  text-align: ${props => props.align === "right" ? "right" : (props.align === "center" ? "center" : "left")};
+  /* ${props => props.align === "right" && "display: block; text-align: right;"}
+  ${props => props.align === "center" && "display: block; text-align: center;"} */
+`;

src/components/Loader/FullPageLoader.js

@@ -1,10 +1,12 @@
-import React from 'react';
+import React from "react";
+import { ReactComponent as Logo } from "../../assets/images/svg/big-logo-vertical.svg";
+import { FullPageLoaderContainer } from "./FullPageLoader.styled";
 
 const FullPageLoader = () => {
   return (
-    <div className="c-loader c-loader--page">
-      <div className="c-loader__icon" />
-    </div>
+    <FullPageLoaderContainer>
+      <Logo />
+    </FullPageLoaderContainer>
   );
 };
 

src/components/Loader/FullPageLoader.styled.js

@@ -0,0 +1,10 @@
+
+import { Container } from "@mui/material";
+import styled from "styled-components";
+
+export const FullPageLoaderContainer = styled(Container)`
+    height: 100%;
+    width: 100vw;
+    padding-top: 250px;
+    text-align: center;
+`

src/components/MUI/DialogComponent.js

@@ -49,7 +49,7 @@ DialogComponent.propTypes = {
 	open: PropTypes.bool.isRequired,
 	content: PropTypes.any,
 	onClose: PropTypes.func.isRequired,
-	maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+	maxWidth: PropTypes.any,
 	fullWidth: PropTypes.bool,
 	responsive: PropTypes.bool,
 };

src/components/Popovers/HeaderPopover/HeaderPopover.js

@@ -0,0 +1,60 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+    EyeIcon,
+  HeaderPopoverContainer,
+  PopoverButton,
+  PopoverList,
+  PopoverListItem,
+  PopoverListItemAvatar,
+  PopoverListItemAvatarContainer,
+  PopoverListItemProfileAvatar,
+  PopoverListItemTextContainer,
+  PopoverTitle,
+} from "./HeaderPopover.styled";
+import selectedTheme from "../../../themes";
+
+const HeaderPopover = (props) => {
+  return (
+    <HeaderPopoverContainer>
+      <PopoverTitle p={2}>{props.title}</PopoverTitle>
+      <PopoverList>
+        {props.items.map((item, index) => (
+          <PopoverListItem key={index}>
+            <PopoverListItemAvatarContainer>
+                {props.isProfile ? (
+                    <PopoverListItemProfileAvatar alt={item.alt} src={item.src} />
+                ) : (
+                    <PopoverListItemAvatar alt={item.alt} src={item.src} />
+                )}
+            </PopoverListItemAvatarContainer>
+            <PopoverListItemTextContainer
+                primary={item.title}
+                secondary={item.text}
+            >
+            </PopoverListItemTextContainer>
+          </PopoverListItem>
+        ))}
+      </PopoverList>
+      <PopoverButton
+        sx={{
+            mr: 2,
+            mb: 2,
+        }}
+        variant="text"
+        endIcon={<EyeIcon color={selectedTheme.iconYellowColor} />}
+      >
+        {props.buttonText}
+      </PopoverButton>
+    </HeaderPopoverContainer>
+  );
+};
+
+HeaderPopover.propTypes = {
+  title: PropTypes.string,
+  items: PropTypes.array,
+  buttonText: PropTypes.string,
+  isProfile: PropTypes.bool,
+};
+
+export default HeaderPopover;

src/components/Popovers/HeaderPopover/HeaderPopover.styled.js

@@ -0,0 +1,56 @@
+import { Avatar, Box, Button, List, ListItem, ListItemAvatar, ListItemText, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
+import { ProfileAvatar } from "../MyProfile/MyProfile.styled";
+
+
+export const HeaderPopoverContainer = styled(Box)`
+`
+export const PopoverTitle = styled(Typography)`
+    background-color: ${selectedTheme.primaryPurple};
+    color: white;
+    width: 100%;
+    min-width: 270px;
+    font-family: "Open Sans";
+`
+export const PopoverList = styled(List)`
+    width: 100%;
+    max-width: 360px;
+    background-color: "white";
+`
+export const PopoverListItem = styled(ListItem)`
+    align-items: flex-start;
+`
+export const PopoverListItemAvatar = styled(Avatar)`
+    position: relative;
+    top: 4px;
+`
+export const PopoverListItemProfileAvatar = styled(ProfileAvatar)`
+`
+export const PopoverListItemAvatarContainer = styled(ListItemAvatar)`
+`
+export const PopoverButton = styled(Button)`
+    text-decoration: underline;
+    float: right;
+    color: ${selectedTheme.primaryPurple};
+    font-weight: 500;
+`
+export const PopoverListItemTextContainer = styled(ListItemText)`
+    & span {
+        font-weight: 700;
+        color: ${selectedTheme.primaryPurple};
+    }
+    & p {
+        font-size: 0.81rem;
+        & svg {
+            position: relative;
+            top: 2px;
+        }
+    }
+`
+export const EyeIcon = styled(Eye)`
+    & path {
+        stroke: ${selectedTheme.primaryYellow};
+    }
+`

src/components/Popovers/MyMessages/MyMessages.js

@@ -1,84 +1,28 @@
 import React from "react";
-//import { SearchInput } from "./MyMessages.styled";
-import EyeOn from "@mui/icons-material/Visibility";
-import {
-  PRIMARY_PURPLE_COLOR,
-  PRIMARY_YELLOW_COLOR,
-} from "../../../constants/stylesConstants";
-import {
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Avatar,
-  Divider,
-  Typography,
-  Button,
-} from "@mui/material";
+import { useTranslation } from "react-i18next";
+import HeaderPopover from "../HeaderPopover/HeaderPopover";
+
+const dummyData1 = [
+  {
+    alt: "Remy Sharp",
+    src: "/static/images/avatar/1.jpg",
+    title: "Coca-Cola",
+    text: "Kompresor je stigao. Samo..."
+  },
+  {
+    alt: "Travis Howard",
+    src: "/static/images/avatar/2.jpg",
+    title: "Voda Vrnjci",
+    text: "Poslao sam vodu. Ukupno i..."
+  }
+]
 
 export const MyMessages = () => {
+  const {t} = useTranslation();
   return (
-    <>
-      <Typography
-        sx={{
-          p: 2,
-          background: PRIMARY_PURPLE_COLOR,
-          color: "white",
-          width: "100%",
-          minWidth: "270px"
-        }}
-      >
-        Moje poruke
-      </Typography>
-      <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
-        <ListItem alignItems="flex-start">
-          <ListItemAvatar>
-            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-          </ListItemAvatar>
-          <ListItemText
-            primaryTypographyProps={{
-              fontWeight: 700,
-              color: PRIMARY_PURPLE_COLOR,
-            }}
-            primary="Coca-Cola"
-            secondaryTypographyProps={{ fontSize: ".81rem" }}
-            secondary={
-              <React.Fragment>{"Kompresor je stigao. Samo..."}</React.Fragment>
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem alignItems="flex-start">
-          <ListItemAvatar>
-            <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
-          </ListItemAvatar>
-          <ListItemText
-            primaryTypographyProps={{
-              fontWeight: 700,
-              color: PRIMARY_PURPLE_COLOR,
-            }}
-            primary="Voda Vrnjci"
-            secondaryTypographyProps={{ fontSize: ".81rem" }}
-            secondary={
-              <React.Fragment>{"Poslao sam vodu. Ukupno i..."}</React.Fragment>
-            }
-          />
-        </ListItem>
-      </List>
-      <Button
-        variant="text"
-        endIcon={<EyeOn sx={{ color: PRIMARY_YELLOW_COLOR }} />}
-        sx={{
-          textDecoration: "underline",
-          float: "right",
-          mr: 2,
-          mb: 2,
-          color: PRIMARY_PURPLE_COLOR,
-          fontWeight: 500,
-        }}
-      >
-        Pogledaj sve
-      </Button>
-    </>
+    <HeaderPopover
+      title={t("header.myMessages")}
+      items={dummyData1}
+      buttonText={t("header.checkEverything")} />
   );
 };

src/components/Popovers/MyPosts/MyPosts.js

@@ -1,102 +1,29 @@
 import React from "react";
-import { PostsAvatar, PostsImgSuit } from "./MyPosts.styled";
-import EyeOn from "@mui/icons-material/Visibility";
-import {
-  PRIMARY_PURPLE_COLOR,
-  PRIMARY_YELLOW_COLOR,
-} from "../../../constants/stylesConstants";
-import {
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Divider,
-  Typography,
-  Button,
-  Grid,
-} from "@mui/material";
+import { PostsImgSuit } from "./MyPosts.styled";
+
+const dummyData2 = [
+  {
+    alt: "Remy Sharp",
+    src: "/static/images/avatar/1.jpg",
+    title: "Gitara",
+    text: (<React.Fragment><PostsImgSuit/> Player.rs</React.Fragment>)
+  },
+  {
+    alt: "Remy Sharp",
+    src: "/static/images/avatar/1.jpg",
+    title: "Gitara",
+    text: (<React.Fragment><PostsImgSuit/> Player.rs</React.Fragment>)
+  }
+]
+import HeaderPopover from "../HeaderPopover/HeaderPopover";
+import { useTranslation } from "react-i18next";
 
 export const MyPosts = () => {
+  const {t} = useTranslation();
   return (
-    <>
-      <Typography
-        sx={{
-          p: 2,
-          background: PRIMARY_PURPLE_COLOR,
-          color: "white",
-          width: "100%",
-          minWidth: "270px"
-        }}
-      >
-        Moje objave
-      </Typography>
-      <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
-        <ListItem alignItems="flex-start">
-          <ListItemAvatar>
-            <PostsAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-          </ListItemAvatar>
-          <ListItemText
-            primaryTypographyProps={{
-              fontWeight: 700,
-              color: PRIMARY_PURPLE_COLOR,
-            }}
-            primary="Gitara"
-            secondaryTypographyProps={{ fontSize: ".81rem" }}
-            secondary={
-              <Grid
-                container
-                direction="row"
-                justifyContent="start"
-                alignItems="center"
-                sx={{ fontFamily: "inherit" }}
-              >
-                <PostsImgSuit />
-                <React.Fragment>{"Player.rs"}</React.Fragment>
-              </Grid>
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem alignItems="flex-start">
-          <ListItemAvatar>
-            <PostsAvatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
-          </ListItemAvatar>
-          <ListItemText
-            primaryTypographyProps={{
-              fontWeight: 700,
-              color: PRIMARY_PURPLE_COLOR,
-            }}
-            primary="Kompresor"
-            secondaryTypographyProps={{ fontSize: ".81rem" }}
-            secondary={
-              <Grid
-                container
-                direction="row"
-                justifyContent="start"
-                alignItems="center"
-                sx={{ fontFamily: "inherit" }}
-              >
-                <PostsImgSuit />
-                <React.Fragment>{"Player.rs"}</React.Fragment>
-              </Grid>
-            }
-          />
-        </ListItem>
-      </List>
-      <Button
-        variant="text"
-        endIcon={<EyeOn sx={{ color: PRIMARY_YELLOW_COLOR }} />}
-        sx={{
-          textDecoration: "underline",
-          float: "right",
-          mr: 2,
-          mb: 2,
-          color: PRIMARY_PURPLE_COLOR,
-          fontWeight: 500
-        }}
-      >
-        Pogledaj sve
-      </Button>
-    </>
+    <HeaderPopover
+    title={t("header.myOffers")}
+    items={dummyData2}
+    buttonText={t("header.checkEverything")}/>
   );
 };

src/components/Popovers/MyProfile/MyProfile.js

@@ -1,75 +1,25 @@
 import React from "react";
-import { ProfileAvatar, ProfileImgPIB } from "./MyProfile.styled";
-import EyeOn from "@mui/icons-material/Visibility";
-import {
-  PRIMARY_PURPLE_COLOR,
-  PRIMARY_YELLOW_COLOR,
-} from "../../../constants/stylesConstants";
-import {
-  List,
-  ListItem,
-  ListItemAvatar,
-  Typography,
-  Button,
-  ListItemText,
-  Grid,
-} from "@mui/material";
+import { ProfileImgPIB } from "./MyProfile.styled";
+import HeaderPopover from "../HeaderPopover/HeaderPopover";
+import { useTranslation } from "react-i18next";
+
+const dummyData3 = [
+  {
+    alt: "Profile",
+    src: "/static/images/avatar/2.jpg",
+    title: "Player.rs",
+    text: <React.Fragment><ProfileImgPIB/> PIB - 1234567890 </React.Fragment>
+  },
+];
 
 export const MyProfile = () => {
+  const {t} = useTranslation();
   return (
-    <>
-      <Typography
-        sx={{
-          p: 2,
-          background: PRIMARY_PURPLE_COLOR,
-          color: "white",
-          width: "100%",
-          minWidth: "270px"
-        }}
-      >
-        Moj profil
-      </Typography>
-      <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
-        <ListItem alignItems="flex-start">
-          <ListItemAvatar>
-            <ProfileAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-          </ListItemAvatar>
-          <ListItemText
-            primaryTypographyProps={{
-              fontWeight: 700,
-              color: PRIMARY_PURPLE_COLOR,
-            }}
-            primary="Player.rs"
-            secondaryTypographyProps={{ fontSize: ".81rem" }}
-            secondary={
-              <Grid
-                container
-                direction="row"
-                justifyContent="start"
-                alignItems="center"
-                sx={{ fontFamily: "inherit" }}
-              >
-                <ProfileImgPIB />
-                <React.Fragment>{"PIB - 1234567890"}</React.Fragment>
-              </Grid>
-            }
-          />
-        </ListItem>
-      </List>
-      <Button
-        variant="text"
-        endIcon={<EyeOn sx={{ color: PRIMARY_YELLOW_COLOR }} />}
-        sx={{
-          textDecoration: "underline",
-          float: "right",
-          mr: 2,
-          mb: 2,
-          color: PRIMARY_PURPLE_COLOR,
-          fontWeight: 500,
-        }}
-      >
-        Pogledaj profil
-      </Button>
-    </>
+    <HeaderPopover
+      title={t("header.myProfile")}
+      items={dummyData3}
+      buttonText={t("header.checkProfile")}
+      isProfile
+    />
   );
 };

src/components/Popovers/PopoverComponent.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Popover } from "@mui/material";
+
+const PopoverComponent = ({ open, anchorEl, onClose, content }) => {
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={handleClose}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "left",
+      }}
+    >
+      {content}
+    </Popover>
+  );
+};
+
+PopoverComponent.propTypes = {
+  anchorEl: PropTypes.object,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  content: PropTypes.any,
+};
+
+export default PopoverComponent;

src/components/Radio/Button/RadioButton.js

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  FormControlLabelStyled,
+  RadioButtonContainer,
+  RadioButtonStyled,
+} from "./RadioButton.styled";
+import { ReactComponent as RadioChecked } from "../../../assets/images/svg/radio-checked.svg";
+import { ReactComponent as RadioUnchecked } from "../../../assets/images/svg/radio-unchecked.svg";
+import { Label } from "../../CheckBox/Label";
+
+const RadioButton = (props) => {
+  return (
+    <RadioButtonContainer fullwidth={props.fullWidth ? 1 : 0}>
+      <FormControlLabelStyled
+        value={props.value}
+        fullwidth={props.fullWidth ? 1 : 0}
+        control={
+          <RadioButtonStyled
+            icon={<RadioUnchecked />}
+            onChange={() => props.onChange(props.value)}
+            checkedIcon={<RadioChecked />}
+            checked={props.checked}
+          />
+        }
+        label={
+          <Label
+            leftText={props.label}
+            rightText={props.number}
+            onClick={() => props.onChange(props.value)}
+          />
+        }
+      />
+    </RadioButtonContainer>
+  );
+};
+
+RadioButton.propTypes = {
+  children: PropTypes.node,
+  value: PropTypes.number,
+  label: PropTypes.string,
+  number: PropTypes.number,
+  fullWidth: PropTypes.bool,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+RadioButton.defaultProps = {
+  fullWidth: false,
+};
+
+export default RadioButton;

src/components/Radio/Button/RadioButton.styled.js

@@ -0,0 +1,40 @@
+import { Box, FormControlLabel, Radio } from "@mui/material";
+import styled from "styled-components";
+
+export const RadioButtonContainer = styled(Box)`
+  ${(props) =>
+    props.fullwidth &&
+    `
+        width: 100%;
+        display: flex;
+        flex: 1;
+    `}
+`;
+export const RadioButtonStyled = styled(Radio)`
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-right: 9px;
+  width: 14px;
+  height: 14px;
+`;
+export const FormControlLabelStyled = styled(FormControlLabel)`
+  ${(props) =>
+    props.fullwidth &&
+    `
+        width: 100%;
+        display: flex;
+        flex: 1;
+    `}
+  margin-right: 0;
+  & label {
+    font-family: "Open Sans";
+    font-size: 12px;
+  }
+  & span:nth-child(1) svg {
+    width: 16px;
+    height: 16px;
+  }
+  & span:nth-child(2) {
+    flex: 1;
+  }
+`;

src/components/Radio/Group/RadioGroup.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { RadioGroupContainer } from './RadioGroup.styled'
+
+const RadioGroup = (props) => {
+  return (
+    <RadioGroupContainer onChange={props.onChange} value={props.value}>
+        {props.children}
+    </RadioGroupContainer>
+  )
+}
+
+RadioGroup.propTypes = {
+    children: PropTypes.node,
+    onChange: PropTypes.func,
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+}
+
+export default RadioGroup

src/components/Radio/Group/RadioGroup.styled.js

@@ -0,0 +1,7 @@
+import { RadioGroup } from "@mui/material";
+import styled from "styled-components";
+
+export const RadioGroupContainer = styled(RadioGroup)`
+    padding-left: 5px;
+    width: 100%;
+`

src/components/StepProgress/StepProgress.js

@@ -0,0 +1,55 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { StepProgressContainer, Progress, StepBar, StepLine } from "./StepProgress.styled";
+import { ReactComponent as Checkmark } from "../../assets/images/svg/checkmark.svg";
+
+const StepProgress = (props) => {
+  const steps = [];
+  for (let i = 1; i <= props.numberOfSteps; i++) {
+    steps.push({
+      done: i < props.current,
+      current: i === props.current,
+    });
+  }
+  const functions = [];
+  steps.forEach((item,index) => {
+    if (props.functions[index]) {
+      functions.push(props.functions[index])
+    } else {
+      functions.push(() => {})
+    }
+  })
+  return (
+    <StepProgressContainer done>
+      {steps.map((item, index) =>
+        index === 0 ? (
+          <StepBar current={item.current} done={item.done} key={index} onClick={item.done ? props.functions[index] : () => {console.log("neuspeh")}}>
+            {item.done ? <Checkmark /> : index+1}
+          </StepBar>
+        ) : (
+          <React.Fragment key={index}>
+            <StepLine done={item.done || item.current} >
+              <Progress done={item.done || item.current} />
+            </StepLine>
+            <StepBar current={item.current} done={item.done} onClick={item.done ? props.functions[index] : () => {}} >
+              {item.done ? <Checkmark /> : index+1}
+            </StepBar>
+          </React.Fragment>
+        )
+      )}
+    </StepProgressContainer>
+  );
+};
+
+StepProgress.propTypes = {
+  children: PropTypes.node,
+  handleNext: PropTypes.node,
+  current: PropTypes.number,
+  numberOfSteps: PropTypes.number,
+  functions: PropTypes.array
+};
+StepProgress.defaultProps = {
+  functions: []
+}
+
+export default StepProgress;

src/components/StepProgress/StepProgress.styled.js

@@ -0,0 +1,45 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../themes";
+
+export const StepProgressContainer = styled(Box)`
+  display: flex;
+  height: 35px;
+  flex-direction: row;
+  position: relative;
+  left: 2px;
+  width: 100%;
+`;
+
+export const StepLine = styled(Box)`
+  margin-top: 13px;
+  background-color: white;
+  width: 100%;
+  margin-left: -1px;
+  height: 9px;
+`;
+
+export const StepBar = styled(Box)`
+  flex: 0 0 35px;
+  background-color: ${(props) =>
+    props.done ? selectedTheme.primaryPurple : selectedTheme.primaryDarkGrayText};
+  border-radius: 100%;
+  font-family: "Open Sans";
+  text-align: center;
+  border: 5px solid
+    ${(props) => (props.current || props.done ? selectedTheme.primaryPurple : "white")};
+  padding-top: 2px;
+  line-height: 19px;
+  margin-left: -2px;
+  font-size: 14px;
+  color: #1d1d1d;
+  z-index: 1;
+  transition: background-color 1s ease;
+  ${props => props.done && `cursor: pointer;`}
+`;
+export const Progress = styled(Box)`
+  height: 9px;
+  width: ${(props) => (props.done ? "100%" : "0")};
+  background-color: ${selectedTheme.primaryPurple};
+  transition: width 1s;
+`;

src/components/Styles/globalStyles.js

@@ -0,0 +1,29 @@
+import { createGlobalStyle } from 'styled-components';
+// import OpenSans from "./fonts/OpenSans-Regular.ttf"
+// import Poppins from "./fonts/Poppins-Regular.ttf"
+// import Mulish from "./fonts/Mulish-Regular.ttf"
+const GlobalStyle = createGlobalStyle`
+  ${'' /* @font-face {
+    font-family: 'Open Sans';
+    src: url(${OpenSans}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url(${Poppins}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  }
+  @font-face {
+    font-family: "Mulish";
+    src: url(${Mulish}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: auto;
+  } */}
+`;
+
+export default GlobalStyle;

src/components/TextFields/TextField.js

@@ -1,61 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { ComponentContainer, TextFieldMUIStyled } from "./TextField.styled";
-import PropTypes from "prop-types";
-
-export const TextField = (props) => {
-  const [isFieldEmpty, setIsFieldEmpty] = useState(true);
-
-  //for italicPlaceholder
-  useEffect(() => {
-    if (props.value.length === 0) {
-      setIsFieldEmpty(true);
-    } else {
-      setIsFieldEmpty(false);
-    }
-  }, [props.value]);
-
-  return (
-    <ComponentContainer style={props.containerStyle}>
-      <TextFieldMUIStyled
-        {...props}
-        sx={props.style}
-        label={props.showAnimation ? props.placeholder : ""}
-        italic={props.italicPlaceholder && isFieldEmpty}
-      />
-    </ComponentContainer>
-  );
-};
-
-TextField.propTypes = {
-  history: PropTypes.shape({
-    replace: PropTypes.func,
-    push: PropTypes.func,
-    location: PropTypes.shape({
-      pathname: PropTypes.string,
-    }),
-  }),
-  placeholder: PropTypes.string,
-  style: PropTypes.any,
-  showAnimation: PropTypes.bool,
-  containerStyle: PropTypes.any,
-  italicPlaceholder: PropTypes.bool,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  name: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  error: PropTypes.string,
-  helperText: PropTypes.string,
-  autoFocus: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  type: PropTypes.string,
-  InputProps: {
-    endAdornment: PropTypes.node,
-  },
-};
-
-TextField.defaultProps = {
-  italicPlaceholder: false,
-  showAnimation: false,
-};

src/components/TextFields/TextField.styled.js

@@ -1,14 +0,0 @@
-import { TextField } from "@mui/material";
-import styled from "styled-components";
-
-const backgroundColor = `rgb(241, 241, 241)`;
-
-export const ComponentContainer = styled.div`
-  width: 100%;
-`;
-
-export const TextFieldMUIStyled = styled(TextField)`
-  background-color: ${backgroundColor};
-  width: ${(props) => props.width};
-  font-style: ${(props) => (props.italic === true ? "italic" : "normal")};
-`;

src/components/TextFields/TextField/TextField.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useRef, useState } from "react";
+import { TextFieldContainer, TextFieldStyled } from "./TextField.styled";
+import PropTypes from "prop-types";
+
+export const TextField = (props) => {
+  const [isFieldEmpty, setIsFieldEmpty] = useState(true);
+
+  //  for italicPlaceholder
+  useEffect(() => {
+    if (props?.value?.length === 0) {
+      setIsFieldEmpty(true);
+    } else {
+      setIsFieldEmpty(false);
+    }
+  }, [props.value]);
+  const textInputRef = useRef();
+
+  return (
+    <TextFieldContainer
+      style={props.containerStyle}
+      className={props.className}
+      height={props.height}
+    >
+      <TextFieldStyled
+        placeholder={props.placeholder}
+        width={props.width}
+        height={props.height}
+        id={props.id}
+        name={props.name}
+        value={props.value}
+        onChange={props.onChange}
+        error={props.error}
+        multiline={props.multiline}
+        minRows={props.minRows}
+        // helperText={props.helperText}
+        autoFocus={props.autoFocus}
+        fullWidth={props.fullWidth}
+        type={props.type}
+        textsize={props.textsize}
+        font={props.font}
+        InputProps={props.InputProps}
+        sx={props.style}
+        label={props.showAnimation ? props.placeholder : ""}
+        
+        
+        italicplaceholder={(props.italicPlaceholder && isFieldEmpty) ? "true" : "false"}
+        ref={textInputRef}
+        focused={props.focused}
+      >
+        {props.children}
+      </TextFieldStyled>
+    </TextFieldContainer>
+  );
+};
+
+TextField.propTypes = {
+  history: PropTypes.shape({
+    replace: PropTypes.func,
+    push: PropTypes.func,
+    location: PropTypes.shape({
+      pathname: PropTypes.string,
+    }),
+  }),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  style: PropTypes.any,
+  showAnimation: PropTypes.bool,
+  containerStyle: PropTypes.any,
+  italicPlaceholder: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  id: PropTypes.number,
+  error: PropTypes.bool,
+  helperText: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  type: PropTypes.string,
+  textsize: PropTypes.string,
+  font: PropTypes.string,
+  ref: PropTypes.any,
+  minRows: PropTypes.number,
+  multiline: PropTypes.bool,
+  focused: PropTypes.bool,
+  InputProps: PropTypes.shape({
+    startAdornment: PropTypes.node,
+    endAdornment: PropTypes.node,
+    style: PropTypes.any,
+  }),
+};
+
+TextField.defaultProps = {
+  italicPlaceholder: false,
+  showAnimation: false,
+  height: "48px",
+  // font: "Open Sans"
+};

src/components/TextFields/TextField/TextField.styled.js

@@ -0,0 +1,51 @@
+import { Box, TextField } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+export const TextFieldContainer = styled(Box)`
+  width: 100%;
+  height: ${(props) => props.height};
+  box-sizing: border-box;
+  margin: 16px 0;
+  padding-left: 0;
+`;
+
+export const TextFieldStyled = styled(TextField)`
+  background-color: ${selectedTheme.primaryBackgroundColor};
+  width: ${(props) => props.width};
+  font-style: ${(props) =>
+    props.italicplaceholder === "true" ? "italic" : "normal"};
+  padding-left: 0;
+  margin: 0;
+  padding: 0;
+  height: ${(props) => props.height};
+  box-sizing: border-box;
+  overflow-y: hidden;
+
+  & div {
+    padding-left: 2px;
+    ${(props) =>
+      props.multiline &&
+      `
+      padding: 10px 16px;
+      max-height: ${props.height};
+      position: relative;
+      height: 100%;
+      & textarea {
+        height: 100% !important;
+        width: 100% ;
+        overflow: auto;
+        font-size: 16px;
+      }
+      
+    `}
+  }
+  & div input {
+    height: ${(props) => props.height};
+    box-sizing: border-box;
+
+    font-size: ${(props) =>
+      props.textsize ? props.textsize : "16px"} !important;
+    font-family: ${(props) => (props.font ? props.font : "")};
+  }
+`;

src/components/TextFields/TextFieldWithIcon/TextFieldWithIcon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TextFieldWithIconContainer, IconStyled, TextFieldStyled } from './TextFieldWithIcon.styled';
+import { Visibility } from '@mui/icons-material';
+
+const TextFieldWithIcon = (props) => {
+  return (
+    <TextFieldWithIconContainer>
+        <TextFieldStyled {...props.textFieldProps}>
+            <IconStyled color="green">
+              <Visibility color="green"/>
+            </IconStyled>
+            {props.children}
+        </TextFieldStyled>
+    </TextFieldWithIconContainer>
+  )
+}
+
+TextFieldWithIcon.propTypes = {
+    children: PropTypes.node,
+    textFieldProps: PropTypes.any,
+}
+
+export default TextFieldWithIcon;