Feat: UI fixes (#560)

* refine inputs ui

* refine inputs ui

* Switch to Inter font

* fix accounts tile ui

* fix some ui spacings

* refine wallet & account balance header

* refine accounts list

* unify darkmode for xl icon buttons

* refine line chart & add inter to charts

* add individual border color plugin to tailwind to style dropdown

* fix distance

* add custom scrollbars

* refine ui

* fix: title of chart changes after returning to main page

* add inter font to about.html

* fix wallet balance bg not building && add patterns to gitignore

* add close button to wallet send

* refine ui

* update some texts

* edit account create button to hide text and show on hover

* fix: update network down string

* fix: font path

* fix input settings spacings

* fix balance pattern over text

Co-authored-by: Charlie Varley <charlie.varley@iota.org>
Co-authored-by: Lucas Nogueira <lucas@tauri.studio>

.gitignore

@@ -16,6 +16,7 @@ node_modules
 **/public/assets/illustrations
 **/public/assets/logos
 **/public/assets/sounds
+**/public/assets/patterns
 
 **/public/locales/
 

packages/desktop/App.svelte

@@ -103,8 +103,25 @@
         -webkit-user-drag: none;
         &.scheme-dark {
             @apply bg-gray-900;
+            :global(::-webkit-scrollbar-thumb) {
+                @apply bg-gray-700;
+            }
+            :global(::-webkit-scrollbar-track) {
+                @apply bg-gray-900;
+            }
         }
     }
+    ::-webkit-scrollbar {
+        @apply w-1;
+    }
+    ::-webkit-scrollbar-thumb {
+        @apply bg-gray-300;
+        border-radius: 10px;
+    }
+    ::-webkit-scrollbar-track {
+        @apply bg-gray-100;
+        border-radius: 10px;
+    }
 </style>
 
 <TitleBar>

packages/desktop/public/about.html

@@ -8,13 +8,23 @@
     />
     <title></title>
     <style>
+      /* latin-ext */
       @font-face {
-          font-family: 'DM Sans';
-          font-style: normal;
-          font-weight: 500;
-          src: local('DM Sans Medium'), local('DMSans-Medium'),
-              url('./assets/fonts/dm-sans/dm-sans-latin-500.woff2') format('woff2'),
-              /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./assets/fonts/dm-sans/dm-sans-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-display: swap;
+        src: url('./assets/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2') format('woff2');
+        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      }
+      /* latin */
+      @font-face {
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-display: swap;
+        src: url('./assets/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
       }
       body,
 
@@ -33,7 +43,7 @@
         color: #ffffff;
         background-color: #192742;
         font-size: 11px;
-        font-family: 'DM Sans';
+        font-family: 'Inter';
       }
 
       .version {

packages/desktop/webpack.config.js

@@ -79,7 +79,7 @@ const rendererRules = [
         test: /\.(woff|woff2)?$/,
         type: 'asset/resource',
         generator: {
-            filename: 'assets/fonts/[hash][ext][query]',
+            filename: ({ filename }) => filename.replace('../shared/', ''),
         },
     },
     {

packages/shared/components/AccountTile.svelte

@@ -12,28 +12,26 @@
 <style type="text/scss">
     button {
         height: auto;
-        min-height: 110px;
+        min-height: 90px;
+        max-height: 110px;
         &.size-m,
         &.size-l {
-            height: 70%;
+            min-height: 140px;
             max-height: 140px;
+            height: 70%;
         }
     }
 </style>
 
 <button
     on:click={onClick}
-    class="size-{size} group rounded-2xl bg-gray-200 dark:bg-gray-900 hover:bg-{color}-500 font-400 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'}">
-    <Text smaller={size === 's'} overrideColor classes="mb-2 text-gray-800 dark:text-white group-hover:text-white">{name}</Text>
-    <div class="flex flex-row justify-between w-full flex-{size === 'l' ? 'nowrap' : 'wrap'}">
-        <Text
-            smaller={size === 's'}
-            overrideColor
-            classes="block text-gray-800 dark:text-white group-hover:text-white group-hover:font-700 mr-4">
-            {balance}
-        </Text>
-        <Text smaller={size === 's'} overrideColor classes="block text-blue-500 dark:text-gray-600 group-hover:text-white">
-            {balanceEquiv}
-        </Text>
+    class="size-{size} group rounded-xl bg-gray-200 dark:bg-gray-900 hover:bg-{color}-500 font-400 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'}">
+    <Text bold smaller={size === 's'} overrideColor classes="mb-2 text-gray-800 dark:text-white group-hover:text-white">
+        {name}
+    </Text>
+    <div
+        class="flex {size === 'l' ? 'flex-row space-x-4' : 'flex-col space-y-1'} justify-between w-full flex-{size === 'l' ? 'nowrap' : 'wrap'}">
+        <Text smaller overrideColor classes="block text-gray-800 dark:text-white group-hover:text-white">{balance}</Text>
+        <Text smaller overrideColor classes="block text-blue-500 dark:text-gray-600 group-hover:text-white">{balanceEquiv}</Text>
     </div>
 </button>

packages/shared/components/ActivityRow.svelte

@@ -12,7 +12,7 @@
 
     export let payload: Payload
 
-export let onClick = () => {}
+    export let onClick = () => {}
 </script>
 
 <button
@@ -24,9 +24,9 @@ export let onClick = () => {}
         classes="text-white dark:text-{payload.data.essence.data.internal ? 'gray-500' : `${color}-${payload.data.essence.data.incoming ? '500' : '600'}`}"
         boxClasses="bg-{payload.data.essence.data.internal ? 'gray-500' : `${color}-${payload.data.essence.data.internal ? '500' : '600'}`} dark:bg-gray-900"
         icon={payload.data.essence.data.internal ? 'transfer' : payload.data.essence.data.incoming ? 'chevron-down' : 'chevron-up'} />
-    <div class="flex flex-col ml-4">
+    <div class="flex flex-col ml-3.5 space-y-1.5">
         <Text type="p" bold smaller>{truncateString(id)}</Text>
-        <Text type="p" secondary smaller>
+        <p class="text-10 leading-120 text-gray-500">
             {$date(new Date(timestamp), {
                 year: 'numeric',
                 month: 'short',
@@ -35,9 +35,11 @@ export let onClick = () => {}
                 minute: 'numeric',
                 hour12: false,
             })}
-        </Text>
+        </p>
     </div>
     <div class="flex-1 items-end flex flex-col ml-4">
-        <Text type="p" smaller>{`${!payload.data.essence.data.incoming ? '-' : ''}${formatUnit(payload.data.essence.data.value)}`}</Text>
+        <Text type="p" smaller>
+            {`${!payload.data.essence.data.incoming ? '-' : ''}${formatUnit(payload.data.essence.data.value)}`}
+        </Text>
     </div>
 </button>