feat: polish multi theme (#38)

evavirseda · web-flow · commit 48f934afb5a4 · 2024-04-17T17:05:34.000+02:00
* feat: add favicons

* feat: refine notification colors

* feat: resize favicon
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,6 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
         <meta name="viewport" content="width=device-width" />
         %sveltekit.head%
     </head>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
     appConfiguration,
     fetchConfiguredNetworks,
     networks,
-    selectedNetwork
+    selectedNetwork,
   } from '$lib/evm-toolkit';
   import '../app.scss';
 
@@ -54,17 +54,25 @@
     }
   }
 
-  function getTitleBasedOnSelectedNetwork(_selectedNetwork: INetwork | undefined) : string {
+  function getTitleBasedOnSelectedNetwork(
+    _selectedNetwork: INetwork | undefined,
+  ): string {
     if (_selectedNetwork) {
       return `${_selectedNetwork.text} Toolkit`;
     } else {
-      return 'EVM Toolkit'
+      return 'EVM Toolkit';
     }
   }
 </script>
 
 <svelte:head>
   <title>{getTitleBasedOnSelectedNetwork($selectedNetwork)}</title>
+  <link
+    rel="icon"
+    href="/{$appConfiguration?.theme === Theme.Shimmer
+      ? 'shimmer-fav.ico'
+      : 'iota-fav.ico'}"
+  />
 </svelte:head>
 
 {#if isNetworkLoaded}
diff --git a/src/themes/iota-theme.scss b/src/themes/iota-theme.scss
@@ -1,13 +1,16 @@
 html[data-theme="iota"] {
   --action-primary: #108cff;
   --action-hover: #108cffe6;
-  --action-disabled: #7587AB;
+  --action-disabled: #7587ab;
   --background-primary: #fff;
-  --background-secondary: #F2F9FF;
-  --background-tertiary: #E4EBFA;
+  --background-secondary: #f2f9ff;
+  --background-tertiary: #e4ebfa;
   --background-tertiary-hover: #e4ebfae6;
-  --color-error: #FF6755;
+  --color-error: #ff6755;
   --color-primary: #fff;
   --color-secondary: #7587ab;
   --color-default: #000000;
+  --background-error: rgba(255, 103, 85, 0.15);
+  --background-success: rgba(16, 140, 255, 0.15);
+  --background-warning: rgba(117, 135, 171, 0.15);
 }
diff --git a/src/themes/shimmer-theme.scss b/src/themes/shimmer-theme.scss
@@ -10,4 +10,7 @@ html[data-theme="shimmer"] {
 --color-primary: #00121F;
 --color-secondary: #738795;
 --color-default: #ffffff;
+--background-error: #e01a4f29;
+--background-success: rgba(0, 245, 221, 0.08);
+--background-warning: rgba(255, 255, 255, 0.078);
 }
diff --git a/static/iota-fav.ico b/static/iota-fav.ico
diff --git a/static/shimmer-fav.ico b/static/shimmer-fav.ico
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -15,9 +15,9 @@ module.exports = {
         'color-primary': 'var(--color-primary)',
         'color-secondary': 'var(--color-secondary)',
         'color-default': 'var(--color-default)',
-        'background-error': '#e01a4f29',
-        'background-success': 'rgba(0, 245, 221, 0.08)',
-        'background-warning': 'rgba(255, 255, 255, 0.078)'
+        'background-error': 'var(--background-error)',
+        'background-success': 'var(--background-success)',
+        'background-warning': 'var(--background-warning)',
       },
     },
     plugins: [],

Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,7 @@ html[data-theme="shimmer"] {`
`10`	`10`	`--color-primary: #00121F;`
`11`	`11`	`--color-secondary: #738795;`
`12`	`12`	`--color-default: #ffffff;`
	`13`	`+--background-error: #e01a4f29;`
	`14`	`+--background-success: rgba(0, 245, 221, 0.08);`
	`15`	`+--background-warning: rgba(255, 255, 255, 0.078);`
`13`	`16`	`}`