formatted date string and image bug

fix

.env

@@ -1,7 +1,17 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
-REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
+NODE_ENV="development"
-REACT_APP_MAIN_API="https://dev-api.mermsemr.com"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
+# login footer links
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000
 

.env.development

@@ -1,6 +1,16 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
-REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
-REACT_APP_MAIN_API="https://dev-api.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
+
+# login footer links
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000
 

.env.production

@@ -1,5 +1,16 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="production"
+NODE_ENV="production"
 REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
 REACT_APP_MAIN_API="https://api.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://socket.mermsemr.com"
+
+# login footer links
+REACT_APP_HOME_LINK='https://www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://www.mermsemr.com/terms'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

.env.qa

@@ -0,0 +1,16 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_NODE_ENV="development"
+NODE_ENV="development"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
+
+# login footer links
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
   merms-panel:
-    # image: registry.chiefsoft.net/wrenchboard-users-wrench:latest
+    image: registry.chiefsoft.net/merms-panel-reactjs:latest
     build:
       context: .
       dockerfile: docker/Dockerfile
@@ -16,10 +16,11 @@ services:
       - ./:/usr/src/app
       - ./src/:/usr/src/app/src
       - ./run.sh:/usr/src/app/run.sh
+      - ./node_modules/:/usr/src/app/node_modules
     extra_hosts:
       - api.mermsemr.com:10.10.33.15
       - devapi.mermsemr.com:10.10.33.15
-      - dev-socket.mermsemr.com:10.10.33.15
+      - devsocket.mermsemr.com:10.10.33.15
       - socket.mermsemr.com:10.10.33.15
       - dev-media.mermsemr.com:10.10.33.15
       - media.mermsemr.com:10.10.33.15

package.json

