added colors to theme (#73)

- added new colors - removed old colors - formatting applied - closes #63 Co-authored-by: Claire Olmstead <[email protected]>
frequency-chain · Jan 11, 2024 · eaa7510 · eaa7510
1 parent 7592b92
commit eaa7510
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 66 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,4 @@ coverage
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
+.idea/
diff --git a/src/components/AddControlKey.svelte b/src/components/AddControlKey.svelte
@@ -116,7 +116,7 @@
       selectLabel="Key to Add"
       bind:selectedOption={selectedKeyToAdd}
       {validAccounts}
-      classOverrides="border-silver border-2 rounded-lg"
+      classOverrides="border-2 rounded-lg"
     />
     <div class="flex w-350 justify-between">
       <button on:click|preventDefault={addControlKey} class="btn-primary action-btn-l">Add It</button>

diff --git a/src/components/Banner.svelte b/src/components/Banner.svelte
@@ -1,8 +1,8 @@
 <script>
-import logo from "$lib/assets/logo.png";
+  import logo from '$lib/assets/logo.png';
 </script>
 
 <div class="bg-header mt-8 h-24">
-  <img alt="The project logo" src={logo} class=""/>
-  <p class="text-aqua text-lg font-semibold tracking-wider pl-3">Provider Dashboard</p>
+  <img alt="The project logo" src={logo} class="" />
+  <p class="text-lg font-semibold tracking-wider pl-3">Provider Dashboard</p>
 </div>
diff --git a/src/components/Capacity.svelte b/src/components/Capacity.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
-  import { storeConnected, transactionSigningAddress, dotApi, storeMsaInfo, storeBlockNumber, storeChainInfo } from '$lib/stores';
+  import {
+    storeConnected,
+    transactionSigningAddress,
+    dotApi,
+    storeMsaInfo,
+    storeBlockNumber,
+    storeChainInfo,
+  } from '$lib/stores';
   import { getBlockNumber } from '$lib/connections';
   import type { ApiPromise } from '@polkadot/api';
-  import type {ChainInfo, MsaInfo} from '$lib/storeTypes';
+  import type { ChainInfo, MsaInfo } from '$lib/storeTypes';
   import { getMsaEpochAndCapacityInfo } from '$lib/polkadotApi';
   import { providerNameToHuman } from '$lib/utils';
   import { balanceToHuman } from '$lib/utils.js';
@@ -61,15 +68,13 @@
       msaInfo.isProvider = info?.msaInfo?.isProvider || false;
       capacityDetails = { ...defaultDetails, ...info.capacityDetails };
       epochNumber = info.epochNumber;
-      storeChainInfo.update((info: ChainInfo) => info = { ...info, epochNumber});
+      storeChainInfo.update((info: ChainInfo) => (info = { ...info, epochNumber }));
       storeMsaInfo.set(msaInfo);
     }
   });
 </script>
 
