chore: fix double alert on login failed

src/App.tsx

@@ -3,7 +3,6 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 import { BrowserRouter } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
-import Layout from './components/Layout/Layout'
 import Router from './components/Routes/Router'
 import { theme } from './components/UI/theme'
 
@@ -14,9 +13,7 @@ function App() {
     <BrowserRouter>
       <ThemeProvider theme={theme}>
         <QueryClientProvider client={queryClient}>
-          <Layout>
-            <Router />
-          </Layout>
+          <Router />
           <ToastContainer theme="colored" />
         </QueryClientProvider>
       </ThemeProvider>

src/components/Layout/Layout.tsx

-import React from 'react'
-import SideBar from '../SideBar/SideBar'
-import styles from './layout.module.scss'
-
-const Layout: React.FC = ({ children }) => {
-  return (
-    <div className={styles.root}>
-      <SideBar />
-      <main className={styles.wrapper}>{children}</main>
-    </div>
-  )
-}
-
-export default Layout

src/components/Layout/layout.module.scss

-@import '../../styles/config/colors';
-@import '../../styles/config/breakpoints';
-
-.root {
-  display: flex;
-  background: $dark-bg;
-  height: 100vh;
-}
-
-.wrapper {
-  flex: 1;
-  box-shadow:
-    0px 5px 5px rgb(0 0 0 / 20%),
-    0px 3px 14px rgb(0 0 0 / 12%),
-    0px 8px 10px rgb(0 0 0 / 14%);
-  overflow-y: scroll;
-
-  @media screen and (max-width: $width-tablet) {
-    margin-left: 0;
-    padding-bottom: 5rem;
-  }
-}

src/components/Loader/loader.scss

@@ -3,6 +3,7 @@
 .loader-container {
   display: flex;
   height: 100%;
+  flex: 1;
   overflow: hidden;
 }
 .loader {

src/components/Routes/Router.tsx

@@ -6,6 +6,7 @@ import Login from '../Login/Login'
 import Newsletter from '../Newsletter/Newsletter'
 import Popups from '../Popups/Popups'
 import Prices from '../Prices/Prices'
+import SideBar from '../SideBar/SideBar'
 
 export const links: Record<
   string,
@@ -43,21 +44,24 @@ const Router = () => {
 
   if (user) {
     return (
-      <Routes>
-        <>
-          <Route path={links.newsletter.path} element={<Newsletter />} />
-          <Route path={links.prices.path} element={<Prices />} />
-          <Route path="/popups" element={<Popups />} />
-          {user.isAdmin && (
-            <Route path={links.consents.path} element={<Consents />} />
-          )}
-          <Route path="/login" element={<Login />} />
-          <Route
-            path="*"
-            element={<Navigate replace to={links.newsletter.path} />}
-          />
-        </>
-      </Routes>
+      <>
+        <SideBar />
+        <main className="wrapper">
+          <Routes>
+            <Route path={links.newsletter.path} element={<Newsletter />} />
+            <Route path={links.prices.path} element={<Prices />} />
+            <Route path="/popups" element={<Popups />} />
+            {user.isAdmin && (
+              <Route path={links.consents.path} element={<Consents />} />
+            )}
+            <Route path="/login" element={<Login />} />
+            <Route
+              path="*"
+              element={<Navigate replace to={links.newsletter.path} />}
+            />
+          </Routes>
+        </main>
+      </>
     )
   }
 

src/styles/index.scss

@@ -9,6 +9,25 @@
   color: $text-grey;
 }
 
+#root {
+  display: flex;
+  background: $dark-bg;
+  height: 100vh;
+}
+
+.wrapper {
+  flex: 1;
+  box-shadow:
+    0px 5px 5px rgb(0 0 0 / 20%),
+    0px 3px 14px rgb(0 0 0 / 12%),
+    0px 8px 10px rgb(0 0 0 / 14%);
+  overflow-y: scroll;
+
+  @media screen and (max-width: $width-tablet) {
+    padding-bottom: 5rem;
+  }
+}
+
 h1 {
   color: #fafafa;
   @include text-large();