@@ -1,21 +1,37 @@
 {
-  "name": "samatze-com",
+  "name": "merms-panel",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
+    "@popperjs/core": "^2.11.8",
+    "@reduxjs/toolkit": "^2.4.0",
+    "@stripe/react-stripe-js": "^3.9.1",
+    "@stripe/stripe-js": "^7.8.0",
+    "@tanstack/react-query": "^5.62.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "apexcharts": "^4.1.0",
+    "axios": "^1.7.9",
     "bootstrap": "^5.3.3",
+    "formik": "^2.4.6",
     "react": "^18.3.1",
     "react-apexcharts": "^1.7.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^7.0.2",
     "react-scripts": "5.0.1",
+    "redux": "^5.0.1",
     "sass": "^1.82.0",
-    "web-vitals": "^2.1.4"
+    "socket.io-client": "^4.8.1",
+    "web-vitals": "^2.1.4",
+    "yup": "^1.6.0"
   },
   "scripts": {
     "start": "react-scripts start -e .env.development",

public/index.html

@@ -13,8 +13,19 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>MERMS-Panel</title>
   </head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y9QSQFV003"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-Y9QSQFV003');
+  </script>
   <body class="light-sidebar">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
+  <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> -->
 </html>

run.sh

@@ -4,12 +4,17 @@ set -x
 
 export NODE_ENV="${NODE_ENV:-development}"
 
-if [ $NODE_ENV == "development" ]; then
+if [ $NODE_ENV = "development" ]; then
   # this runs webpack-dev-server with hot reloading
   echo "Development build"
   npm install --legacy-peer-deps
   npm start
   # npm run build
+elif [ $NODE_ENV = "qa" -o $NODE_ENV = "test" ]; then
+  echo "QA build"
+  export NODE_ENV="test"
+  npm install --legacy-peer-deps
+  npm start
 else
   # build the app and serve it via nginx
   echo "Production build"

src/App.css

@@ -1,38 +1,50 @@
-.App {
+.custom-bg {
-  text-align: center;
+  background-image: url('./assets/bg/bg_2.jpg') !important;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
-.App-logo {
+.signup-bg {
-  height: 40vmin;
+  background-image: url('./assets/bg/signup_bg.jpg') !important;
-  pointer-events: none;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
-@media (prefers-reduced-motion: no-preference) {
+.register{
-  .App-logo {
+  border-radius: 10px;
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
 
-.App-header {
+.login-links{
-  background-color: #282c34;
+  margin-top: 50px;
-  min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
+.login-links a {
-  color: #61dafb;
+  font-size: 14px;
+  padding: 0px 20px;
+  border-right: 2px solid #6c757d;
+  cursor: pointer;
 }
 
-@keyframes App-logo-spin {
+.login-links a:nth-of-type(1){
-  from {
+  padding-left: 0px;
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
+
+.login-links a:last-child{
+  border: 0px;
+}
+
+button{
+  font-size: 1rem!important;
+  font-weight: 700!important;
+}
+
+.font-600 {
+  font-weight: 600;
+}
+
+.accordion-button, .accordion-button:not(.collapsed) {
+  background-color: transparent!important;
+}

src/App.js

@@ -1,29 +1,29 @@
-import { Routes, Route } from 'react-router-dom';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
-// import './App.css';
+import { Provider } from 'react-redux';
+import store from './store/store'
+import AppRouters from './AppRouters';
 
-import LoginPage from './views/LoginPage';
+import './App.css';
-import siteLinks from './links/siteLinks';
-import HomePage from './views/HomePage';
-import SignupPage from './views/SignupPage';
-import ForgetpwdPage from './views/ForgetpwdPage';
-import UserExist from './component/authorization/UserExist';
 
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 3,
+      // refetchOnMount: false,
+      staleTime: 10*60*1000 // can also be a number in millisecond
+    },
+  },
+})
 
 function App() {
   return (
-    <div className="">
+    <QueryClientProvider client={queryClient}>
-      <Routes>
+      <Provider store={store}>
-        <Route path={siteLinks.home} element={<LoginPage />} />
+        <AppRouters />
-        <Route path={siteLinks.signup} element={<SignupPage />} />
+      </Provider>
-        <Route path={siteLinks.error} element={<ForgetpwdPage />} />
+    </QueryClientProvider>
-
-        {/* protected routes */}
-        <Route element={<UserExist />}> 
-          <Route path={siteLinks.dash} element={<HomePage />} />
-        </Route>
-      </Routes>
-    </div>
   );
 }
 

src/AppRouters.jsx

@@ -0,0 +1,69 @@
+import { Routes, Route } from 'react-router-dom';
+
+import UserExist from './component/authorization/UserExist';
+import AuthLayout from './component/auth/AuthLayout';
+import BearerToken from './component/authorization/BearerToken';
+import siteLinks from './links/siteLinks';
+
+import LoginPage from './views/LoginPage';
+import SignupPage from './views/SignupPage';
+import ForgetpwdPage from './views/ForgetpwdPage';
+import HomePage from './views/HomePage';
+import ReportsPage from './views/ReportsPage'
+import CommentsPage from './views/CommentsPage'
+import ContactsPage from './views/ContactsPage'
+import UserPage from './views/UserPage'
+import CalendarPage from './views/CalendarPage'
+import SettingsPage from './views/SettingsPage'
+import ProductPage from './views/ProductPage'
+import SocketIOContextProvider from './component/context/SocketIOContext';
+import CSignupPage from './views/CSignupPage';
+import HelpPage from './views/HelpPage';
+import SubscriptionPage from './views/SubscriptionPage';
+import OnboardPage from "./views/OnboardPage";
+import AccPWDResetPage from './views/AccPWDResetPage';
+import ProfileCompletePage from './views/ProfileCompletePage';
+import  SubscribePage from './views/Subscribe'
+
+function AppRouters() {
+  return (
+    <div className="">
+      <Routes>
+        <Route element={<BearerToken />}>
+          {/* auth routes wrapper */}
+          <Route element={<AuthLayout />}>
+            <Route path={siteLinks.home} element={<LoginPage />} />
+            <Route path={siteLinks.login} element={<LoginPage />} />
+            <Route path={siteLinks.signup} element={<SignupPage />} />
+            <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
+            <Route path={siteLinks.csignup} element={<CSignupPage />} />
+            <Route path={siteLinks.accreset} element={<AccPWDResetPage />} />
+            <Route path={siteLinks.error} element={<LoginPage />} />
+          </Route>
+
+          {/* protected routes */}
+          <Route element={<SocketIOContextProvider />}>
+            <Route element={<UserExist />}> 
+              <Route path={siteLinks.dash} element={<HomePage />} />
+              <Route path={siteLinks.profile_complete} element={<ProfileCompletePage />} />
+              <Route path={siteLinks.product} element={<ProductPage />} />
+              <Route path={siteLinks.reports} element={<ReportsPage />} />
+              <Route path={siteLinks.comments} element={<CommentsPage />} />
+              <Route path={siteLinks.contacts} element={<ContactsPage />} />
+              <Route path={siteLinks.user} element={<UserPage />} />
+              <Route path={siteLinks.subscription} element={<SubscriptionPage />} />
+              <Route path={siteLinks.subscription_success} element={<SubscriptionPage />} />
+              <Route path={siteLinks.onboard} element={<OnboardPage />} />
+              <Route path={siteLinks.calendar} element={<CalendarPage />} />
+              <Route path={siteLinks.settings} element={<SettingsPage />} />
+              <Route path={siteLinks.subscribe} element={<SubscribePage />} />
+              <Route path={siteLinks.help} element={<HelpPage />} />
+            </Route>
+          </Route>
+        </Route>
+      </Routes>
+    </div>
+  );
+}
+
+export default AppRouters;

src/assets/img/export/csv.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 548.29 548.291"><path d="M486.2 196.121h-13.164V132.59c0-.399-.064-.795-.116-1.2-.021-2.52-.824-5-2.551-6.96L364.656 3.677c-.031-.034-.064-.044-.085-.075-.629-.707-1.364-1.292-2.141-1.796a8.528 8.528 0 0 0-.704-.419 11.262 11.262 0 0 0-2.121-.893c-.199-.052-.377-.134-.576-.188-.8-.188-1.629-.306-2.467-.306H96.757C84.893 0 75.256 9.649 75.256 21.502v174.613H62.093c-16.972 0-30.733 13.756-30.733 30.73v159.81c0 16.966 13.761 30.736 30.733 30.736h13.163V526.79c0 11.854 9.637 21.501 21.501 21.501h354.777c11.853 0 21.502-9.647 21.502-21.501V417.392H486.2c16.966 0 30.729-13.764 30.729-30.731v-159.81c.001-16.979-13.763-30.73-30.729-30.73zM96.757 21.502H345.81v110.006c0 5.94 4.818 10.751 10.751 10.751h94.973v53.861H96.757V21.502zM258.618 313.18c-26.68-9.291-44.063-24.053-44.063-47.389 0-27.404 22.861-48.368 60.733-48.368 18.107 0 31.447 3.811 40.968 8.107l-8.09 29.3c-6.43-3.107-17.862-7.632-33.59-7.632-15.717 0-23.339 7.149-23.339 15.485 0 10.247 9.047 14.769 29.78 22.632 28.341 10.479 41.681 25.239 41.681 47.874 0 26.909-20.721 49.786-64.792 49.786-18.338 0-36.449-4.776-45.497-9.77l7.38-30.016c9.772 5.014 24.775 10.006 40.264 10.006 16.671 0 25.488-6.908 25.488-17.396-.005-10.01-7.632-15.721-26.923-22.619zM69.474 302.692c0-54.781 39.074-85.269 87.654-85.269 18.822 0 33.113 3.811 39.549 7.149l-7.392 28.816c-7.38-3.084-17.632-5.939-30.491-5.939-28.822 0-51.206 17.375-51.206 53.099 0 32.158 19.051 52.4 51.456 52.4 10.947 0 23.097-2.378 30.241-5.238l5.483 28.346c-6.672 3.34-21.674 6.919-41.208 6.919-55.5.001-84.086-34.551-84.086-80.283zm382.06 218.27H96.757v-103.57h354.777v103.57zm-24.016-140.379h-42.399l-51.45-160.536h39.787l19.526 67.894c5.479 19.046 10.479 37.386 14.299 57.397h.709c4.048-19.298 9.045-38.352 14.526-56.693l20.487-68.598h38.599l-54.084 160.536z" fill="#FFF"/></svg>

src/assets/img/export/txt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 548.291 548.291"><path d="M486.201 196.124h-13.166V132.59c0-.396-.062-.795-.115-1.196-.021-2.523-.825-5-2.552-6.963L364.657 3.677c-.033-.031-.064-.042-.085-.075-.63-.704-1.364-1.29-2.143-1.796-.229-.154-.461-.283-.702-.418a11.22 11.22 0 0 0-2.121-.892c-.2-.055-.379-.134-.577-.188A10.684 10.684 0 0 0 356.562 0H96.757C84.894 0 75.256 9.649 75.256 21.502v174.616H62.09c-16.968 0-30.729 13.753-30.729 30.73V386.66c0 16.961 13.761 30.731 30.729 30.731h13.166V526.79c0 11.854 9.638 21.501 21.501 21.501h354.776c11.853 0 21.501-9.647 21.501-21.501V417.392H486.2c16.966 0 30.729-13.764 30.729-30.731V226.854c.001-16.982-13.762-30.73-30.728-30.73zM96.757 21.502h249.054v110.006c0 5.943 4.817 10.751 10.751 10.751h94.972v53.864H96.757V21.502zm106.057 203.54h41.68l14.063 29.3c4.756 9.756 8.336 17.622 12.147 26.676h.48c3.798-10.242 6.9-17.392 10.95-26.676l13.587-29.3h41.449l-45.261 78.363 47.638 82.185H297.62l-14.525-29.06c-5.956-11.197-9.771-19.528-14.299-28.825h-.478c-3.334 9.297-7.381 17.628-12.381 28.825l-13.336 29.06h-41.455l46.455-81.224-44.787-79.324zM66.08 255.532v-30.489h123.382v30.489h-43.828v130.049H109.2V255.532H66.08zm385.454 265.43H96.757v-103.57h354.776v103.57zm20.23-265.43h-43.831v130.049h-36.442V255.532h-43.119v-30.489h123.393v30.489z" fill="#FFF"/></svg>

src/assets/img/export/xls.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 550.801 550.801"><path d="M488.432 197.019h-13.226v-63.816c0-.398-.063-.799-.111-1.205-.021-2.531-.833-5.021-2.568-6.992L366.325 3.694c-.032-.031-.063-.042-.085-.076-.633-.707-1.371-1.295-2.151-1.804-.231-.155-.464-.285-.706-.422a11.325 11.325 0 0 0-2.131-.896c-.2-.053-.38-.135-.58-.188A10.828 10.828 0 0 0 358.193 0H97.2C85.282 0 75.6 9.693 75.6 21.601v175.413H62.377c-17.049 0-30.873 13.818-30.873 30.873v160.545c0 17.038 13.824 30.87 30.873 30.87h13.224V529.2c0 11.907 9.682 21.601 21.6 21.601h356.4c11.907 0 21.6-9.693 21.6-21.601V419.302h13.226c17.044 0 30.871-13.827 30.871-30.87v-160.54c-.001-17.06-13.818-30.873-30.866-30.873zM97.2 21.601h250.193v110.51c0 5.967 4.841 10.8 10.8 10.8H453.6v54.108H97.2V21.601zm242.362 332.743v31.324H236.509V220.704h37.46v133.64h65.593zM74.25 385.663l47.73-83.458-46.019-81.501h42.833l14.439 30.099c4.899 10.03 8.572 18.116 12.49 27.414h.483c3.926-10.529 7.101-17.872 11.259-27.414l13.954-30.099h42.588l-46.509 80.525 48.961 84.438h-43.081l-14.929-29.858c-6.115-11.507-10.036-20.07-14.684-29.615h-.49c-3.431 9.55-7.583 18.119-12.722 29.615l-13.711 29.858H74.25v-.004zm379.351 137.69H97.2V419.302h356.4v104.051zm-51.638-135.228c-18.837 0-37.446-4.904-46.738-10.04l7.578-30.839c10.04 5.136 25.46 10.283 41.375 10.283 17.139 0 26.188-7.099 26.188-17.867 0-10.283-7.831-16.157-27.659-23.256-27.411-9.55-45.282-24.722-45.282-48.718 0-28.15 23.498-49.684 62.427-49.684 18.594 0 32.305 3.927 42.093 8.322l-8.322 30.109c-6.607-3.186-18.361-7.834-34.509-7.834-16.152 0-23.983 7.338-23.983 15.913 0 10.525 9.291 15.18 30.591 23.258 29.125 10.769 42.836 25.936 42.836 49.191-.013 27.664-21.301 51.162-66.595 51.162z" fill="#FFF"/></svg>

src/assets/img/export/xlsx.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 548.291 548.291"><path d="M486.206 196.121H473.04v-63.525c0-.396-.062-.795-.109-1.2-.021-2.52-.829-4.997-2.556-6.96L364.657 3.677c-.033-.031-.064-.042-.085-.075-.63-.704-1.364-1.29-2.143-1.796-.229-.154-.461-.283-.702-.419a11.29 11.29 0 0 0-2.121-.893c-.2-.052-.379-.134-.577-.186A10.684 10.684 0 0 0 356.562 0H96.757C84.894 0 75.256 9.649 75.256 21.502v174.613H62.092c-16.971 0-30.732 13.756-30.732 30.733V386.66c0 16.961 13.761 30.731 30.732 30.731h13.164V526.79c0 11.854 9.638 21.501 21.501 21.501h354.776c11.853 0 21.501-9.647 21.501-21.501V417.392H486.2c16.966 0 30.729-13.764 30.729-30.731V226.854c.001-16.982-13.753-30.733-30.723-30.733zM96.757 21.502h249.054v110.006c0 5.94 4.817 10.751 10.751 10.751h94.972v53.861H96.757V21.502zm217.819 293.159c-21.124-7.359-34.908-19.045-34.908-37.544 0-21.698 18.11-38.297 48.116-38.297 14.331 0 24.903 3.014 32.442 6.413l-6.411 23.2c-5.091-2.446-14.146-6.037-26.598-6.037s-18.488 5.662-18.488 12.266c0 8.115 7.171 11.696 23.58 17.921 22.446 8.305 33.013 20 33.013 37.921 0 21.323-16.415 39.435-51.318 39.435-14.524 0-28.861-3.769-36.031-7.737l5.843-23.77c7.738 3.958 19.627 7.927 31.885 7.927 13.218 0 20.188-5.47 20.188-13.774.005-7.918-6.031-12.455-21.313-17.924zM265.917 343.9v24.157h-79.439V240.882h28.877V343.9h50.562zm-171.68 24.157H61.411l36.788-64.353-35.473-62.827h33.021l11.125 23.21c3.774 7.736 6.606 13.954 9.628 21.135h.367c3.027-8.115 5.477-13.775 8.675-21.135l10.756-23.21h32.827l-35.848 62.066 37.74 65.103h-33.202L126.3 345.024c-4.709-8.855-7.73-15.465-11.316-22.824h-.375c-2.645 7.359-5.845 13.969-9.811 22.824l-10.561 23.033zm357.297 152.911H96.757V417.392h354.776v103.576zm.194-152.911l-11.512-23.022c-4.715-8.863-7.733-15.465-11.319-22.825h-.366c-2.646 7.36-5.858 13.962-9.827 22.825l-10.551 23.022h-32.836l36.788-64.353-35.471-62.827h33.02l11.139 23.21c3.77 7.736 6.593 13.954 9.618 21.135h.377c3.013-8.115 5.459-13.775 8.671-21.135l10.752-23.21h32.835l-35.849 62.066 37.733 65.103h-33.202v.011z" fill="#FFF"/></svg>

src/assets/img/loader/loader.svg

@@ -0,0 +1 @@
+<svg class="lds-typing" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><circle cx="27.5" cy="62.5" r="5" fill="#3be8b0"><animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5" repeatCount="indefinite" values="62.5;37.5;62.5;62.5" keyTimes="0;0.25;0.5;1" dur="1s" begin="-0.5s"/></circle><circle cx="42.5" cy="62.5" r="5" fill="#1aafd0"><animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5" repeatCount="indefinite" values="62.5;37.5;62.5;62.5" keyTimes="0;0.25;0.5;1" dur="1s" begin="-0.375s"/></circle><circle cx="57.5" cy="51.068" r="5" fill="#6a67ce"><animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5" repeatCount="indefinite" values="62.5;37.5;62.5;62.5" keyTimes="0;0.25;0.5;1" dur="1s" begin="-0.25s"/></circle><circle cx="72.5" cy="39.642" r="5" fill="#ffb900"><animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5" repeatCount="indefinite" values="62.5;37.5;62.5;62.5" keyTimes="0;0.25;0.5;1" dur="1s" begin="-0.125s"/></circle></svg>