-<div
-  class="p-14 ml-8 w-500 action-card font-semibold tracking-wider bg-gradient-to-br from-teal-light to-teal-dark"
->
+<div class="p-14 ml-8 w-500 action-card font-semibold tracking-wider bg-gradient-to-br">
   <p class="text-2xl pb-6">Capacity</p>
   {#if !connected}
     <p>Not connected</p>

diff --git a/src/components/ChainStatus.svelte b/src/components/ChainStatus.svelte
@@ -6,25 +6,25 @@
 </script>
 
 <div id="chain-status"
-   class=" p-8 h-fit shadow-md flex items-stretch bg-white-transparent rounded-xl font-semibold tracking-wider"
+   class=" p-8 h-fit shadow-md flex items-stretch rounded-xl font-semibold tracking-wider"
 >
   <div class="text-3xl self-center text-right border-r-2 pr-10 pl-4">
     <div class="height-fit">Overview:</div>
   </div>
   <div class="border-r-2 px-8 grow shrink-0">
     <p class="text-lg" id="connection-status-title">Connection status:</p>
-    <p class="text-aqua text-3xl" id="connection-status-value">{connected ? 'Connected' : 'Not connected'}</p>
+    <p class="text-3xl" id="connection-status-value">{connected ? 'Connected' : 'Not connected'}</p>
   </div>
   <div class="border-r-2 basis-1/4 px-8">
     <p class="text-lg" id="block-number-title">Current Block:</p>
-    <p class="text-3xl text-aqua" id="block-number-value">{blockNumber}</p>
+    <p class="text-3xl" id="block-number-value">{blockNumber}</p>
   </div>
   <div class="border-r-2 basis-1/6 px-8">
     <p class="text-lg" id="epoch-number-title">Epoch:</p>
-    <p class="text-3xl text-aqua" id="epoch-number-value">{epochNumber}</p>
+    <p class="text-3xl" id="epoch-number-value">{epochNumber}</p>
   </div>
   <div class="basis-1/6 pl-8">
     <p class="text-lg" id="token-title">Token:</p>
-    <p class="text-3xl text-aqua" id="token-value">{token}</p>
+    <p class="text-3xl" id="token-value">{token}</p>
   </div>
 </div>
diff --git a/src/components/Connect.svelte b/src/components/Connect.svelte
@@ -91,7 +91,7 @@
     bind:value={otherProvider}
     disabled={selectedProvider.toString() != 'Other'}
     class:hidden={selectedProvider.toString() != 'Other'}
-    class="w-500 border-silver rounded text-white bg-white-transparent"
+    class="w-500 rounded text-white"
   />
   <button
     on:click|preventDefault={async () => await connect()}
@@ -103,10 +103,10 @@
   </button>
 </div>
 <p class="text-sm pt-4 underline cursor-pointer font-light">
-    <a id="here" href="#here" on:click|preventDefault={toggleExplain} on:keydown|preventDefault={toggleExplain}
+  <a id="here" href="#here" on:click|preventDefault={toggleExplain} on:keydown|preventDefault={toggleExplain}
     >What's the difference between Mainnet and Testnet (Rococo)?</a
-    >
-  </p>
+  >
+</p>
 <div class:hidden={!showExplainer} class="pt-4">
   <p>The Frequency Mainnet is the production Frequency blockchain network.</p>
   <p>
@@ -116,10 +116,10 @@
   <h3 class="text-lg pt-4 pb-2">
     <strong>What about the other options?</strong>
   </h3>
-  <p>To connect to a node running on your desktop, choose <span class="font-bold text-aqua">Localhost.</span></p>
+  <p>To connect to a node running on your desktop, choose <span class="font-bold">Localhost.</span></p>
   <p>
-    To connect to a node that is not in the list, choose <span class="font-bold text-aqua">Other</span>, then type the
-    desired WebSocket address in the text field.
+    To connect to a node that is not in the list, choose <span class="font-bold">Other</span>, then type the desired
+    WebSocket address in the text field.
   </p>
   <button on:click={toggleExplain} on:keydown={toggleExplain} class="btn-primary">Okay</button>
 </div>

diff --git a/src/components/Intro.svelte b/src/components/Intro.svelte
@@ -15,7 +15,7 @@
   <button
     on:click|preventDefault={hide}
     on:keydown={hide}
-    class="mt-6 px-8 p-2 rounded-2xl text-white border-black bg-cobalt"
+    class="mt-6 px-8 p-2 rounded-2xl text-white border-black bg-blue"
   >
     Ok
   </button>

diff --git a/src/components/Provider.svelte b/src/components/Provider.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import {dotApi, storeConnected, storeMsaInfo, storeToken, transactionSigningAddress} from '$lib/stores';
-  import type {MsaInfo} from '$lib/storeTypes';
-  import {balanceToHuman} from '$lib/utils';
-  import type {ApiPromise} from '@polkadot/api';
-  import {getBalances} from '$lib/polkadotApi';
-  import type {AccountBalances} from '$lib/polkadotApi';
+  import { dotApi, storeConnected, storeMsaInfo, storeToken, transactionSigningAddress } from '$lib/stores';
+  import type { MsaInfo } from '$lib/storeTypes';
+  import { balanceToHuman } from '$lib/utils';
+  import type { ApiPromise } from '@polkadot/api';
+  import { getBalances } from '$lib/polkadotApi';
+  import type { AccountBalances } from '$lib/polkadotApi';
 
   let msaInfo: MsaInfo;
-  let accountBalances: AccountBalances = {free: 0n, reserved: 0n, frozen: 0n};
+  let accountBalances: AccountBalances = { free: 0n, reserved: 0n, frozen: 0n };
 
   let connected = false;
   storeConnected.subscribe((val) => (connected = val));
@@ -35,25 +35,23 @@
   });
 </script>
 
-<div
-  class="p-14 action-card w-500 min-w-fit font-semibold tracking-wider bg-gradient-to-br from-lilac to-periwinkle align-top"
->
+<div class="p-14 action-card w-500 min-w-fit font-semibold tracking-wider bg-gradient-to-br align-top">
   <table>
     <tr>
