From 929dc772df246490bb616224fb120b061cbe823a Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Tue, 18 Jul 2023 08:52:30 -0400
Subject: [PATCH] style: reformat

---
 ui/components/account/Account.svelte       | 319 ++++++++++++++-------
 ui/components/dashboard/Dashboard.svelte   | 132 ++++++---
 ui/components/onboarding/Onboarding.svelte |  70 +++--
 3 files changed, 361 insertions(+), 160 deletions(-)

diff --git a/ui/components/account/Account.svelte b/ui/components/account/Account.svelte
index dd907fe..d998aa4 100644
--- a/ui/components/account/Account.svelte
+++ b/ui/components/account/Account.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
 
   import * as bip39 from '@scure/bip39';
   import { wordlist } from '@scure/bip39/wordlists/english';
@@ -29,20 +29,22 @@
   let copyKeyCallback;
   let copyKeySuccess;
   let copyKeyError;
-  const copyKeyButtonTextDefault = 'Copy Account Key';
-  const copyKeyButtonTextSuccess = 'Account Key Copied';
-  const copyKeyButtonTextError = 'Account Key Copy Failed';
+  const copyKeyButtonTextDefault = "Copy Account Key";
+  const copyKeyButtonTextSuccess = "Account Key Copied";
+  const copyKeyButtonTextError = "Account Key Copy Failed";
   let copyKeyButtonText = copyKeyButtonTextDefault;
 
   onMount(() => {
-    elContentTextWrapper = document.getElementById('content-text-wrapper');
-    elContentTextDefault = document.getElementById('content-text-default');
-    elContentTextCreateAccount = document.getElementById('content-text-create-account');
-    elContentTextShowKey = document.getElementById('content-text-show-key');
+    elContentTextWrapper = document.getElementById("content-text-wrapper");
+    elContentTextDefault = document.getElementById("content-text-default");
+    elContentTextCreateAccount = document.getElementById(
+      "content-text-create-account",
+    );
+    elContentTextShowKey = document.getElementById("content-text-show-key");
 
-    elSwitch = document.getElementById('switch');
-    elSwitchDefault = document.getElementById('switch-default');
-    elSwitchShowKey = document.getElementById('switch-show-key');
+    elSwitch = document.getElementById("switch");
+    elSwitchDefault = document.getElementById("switch-default");
+    elSwitchShowKey = document.getElementById("switch-show-key");
 
     let resizeTimeout;
 
@@ -54,40 +56,46 @@
       }, 25);
     };
 
-    window.addEventListener('resize', onResize);
+    window.addEventListener("resize", onResize);
   });
 
