feat: ✨ implement loading screen and theme storage

src/App.global.scss

@@ -1,8 +1,10 @@
 @import "./sass/pages/default";
 @import "./sass/pages/credentials";
+@import "./sass/pages/dashboard";
 @import "./sass/components/cards";
 @import "./sass/components/buttons";
 @import "./sass/components/theme-switcher";
+@import "./sass/components/spinner";
 @import "./sass/layout/basic";
 
 @import "./sass/themes/dark";

src/App.tsx

@@ -24,10 +24,13 @@ export function isDev(): boolean {
  * @returns {JSX.Element}
  */
 function App(): JSX.Element {
-  const [theme, setTheme] = useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
   const session = new Session();
   const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    // save theme preference to local storage
+    localStorage.setItem('theme', newTheme);
   };
 
   return (
@@ -40,7 +43,7 @@ function App(): JSX.Element {
         <Route
           path="dashboard"
           element={(
-            <PrivacyWrapper session={session}>
+            <PrivacyWrapper theme={theme} session={session}>
               <Dashboard />
             </PrivacyWrapper>
           )}

src/components/PrivacyWrapper.tsx

@@ -1,9 +1,15 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React, { useEffect, useState } from 'react';
 import { Navigate } from 'react-router-dom';
 import Session from 'utils/Session';
+import Spinner from 'components/Spinner';
 
-function PrivacyWrapper({ children, session }: { children: React.ReactNode, session: Session }) {
+export declare interface PrivacyWrapperProps {
+  children: React.ReactNode,
+  session: Session,
+  theme?: string,
+}
+
+function PrivacyWrapper({ children, theme, session }: PrivacyWrapperProps): JSX.Element {
   const [isLoading, setIsLoading] = useState(true);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
@@ -14,20 +20,30 @@ function PrivacyWrapper({ children, session }: { children: React.ReactNode, sess
     });
   }, [session]);
 
-  return (
-    isLoading ? (
-      <div className="privacy-wrapper">
-        <div className="spinner-wrapper">
-          Loading
-          <div className="spinner" />
-        </div>
+  // display a spinner if the API request is still loading
+  let content;
+  if (isLoading) {
+    content = (
+      <div className="loading-page-wrapper">
+        <Spinner message="Logging in" />
       </div>
-    ) : (
+    );
+  } else {
+    content = (
       <div className="privacy-wrapper">
         {isLoggedIn ? children : <Navigate to="/login" />}
       </div>
-    )
+    );
+  }
+  return (
+    <div className={theme}>
+      {content}
+    </div>
   );
 }
 
+PrivacyWrapper.defaultProps = {
+  theme: 'light',
+};
+
 export default PrivacyWrapper;

src/components/Spinner.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * A lightweight spinner component.
+ * @returns {JSX.Element}
+ */
+export default function Spinner({ message }: {message?: string}): JSX.Element {
+  return (
+    <div className="spinner-wrapper">
+      <div className="lds-ring">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <div className="spinner-message">
+        {message}
+      </div>
+    </div>
+  );
+}
+
+Spinner.defaultProps = {
+  message: 'Loading...',
+};

src/pages/Dashboard.tsx

@@ -3,7 +3,13 @@ import React from 'react';
 export default function Dashboard() {
   return (
     <div className="dashboard-wrapper">
-      This is the Dashboard !
+      <div className="dashboard-header" />
+      <div className="dashboard-body">
+        <div className="card centered centered-content">
+          <h1>This is a motherfucking dashboard</h1>
+          <h2>And it&apos;s fucking beautiful</h2>
+        </div>
+      </div>
     </div>
   );
 }

src/sass/components/_spinner.scss

@@ -0,0 +1,69 @@
+@import "../themes/dark";
+@import "../themes/light";
+
+@mixin themable($theme-name, $theme-map) {
+  .#{$theme-name} {
+    .loading-page-wrapper {
+      background-color: map-get($theme-map, bg);
+      color: map-get($theme-map, text);
+      width: 100vw;
+      height: 100vh;
+    }
+
+    .spinner-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .spinner-message {
+      font-size: 1.4rem;
+      margin-bottom: 20px;
+    }
+
+    // credit to loading.io for the spinner
+
+    .lds-ring {
+      display: inline-block;
+      position: relative;
+      width: 80px;
+      height: 80px;
+    }
+    .lds-ring div {
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      width: 47px;
+      height: 47px;
+      margin: 6px;
+      border: 6px solid map-get($theme-map, icons);
+      border-radius: 50%;
+      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+      border-color: map-get($theme-map, icons) transparent transparent
+        transparent;
+    }
+    .lds-ring div:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+    .lds-ring div:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+    .lds-ring div:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+    @keyframes lds-ring {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+
+@include themable(light, $light);
+@include themable(dark, $dark);

src/sass/layout/_basic.scss

@@ -7,7 +7,7 @@
 }
 
 .centered {
-  position: relative;
+  position: absolute; // TODO: this should probably be changed
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

src/sass/pages/_dashboard.scss

@@ -0,0 +1,29 @@
+@import "../themes/dark";
+@import "../themes/light";
+
+@mixin themable($theme-name, $theme-map) {
+  .#{$theme-name} {
+    .dashboard-wrapper {
+      background-color: map-get($theme-map, bg);
+      color: map-get($theme-map, text);
+      width: 100vw;
+      height: 100vh;
+    }
+
+    .dashboard-header {
+      box-sizing: border-box;
+      width: 100%;
+      height: 80px;
+      border-bottom: 1px solid map-get($theme-map, card-border);
+      background-color: map-get($theme-map, card-bg);
+    }
+
+    .dahsboard-body {
+      box-sizing: border-box;
+      width: 100%;
+    }
+  }
+}
+
+@include themable(light, $light);
+@include themable(dark, $dark);

src/sass/themes/_dark.scss

@@ -1,5 +1,6 @@
 $dark: (
   bg: #0d1117,
+  icons: #d3d3d3,
   text: #d3d3d3,
   text-secondary: #a5a5a5,
   text-href: #2c80e0,

src/sass/themes/_light.scss

@@ -1,5 +1,6 @@
 $light: (
   bg: #fff,
+  icons: #000,
   text: #000,
   text-secondary: #575757,
   text-href: #246bbb,

src/utils/Session.ts

@@ -1,3 +1,5 @@
+import { isDev } from 'App';
+
 export declare interface LoginData {
   email: string;
   password: string;
@@ -17,7 +19,7 @@ export default class Session {
    * - no actual bearer token is generated
    * - all the data displayed in the UI is mocked
    */
-  devlogin() {
+  async devlogin() {
     this.bearerToken = 'dev';
   }
 
@@ -51,6 +53,8 @@ export default class Session {
       },
     });
     this.bearerToken = '';
+    // remove the token from local storage
+    localStorage.removeItem('bearerToken');
   }
 
   /**
@@ -74,7 +78,8 @@ export default class Session {
         Authorization: `Bearer ${this.bearerToken}`,
       },
     });
-    return response.ok;
+
+    return isDev() ? true : response.ok;
   }
 
   /**
@@ -90,5 +95,7 @@ export default class Session {
       body: JSON.stringify(accountData),
     });
     this.bearerToken = await response.json();
+    // save the token to local storage
+    localStorage.setItem('bearerToken', this.bearerToken);
   }
 }