-      <td colspan=2 class="text-2xl pb-6">Provider</td>
+      <td colspan="2" class="text-2xl pb-6">Provider</td>
     </tr>
     {#if !connected}
       <tr>
-        <td colspan=2>Not connected</td>
+        <td colspan="2">Not connected</td>
       </tr>
     {:else if localSigningAddress === ''}
       <tr>
-        <td colspan=2>No transaction signing address selected</td>
+        <td colspan="2">No transaction signing address selected</td>
       </tr>
     {:else}
       {#if msaInfo?.msaId === 0}
         <tr>
-          <td colspan=2>No Msa Id. Please create an MSA first.</td>
+          <td colspan="2">No Msa Id. Please create an MSA first.</td>
         </tr>
       {:else}
         <tr>
@@ -68,7 +66,7 @@
         </tr>
       {:else if msaInfo.msaId > 0}
         <tr>
-          <td colspan=2>Selected Key is not associated with a Provider</td>
+          <td colspan="2">Selected Key is not associated with a Provider</td>
         </tr>
       {/if}
     {/if}

diff --git a/src/components/Stake.svelte b/src/components/Stake.svelte
@@ -123,7 +123,7 @@
       selectLabel="Key to Stake From"
       bind:selectedOption={selectedKey}
       {validAccounts}
-      classOverrides="border-silver border-2 rounded-lg"
+      classOverrides="border-2 rounded-lg"
     />
     <div class="mt-6">
       <label for="stakingInput">Amount to Stake in <span class="units">{token}</span></label>

diff --git a/src/components/TransactionStatus.svelte b/src/components/TransactionStatus.svelte
@@ -8,15 +8,11 @@
   };
 </script>
 
-<div
-  class:hidden={!showSelf}
-  id="transaction-status"
-  class="ml-8 action-card basis-1/3 grow-1"
->
+<div class:hidden={!showSelf} id="transaction-status" class="ml-8 action-card basis-1/3 grow-1">
   <p class="action-card-title">Transaction status</p>
   <ul class="">
     {#each statuses as status}
-      <li class="last:text-aqua mt-4 text-md font-light">{status}</li>
+      <li class="mt-4 text-md font-light">{status}</li>
     {/each}
   </ul>
   <button on:click|preventDefault={hideSelf} class="btn-primary">Dismiss Status</button>

diff --git a/src/style/app.css b/src/style/app.css
@@ -7,19 +7,19 @@
 /*  */
 @layer components {
   .btn-primary {
-    @apply mt-6 px-8 p-3 h-14 rounded-full text-white text-lg bg-cobalt border-black shadow-md;
+    @apply mt-6 px-8 p-3 h-14 rounded-full text-white text-lg bg-blue border-black shadow-md;
   }
   .btn-cancel {
-    @apply mt-6 px-8 p-3 rounded-full text-white text-lg bg-silver border-black shadow-md;
+    @apply mt-6 px-8 p-3 rounded-full text-white text-lg border-black shadow-md;
   }
   select {
     @apply text-black px-6 py-2 rounded-md border-0 w-500 h-14 font-medium text-lg;
   }
   .action-card {
-    @apply mt-8 p-8 shrink-0 rounded-lg bg-white-transparent text-white shadow-md;
+    @apply mt-8 p-8 shrink-0 rounded-lg text-white shadow-md;
   }
   .action-card input {
-    @apply border-silver rounded text-white bg-white-transparent;
+    @apply rounded text-white;
   }
   .action-card-title {
     @apply font-semibold text-2xl;
@@ -44,4 +44,4 @@
  button {
   @apply select-none;
  }
-}
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,34 +9,33 @@ export default {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-      'white': '#ffffff',
-      'black': '#222222',
-      'cobalt': '#4B64FF',
-      'scarlet': '#F82013',
-      'silver': '#D3D3D3',
-      'aqua': '#69B9CD',
-      'lilac': 'rgb(243,206,255, 0.4)',
-      'periwinkle': 'rgb(120,159,243,0.4)',
-      'teal-light': 'rgb(175,235,244,0.4)',
-      'teal-dark': 'rgb(84,158,170,0.4)',
-      'white-transparent': 'rgb(254,255,255,.1)',
+      white: '#ffffff',
+      black: '#000000',
+      disabled: '#BCBAC0',
+      'bg-black': '#232326',
+      'bg-black-active': '#363639',
+      blue: '#459ABA',
+      'blue-light': '#69B9CD',
+      green: '#6EE9D1',
+      'green-success': '#7CFA4D',
+      divider: '#504D4D',
+      overlay: 'rgba(57, 52, 52, 0.75)',
     },
     width: {
-      '500': '500px',
+      500: '500px',
     },
     extend: {
       borderRadius: {
         'rounded-3xl': '20px',
         'rounded-md': '5px',
       },
       boxShadow: {
-        'md': '0px 4px 7px rgba(0,0,0,.25)',
+        md: '0px 4px 7px rgba(0,0,0,.25)',
       },
       backgroundImage: {
-        'topRight': 'url(/assets/top-right-bars.png)'
+        topRight: 'url(/assets/top-right-bars.png)',
       },
     },
   },
-  plugins: [require('@tailwindcss/forms'),],
+  plugins: [require('@tailwindcss/forms')],
 };
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,3 +37,4 @@ coverage
		vite.config.js.timestamp-*
		vite.config.ts.timestamp-*

		.idea/