update misc. colors and dropdowns/inputs (#181)

Help on Shannon's PR Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>
frequency-chain · Oct 9, 2024 · 55f7e52 · 55f7e52
1 parent 16af4b3
commit 55f7e52
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 280 deletions.
diff --git a/src/components/DropDownMenu.svelte b/src/components/DropDownMenu.svelte
@@ -10,7 +10,12 @@
 
 <div>
   <label class="label mb-3.5 block" for={id}>{label}</label>
-  <select {...$$restProps} {id} bind:value on:change={onChange} class="bg-white text-teal-dark">
+  <select
+    {...$$restProps}
+    {id}
+    bind:value
+    on:change={onChange}
+  >
     {#if placeholder !== ''}
       <option class="text-disabled" value={null} disabled selected>{placeholder}</option>
     {/if}

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 btn-primary 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/Nav.svelte b/src/components/Nav.svelte
@@ -11,8 +11,7 @@
   };
 </script>
 
-<div class="fixed flex h-screen w-[126px] min-w-[126px] flex-col items-center justify-center sidebar-bg">
-  {url}
+<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 && 'text-teal-light shadow-blue-border'
+    isActive && 'bg-cream text-teal shadow-blue-border'
   }`}
   {target}
 >

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="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/Wave.svelte b/src/components/Wave.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Header from '../components/Header.svelte';
   import Nav from '../components/Nav.svelte';
-  import Wave from '../components/Wave.svelte';
   import { logInPromise, dotApi, storeChainInfo } from '$lib/stores';
   import { getToken } from '$lib/polkadotApi';
   import { getBlockNumber, getEpoch } from '$lib/connections';
@@ -26,9 +25,6 @@
 </script>
 
 <div>
-  <div class="fixed right-0 top-[10%] z-[-1] w-[100%] opacity-60">
-    <Wave />
-  </div>
   <div class="flex">
     <Nav />
     <div class="m-6 w-[100%] pl-[126px]">

diff --git a/src/style/app.css b/src/style/app.css
@@ -10,8 +10,7 @@
   line-height: 24px;
   font-weight: 400;
 
-  background-color: #FEFAF3;
-  color: #18465E;
+  background-color: #fefaf3;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -23,12 +22,20 @@
 
 /*  */
 @layer components {
+  .sidebar-bg {
+    @apply bg-flan;
+  }
+
   .btn-primary {
-    @apply flex h-10 w-[225px] items-center justify-center rounded-full bg-teal-light text-base font-bold text-white disabled:bg-disabled;
+    @apply flex h-10 w-[225px] items-center justify-center rounded-full bg-teal text-base font-bold text-white hover:text-white hover:opacity-75 disabled:bg-disabled;
+  }
+
+  .btn-primary:disabled {
+    @apply hover:opacity-100;
   }
 
   .btn-no-fill {
-    @apply text-sm text-white underline;
+    @apply text-sm underline hover:text-bright-blue;
   }
 
   .action-card {
@@ -79,16 +86,16 @@
   }
 
   .data-value-lg {
-    @apply font-data text-lg text-teal-light;
+    @apply font-data text-lg text-teal;
   }
 
   .data-value-2xl {
-    @apply font-data text-2xl text-teal-light;
+    @apply font-data text-2xl text-teal;
   }
 
   /* layout */
   .content-block {
-    @apply rounded-md bg-white p-7 text-teal-dark drop-shadow-lg;
+    @apply rounded-md bg-white p-7 drop-shadow-lg;
   }
 
   .break-anywhere {
@@ -98,31 +105,18 @@
 
 @layer base {
   body {
-    @apply text-teal-dark;
     min-height: 100vh;
   }
 
   button {
     @apply select-none;
   }
 
-  .btn-primary {
-    @apply bg-teal-light;
-  }
-
-  .btn-primary:hover {
-    @apply opacity-75;
-  }
-
-  .sidebar-bg {
-    @apply bg-flan;
-  }
-
   input,
   [type='text'],
   [type='number'],
   select {
-    @apply h-[30px] w-[320px] overflow-ellipsis rounded-md border-none py-0 pl-2 text-sm text-black outline-none disabled:text-disabled disabled:opacity-85;
+    @apply h-[30px] w-[320px] overflow-ellipsis rounded-md border-none bg-white py-0 pl-2 text-sm text-black outline-none outline outline-1 outline-gray-3 disabled:text-disabled disabled:opacity-85;
   }
 
   select {
@@ -132,4 +126,8 @@
   ::placeholder {
     @apply text-disabled !important;
   }
+
+  a {
+    @apply hover:text-bright-blue;
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -25,12 +25,9 @@ export default {
       success: '#27AE60',
       warning: '#F99A2A',
       error: '#EB5757',
-      'teal-dark': '#18465E',
-      'teal-light': '#55B1AB',
-
+      teal: '#55B1AB',
       divider: '#504D4D',
       overlay: 'rgba(57, 52, 52, 0.75)',
-
     },
     width: {
       modal: '480px',