feat(bridge-ui): bridge light and dark themes (#12957)

* feat(bridge): make dark theme similar to website * feat(bridge): add light theme * feat(bridge): add mobile logo * feat(bridge): add theme toggle * fix(bridge): light mode button on desktop * feat(bridge): revert dark theme changes * feat(bridge): make light theme buttons lighter Co-authored-by: Daniel Wang <[email protected]> Co-authored-by: dave | d1onys1us <[email protected]> Co-authored-by: Roger <[email protected]> Co-authored-by: jeff <[email protected]>
taikoxyz · Jan 19, 2023 · a36aebd · a36aebd
1 parent 4d38ec4
commit a36aebd
Show file tree

Hide file tree

Showing 18 changed files with 163 additions and 28 deletions.
diff --git a/packages/bridge-ui/index.html b/packages/bridge-ui/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="dark" lang="en">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -17,4 +17,15 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
+
+  <script>
+    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+    if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.setAttribute("data-theme", "dark")
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.setAttribute("data-theme", "light")
+      localStorage.setItem('theme', 'light');
+    }
+  </script>
 </html>
diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
@@ -64,4 +64,34 @@ input[type=number]::-webkit-inner-spin-button {
 
 input[type=number] {
     -moz-appearance: textfield;
-}
+}
+
+.taiko-logo {
+  display: none;
+}
+
+[data-theme="dark"] .taiko-logo {
+  display: inline;
+}
+
+[data-theme="dark"] .taiko-light-logo {
+  display: none;
+}
+
+[data-theme="dark"] .switch-to-dark-mode {
+  display: none;
+}
+
+[data-theme="light"] .switch-to-light-mode {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  [data-theme="dark"] .taiko-logo {
+    display: none;
+  }
+
+  [data-theme="light"] .taiko-light-logo {
+    display: none;
+  }
+}
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -95,7 +95,7 @@
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-48 mt-2 pb-2 text-sm"
+    class="dropdown-content address-dropdown-content menu shadow bg-dark-2 rounded-sm w-48 mt-2 pb-2 text-sm"
   >
     <div class="p-5 pb-0 flex flex-col items-center" transition:slide>
       {#if $fromChain && $signer}
@@ -112,7 +112,7 @@
       {/if}
     </div>
     <div class="divider" />
-    <div class="flex hover:bg-dark-5 items-center py-2 px-4">
+    <div class="flex hover:bg-dark-5 items-center py-2 px-4 mx-2 rounded-md">
       <img
         width="24"
         height="24"
@@ -123,14 +123,14 @@
       {addressSubsection(address)}
     </div>
     <div
-      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4"
+      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4 mx-2 rounded-md"
       on:click={async () => await copyToClipboard(address)}
     >
       <ClipboardDocument class="mr-2" />
       Copy Address
     </div>
     <div
-      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4"
+      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4 mx-2 rounded-md"
       on:click={async () => await disconnect()}
     >
       <Power class="mr-2" /> Disconnect

diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -41,7 +41,7 @@
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content flex my-2 menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
+    class="dropdown-content address-dropdown-content flex my-2 menu p-2 shadow bg-dark-2 rounded-sm w-[194px]"
   >
     <li>
       <button

diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
@@ -1,14 +1,46 @@
 <script lang="ts">
   import Connect from "./buttons/Connect.svelte";
   import TaikoLogo from "./icons/TaikoLogo.svelte";
+  import TaikoLight from "./icons/TaikoLight.svelte";
   import { signer } from "../store/signer";
   import AddressDropdown from "./AddressDropdown.svelte";
   import ChainDropdown from "./ChainDropdown.svelte";
+  import TaikoLogoFluo from "./icons/TaikoLogoFluo.svelte";
+  import { Sun, Moon } from "svelte-heros-v2";
+  import { fly } from 'svelte/transition';
+
+  let isDarkMode = localStorage.getItem('theme') === 'dark';
+
+  function switchToLightMode() {
+    if (!document) {
+      return;
+    }
+    document.documentElement.setAttribute("data-theme", "light")
+    localStorage.setItem('theme', 'light');
+    isDarkMode = false;
+  }
+
+  function switchToDarkMode() {
+    if (!document) {
+      return;
+    }
+    document.documentElement.setAttribute("data-theme", "dark")
+    localStorage.setItem('theme', 'dark');
+    isDarkMode = true;
+  }
 </script>
 
 <div class="navbar bg-base-100">
   <div class="flex-1">
-    <TaikoLogo width={120} />
+    <span class="taiko-light-logo">
+      <TaikoLight width={120} />
+    </span>
+    <span class="taiko-logo">
+      <TaikoLogo width={120} />
+    </span>
+    <span class="md:hidden">
+      <TaikoLogoFluo width={50} />
+    </span>
   </div>
   <div class="flex-none">
     {#if $signer}
@@ -17,5 +49,17 @@
     {:else}
       <Connect />
     {/if}
+
+    <div class="ml-2">
+      {#if isDarkMode}
+        <button in:fly="{{ y: 10, duration: 500 }}" class="btn btn-sm btn-circle">
+          <Moon on:click={switchToLightMode} />
+        </button>
+      {:else}
+        <button in:fly="{{ y: 10, duration: 500 }}" class="btn btn-sm btn-circle bg-base-100 hover:bg-base-100 text-neutral border-none">
+          <Sun on:click={switchToDarkMode} class="text-gray-800" />
+        </button>
+      {/if}
+    </div>
   </div>
 </div>
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte
@@ -115,7 +115,7 @@
   }, 20 * 1000);
 </script>
 
-<tr class="text-white">
+<tr class="text-transaction-table">
   <td>
     <svelte:component this={fromChain.icon} height={18} width={18} />
     <span class="ml-2 hidden md:inline-block">{fromChain.name}</span>

diff --git a/packages/bridge-ui/src/components/TransactionDetail.svelte b/packages/bridge-ui/src/components/TransactionDetail.svelte
@@ -61,7 +61,7 @@
     </tr>
     <tr>
       <td>Data</td>
-      <td class="text-center overflow-auto bg-dark-1 !px-1 border-x-4 border-dark-1">
+      <td class="text-center overflow-auto bg-black !px-1 border-x-4 border-black">
         {transaction.message.data}
       </td>
     </tr>

diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte
@@ -10,7 +10,7 @@
   {#if $transactions.length}
     <table class="table-auto">
       <thead>
-        <tr class="text-white">
+        <tr class="text-transaction-table">
           <th>From</th>
           <th>To</th>
           <th>Amount</th>

diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -38,13 +38,13 @@
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content menu my-2 shadow-xl bg-base-100 rounded-box"
+    class="dropdown-content menu my-2 shadow-xl bg-dark-2 rounded-box p-2"
   >
     {#each tokens as t}
-      <li class="cursor-pointer w-full hover:bg-dark-3 px-4 py-4">
-        <button on:click={async () => await select(t)} class="flex">
+      <li class="cursor-pointer w-full hover:bg-dark-5 px-4 py-4">
+        <button on:click={async () => await select(t)} class="flex hover:bg-dark-5">
           <svelte:component this={t.logoComponent} height={22} width={22} />
-          <span class="text-sm font-medium bg-base-100 px-2"
+          <span class="text-sm font-medium bg-transparent px-2"
             >{t.symbol.toUpperCase()}</span
           >
         </button>

diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -358,14 +358,14 @@
   </label>
 
   <label
-    class="input-group relative rounded-lg bg-dark-4 justify-between items-center pr-4"
+    class="input-group relative rounded-lg bg-dark-2 justify-between items-center pr-4"
   >
     <input
       type="number"
       placeholder="0.01"
       min="0"
       on:input={updateAmount}
-      class="input input-primary bg-dark-4 input-md md:input-lg w-full focus:ring-0"
+      class="input input-primary bg-dark-2 input-md md:input-lg w-full focus:ring-0 border-dark-2"
       name="amount"
       bind:this={amountInput}
     />

diff --git a/packages/bridge-ui/src/components/form/Memo.svelte b/packages/bridge-ui/src/components/form/Memo.svelte
@@ -39,7 +39,7 @@
   <input
     type="text"
     placeholder="Enter memo here..."
-    class="input input-primary bg-dark-4 input-md md:input-lg w-full mb-2"
+    class="input input-primary bg-dark-2 input-md md:input-lg w-full focus:ring-0 border-dark-2 rounded-md mb-2"
     name="memo"
     bind:value={memo}
   />

diff --git a/packages/bridge-ui/src/components/form/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee.svelte
@@ -49,10 +49,10 @@
         placeholder="0.01"
         min="0"
         on:input={updateAmount}
-        class="input input-primary bg-dark-4 input-md md:input-lg w-full focus:ring-0 !rounded-r-none"
+        class="input input-primary bg-dark-2 border-dark-2 input-md md:input-lg w-full focus:ring-0 !rounded-r-none"
         name="amount"
       />
-      <span class="!rounded-r-lg bg-dark-4">ETH</span>
+      <span class="!rounded-r-lg bg-dark-2">ETH</span>
     </label>
   {:else if $processingFee === ProcessingFeeMethod.RECOMMENDED}
     <div class="flex flex-row">
@@ -65,7 +65,7 @@
       <button
         class="{$processingFee === fee[0]
           ? 'border-accent hover:border-accent'
-          : ''} btn btn-md text-xs font-semibold md:w-32"
+          : ''} btn btn-md text-xs font-semibold md:w-32 dark:bg-dark-5"
         on:click={() => selectProcessingFee(fee[0])}
         >{fee[1].displayText}</button
       >

diff --git a/packages/bridge-ui/src/components/icons/TaikoLight.svelte b/packages/bridge-ui/src/components/icons/TaikoLight.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let width: number;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 498 180" {width}><defs><style>.cls-1{fill:#fc0fc0;}</style><symbol id="New_Symbol_9" data-name="New Symbol 9" viewBox="0 0 305.56 81.75"><rect x="154.6" y="3.09" width="10.15" height="76.04"/><polygon points="226.31 79.13 201.02 41.14 188.78 54.24 188.78 79.13 178.63 79.13 178.63 3.09 188.78 3.09 188.78 41.34 223.11 3.09 234.18 3.09 234.45 3.65 207.4 33.86 237.32 78.39 236.97 79.13 226.31 79.13"/><path d="M262.08,79.13c-11.53,0-16.91-5.37-16.91-16.91V20c0-11.54,5.38-16.91,16.91-16.91h26.57c11.53,0,16.9,5.37,16.9,16.91V62.22c0,11.54-5.37,16.91-16.9,16.91ZM262.43,12c-4.51,0-7.1,2.55-7.1,7V63.26c0,4.45,2.59,7,7.1,7H288.3c4.51,0,7.1-2.54,7.1-7V19c0-4.44-2.59-7-7.1-7Z"/><polygon points="28.71 79.13 28.71 11.96 2.51 11.96 0 3.89 0.53 3.09 66.99 3.09 67.64 4.05 65.17 11.96 38.98 11.96 38.98 79.13 28.71 79.13"/><path class="cls-1" d="M144.33,76.35,119.42,41.44,101.45,2a3.42,3.42,0,0,0-3.11-2h0a3.4,3.4,0,0,0-3.1,2L77.36,41.24l-25,35.1a3.42,3.42,0,0,0,2.78,5.4l.33,0,42.83-4.13,43,4.14.32,0a3.42,3.42,0,0,0,2.79-5.4ZM101.23,4.73Zm-2.89,6.35L111,38.91H85.66ZM111.9,45.5,98.32,69,84.75,45.5Zm-50.17,29L79.5,49.59l12.68,22Zm42.73-2.92,12.69-22,17.76,24.9Z"/></symbol></defs><g id="Layer_1" data-name="Layer 1"><use width="305.55" height="81.75" transform="translate(37.29 32.37) scale(1.38)" xlink:href="#New_Symbol_9"/></g></svg>
diff --git a/packages/bridge-ui/src/components/icons/TaikoLogoFluo.svelte b/packages/bridge-ui/src/components/icons/TaikoLogoFluo.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let width: number;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250" {width}><defs><style>.cls-1{fill:#fc0fc0;}</style><symbol id="New_Symbol_14" data-name="New Symbol 14" viewBox="0 0 163.08 142.92"><path class="cls-1" d="M162,133.48l-43.54-61L87,3.49a6,6,0,0,0-10.87,0L44.88,72.1,1.11,133.46A6,6,0,0,0,6,142.9l.57,0,74.89-7.21,75.1,7.24.57,0a6,6,0,0,0,4.87-9.44ZM81.58,19.36,103.75,68H59.4Zm23.7,60.19L81.54,120.67,57.81,79.55ZM17.57,130.23,48.63,86.7,70.8,125.1Zm74.71-5.11,22.17-38.4,31.06,43.53Z"/></symbol></defs><g id="Layer_1" data-name="Layer 1"><use width="163.08" height="142.92" transform="translate(43.46 38.52)" xlink:href="#New_Symbol_14"/></g></svg>
diff --git a/packages/bridge-ui/src/components/modals/Modal.svelte b/packages/bridge-ui/src/components/modals/Modal.svelte
@@ -21,7 +21,7 @@
 />
 
 <div class="modal bg-black/60" class:modal-open={isOpen}>
-  <div class="modal-box bg-dark-3">
+  <div class="modal-box bg-dark-2">
     <h3 class="font-bold text-lg text-center mt-4">{title}</h3>
     {#if showXButton}
       <div class="modal-action mt-0">

diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div class="container mx-auto {activeTab === 'bridge' ? 'max-w-fit' : 'w-fit'} text-center my-10" style="{activeTab === 'bridge' ? '' : 'min-width: '+bridgeWidth+'px;'}" bind:clientWidth={bridgeWidth} bind:clientHeight={bridgeHeight}>
-  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6" style="{activeTab === 'bridge' && $transactions.length > 0 ? '' : 'min-height: '+bridgeHeight+'px;'}">
+  <div class="rounded-3xl border-2 border-bridge-form border-solid p-2 md:p-6" style="{activeTab === 'bridge' && $transactions.length > 0 ? '' : 'min-height: '+bridgeHeight+'px;'}">
     <div class="tabs mb-4">
       <span
         class="tab tab-bordered {activeTab === 'bridge' ? 'tab-active' : ''}"

diff --git a/packages/bridge-ui/tailwind.config.cjs b/packages/bridge-ui/tailwind.config.cjs
@@ -1,6 +1,8 @@
+const colors = require("tailwindcss/colors");
 module.exports = {
     content: ["./src/**/*.{html,js,svelte,ts}"],
     plugins: [require("daisyui")],
+    darkMode: ['[data-theme="dark"]'],
     theme: {
         extend: {
           colors: {
@@ -10,6 +12,17 @@ module.exports = {
             "dark-4": "var(--color-dark-4)",
             "dark-5": "var(--color-dark-5)",
             "dark-6": "var(--color-dark-6)",
+            "transaction-table": "var(--color-transaction-table)",
+            "bridge-form": "var(--color-bridge-form)",
+          },
+          keyframes: {
+            rise: {
+              '0%': { position: 'absolute', bottom: '-10px' },
+              // '100%': { position: 'static' },
+            }
+          },
+          animation: {
+            rise: 'rise 0.5s ease-in-out',
           }
         }
     },
@@ -29,23 +42,50 @@ module.exports = {
                 "primary": "#242424",
                 "secondary": "#181818",
                 "accent": "#FC0FC0",
-                "accent-focus": "#B20F89",
+                "accent-focus": "#E30EAD",
                 "accent-content": "#F3F3F3",
                 "neutral": "#242424",
-                "base-100": "#0f0f0f",
+                "base-100": "#0F0F0F",
                 "info": "#373737",
                 "success": "#008000",
                 "warning": "#FFFF00",
                 "error": "#FF0000",
                 "--color-dark-1": "#000000",
-                "--color-dark-2": "#0F0F0F",
-                "--color-dark-3": "#181818",
+                "--color-dark-2": "#181818",
+                "--color-dark-3": "#0F0F0F",
                 "--color-dark-4": "#242424",
                 "--color-dark-5": "#373737",
                 "--color-dark-6": "#4F4F4F",
+                "--color-transaction-table": "#FFFFFF",
                 "--rounded-btn": "1rem",
                 "--btn-text-case": "capitalize",
                 "--rounded-box": "18px",
+                "--color-bridge-form": colors.zinc[800],
+              },
+              light: {
+                ...require("daisyui/colors/themes")["[data-theme=light]"],
+                "accent": "#FC0FC0",
+                "accent-focus": "#E30EAD",
+                "accent-content": "#F3F3F3",
+                "neutral": "#d4d4d4",
+                "neutral-focus": "#a3a3a3",
+                "neutral-content": "#181818",
+                "base-100": "#FAFAFA",
+                "info": "#373737",
+                "success": "#008000",
+                "warning": "#FFFF00",
+                "error": "#FF0000",
+                "--color-dark-1": "#000000",
+                "--color-dark-2": "#FFFFFF",
+                "--color-dark-3": "#FAFAFA",
+                "--color-dark-4": "#242424",
+                "--color-dark-5": "#CDCDCD",
+                "--color-dark-6": "#4F4F4F",
+                "--color-transaction-table": "#1F2937",
+                "--rounded-btn": "1rem",
+                "--btn-text-case": "capitalize",
+                "--rounded-box": "18px",
+                "--color-bridge-form": colors.zinc[200],
               },
             },
           ],

diff --git a/packages/status-page/src/components/Modal.svelte b/packages/status-page/src/components/Modal.svelte
@@ -21,7 +21,7 @@
 />
 
 <div class="modal bg-black/60" class:modal-open={isOpen}>
-  <div class="modal-box bg-dark-3">
+  <div class="modal-box bg-dark-2">
     <h3 class="font-bold text-lg text-center mt-4">{title}</h3>
     {#if showXButton}
       <div class="modal-action mt-0">