-  const setContentTextHeight = element => {
+  const setContentTextHeight = (element) => {
     elContentTextActive = element;
-    elContentTextWrapper.style.height = element.offsetHeight + 'px';
+    elContentTextWrapper.style.height = element.offsetHeight + "px";
   };
 
-  const setAction = value => {
+  const setAction = (value) => {
     action = value;
 
-    if(!elContentTextActive) {
-      elContentTextDefault.style.position = 'absolute';
+    if (!elContentTextActive) {
+      elContentTextDefault.style.position = "absolute";
       setContentTextHeight(elContentTextDefault);
     }
 
     setTimeout(() => {
-      if((!value || value === 'sign-in') && elContentTextActive !== elContentTextDefault) {
+      if (
+        (!value || value === "sign-in") &&
+        elContentTextActive !== elContentTextDefault
+      ) {
         setContentTextHeight(elContentTextDefault);
-      } else if(value === 'create-account' && elContentTextActive !== elContentTextCreateAccount) {
+      } else if (
+        value === "create-account" &&
+        elContentTextActive !== elContentTextCreateAccount
+      ) {
         setContentTextHeight(elContentTextCreateAccount);
       }
     }, 0);
   };
 
   const signIn = () => {
-    setAction('sign-in');
+    setAction("sign-in");
 
     inputKeyRef.focus();
   };
 
   const inputKeySignIn = () => {
-    if(!bip39.validateMnemonic(inputKey, wordlist)) {
-      alert('invalid key');
+    if (!bip39.validateMnemonic(inputKey, wordlist)) {
+      alert("invalid key");
       return;
     }
 
@@ -95,7 +103,7 @@
   };
 
   const createAccount = () => {
-    setAction('create-account');
+    setAction("create-account");
     createAccountStep = 1;
   };
 
@@ -109,7 +117,7 @@
   };
 
   const createAccountReady = () => {
-    if(createAccountStep !== 1) {
+    if (createAccountStep !== 1) {
       return;
     }
 
@@ -117,34 +125,34 @@
   };
 
   const showKey = () => {
-    if(createAccountStep !== 2) {
+    if (createAccountStep !== 2) {
       return;
     }
 
     // generate key
-    generatedKey = bip39.generateMnemonic(wordlist).split(' ');
+    generatedKey = bip39.generateMnemonic(wordlist).split(" ");
 
     createAccountStep = 3;
-    elSwitch.style.height = elSwitchDefault.offsetHeight + 'px';
-    elSwitchDefault.style.position = 'absolute';
+    elSwitch.style.height = elSwitchDefault.offsetHeight + "px";
+    elSwitchDefault.style.position = "absolute";
 
     setTimeout(() => {
       setContentTextHeight(elContentTextShowKey);
-      elSwitch.style.height = elSwitchShowKey.offsetHeight + 'px';
+      elSwitch.style.height = elSwitchShowKey.offsetHeight + "px";
 
-      elSwitch.addEventListener('transitionend', event => {
-        if(event.target !== elSwitch) {
+      elSwitch.addEventListener("transitionend", (event) => {
+        if (event.target !== elSwitch) {
           return;
         }
 
-        elSwitchShowKey.style.position = 'static';
-        elSwitch.style.height = '';
+        elSwitchShowKey.style.position = "static";
+        elSwitch.style.height = "";
       });
     }, 0);
   };
 
   const showKeyWarning = () => {
-    if(createAccountStep !== 3) {
+    if (createAccountStep !== 3) {
       return;
     }
 
@@ -154,39 +162,42 @@
   const copyKey = () => {
     clearTimeout(copyKeyTimeout);
 
-    navigator.clipboard.writeText(generatedKey.join(' ')).then(() => {
-      if(copyKeyCallback) {
-        copyKeyCallback();
-      }
+    navigator.clipboard
+      .writeText(generatedKey.join(" "))
+      .then(() => {
+        if (copyKeyCallback) {
+          copyKeyCallback();
+        }
 
-      copyKeySuccess = true;
-      copyKeyButtonText = copyKeyButtonTextSuccess;
+        copyKeySuccess = true;
+        copyKeyButtonText = copyKeyButtonTextSuccess;
 
-      copyKeyCallback = () => {
-        copyKeyCallback = undefined;
-        copyKeySuccess = undefined;
-        copyKeyButtonText = copyKeyButtonTextDefault;
-      };
+        copyKeyCallback = () => {
+          copyKeyCallback = undefined;
+          copyKeySuccess = undefined;
+          copyKeyButtonText = copyKeyButtonTextDefault;
+        };
 
-      copyKeyTimeout = setTimeout(copyKeyCallback, 5000);
-    }).catch(error => {
-      console.error(error);
+        copyKeyTimeout = setTimeout(copyKeyCallback, 5000);
+      })
+      .catch((error) => {
+        console.error(error);
 
-      if(copyKeyCallback) {
-        copyKeyCallback();
-      }
+        if (copyKeyCallback) {
+          copyKeyCallback();
+        }
 
-      copyKeyError = true;
-      copyKeyButtonText = copyKeyButtonTextError;
+        copyKeyError = true;
+        copyKeyButtonText = copyKeyButtonTextError;
 
-      copyKeyCallback = () => {
-        copyKeyCallback = undefined;
-        copyKeyError = undefined;
-        copyKeyButtonText = copyKeyButtonTextDefault;
-      };
+        copyKeyCallback = () => {
+          copyKeyCallback = undefined;
+          copyKeyError = undefined;
+          copyKeyButtonText = copyKeyButtonTextDefault;
+        };
 
-      copyKeyTimeout = setTimeout(copyKeyCallback, 5000);
-    });
+        copyKeyTimeout = setTimeout(copyKeyCallback, 5000);
+      });
   };
 
   const generatedKeySignIn = () => {
@@ -212,13 +223,19 @@
 </script>
 
 <header>
-  <img src={lumeLogo} alt="Lume"/>
+  <img src={lumeLogo} alt="Lume" />
 </header>
-<main class:sign-in={action === 'sign-in'} class:create-account={action === 'create-account'} class:create-account-step-2={createAccountStep === 2} class:create-account-step-3={createAccountStep === 3} class:create-account-step-4={createAccountStep === 4} class:fade-out={fadeOut}>
+<main
+  class:sign-in={action === "sign-in"}
+  class:create-account={action === "create-account"}
+  class:create-account-step-2={createAccountStep === 2}
+  class:create-account-step-3={createAccountStep === 3}
+  class:create-account-step-4={createAccountStep === 4}
+  class:fade-out={fadeOut}>
   <div class="art">
-    <div class="gradient-1"></div>
-    <div class="gradient-2"></div>
-    <div class="gradient-3"></div>
+    <div class="gradient-1" />
+    <div class="gradient-2" />
+    <div class="gradient-3" />
   </div>
   <div class="content">
     <div>
@@ -226,11 +243,18 @@
         <div id="content-text-wrapper">
           <div id="content-text-default">
             <h1>Access the open web with ease</h1>
-            <p>Seamless access to the open web with Lume, integrated Handshake (HNS) and Ethereum (ENS) Support.</p>
+            <p>
+              Seamless access to the open web with Lume, integrated Handshake
+              (HNS) and Ethereum (ENS) Support.
+            </p>
           </div>
           <div id="content-text-create-account">
             <h1>Set up your account key</h1>
-            <p>Let’s create your account key or seed phrase. This phrase will be used to access your Lume account. Make sure to keep it safe at all times.</p>
+            <p>
+              Let’s create your account key or seed phrase. This phrase will be
+              used to access your Lume account. Make sure to keep it safe at all
+              times.
+            </p>
           </div>
           <div id="content-text-show-key">
             <h1>Here’s your account key</h1>
@@ -243,14 +267,24 @@
               <div class="content-action-sign-in">
                 <div class="content-action-inner">
                   <div class="btn-wrapper sign-in-btn">
-                    <button class="btn-main btn-black" on:click={() => signIn()}>Sign in with Account Key</button>
+                    <button class="btn-main btn-black" on:click={() => signIn()}
+                      >Sign in with Account Key
+                    </button>
                   </div>
                   <div class="sign-in-form">
                     <div class="input-wrapper">
-                      <input bind:this={inputKeyRef} type="text" bind:value={inputKey} placeholder="Insert your 12-word account key here" />
+                      <input
+                        bind:this={inputKeyRef}
+                        type="text"
+                        bind:value={inputKey}
+                        placeholder="Insert your 12-word account key here" />
                     </div>
                     <div class="btn-wrapper">
-                      <button class="btn-main btn-green" on:click={() => inputKeySignIn()}>Login</button>
+                      <button
+                        class="btn-main btn-green"
+                        on:click={() => inputKeySignIn()}
+                        >Login
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -258,17 +292,34 @@
               <div class="content-action-create-account">
                 <div class="content-action-inner">
                   <div class="btn-wrapper create-account-ready-btn">
-                    <button class="btn-main btn-green" on:click={() => createAccountReady()}>I get it, I’ll keep it safe. Let’s see the key.</button>
+                    <button
+                      class="btn-main btn-green"
+                      on:click={() => createAccountReady()}
+                      >I get it, I’ll keep it safe. Let’s see the key.
+                    </button>
                   </div>
                   <div class="create-account-ready">
                     <div class="warning">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                       </svg>
-                      <div>Should you lose this key, you will be forced to create a new account.</div>
+                      <div>
+                        Should you lose this key, you will be forced to create a
+                        new account.
+                      </div>
                     </div>
                     <div class="btn-wrapper create-account-show-key-btn">
-                      <button class="btn-main" on:click={() => showKey()}>I’m ready, show me the key</button>
+                      <button class="btn-main" on:click={() => showKey()}
+                        >I’m ready, show me the key
+                      </button>
                     </div>
                     <div class="btn-wrapper create-account-back-btn">
                       <button on:click={() => createAccountBack()}>
@@ -284,13 +335,25 @@
             </div>
             <div class="btn-stack">
               <div class="btn-wrapper create-account-btn">
-                <button class="btn-main btn-green" on:click={() => createAccount()}>Create an Account</button>
+                <button
+                  class="btn-main btn-green"
+                  on:click={() => createAccount()}
+                  >Create an Account
+                </button>
               </div>
               <div class="btn-wrapper create-account-gray-btn">
-                <button class="btn-main btn-black gray-text" on:click={() => createAccount()}>Create an Account</button>
+                <button
+                  class="btn-main btn-black gray-text"
+                  on:click={() => createAccount()}
+                  >Create an Account
+                </button>
               </div>
               <div class="btn-wrapper create-account-cancel-btn">
-                <button class="btn-main btn-black gray-text" on:click={() => createAccountCancel()}>Go back</button>
+                <button
+                  class="btn-main btn-black gray-text"
+                  on:click={() => createAccountCancel()}
+                  >Go back
+                </button>
               </div>
             </div>
           </div>
@@ -306,25 +369,51 @@
                   {/each}
                 </div>
                 <div class="warning">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                   </svg>
                   <div>Make sure to write this key down for safe keeping.</div>
                 </div>
                 <div class="btn-wrapper show-key-copy-btn">
-                  <button class="btn-main btn-black" on:click={() => copyKey()} class:success={copyKeySuccess} class:error={copyKeyError}>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
+                  <button
+                    class="btn-main btn-black"
+                    on:click={() => copyKey()}
+                    class:success={copyKeySuccess}
+                    class:error={copyKeyError}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
                     </svg>
                     {copyKeyButtonText}
                   </button>
                 </div>
                 <div class="btn-stack">
                   <div class="btn-wrapper show-key-continue-btn">
-                    <button class="btn-main" on:click={() => showKeyWarning()}>Continue</button>
+                    <button class="btn-main" on:click={() => showKeyWarning()}
+                      >Continue
+                    </button>
                   </div>
                   <div class="btn-wrapper show-key-login-btn">
-                    <button class="btn-main btn-green" on:click={() => generatedKeySignIn()}>Login</button>
+                    <button
+                      class="btn-main btn-green"
+                      on:click={() => generatedKeySignIn()}
+                      >Login
+                    </button>
                   </div>
                 </div>
               </div>
@@ -334,7 +423,9 @@
       </div>
     </div>
     <div class="grant-info">
-      Lume is a 503c Grant recepient, <a href="https://lumeweb.com">learn more</a> about the work we’re doing to provide accessible access to the open web for everyone.
+      Lume is a 503c Grant recepient, <a href="https://lumeweb.com"
+        >learn more</a> about the work we’re doing to provide accessible access to
+      the open web for everyone.
     </div>
   </div>
 </main>
@@ -354,7 +445,8 @@
     }
   }
 
-  .art, .content {
+  .art,
+  .content {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -375,24 +467,42 @@
     }
 
     .gradient-1 {
-      background: linear-gradient(272.67deg, #1FC3F7 -27.49%, #33A653 49.4%, #62C554 87.63%);
+      background: linear-gradient(
+        272.67deg,
+        #1fc3f7 -27.49%,
+        #33a653 49.4%,
+        #62c554 87.63%
+      );
       z-index: -1;
     }
 
     .gradient-2 {
-      background: conic-gradient(from 180deg at 50% 50%, #33A653 -15.8deg, #080808 222.32deg, #33A653 344.2deg, #080808 582.32deg);
+      background: conic-gradient(
+        from 180deg at 50% 50%,
+        #33a653 -15.8deg,
+        #080808 222.32deg,
+        #33a653 344.2deg,
+        #080808 582.32deg
+      );
       opacity: 0;
       z-index: -2;
     }
 
     .gradient-3 {
-      background: linear-gradient(272.67deg, #ED6A5E -27.49%, #0C0C0D 26.91%, #33A653 49.4%, #ED6A5E 99.62%);
+      background: linear-gradient(
+        272.67deg,
+        #ed6a5e -27.49%,
+        #0c0c0d 26.91%,
+        #33a653 49.4%,
+        #ed6a5e 99.62%
+      );
       opacity: 0;
       z-index: -3;
     }
   }
 
-  main.sign-in, main.create-account {
+  main.sign-in,
+  main.create-account {
     .art {
       .gradient-1 {
         opacity: 0;
@@ -486,7 +596,8 @@
     z-index: 2;
   }
 
-  #content-text-create-account, #content-text-show-key {
+  #content-text-create-account,
+  #content-text-show-key {
     position: absolute;
     opacity: 0;
     z-index: 1;
@@ -709,7 +820,8 @@
     z-index: 2;
   }
 
-  .create-account-gray-btn, .create-account-cancel-btn {
+  .create-account-gray-btn,
+  .create-account-cancel-btn {
     opacity: 0;
     z-index: 1;
   }
@@ -870,8 +982,12 @@
       z-index: 2;
     }
 
-    &.create-account-step-2, &.create-account-step-3 {
-      #content-text-wrapper, .separator, #switch-default .btn-stack, .grant-info {
+    &.create-account-step-2,
+    &.create-account-step-3 {
+      #content-text-wrapper,
+      .separator,
+      #switch-default .btn-stack,
+      .grant-info {
         transition-delay: 2s;
         opacity: 0.15;
         pointer-events: none;
@@ -898,8 +1014,12 @@
       }
     }
 
-    &.create-account-step-3, &.create-account-step-4 {
-      #content-text-wrapper, .separator, #switch-default .btn-stack, .grant-info {
+    &.create-account-step-3,
+    &.create-account-step-4 {
+      #content-text-wrapper,
+      .separator,
+      #switch-default .btn-stack,
+      .grant-info {
         transition-delay: 0s;
         opacity: 1;
       }
@@ -936,7 +1056,10 @@
     }
 
     &.create-account-step-4 {
-      #content-text-wrapper, .show-key-copy-btn, #switch-show-key .btn-stack, .grant-info {
+      #content-text-wrapper,
+      .show-key-copy-btn,
+      #switch-show-key .btn-stack,
+      .grant-info {
         animation: 5000ms save-key-warning;
       }
 
diff --git a/ui/components/dashboard/Dashboard.svelte b/ui/components/dashboard/Dashboard.svelte
index 7713087..f0c8c71 100644
--- a/ui/components/dashboard/Dashboard.svelte
+++ b/ui/components/dashboard/Dashboard.svelte
@@ -1,11 +1,11 @@
 <script>
-  import '../../styles/global.scss';
-  import lumeLogo from '../../assets/lume-logo.png';
+  import "../../styles/global.scss";
+  import lumeLogo from "../../assets/lume-logo.png";
 
-  import svgGithub from '../../assets/icon/github.svg?raw';
-  import svgDiscord from '../../assets/icon/discord.svg?raw';
-  import svgTwitter from '../../assets/icon/twitter.svg?raw';
-  import svgFacebook from '../../assets/icon/facebook.svg?raw';
+  import svgGithub from "../../assets/icon/github.svg?raw";
+  import svgDiscord from "../../assets/icon/discord.svg?raw";
+  import svgTwitter from "../../assets/icon/twitter.svg?raw";
+  import svgFacebook from "../../assets/icon/facebook.svg?raw";
 
   let step = 1;
   let userCount;
@@ -16,7 +16,7 @@
 
   setTimeout(() => {
     step = 3;
-    userCount = '23k';
+    userCount = "23k";
   }, 6000);
 
   setTimeout(() => {
@@ -25,34 +25,49 @@
 </script>
 
 <header>
-  <img src={lumeLogo} alt="Lume"/>
-  <div class="status" class:step-2={step === 2} class:step-3={step === 3} class:step-4={step === 4}>
+  <img src={lumeLogo} alt="Lume" />
+  <div
+    class="status"
+    class:step-2={step === 2}
+    class:step-3={step === 3}
+    class:step-4={step === 4}>
     <div class="network">
       <div class="connected">
-        <span class="icon icon-success"></span>
+        <span class="icon icon-success" />
         Lume Network
       </div>
       <div class="connecting">
-        <span class="icon icon-wait icon-wait-yellow"></span>
+        <span class="icon icon-wait icon-wait-yellow" />
         Lume Network
       </div>
     </div>
     <div class="user-count" class:user-count-hidden={!userCount}>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
       </svg>
       {userCount}
     </div>
   </div>
 </header>
-<main class:step-2={step === 2} class:step-3={step === 3} class:step-4={step === 4}>
+<main
+  class:step-2={step === 2}
+  class:step-3={step === 3}
+  class:step-4={step === 4}>
   <div class="art-wrapper">
     <div class="art-rotate">
       <div class="art">
-        <div class="gradient-1"></div>
-        <div class="gradient-2"></div>
-        <div class="gradient-3"></div>
-        <div class="gradient-4"></div>
+        <div class="gradient-1" />
+        <div class="gradient-2" />
+        <div class="gradient-3" />
+        <div class="gradient-4" />
       </div>
     </div>
   </div>
@@ -70,30 +85,24 @@
         <ul>
           <li class="success">
             <div class="network">
-              <span class="icon icon-success"></span>
+              <span class="icon icon-success" />
               HNS
             </div>
-            <div class="status">
-              Synced
-            </div>
+            <div class="status">Synced</div>
           </li>
           <li class="loading">
             <div class="network">
-              <span class="icon icon-wait"></span>
+              <span class="icon icon-wait" />
               ENS
             </div>
-            <div class="status">
-              Syncing
-            </div>
+            <div class="status">Syncing</div>
           </li>
           <li class="error">
             <div class="network">
-              <span class="icon icon-error"></span>
+              <span class="icon icon-error" />
               Arweave
             </div>
-            <div class="status">
-              Issue
-            </div>
+            <div class="status">Issue</div>
           </li>
         </ul>
       </div>
@@ -102,14 +111,22 @@
         <ul>
           <li class="success">
             <div class="network">
-              <span class="icon icon-success"></span>
+              <span class="icon icon-success" />
               IPFS
             </div>
             <div class="status">
               Connected
               <div class="user-count">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                 </svg>
                 {userCount}
               </div>
@@ -117,14 +134,22 @@
           </li>
           <li class="loading">
             <div class="network">
-              <span class="icon icon-wait"></span>
+              <span class="icon icon-wait" />
               Arweave
             </div>
             <div class="status">
               Connecting
               <div class="user-count">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                 </svg>
                 {userCount}
               </div>
@@ -259,7 +284,8 @@
         }
       }
 
-      &.step-3, &.step-4 {
+      &.step-3,
+      &.step-4 {
         .network {
           .connecting {
             z-index: 1;
@@ -312,24 +338,48 @@
     }
 
     .gradient-1 {
-      background: linear-gradient(272.67deg, #FF005C -27.49%, #0C0C0D 26.91%, #FF005C 49.4%, #ED6A5E 99.62%);
+      background: linear-gradient(
+        272.67deg,
+        #ff005c -27.49%,
+        #0c0c0d 26.91%,
+        #ff005c 49.4%,
+        #ed6a5e 99.62%
+      );
       z-index: -1;
     }
 
     .gradient-2 {
-      background: conic-gradient(from 180deg at 50% 50%, #A67833 -15.8deg, #E91F1F 222.32deg, #A67833 344.2deg, #E91F1F 582.32deg);
+      background: conic-gradient(
+        from 180deg at 50% 50%,
+        #a67833 -15.8deg,
+        #e91f1f 222.32deg,
+        #a67833 344.2deg,
+        #e91f1f 582.32deg
+      );
       opacity: 0;
       z-index: -2;
     }
 
     .gradient-3 {
-      background: conic-gradient(from -89.79deg at 50% 50%, #33A653 -15.8deg, #080808 222.32deg, #33A653 344.2deg, #080808 582.32deg);
+      background: conic-gradient(
+        from -89.79deg at 50% 50%,
+        #33a653 -15.8deg,
+        #080808 222.32deg,
+        #33a653 344.2deg,
+        #080808 582.32deg
+      );
       opacity: 0;
       z-index: -3;
     }
 
     .gradient-4 {
-      background: conic-gradient(from 180deg at 50% 50%, #2F2F2F -15.8deg, #66D155 222.32deg, #2F2F2F 344.2deg, #66D155 582.32deg);
+      background: conic-gradient(
+        from 180deg at 50% 50%,
+        #2f2f2f -15.8deg,
+        #66d155 222.32deg,
+        #2f2f2f 344.2deg,
+        #66d155 582.32deg
+      );
       opacity: 0;
       z-index: -4;
     }
diff --git a/ui/components/onboarding/Onboarding.svelte b/ui/components/onboarding/Onboarding.svelte
index 3356933..51fedc3 100644
--- a/ui/components/onboarding/Onboarding.svelte
+++ b/ui/components/onboarding/Onboarding.svelte
@@ -1,6 +1,6 @@
 <script>
-  import '../../styles/global.scss';
-  import lumeLogo from '../../assets/lume-logo.png';
+  import "../../styles/global.scss";
+  import lumeLogo from "../../assets/lume-logo.png";
 
   let started = false;
   let step = 1;
@@ -19,54 +19,79 @@
   };
 
   const redirect = () => {
-    window.location.href = '/account.html';
+    window.location.href = "/account.html";
   };
 </script>
 
 <header>
-  <img src={lumeLogo} alt="Lume"/>
+  <img src={lumeLogo} alt="Lume" />
 </header>
-<main class:started={started} class:step-2={step === 2} class:step-3={step === 3} class:step-4={step === 4}>
-  <div class="art art-1"></div>
-  <div class="art art-2"></div>
-  <div class="art art-3"></div>
-  <div class="art art-4"></div>
+<main
+  class:started
+  class:step-2={step === 2}
+  class:step-3={step === 3}
+  class:step-4={step === 4}>
+  <div class="art art-1" />
+  <div class="art art-2" />
+  <div class="art art-3" />
+  <div class="art art-4" />
   <div class="content">
     <div>
       <div class="page content-1">
         <h1>Thank you for supporting an open web.</h1>
-        <p>We are an independent, pure organization. We have decided not to take money from venture capitalists. Nor do we have a large treasury funding our work.</p>
+        <p>
+          We are an independent, pure organization. We have decided not to take
+          money from venture capitalists. Nor do we have a large treasury
+          funding our work.
+        </p>
         <div class="btn-wrapper">
           <button class="btn-main" on:click={() => start()}>Begin</button>
         </div>
       </div>
       <div class="page content-2">
         <h1>Gateway for easy access to the open web.</h1>
-        <p>Easy Access to Web3. With native Handshake (HNS) and Ethereum (ENS) support, you can forget eth.link and hns.is. This is your gateway.</p>
+        <p>
+          Easy Access to Web3. With native Handshake (HNS) and Ethereum (ENS)
+          support, you can forget eth.link and hns.is. This is your gateway.
+        </p>
         <div class="btn-wrapper">
-          <button class="btn-main btn-black" on:click={() => redirect()}>Skip</button>
+          <button class="btn-main btn-black" on:click={() => redirect()}
+            >Skip</button>
           <button class="btn-main" on:click={() => next()}>Next</button>
         </div>
       </div>
       <div class="page content-3">
         <h1>Universal storage drive slide.</h1>
-        <p>Stop worrying about being vendor-locked. Remain flexible and reduce your storage costs by 50% or more. Lume is affordable storage on-demand.</p>
+        <p>
+          Stop worrying about being vendor-locked. Remain flexible and reduce
+          your storage costs by 50% or more. Lume is affordable storage
+          on-demand.
+        </p>
         <div class="btn-wrapper">
-          <button class="btn-main btn-black" on:click={() => prev()}>Back</button>
+          <button class="btn-main btn-black" on:click={() => prev()}
+            >Back</button>
           <button class="btn-main" on:click={() => next()}>Next</button>
         </div>
       </div>
       <div class="page content-4">
         <h1>Create decentralized websites.</h1>
-        <p>Stop worrying about being vendor-locked. Remain flexible and reduce your storage costs by 50% or more. Lume is affordable storage on-demand. Stop worrying about being vendor-locked.</p>
+        <p>
+          Stop worrying about being vendor-locked. Remain flexible and reduce
+          your storage costs by 50% or more. Lume is affordable storage
+          on-demand. Stop worrying about being vendor-locked.
+        </p>
         <div class="btn-wrapper">
-          <button class="btn-main btn-black" on:click={() => prev()}>Back</button>
-          <button class="btn-main btn-green" on:click={() => redirect()}>Get started</button>
+          <button class="btn-main btn-black" on:click={() => prev()}
+            >Back</button>
+          <button class="btn-main btn-green" on:click={() => redirect()}
+            >Get started</button>
         </div>
       </div>
     </div>
     <div class="grant-info">
-      Lume is a 503c Grant recepient, <a href="https://lumeweb.com">learn more</a> about the work we’re doing to provide accessible access to the open web for everyone.
+      Lume is a 503c Grant recepient, <a href="https://lumeweb.com"
+        >learn more</a> about the work we’re doing to provide accessible access to
+      the open web for everyone.
     </div>
   </div>
 </main>
@@ -80,9 +105,10 @@
     background: #080808;
   }
 
-  .art, .content {
+  .art,
+  .content {
     position: absolute;
-    top:0;
+    top: 0;
     bottom: 0;
     width: 50%;
   }
@@ -180,7 +206,9 @@
     }
   }
 
-  .content-2, .content-3, .content-4 {
+  .content-2,
+  .content-3,
+  .content-4 {
     display: none;
   }