Feat/replace colorway #163 (#182)

The goal of this PR is to update the colors for Provider Dashboard andmake any necessary other adjustments. Closes #163 Co-authored-by: V. Claire Olmstead <[email protected]>
frequency-chain · Oct 10, 2024 · d5b5edb · d5b5edb
1 parent 1caa501
commit d5b5edb
Show file tree

Hide file tree

Showing 18 changed files with 108 additions and 297 deletions.
diff --git a/src/components/AddKeyRequirements.svelte b/src/components/AddKeyRequirements.svelte
@@ -1,6 +1,6 @@
 <div>
   <div class="label mb-2">Requirements</div>
-  <ol class="ordered-list text-xs">
+  <ol class="ordered-list text-sm">
     <li>
       Ensure the new Account Id has a FRQCY balance if you intend to use it for submitting FRQCY or Capacity
       transactions.

diff --git a/src/components/AddToClipboard.svelte b/src/components/AddToClipboard.svelte
@@ -2,22 +2,22 @@
   import Clipboard from './Clipboard.svelte';
   import CopyIcon from '../lib/assets/CopyIcon.svelte';
 
-  let fillColor = '#fff';
+  let fillColor = '#000';
   let isClicked = false;
 
   function handleMouseEnter() {
-    fillColor = '#459ABA';
+    fillColor = '#5E69FF';
   }
 
   function handleMouseLeave() {
-    if (!isClicked) fillColor = '#fff';
+    if (!isClicked) fillColor = '#000';
   }
 
   function handleClick() {
     fillColor = '#7CFA4D'; // Change to green on click
     isClicked = true;
     setTimeout(() => {
-      fillColor = '#fff'; // Reset to original
+      fillColor = '#000'; // Reset to original
       isClicked = false;
     }, 2000);
   }

diff --git a/src/components/ConnectionStatus.svelte b/src/components/ConnectionStatus.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import switchIcon from '$lib/assets/switch.png';
+  import Switch from '$lib/assets/Switch.svelte';
   import ConnectProvider from './ConnectProvider.svelte';
   import { user } from '$lib/stores/userStore';
   import { isLoggedIn, storeChainInfo } from '$lib/stores';
@@ -11,7 +11,7 @@
   <div class="flex items-center gap-6">
     <div class="flex items-center gap-2">
       {#if $storeChainInfo.connected}
-        <div class="w-1 h-1 rounded-full bg-green-success p-1" />
+        <div class="w-1 h-1 rounded-full bg-success p-1" />
       {:else}
         <div class="w-1 bg-red-error h-1 rounded-full p-1" />
       {/if}
@@ -24,8 +24,8 @@
       on:click|preventDefault={() => {
         showConnectProvider = true;
       }}
-      class="flex h-[40px] w-[40px] items-center justify-center rounded-md bg-green drop-shadow"
-      ><img src={switchIcon} alt="switch" class="w-[24px]" />
+      class="flex h-[40px] w-[40px] items-center justify-center rounded-md bg-bright-blue drop-shadow hover:opacity-[75%]"
+      ><Switch class="w-[24px]" />
     </button>
     <ConnectProvider close={() => (showConnectProvider = false)} isOpen={showConnectProvider} />
   </div>

diff --git a/src/components/DropDownMenu.svelte b/src/components/DropDownMenu.svelte
@@ -15,7 +15,7 @@
       <option class="text-disabled" value={null} disabled selected>{placeholder}</option>
     {/if}
     {#each options as option}
-      <option value={option} class="bg-base">{formatter(option)}</option>
+      <option value={option} class="bg-white">{formatter(option)}</option>
     {/each}
   </select>
 </div>
diff --git a/src/components/FAQItem.svelte b/src/components/FAQItem.svelte
@@ -13,14 +13,13 @@
 >
   <slot name="question" />
   <svg
-    class="w-8 ml-12 h-8 shrink-0 transform rounded bg-blue p-1 transition-transform duration-300 {isOpen
-      ? 'rotate-180'
-      : ''}"
+    class="w-8 ml-12 h-8 shrink-0 transform bg-black p-1 transition-transform duration-300 {isOpen ? 'rotate-180' : ''}"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     fill="currentColor"
   >
     <path
+      class="text-white"
       fill-rule="evenodd"
       d="M6.293 9.293a1 1 0 011.414 0L10 11.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
       clip-rule="evenodd"

diff --git a/src/components/Intro.svelte b/src/components/Intro.svelte
@@ -12,11 +12,7 @@
     relationships in form of Permissions and Grants, respectively.
   </p>
   <p class="pt-6">Click OK to get started.</p>
-  <button
-    on:click|preventDefault={hide}
-    on:keydown={hide}
-    class="mt-6 rounded-2xl border-black bg-blue p-2 px-8 text-white"
-  >
+  <button on:click|preventDefault={hide} on:keydown={hide} class="btn-primary mt-6 rounded-2xl p-2 px-8 text-white">
     Ok
   </button>
 </div>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -11,7 +11,7 @@
   };
 </script>
 
