8 icons + logos (#25)

* add accordion, accorfion list, and icon stories * update error * update * icons and logos added with storybooks * format * update storybook organization * pulled down fixes and cleaned up --------- Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>
frequency-chain · Oct 18, 2024 · b200079 · b200079
1 parent 7c14454
commit b200079
Show file tree

Hide file tree

Showing 48 changed files with 645 additions and 361 deletions.
diff --git a/.storybook/CustomTheme.js b/.storybook/CustomTheme.js
@@ -1,10 +1,9 @@
-import {create} from '@storybook/theming';
+import { create } from '@storybook/theming';
 
 export default create({
-    base: 'dark',
-    brandTitle: 'Svelte + Storybook + TailwindCSS',
-    brandUrl: 'https://svelte-storybook-tailwindcss.sveltehub.dev',
-    brandImage:
-        'https://sveltehub.dev/templates/storybook-tailwindcss/logo-white.png',
-    brandTarget: '_blank'
+  base: 'dark',
+  brandTitle: 'Svelte + Storybook + TailwindCSS',
+  brandUrl: 'https://svelte-storybook-tailwindcss.sveltehub.dev',
+  brandImage: 'https://sveltehub.dev/templates/storybook-tailwindcss/logo-white.png',
+  brandTarget: '_blank',
 });
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,13 +2,18 @@ import '../src/styles/index.css';
 
 export const parameters = {
   backgrounds: {
-    default: 'light'
+    values: [
+      { name: 'Navy', value: '#18465E' },
+      { name: 'Cream', value: '#FEFAF3' },
+      { name: 'White', value: '#FFFFFF' },
+    ],
+    default: 'Cream',
   },
-  actions: {argTypesRegex: '^on[A-Z].*'},
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
-      date: /Date$/
-    }
-  }
+      date: /Date$/,
+    },
+  },
 };
