Dashboard - Sidebar Maintenance & Confirm Account Banner (#310)

* Dashboard - Sidebar Maintenance & Confirm Account Banner

* Forgot IF statement

packages/dashboard/src/components/Navbar.svelte

@@ -33,12 +33,12 @@
   </MediaQuery>
 
   <div class="flex flex-col gap-2 mb-auto">
-    <a on:click={handleClick} href="/dashboard" class={linkClasses}
-      ><i
+    <a on:click={handleClick} href="/dashboard" class={linkClasses}>
+      <i
         class="fa-regular fa-table-columns {$page.url.pathname ===
           '/dashboard' && 'text-primary'}"
-      ></i> Dashboard</a
-    >
+      ></i> Dashboard
+    </a>
 
     <div class="pl-8 flex flex-col gap-4 mb-4">
       {#each values($globalInstancesStore) as app}
@@ -47,10 +47,15 @@
           on:click={handleClick}
           class={subLinkClasses}
         >
-          <i
-            class="fa-regular fa-server {$page.url.pathname ===
-              `/app/instances/${app.id}` && 'text-primary'}"
-          ></i>
+          {#if app.maintenance}
+            <i class="fa-regular fa-triangle-person-digging text-warning"></i>
+          {:else}
+            <i
+              class="fa-regular fa-server {$page.url.pathname ===
+                `/app/instances/${app.id}` && 'text-primary'}"
+            ></i>
+          {/if}
+
           {app.subdomain}
         </a>
       {/each}

packages/dashboard/src/components/VerifyAccountBar.svelte

@@ -1,24 +1,18 @@
 <script lang="ts">
-  import AlertBar from '$components/AlertBar.svelte'
-  import { AlertTypes } from '$components/AlertBar.types'
   import { handleResendVerificationEmail } from '$util/database'
+  import { slide } from 'svelte/transition'
   import { isUserLoggedIn, isUserVerified } from '$util/stores'
 
-  let defaultAlertBarType: AlertTypes = AlertTypes.Warning
-
   let isButtonProcessing: boolean = false
   let formError: string = ''
 
   const handleClick = () => {
-    // Reset the alert type if resubmitted
-    defaultAlertBarType = AlertTypes.Warning
-
     // Update the state
     isButtonProcessing = true
 
     handleResendVerificationEmail((error) => {
       formError = error
-      defaultAlertBarType = AlertTypes.Danger
+
       isButtonProcessing = false
     })
 
@@ -30,38 +24,29 @@
 </script>
 
 {#if $isUserLoggedIn && !$isUserVerified}
-  <div class="container py-3">
-    <AlertBar alertType={defaultAlertBarType}>
-      <div
-        class="d-flex flex-wrap align-items-center justify-content-center gap-3"
-      >
-        <i class="bi bi-envelope-exclamation" />
+  <div class="alert alert-info mb-8">
+    <i class="fa-regular fa-envelopes"></i>
 
-        <div>Please verify your account by clicking the link in your email</div>
+    <div>Please verify your account by clicking the link in your email</div>
 
-        {#if isButtonProcessing}
-          <div class="success-icon">
-            <i class="bi bi-check-square" />
-            Sent!
-          </div>
-        {:else}
-          <button
-            type="button"
-            class="btn btn-outline-secondary"
-            on:click={handleClick}>Resend Email</button
-          >
-        {/if}
-      </div>
+    <div class="text-right">
+      {#if isButtonProcessing}
+        <div class="btn btn-success">
+          <i class="fa-regular fa-check"></i> Sent!
+        </div>
+      {:else}
+        <button
+          type="button"
+          class="btn btn-outline-secondary"
+          on:click={handleClick}>Resend Email</button
+        >
+      {/if}
 
       {#if formError}
-        <div class="border-top text-center mt-2 pt-2">{formError}</div>
+        <div transition:slide class="border-top text-center mt-2 pt-2">
+          {formError}
+        </div>
       {/if}
-    </AlertBar>
+    </div>
   </div>
 {/if}
-
-<style>
-  .success-icon {
-    padding: 0.375rem 0.75rem;
-  }
-</style>

packages/dashboard/src/routes/+layout.svelte

@@ -1,7 +1,5 @@
 <script>
   import Navbar from '$components/Navbar.svelte'
-  import VerifyAccountBar from '$components/VerifyAccountBar.svelte'
-  import AuthStateGuard from '$components/helpers/AuthStateGuard.svelte'
   import Meta from '$components/helpers/Meta.svelte'
   import Protect from '$components/helpers/Protect.svelte'
   import MediaQuery from '$components/MediaQuery.svelte'
@@ -9,17 +7,12 @@
   import '../app.css'
 
   import { isUserLoggedIn } from '$util/stores'
-  import Logo from '$components/Logo.svelte'
 </script>
 
 <Meta />
 <Protect />
 
 {#if $isUserLoggedIn}
-  <AuthStateGuard>
-    <VerifyAccountBar />
-  </AuthStateGuard>
-
   <div class="layout xl:flex">
     <MediaQuery query="(min-width: 1280px)" let:matches>
       {#if matches}

packages/dashboard/src/routes/dashboard/+page.svelte

@@ -3,6 +3,7 @@
   import { globalInstancesStore } from '$util/stores'
   import { values } from '@s-libs/micro-dash'
   import InstanceList from './InstanceList.svelte'
+  import VerifyAccountBar from '$components/VerifyAccountBar.svelte'
 
   $: isFirstApplication = values($globalInstancesStore).length === 0
 </script>
@@ -21,6 +22,8 @@
       >
     </div>
 
+    <VerifyAccountBar />
+
     <!--<UsageChartForAllInstances />-->
 
     <InstanceList />