-<div class="fixed flex h-screen w-[126px] min-w-[126px] flex-col items-center justify-center bg-bg-black">
+<div class="sidebar-bg fixed flex h-screen w-[126px] min-w-[126px] flex-col items-center justify-center">
   <div class="flex w-[100%] flex-col">
     <NavItem href="/" isActive={url === '/'} onClick={() => (url = '/')}>Home</NavItem>
     {#if $isLoggedIn === true}

diff --git a/src/components/NavItem.svelte b/src/components/NavItem.svelte
@@ -11,7 +11,7 @@
   {href}
   on:click={onClick}
   class={` flex h-[100px] items-center justify-center text-sm font-bold ${
-    isActive && 'bg-bg-black-active shadow-blue-border'
+    isActive && 'bg-cream text-bright-blue shadow-blue-border'
   }`}
   {target}
 >

diff --git a/src/components/Profile.svelte b/src/components/Profile.svelte
@@ -5,14 +5,14 @@
 
 <div class="flex min-w-[300px] max-w-[500px] items-center gap-4">
   <div
-    class="text-bold flex h-[90px] w-[90px] min-w-[70px] max-w-[90px] items-center justify-center rounded-full bg-gradient-to-r from-blue to-green text-2xl"
+    class="text-bold flex h-[90px] w-[90px] min-w-[70px] max-w-[90px] items-center justify-center rounded-full bg-gradient-to-r from-teal to-bright-blue text-2xl"
   >
     {$user.providerName ? $user.providerName.substring(0, 1) : ''}
   </div>
   <div class="flex flex-col gap-2">
     <div class="data-value-lg">{$user.providerName}</div>
     <div class="text-sm">{$user.msaId}</div>
-    <div class="flex items-center justify-center align-middle">
+    <div class="flex items-center align-middle">
       <div class="text-sm leading-3">{$user.address}</div>
       <AddToClipboard copyValue={$user.address} />
     </div>

diff --git a/src/components/Provider.svelte b/src/components/Provider.svelte
@@ -8,7 +8,7 @@
   import ListCard from './ListCard.svelte';
   import AddAccountId from './AddAccountId.svelte';
 
-  let accountBalances: AccountBalances = { free: 0n, reserved: 0n, frozen: 0n };
+  let accountBalances: AccountBalances = { transferable: 0n, locked: 0n, total: 0n };
   let isAddAccountIdOpen: boolean = false;
 
   $: {

diff --git a/src/components/ProviderLogin.svelte b/src/components/ProviderLogin.svelte
@@ -6,7 +6,7 @@
   import { pageContent } from '$lib/stores/pageContentStore';
 </script>
 
-<div id="provider-login" class="content-block column w-single-block">
+<div id="provider-login" class="column content-block w-single-block">
   <BlockSection title="Provider Login">
     <LoginForm />
   </BlockSection>

diff --git a/src/components/Stake.svelte b/src/components/Stake.svelte
@@ -17,7 +17,7 @@
 
     <div>
       <div class="label mb-2">Requirements</div>
-      <ol class="ordered-list text-xs">
+      <ol class="ordered-list text-sm">
         <li>Ensure the Account Id has a <span class="units">{$storeChainInfo.token}</span> balance.</li>
         <li>Click 'Stake'.</li>
         <li>This will require 1 signature to send the transaction.</li>