diff --git a/src/assets/Assets.stories.svelte b/src/assets/Assets.stories.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import Arrow from './icons/Arrow.svelte';
+  import Check from './icons/Check.svelte';
+  import CheckFilled from './icons/CheckFilled.svelte';
+  import Chevron from './icons/Chevron.svelte';
+  import Copy from './icons/Copy.svelte';
+  import Error from './icons/Error.svelte';
+  import Exit from './icons/Exit.svelte';
+  import FrequencyIconFilled from './logos/FrequencyIconFilled.svelte';
+  import FrequencyIcon from './logos/FrequencyIcon.svelte';
+  import FrequencyAccessLogo from './logos/FrequencyAccessLogo.svelte';
+  import HamburgerMenu from './icons/HamburgerMenu.svelte';
+  import Planet from './icons/Planet.svelte';
+  import UserFilled from './icons/UserFilled.svelte';
+  import UserKey from './icons/UserKey.svelte';
+  import UserLock from './icons/UserLock.svelte';
+  import UserOutlined from './icons/UserOutlined.svelte';
+  import Wallet from './icons/Wallet.svelte';
+
+  const icons = {
+    Arrow,
+    Check,
+    CheckFilled,
+    Chevron,
+    Copy,
+    Error,
+    Exit,
+    HamburgerMenu,
+    Planet,
+    UserFilled,
+    UserKey,
+    UserLock,
+    UserOutlined,
+    Wallet,
+  };
+
+  const logos = {
+    FrequencyIconFilled,
+    FrequencyIcon,
+    FrequencyAccessLogo,
+  };
+</script>
+
+<Meta title="Design System/Assets" />
+
+<Story name="Icons">
+  <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+    {#each Object.entries(icons) as [name, Icon]}
+      <div class="flex flex-col items-start justify-start p-4">
+        <h2 class="mb-2 text-lg font-semibold">{name}</h2>
+        <svelte:component this={Icon} class="mb-1 h-8 w-auto" />
+      </div>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Logos">
+  <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+    {#each Object.entries(logos) as [name, Logo]}
+      <div class="flex flex-col items-start justify-start p-4">
+        <h2 class="mb-2 text-lg font-semibold">{name}</h2>
+        <svelte:component this={Logo} class="mb-1 h-8 w-auto" />
+      </div>
+    {/each}
+  </div>
+</Story>
diff --git a/src/assets/icons/Arrow.svelte b/src/assets/icons/Arrow.svelte
@@ -0,0 +1,13 @@
+<svg
+  width="18"
+  height="16"
+  viewBox="0 0 18 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M0.292893 7.29289C-0.0976311 7.68342 -0.0976311 8.31658 0.292893 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292893 7.29289ZM17 9C17.5523 9 18 8.55228 18 8C18 7.44772 17.5523 7 17 7V9ZM1 9H17V7H1V9Z"
+    fill="black"
+  />
+</svg>
diff --git a/src/icons/Check.svelte → src/assets/icons/Check.svelte b/src/icons/Check.svelte → src/assets/icons/Check.svelte
diff --git a/src/assets/icons/CheckFilled.svelte b/src/assets/icons/CheckFilled.svelte
@@ -0,0 +1,14 @@
+<svg
+  width="81"
+  height="80"
+  viewBox="0 0 81 80"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M40.625 8C34.296 8 28.1091 9.87677 22.8468 13.393C17.5844 16.9092 13.4829 21.9069 11.0609 27.7541C8.63886 33.6014 8.00516 40.0355 9.23989 46.2429C10.4746 52.4503 13.5223 58.1521 17.9976 62.6274C22.4729 67.1027 28.1747 70.1504 34.3821 71.3851C40.5895 72.6199 47.0236 71.9862 52.8709 69.5641C58.7181 67.1421 63.7158 63.0406 67.232 57.7782C70.7482 52.5159 72.625 46.329 72.625 40C72.625 31.5131 69.2536 23.3737 63.2524 17.3726C57.2513 11.3714 49.1119 8 40.625 8ZM61.525 29.26L35.245 55.52L19.725 40C19.1946 39.4696 18.8966 38.7501 18.8966 38C18.8966 37.2499 19.1946 36.5304 19.725 36C20.2554 35.4696 20.9749 35.1716 21.725 35.1716C22.4752 35.1716 23.1946 35.4696 23.725 36L35.285 47.56L57.565 25.3C57.8277 25.0374 58.1395 24.829 58.4826 24.6869C58.8258 24.5447 59.1936 24.4716 59.565 24.4716C59.9364 24.4716 60.3042 24.5447 60.6474 24.6869C60.9906 24.829 61.3024 25.0374 61.565 25.3C61.8277 25.5626 62.036 25.8744 62.1781 26.2176C62.3203 26.5608 62.3934 26.9286 62.3934 27.3C62.3934 27.6714 62.3203 28.0392 62.1781 28.3824C62.036 28.7256 61.8277 29.0374 61.565 29.3L61.525 29.26Z"
+    fill="currentColor"
+  />
+  <circle cx="40.625" cy="40" r="38.5" stroke="currentColor" stroke-width="3" />
+</svg>
diff --git a/src/icons/Chevron.svelte → src/assets/icons/Chevron.svelte b/src/icons/Chevron.svelte → src/assets/icons/Chevron.svelte
diff --git a/src/assets/icons/Copy.svelte b/src/assets/icons/Copy.svelte
@@ -0,0 +1,13 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M19.3617 0H5.74468C5.57539 0 5.41304 0.067249 5.29334 0.186953C5.17363 0.306657 5.10638 0.469011 5.10638 0.638298V5.10638H0.638298C0.469011 5.10638 0.306657 5.17363 0.186953 5.29334C0.067249 5.41304 0 5.57539 0 5.74468V19.3617C0 19.531 0.067249 19.6933 0.186953 19.813C0.306657 19.9328 0.469011 20 0.638298 20H14.2553C14.4246 20 14.587 19.9328 14.7067 19.813C14.8264 19.6933 14.8936 19.531 14.8936 19.3617V14.8936H19.3617C19.531 14.8936 19.6933 14.8264 19.813 14.7067C19.9328 14.587 20 14.4246 20 14.2553V0.638298C20 0.469011 19.9328 0.306657 19.813 0.186953C19.6933 0.067249 19.531 0 19.3617 0ZM13.617 18.7234H1.2766V6.38298H13.617V18.7234ZM18.7234 13.617H14.8936V5.74468C14.8936 5.57539 14.8264 5.41304 14.7067 5.29334C14.587 5.17363 14.4246 5.10638 14.2553 5.10638H6.38298V1.2766H18.7234V13.617Z"
+    fill="black"
+  />
+</svg>
diff --git a/src/icons/Error.svelte → src/assets/icons/Error.svelte b/src/icons/Error.svelte → src/assets/icons/Error.svelte
diff --git a/src/assets/icons/Exit.svelte b/src/assets/icons/Exit.svelte
@@ -0,0 +1,13 @@
+<svg
+  width="25"
+  height="24"
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M2.525 24L0.125 21.6L9.725 12L0.125 2.4L2.525 0L12.125 9.6L21.725 0L24.125 2.4L14.525 12L24.125 21.6L21.725 24L12.125 14.4L2.525 24Z"
+    fill="black"
+  />
+</svg>
diff --git a/src/assets/icons/HamburgerMenu.svelte b/src/assets/icons/HamburgerMenu.svelte
@@ -0,0 +1,16 @@
+<svg
+  width="28"
+  height="22"
+  viewBox="0 0 28 22"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M2 20H25.625M2 11H25.625M2 2H25.625"
+    stroke="black"
+    stroke-width="3.375"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
diff --git a/src/assets/icons/Planet.svelte b/src/assets/icons/Planet.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let planetColor = '#55B1AB';
+  export let ringColor = '#000';
+</script>
+
+<svg
+  width="171"
+  height="171"
+  viewBox="0 0 171 171"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M141.079 11.0091C146.848 7.11927 153.96 3.09526 156.911 2.0222C159.863 0.949132 163.084 0.0101983 163.889 0.0101983C164.828 -0.123935 166.841 1.08326 168.316 2.55873C169.792 4.0342 171 5.91207 171 6.58273C171 7.38753 169.927 10.7409 168.585 14.2283C167.243 17.8499 162.949 25.4955 158.924 31.3974C154.899 37.2993 145.641 49.3713 138.261 58.2241C130.881 67.0769 113.438 85.8555 99.3496 99.8054C85.2611 113.889 66.4763 131.461 57.6207 138.838C48.765 146.216 36.6891 155.471 30.7853 159.495C24.8816 163.519 17.2335 167.811 13.7449 169.152C10.1221 170.494 6.09681 171.298 4.62087 170.896C3.14492 170.494 1.26645 169.018 0.595567 167.543C-0.34367 165.665 -0.209494 162.982 1.26645 158.422C2.47404 154.934 6.49934 147.423 10.3905 141.655C14.2816 135.887 18.1727 131.193 19.112 131.327C19.917 131.327 20.9904 132.266 21.393 133.339C21.7955 134.412 19.5145 139.106 16.4284 143.667C13.3424 148.362 9.71958 154.666 8.37782 157.751C7.03605 160.97 6.23099 163.787 6.63352 164.189C7.03605 164.592 9.85376 163.787 13.074 162.312C16.1601 160.97 23.0031 156.946 28.3701 153.325C33.603 149.703 44.4714 141.387 52.522 134.814C60.4384 128.108 79.3573 110.402 94.5193 95.2449C109.681 79.9537 127.124 61.5774 133.296 54.2001C139.334 46.8227 147.653 36.2262 151.544 30.7267C155.436 25.2273 159.997 17.8499 161.473 14.3625C163.084 10.7409 164.023 7.6558 163.62 7.2534C163.218 6.851 160.4 7.6558 157.314 8.99713C154.094 10.3385 147.787 13.9601 143.225 17.0451C138.529 20.1302 133.833 22.4105 132.76 22.0081C131.686 21.6057 130.747 20.5326 130.747 19.5937C130.613 18.7889 135.309 14.899 141.079 11.0091Z"
+    fill={planetColor}
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M85.1274 16.1066C91.9704 15.9724 99.4843 16.7772 103.912 18.1186C107.937 19.3258 114.646 22.0084 118.672 24.1546C122.697 26.3007 128.332 30.1906 131.15 32.7391C133.834 35.2876 136.115 37.9703 136.115 38.7751C136.115 39.5799 135.175 40.3847 134.102 40.7871C133.028 41.1895 129.54 39.4458 126.32 36.8972C123.234 34.3487 116.793 30.4588 111.963 28.1786C106.998 25.8983 99.0817 23.4839 93.8488 22.8132C87.9451 22.0084 81.2362 22.0084 75.735 22.8132C70.9046 23.4839 62.7199 26.0324 57.6211 28.4468C51.449 31.3978 45.5452 35.5559 40.3123 40.9212C34.9453 46.1524 30.7858 52.0543 27.8339 58.2244C25.4187 63.4556 22.8694 71.5036 22.1985 76.3324C21.3934 81.8319 21.3934 88.5386 22.1985 94.4404C22.8694 99.8058 25.2845 107.585 27.5656 112.548C29.8466 117.377 33.7377 123.816 36.287 126.901C38.8364 130.12 40.5807 133.607 40.1782 134.68C39.7756 135.753 38.9706 136.692 38.1655 136.692C37.3605 136.692 34.6769 134.412 32.1276 131.595C29.5782 128.913 25.6871 123.279 23.5402 119.255C21.3934 115.231 18.7099 108.524 17.5023 104.5C16.2947 100.476 15.3555 92.2943 15.3555 86.3924C15.3555 80.4906 16.2947 72.0402 17.5023 67.6138C18.5757 63.1874 21.5276 56.0783 23.8086 51.6519C26.2238 47.3596 31.4567 40.3847 35.6162 36.2266C39.7756 32.0684 46.7528 26.8372 51.0465 24.4228C55.4743 22.1426 62.3173 19.1916 66.3426 18.1186C70.3679 17.0455 78.8211 16.1066 85.1274 16.1066ZM62.049 46.8231C65.4034 46.8231 68.0869 47.8962 70.0996 49.9082C71.8439 51.5178 73.0515 54.4687 73.0515 56.6148C73.0515 58.6268 72.5147 61.3095 71.8439 62.6508C71.3072 63.858 68.6236 65.7359 66.2084 66.809C62.3173 68.2844 61.1097 68.2844 57.7553 66.809C55.6085 65.7359 53.3275 63.858 52.7908 62.6508C52.1199 61.3095 51.5832 58.761 51.449 57.0172C51.3148 55.2735 52.6566 52.3226 54.2667 50.3106C56.4135 47.6279 58.292 46.8231 62.049 46.8231ZM59.0971 58.6268C59.3654 59.4316 60.8414 60.2364 62.3173 60.2364C63.7933 60.2364 65.2321 59.3047 65.5005 58.4999C65.8588 57.4253 66.0005 55.9999 65.5005 54.9999C64.5005 53.9999 63.4397 53.4999 62.5005 53.4999C61.5613 53.4999 60.3055 53.561 59.5005 54.4999C58.5613 55.3047 58.6945 57.6879 59.0971 58.6268ZM149.398 61.846C150.74 62.1143 152.216 64.6628 153.155 68.2844C153.96 71.6378 154.765 79.1492 154.765 85.0511C154.899 90.953 153.96 99.4034 152.752 103.83C151.679 108.256 148.727 115.365 146.446 119.792C144.031 124.084 138.798 131.059 134.639 135.217C130.479 139.375 123.502 144.606 119.208 147.021C114.78 149.301 107.669 152.252 103.241 153.325C98.8134 154.532 90.3603 155.471 84.4565 155.337C78.5527 155.337 71.0388 154.532 67.6844 153.727C63.1224 152.52 61.6464 151.447 61.6464 149.435C61.6464 147.557 62.4515 146.752 64.33 146.887C65.8059 147.021 71.3072 147.691 76.4059 148.496C82.4438 149.435 88.8843 149.435 94.5197 148.63C99.4843 147.96 107.401 145.411 113.036 142.728C119.074 139.777 125.38 135.351 130.077 130.656C134.773 125.962 139.201 119.657 142.152 113.487C144.97 107.585 147.385 100.208 148.19 94.4404C148.995 88.2703 148.995 82.2343 148.19 77.0031C147.385 72.5767 146.58 67.882 146.178 66.6748C145.775 65.3335 145.909 63.5898 146.312 62.785C146.849 62.1143 148.19 61.5778 149.398 61.846ZM54.6692 77.6738C58.4262 77.6738 60.573 78.6127 63.6591 81.6978C66.7452 84.7828 67.6844 86.929 67.6844 91.0871C67.6844 94.7087 66.7452 97.5255 64.5983 99.9399C62.7198 102.086 59.768 103.561 56.2794 104.098C51.8515 104.635 50.1072 104.232 46.4845 101.281C43.9351 99.1351 41.9225 96.05 41.3858 93.5015C40.849 90.953 41.2516 87.5996 42.1908 85.7218C43.1301 83.8439 45.1427 81.2954 46.7528 80.0882C48.2288 78.7468 51.8515 77.6738 54.5351 77.6738H54.6692ZM49.0005 91.9999C49.2688 95.3532 51.6461 96.0975 55.0005 96.4999C57.5005 96.4999 58.5604 95.7818 59.4996 94.8428C60.4388 93.9039 61.2439 92.1602 61.2439 91.0871C61.2439 90.014 60.8423 87.7071 59.5005 86.4999C58.1587 85.1586 55.6714 84.9999 55.0005 84.9999C54.1954 84.9999 52.5224 85.1852 51.3148 86.1242C49.5705 87.1972 48.7321 89.3172 49.0005 91.9999Z"
+    fill={ringColor}
+  />
+</svg>
diff --git a/src/assets/icons/UserFilled.svelte b/src/assets/icons/UserFilled.svelte
@@ -0,0 +1,13 @@
+<svg
+  width="39"
+  height="40"
+  viewBox="0 0 39 40"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M19.5 0.5C22.0859 0.5 24.5658 1.52723 26.3943 3.35571C28.2228 5.18419 29.25 7.66414 29.25 10.25C29.25 12.8359 28.2228 15.3158 26.3943 17.1443C24.5658 18.9728 22.0859 20 19.5 20C16.9141 20 14.4342 18.9728 12.6057 17.1443C10.7772 15.3158 9.75 12.8359 9.75 10.25C9.75 7.66414 10.7772 5.18419 12.6057 3.35571C14.4342 1.52723 16.9141 0.5 19.5 0.5ZM19.5 24.875C30.2738 24.875 39 29.2381 39 34.625V39.5H0V34.625C0 29.2381 8.72625 24.875 19.5 24.875Z"
+    fill="black"
+  />
+</svg>
diff --git a/src/assets/icons/UserKey.svelte b/src/assets/icons/UserKey.svelte
@@ -0,0 +1,13 @@
+<svg
+  width="89"
+  height="88"
+  viewBox="0 0 89 88"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M4.625 71.3684V59.579C4.625 57.193 5.23974 55.0007 6.46921 53.0021C7.69868 51.0035 9.32956 49.4765 11.3618 48.4211C15.7127 46.2456 20.1338 44.6147 24.625 43.5284C29.1162 42.4421 33.6776 41.8975 38.3092 41.8947C39.7127 41.8947 41.1162 41.9481 42.5197 42.0547C43.9232 42.1614 45.3268 42.3186 46.7303 42.5263C46.4496 46.5965 47.1864 50.4393 48.9408 54.0547C50.6952 57.6702 53.2566 60.6344 56.625 62.9474V71.3684H4.625ZM71.9934 84L65.6776 77.6842V58.1053C62.5899 57.193 60.0636 55.4568 58.0987 52.8968C56.1338 50.3368 55.1513 47.3712 55.1513 44C55.1513 39.9298 56.5899 36.4561 59.4671 33.5789C62.3443 30.7018 65.818 29.2632 69.8882 29.2632C73.9583 29.2632 77.432 30.7018 80.3092 33.5789C83.1864 36.4561 84.625 39.9298 84.625 44C84.625 47.1579 83.7296 49.9649 81.9387 52.4211C80.1478 54.8772 77.8854 56.6316 75.1513 57.6842L80.4145 62.9474L74.0987 69.2632L80.4145 75.5789L71.9934 84ZM38.3092 37.6842C33.6776 37.6842 29.7127 36.0351 26.4145 32.7368C23.1162 29.4386 21.4671 25.4737 21.4671 20.8421C21.4671 16.2105 23.1162 12.2456 26.4145 8.94737C29.7127 5.64912 33.6776 4 38.3092 4C42.9408 4 46.9057 5.64912 50.2039 8.94737C53.5022 12.2456 55.1513 16.2105 55.1513 20.8421C55.1513 25.4737 53.5022 29.4386 50.2039 32.7368C46.9057 36.0351 42.9408 37.6842 38.3092 37.6842ZM69.8882 46.1053C71.0811 46.1053 72.0818 45.7011 72.8903 44.8926C73.6987 44.0842 74.1015 43.0849 74.0987 41.8947C74.0959 40.7046 73.6917 39.7053 72.8861 38.8968C72.0804 38.0884 71.0811 37.6842 69.8882 37.6842C68.6952 37.6842 67.6959 38.0884 66.8903 38.8968C66.0847 39.7053 65.6804 40.7046 65.6776 41.8947C65.6748 43.0849 66.079 44.0856 66.8903 44.8968C67.7015 45.7081 68.7008 46.1109 69.8882 46.1053Z"
+    fill="black"
+  />
+</svg>
diff --git a/src/assets/icons/UserLock.svelte b/src/assets/icons/UserLock.svelte
@@ -0,0 +1,13 @@
+<svg
+  width="47"
+  height="48"
+  viewBox="0 0 47 48"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M9.4 10.3947C9.4 4.92789 13.6065 0.5 18.8 0.5C23.9935 0.5 28.2 4.92789 28.2 10.3947C28.2 15.8616 23.9935 20.2895 18.8 20.2895C13.6065 20.2895 9.4 15.8616 9.4 10.3947ZM23.5 35.6263C23.5 33.2516 24.675 31.0253 26.32 29.5411V28.9474C26.32 27.9826 26.4845 27.0674 26.743 26.1768C24.3225 25.5832 21.6435 25.2368 18.8 25.2368C8.413 25.2368 0 29.6647 0 35.1316V40.0789H23.5V35.6263ZM47 35.8737V44.5316C47 46.0158 45.59 47.5 43.945 47.5H31.02C29.61 47.5 28.2 46.0158 28.2 44.2842V35.6263C28.2 34.1421 29.61 32.6579 31.02 32.6579V28.9474C31.02 25.4842 34.31 22.7632 37.6 22.7632C40.89 22.7632 44.18 25.4842 44.18 28.9474V32.6579C45.59 32.6579 47 34.1421 47 35.8737ZM41.125 28.9474C41.125 26.9684 39.48 25.7316 37.6 25.7316C35.72 25.7316 34.075 26.9684 34.075 28.9474V32.6579H41.125V28.9474Z"
+    fill="black"
+  />
+</svg>
diff --git a/src/assets/icons/UserOutlined.svelte b/src/assets/icons/UserOutlined.svelte
@@ -0,0 +1,13 @@
+<svg
+  width="171"
+  height="171"
+  viewBox="0 0 171 171"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M85.5 77.5383C75.4273 77.5383 66.7999 73.7383 59.6179 66.1383C52.4359 58.5383 48.849 49.4132 48.8571 38.7629C48.8653 28.1126 52.4522 18.9788 59.6179 11.3616C66.7836 3.74434 75.411 -0.0427203 85.5 0.000363475C95.589 0.0434473 104.216 3.83482 111.382 11.3745C118.548 18.9142 122.135 28.0479 122.143 38.7758C122.151 49.5037 118.564 58.6288 111.382 66.1512C104.2 73.6737 95.5727 77.4608 85.5 77.5383ZM0 171V149.725C0 144.391 1.46572 139.402 4.39714 134.758C7.33672 130.105 11.286 126.494 16.245 123.927C27.7753 118.076 39.3137 113.69 50.8603 110.769C62.3987 107.839 73.9453 106.374 85.5 106.374C97.0547 106.374 108.605 107.839 120.152 110.769C131.699 113.699 143.229 118.084 154.743 123.927C159.71 126.494 163.659 130.105 166.591 134.758C169.53 139.402 171 144.391 171 149.725V171H0ZM12.2143 158.075H158.786V149.725C158.786 146.864 157.91 144.172 156.16 141.647C154.417 139.131 152.003 137.003 148.917 135.262C138.868 130.109 128.502 126.163 117.819 123.423C107.136 120.682 96.3626 119.308 85.5 119.299C74.6374 119.291 63.8644 120.661 53.181 123.41C42.4976 126.158 32.1317 130.105 22.0834 135.249C18.9891 136.99 16.5748 139.118 14.8404 141.634C13.0896 144.159 12.2143 146.856 12.2143 149.725V158.075ZM85.5 64.6261C92.2179 64.6261 97.9708 62.0928 102.759 57.0261C107.547 51.9594 109.937 45.8674 109.929 38.7499C109.92 31.6325 107.531 25.5491 102.759 20.4996C97.9871 15.4502 92.2341 12.9169 85.5 12.8997C78.7659 12.8824 73.017 15.4158 68.2534 20.4996C63.4899 25.5835 61.0959 31.667 61.0714 38.7499C61.047 45.8329 63.441 51.9207 68.2534 57.0132C73.0659 62.1057 78.8147 64.6347 85.5 64.6002"
+    fill="black"
+  />
+</svg>
diff --git a/src/assets/icons/Wallet.svelte b/src/assets/icons/Wallet.svelte
@@ -0,0 +1,13 @@
+<svg
+  width="22"
+  height="20"
+  viewBox="0 0 22 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <path
+    d="M20.24 3.84007H2.64C2.40661 3.84007 2.18278 3.74735 2.01775 3.58232C1.85271 3.41729 1.76 3.19346 1.76 2.96007C1.76 2.72668 1.85271 2.50285 2.01775 2.33781C2.18278 2.17278 2.40661 2.08007 2.64 2.08007H17.6C17.8334 2.08007 18.0572 1.98735 18.2223 1.82232C18.3873 1.65729 18.48 1.43346 18.48 1.20007C18.48 0.966678 18.3873 0.742847 18.2223 0.577815C18.0572 0.412783 17.8334 0.320068 17.6 0.320068H2.64C1.93983 0.320068 1.26833 0.598211 0.773238 1.09331C0.278142 1.5884 0 2.2599 0 2.96007V17.0401C0 17.7402 0.278142 18.4117 0.773238 18.9068C1.26833 19.4019 1.93983 19.6801 2.64 19.6801H20.24C20.7068 19.6801 21.1544 19.4946 21.4845 19.1646C21.8146 18.8345 22 18.3869 22 17.9201V5.60007C22 5.13329 21.8146 4.68563 21.4845 4.35556C21.1544 4.0255 20.7068 3.84007 20.24 3.84007ZM20.24 17.9201H2.64C2.40661 17.9201 2.18278 17.8274 2.01775 17.6623C1.85271 17.4973 1.76 17.2735 1.76 17.0401V5.44937C2.04254 5.54962 2.3402 5.60059 2.64 5.60007H20.24V17.9201ZM14.96 11.3201C14.96 11.059 15.0374 10.8038 15.1825 10.5867C15.3275 10.3696 15.5337 10.2005 15.7749 10.1005C16.0161 10.0006 16.2815 9.9745 16.5375 10.0254C16.7936 10.0764 17.0288 10.2021 17.2134 10.3867C17.398 10.5713 17.5237 10.8065 17.5746 11.0626C17.6256 11.3186 17.5994 11.584 17.4995 11.8252C17.3996 12.0664 17.2304 12.2726 17.0134 12.4176C16.7963 12.5627 16.5411 12.6401 16.28 12.6401C15.9299 12.6401 15.5942 12.501 15.3466 12.2534C15.0991 12.0059 14.96 11.6702 14.96 11.3201Z"
+    fill="black"
+  />
+</svg>