web/satellite: ui updates

Update icons, colors, theme, styles. Rename CLI access to API key. Lint fix.
storj · Mar 26, 2024 · 5f99de5 · 5f99de5
1 parent a69f7ff
commit 5f99de5
Show file tree

Hide file tree

Showing 37 changed files with 82 additions and 80 deletions.
diff --git a/web/satellite/src/components/AccessTableComponent.vue b/web/satellite/src/components/AccessTableComponent.vue
@@ -57,7 +57,7 @@
                         <v-list class="pa-1">
                             <v-list-item class="text-error" density="comfortable" link rounded="lg" @click="() => onDeleteClick(item.name)">
                                 <template #prepend>
-                                    <icon-trash bold />
+                                    <icon-trash />
                                 </template>
                                 <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
                                     Delete Access
@@ -97,7 +97,7 @@
                         @click="isDeleteAccessDialogShown = true"
                     >
                         <template #prepend>
-                            <icon-trash bold />
+                            <icon-trash />
                         </template>
                         Delete
                     </v-btn>

diff --git a/web/satellite/src/components/BrowserRowActions.vue b/web/satellite/src/components/BrowserRowActions.vue
@@ -29,7 +29,7 @@
             icon
             @click="emit('shareClick')"
         >
-            <icon-share bold />
+            <icon-share />
         </v-btn>
 
         <v-btn
@@ -76,7 +76,7 @@
 
                     <v-list-item density="comfortable" link rounded="lg" @click="emit('shareClick')">
                         <template #prepend>
-                            <icon-share bold />
+                            <icon-share />
                         </template>
                         <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
                             Share
@@ -87,7 +87,7 @@
 
                     <v-list-item density="comfortable" link rounded="lg" base-color="error" @click="emit('deleteFileClick')">
                         <template #prepend>
-                            <icon-trash bold />
+                            <icon-trash />
                         </template>
                         <v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
                             Delete

diff --git a/web/satellite/src/components/BrowserTableComponent.vue b/web/satellite/src/components/BrowserTableComponent.vue
@@ -118,7 +118,7 @@
                         @click="isDeleteFileDialogShown = true"
                     >
                         <template #prepend>
-                            <icon-trash bold />
+                            <icon-trash />
                         </template>
                         Delete
                     </v-btn>

diff --git a/web/satellite/src/components/dialogs/CreateAccessDialog.vue b/web/satellite/src/components/dialogs/CreateAccessDialog.vue
@@ -295,7 +295,7 @@ const accessGrant = resettableRef<string>('');
 // S3 Credentials Created
 const edgeCredentials = resettableRef<EdgeCredentials>(new EdgeCredentials());
 
-// CLI Access Created
+// API Key Created
 const cliAccess = resettableRef<string>('');
 
 const worker = ref<Worker | null>(null);
@@ -466,7 +466,7 @@ watch(step, newStep => {
 });
 
 /**
- * Generates CLI access.
+ * Generates API Key.
  */
 async function createCLIAccess(): Promise<void> {
     if (!worker.value) {

diff --git a/web/satellite/src/components/dialogs/createAccessSteps/CLIAccessCreatedStep.vue b/web/satellite/src/components/dialogs/createAccessSteps/CLIAccessCreatedStep.vue
@@ -57,7 +57,7 @@ const saveItems = computed<SaveButtonsItem[]>(() => [
 ]);
 
 defineExpose<DialogStepComponent>({
-    title: 'CLI Access Created',
+    title: 'API Key Created',
     onEnter: () => isTooltipDisabled.value = false,
     onExit: () => isTooltipDisabled.value = true,
 });

diff --git a/web/satellite/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue b/web/satellite/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
@@ -94,7 +94,7 @@ const typeInfos: Record<AccessType, AccessTypeInfo> = {
     ),
     [AccessType.APIKey]: new AccessTypeInfo(
         AccessType.APIKey,
-        'CLI Access',
+        'API Key',
         'Create an access grant to run in the command line.',
         true,
     ),

diff --git a/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue b/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue
@@ -11,8 +11,8 @@
         <p class="text-body-2 my-2">By upgrading, your trial will end immediately.</p>
     </v-alert>
 
-    <v-row justify="center" class="mx-0 pb-5 pt-4">
-        <v-col class="pl-0">
+    <v-row justify="center" class="pb-5 pt-3">
+        <v-col>
             <v-btn
                 variant="flat"
                 color="primary"
@@ -26,7 +26,7 @@
                 Add Credit Card
             </v-btn>
         </v-col>
-        <v-col class="px-0">
+        <v-col>
             <v-btn
                 variant="flat"
                 block

diff --git a/web/satellite/src/components/icons/IconAccess.vue b/web/satellite/src/components/icons/IconAccess.vue
@@ -4,17 +4,14 @@
 <template>
     <!-- Access Icon -->
     <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path v-if="!bold" d="M17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8283L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.21041 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141ZM8.65636 3.58979L8.59185 3.65326L8.54502 3.70055L8.49571 3.75161C7.15718 5.15496 6.66574 7.15205 7.17887 8.99879L7.19964 9.07161L7.39804 9.73358L2.27364 14.8581L2.08255 17.9173L5.14189 17.7262L10.2653 12.603L10.9161 12.7967L10.9825 12.8158C12.8841 13.3491 14.9337 12.8211 16.3423 11.4126C18.4837 9.27111 18.4837 5.79915 16.3423 3.65771C14.2222 1.53768 10.7982 1.51648 8.65636 3.58979ZM12.882 5.52457C13.322 5.08455 14.0354 5.08455 14.4754 5.52457C14.9154 5.96459 14.9154 6.67801 14.4754 7.11803C14.0354 7.55805 13.322 7.55805 12.882 7.11803C12.4419 6.67801 12.4419 5.96459 12.882 5.52457Z" fill="currentColor" />
-        <path v-else d="M5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.2104 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8284L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651ZM2.72487 17.2752L4.87785 17.1406L10.1487 11.8697L10.6541 12.0711C12.4527 12.7879 14.5245 12.3804 15.9173 10.9876C17.8241 9.08087 17.8241 5.9894 15.9173 4.08263C14.0106 2.17587 10.9191 2.17587 9.01235 4.08263C7.63541 5.45957 7.22148 7.5002 7.90482 9.28431L7.92882 9.34572L8.13023 9.85114L2.85946 15.1222L2.72487 17.2752ZM11.9843 8.01565C12.6297 8.66102 13.676 8.66102 14.3214 8.01565C14.9668 7.37029 14.9668 6.32394 14.3214 5.67858C13.676 5.03321 12.6297 5.03321 11.9843 5.67858C11.339 6.32394 11.339 7.37029 11.9843 8.01565Z" fill="currentColor" />
+        <path d="M5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.2104 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8284L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651ZM2.72487 17.2752L4.87785 17.1406L10.1487 11.8697L10.6541 12.0711C12.4527 12.7879 14.5245 12.3804 15.9173 10.9876C17.8241 9.08087 17.8241 5.9894 15.9173 4.08263C14.0106 2.17587 10.9191 2.17587 9.01235 4.08263C7.63541 5.45957 7.22148 7.5002 7.90482 9.28431L7.92882 9.34572L8.13023 9.85114L2.85946 15.1222L2.72487 17.2752ZM11.9843 8.01565C12.6297 8.66102 13.676 8.66102 14.3214 8.01565C14.9668 7.37029 14.9668 6.32394 14.3214 5.67858C13.676 5.03321 12.6297 5.03321 11.9843 5.67858C11.339 6.32394 11.339 7.37029 11.9843 8.01565Z" fill="currentColor" />
     </svg>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
     size?: number | string;
-    bold?: boolean;
 }>(), {
     size: 20,
-    bold: false,
 });
 </script>
diff --git a/web/satellite/src/components/icons/IconAllProjects.vue b/web/satellite/src/components/icons/IconAllProjects.vue
@@ -4,10 +4,10 @@
 <template>
     <!-- All Projects Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M5.33455 11.8182L2 10L5.33455 8.18182" :stroke="color" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" :stroke="color" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" :stroke="color" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" :stroke="color" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M5.33455 11.8182L2 10L5.33455 8.18182" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 </template>
 

diff --git a/web/satellite/src/components/icons/IconApplications.vue b/web/satellite/src/components/icons/IconApplications.vue
@@ -3,8 +3,8 @@
 
 <template>
     <!-- Applications Icon -->
-    <svg :width="size" :height="size" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fill="currentColor" d="M9.00321 12.5639C9.40013 12.5639 9.72373 12.8778 9.73928 13.2709L9.73986 13.3005V16.3634C9.73986 16.7702 9.41005 17.1 9.00321 17.1C8.60629 17.1 8.28269 16.7861 8.26715 16.393L8.26656 16.3634V13.3005C8.26656 12.8937 8.59637 12.5639 9.00321 12.5639ZM12.5825 11.5386L12.6069 11.5619L14.7307 13.6857C15.0184 13.9733 15.0184 14.4398 14.7307 14.7275C14.451 15.0071 14.0024 15.0149 13.7133 14.7508L13.6889 14.7275L11.5651 12.6037C11.2774 12.316 11.2774 11.8496 11.5651 11.5619C11.8366 11.2904 12.2672 11.2751 12.5566 11.516L12.5825 11.5386ZM6.48415 11.4847C6.7631 11.7652 6.76968 12.2138 6.50477 12.5022L6.4814 12.5265L4.29031 14.702C4.00187 14.989 3.53545 14.9877 3.24853 14.6993C2.96958 14.4189 2.963 13.9702 3.22792 13.6818L3.25129 13.6575L5.44237 11.482C5.73081 11.1951 6.19723 11.1963 6.48415 11.4847ZM4.70534 8.26333C5.11218 8.26333 5.44199 8.59314 5.44199 8.99998C5.44199 9.3969 5.12808 9.7205 4.73497 9.73605L4.70534 9.73663H1.63655C1.22971 9.73663 0.899902 9.40682 0.899902 8.99998C0.899902 8.60306 1.21382 8.27946 1.60693 8.26391L1.63655 8.26333H4.70534ZM16.3668 8.26333C16.7736 8.26333 17.1034 8.59314 17.1034 8.99998C17.1034 9.3969 16.7895 9.7205 16.3964 9.73605L16.3668 9.73663H13.422C13.0152 9.73663 12.6854 9.40682 12.6854 8.99998C12.6854 8.60306 12.9993 8.27946 13.3924 8.26391L13.422 8.26333H16.3668ZM4.28844 3.2445L4.31282 3.26781L6.44387 5.39886C6.73155 5.68654 6.73155 6.15296 6.44387 6.44064C6.16419 6.72033 5.71555 6.7281 5.42647 6.46395L5.40209 6.44064L3.27104 4.30959C2.98336 4.02191 2.98336 3.55549 3.27104 3.26781C3.54251 2.99635 3.97313 2.98105 4.26253 3.2219L4.28844 3.2445ZM14.7335 3.27487C15.0125 3.5553 15.0191 4.00395 14.7542 4.29233L14.7308 4.31665L12.6582 6.37432C12.3697 6.66124 11.9033 6.66001 11.6164 6.37157C11.3374 6.09114 11.3309 5.64248 11.5958 5.35411L11.6191 5.32979L13.6918 3.27211C13.9802 2.9852 14.4466 2.98643 14.7335 3.27487ZM9.00321 0.900024C9.40013 0.900024 9.72373 1.21394 9.73928 1.60705L9.73986 1.63668V4.58293C9.73986 4.98977 9.41005 5.31958 9.00321 5.31958C8.60629 5.31958 8.28269 5.00566 8.26715 4.61256L8.26656 4.58293V1.63668C8.26656 1.22983 8.59637 0.900024 9.00321 0.900024Z" />
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.0037 13.9598C10.4447 13.9598 10.8043 14.3086 10.8215 14.7454L10.8222 14.7783V18.1815C10.8222 18.6335 10.4557 19 10.0037 19C9.56266 19 9.2031 18.6512 9.18583 18.2144L9.18517 18.1815V14.7783C9.18517 14.3263 9.55163 13.9598 10.0037 13.9598ZM13.9807 12.8206L14.0078 12.8465L16.3675 15.2063C16.6872 15.5259 16.6872 16.0442 16.3675 16.3638C16.0568 16.6746 15.5583 16.6832 15.2371 16.3897L15.21 16.3638L12.8502 14.004C12.5306 13.6844 12.5306 13.1662 12.8502 12.8465C13.1519 12.5449 13.6303 12.5279 13.9519 12.7955L13.9807 12.8206ZM7.20472 12.7608C7.51466 13.0724 7.52198 13.5709 7.22763 13.8913L7.20166 13.9183L4.76712 16.3356C4.44663 16.6544 3.92839 16.653 3.60959 16.3325C3.29965 16.0209 3.29233 15.5224 3.58668 15.202L3.61265 15.175L6.04719 12.7577C6.36768 12.4389 6.88592 12.4403 7.20472 12.7608ZM5.22827 9.18145C5.68031 9.18145 6.04677 9.5479 6.04677 9.99995C6.04677 10.441 5.69797 10.8005 5.26119 10.8178L5.22827 10.8184H1.8185C1.36646 10.8184 1 10.452 1 9.99995C1 9.55893 1.3488 9.19938 1.78558 9.1821L1.8185 9.18145H5.22827ZM18.1854 9.18145C18.6374 9.18145 19.0039 9.5479 19.0039 9.99995C19.0039 10.441 18.6551 10.8005 18.2183 10.8178L18.1854 10.8184H14.9134C14.4614 10.8184 14.0949 10.452 14.0949 9.99995C14.0949 9.55893 14.4437 9.19938 14.8805 9.1821L14.9134 9.18145H18.1854ZM4.76505 3.60498L4.79214 3.63087L7.15997 5.99871C7.47961 6.31835 7.47961 6.8366 7.15997 7.15624C6.8492 7.46701 6.35072 7.47564 6.02952 7.18214L6.00243 7.15624L3.6346 4.78841C3.31496 4.46876 3.31496 3.95052 3.6346 3.63087C3.93623 3.32925 4.41469 3.31225 4.73626 3.57986L4.76505 3.60498ZM16.3707 3.63872C16.6806 3.9503 16.688 4.44881 16.3936 4.76923L16.3676 4.79625L14.0647 7.08255C13.7443 7.40135 13.226 7.39998 12.9072 7.07949C12.5973 6.76791 12.59 6.2694 12.8843 5.94898L12.9103 5.92196L15.2132 3.63566C15.5337 3.31686 16.0519 3.31823 16.3707 3.63872ZM10.0037 1C10.4447 1 10.8043 1.3488 10.8215 1.78558L10.8222 1.8185V5.09212C10.8222 5.54416 10.4557 5.91062 10.0037 5.91062C9.56266 5.91062 9.2031 5.56182 9.18583 5.12504L9.18517 5.09212V1.8185C9.18517 1.36646 9.55163 1 10.0037 1Z" fill="currentColor" stroke="currentColor" stroke-width="0.5" />
     </svg>
 </template>
 

diff --git a/web/satellite/src/components/icons/IconBucket.vue b/web/satellite/src/components/icons/IconBucket.vue
@@ -3,16 +3,15 @@
 
 <template>
     <!-- Bucket Icon -->
-    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path v-if="!bold" d="M9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18679 17.8839 4.21129 17.8825 4.23573L17.8846 4.23576L17.8812 4.25647C17.8747 4.34405 17.8594 4.43074 17.8354 4.51639L17.2448 7.86246L17.9754 8.59315C19.4245 10.0422 19.4378 12.3818 18.0009 13.8187C17.4404 14.3792 16.7425 14.7191 16.0136 14.8391L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04971 4.51801C2.02531 4.43125 2.00973 4.34344 2.00333 4.2547L2 4.23576L2.0021 4.23573C2.0007 4.21129 2 4.18679 2 4.16222C2 2.41577 5.5559 1 9.94232 1ZM16.5417 5.92227C15.1162 6.76791 12.6925 7.32444 9.94232 7.32444C7.19224 7.32444 4.76862 6.76794 3.34307 5.92236L5.07 15.708L5.23576 16.7077L5.24057 16.7148C5.26274 16.7549 5.30682 16.8087 5.37589 16.8715C5.56623 17.0445 5.87973 17.225 6.29249 17.3864C7.23129 17.7535 8.53735 17.9704 9.94232 17.9704C11.3555 17.9704 12.6685 17.7509 13.6079 17.3802C14.0199 17.2176 14.331 17.0363 14.5174 16.8636C14.5757 16.8096 14.6149 16.7629 14.6373 16.7265L14.6486 16.7072C14.6484 16.707 14.6488 16.707 14.6486 16.7072L14.6504 16.639L14.9642 14.8612C14.1844 14.7668 13.4269 14.4248 12.8191 13.8363L12.7754 13.7932L9.52478 10.5426C9.32375 10.3416 9.32375 10.0156 9.52478 9.81461C9.71912 9.62028 10.0302 9.6138 10.2323 9.79518L10.2528 9.81461L13.5034 13.0652C13.9635 13.5253 14.5466 13.7854 15.1434 13.8453L16.5417 5.92227ZM17.0264 9.10014L16.2081 13.7368C16.5984 13.6141 16.9648 13.3988 17.2729 13.0907C18.2944 12.0692 18.2964 10.4074 17.282 9.35635L17.2474 9.32116L17.0264 9.10014ZM9.94232 2.02956C7.93079 2.02956 6.05766 2.345 4.70709 2.88273L4.58604 2.93209C3.53715 3.37015 3.02956 3.85899 3.02956 4.16222C3.02956 4.4769 3.57618 4.99144 4.70709 5.44172C6.05766 5.97944 7.93079 6.29488 9.94232 6.29488C11.9539 6.29488 13.827 5.97944 15.1775 5.44172L15.2986 5.39235C16.3475 4.95429 16.8551 4.46546 16.8551 4.16222C16.8551 3.84754 16.3085 3.333 15.1775 2.88273C13.827 2.345 11.9539 2.02956 9.94232 2.02956Z" fill="currentColor" />
-        <path v-else d="M18.1721 8.38515C19.7355 9.9486 19.7498 12.4744 18.1975 14.0267C17.5686 14.6556 16.7797 15.0274 15.9599 15.1431L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04963 4.51771C2.02535 4.43129 2.00981 4.34382 2.00338 4.25544L2 4.23576L2.00211 4.23587C2.00071 4.21139 2 4.18684 2 4.16222C2 2.41577 5.5559 1 9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18684 17.8839 4.21139 17.8825 4.23587L17.8846 4.23576L17.8812 4.25676C17.8747 4.34414 17.8594 4.43063 17.8355 4.5161L17.3054 7.51844L18.1721 8.38515ZM15.8846 6.26039C14.4297 6.91312 12.3066 7.32444 9.94232 7.32444C7.57808 7.32444 5.45511 6.91314 4.00017 6.26045L5.5636 15.1197L5.81923 16.4762L5.84291 16.4946C5.9766 16.5948 6.18351 16.7078 6.45219 16.8167L6.50675 16.8385C7.37281 17.1771 8.60689 17.3821 9.94232 17.3821C11.2855 17.3821 12.5259 17.1747 13.392 16.8329C13.7041 16.7097 13.9368 16.5803 14.0734 16.4701L14.0845 16.4609L14.3355 15.0387C13.7042 14.8652 13.1061 14.5347 12.6032 14.0477L12.556 14.0012L9.30543 10.7506C8.98952 10.4347 8.98952 9.92252 9.30543 9.60661C9.61364 9.2984 10.1087 9.29089 10.426 9.58406L10.4494 9.60661L13.7 12.8572C13.9686 13.1257 14.2839 13.3178 14.6188 13.4334L15.8846 6.26039ZM16.9623 9.46328L16.2676 13.3997C16.5543 13.2861 16.8224 13.1137 17.0535 12.8827C17.9602 11.976 17.9627 10.4993 17.0611 9.56277L17.0281 9.52916L16.9623 9.46328ZM9.94232 2.61788C8.0014 2.61788 6.2014 2.921 4.92472 3.42932C4.37614 3.64773 3.96798 3.88827 3.73308 4.10939C3.71811 4.12348 3.70445 4.13691 3.69205 4.14963L3.68024 4.16207L3.70159 4.18448L3.73308 4.21505C3.96798 4.43617 4.37614 4.67671 4.92472 4.89513C6.2014 5.40344 8.0014 5.70656 9.94232 5.70656C11.8832 5.70656 13.6832 5.40344 14.9599 4.89513C15.5085 4.67671 15.9167 4.43617 16.1516 4.21505C16.1665 4.20096 16.1802 4.18753 16.1926 4.17481L16.2045 4.16207L16.1831 4.13996L16.1516 4.10939C15.9167 3.88827 15.5085 3.64773 14.9599 3.42932C13.6832 2.921 11.8832 2.61788 9.94232 2.61788Z" fill="currentColor" />
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M18.1721 8.38515C19.7355 9.9486 19.7498 12.4744 18.1975 14.0267C17.5686 14.6556 16.7797 15.0274 15.9599 15.1431L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04963 4.51771C2.02535 4.43129 2.00981 4.34382 2.00338 4.25544L2 4.23576L2.00211 4.23587C2.00071 4.21139 2 4.18684 2 4.16222C2 2.41577 5.5559 1 9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18684 17.8839 4.21139 17.8825 4.23587L17.8846 4.23576L17.8812 4.25676C17.8747 4.34414 17.8594 4.43063 17.8355 4.5161L17.3054 7.51844L18.1721 8.38515ZM15.8846 6.26039C14.4297 6.91312 12.3066 7.32444 9.94232 7.32444C7.57808 7.32444 5.45511 6.91314 4.00017 6.26045L5.5636 15.1197L5.81923 16.4762L5.84291 16.4946C5.9766 16.5948 6.18351 16.7078 6.45219 16.8167L6.50675 16.8385C7.37281 17.1771 8.60689 17.3821 9.94232 17.3821C11.2855 17.3821 12.5259 17.1747 13.392 16.8329C13.7041 16.7097 13.9368 16.5803 14.0734 16.4701L14.0845 16.4609L14.3355 15.0387C13.7042 14.8652 13.1061 14.5347 12.6032 14.0477L12.556 14.0012L9.30543 10.7506C8.98952 10.4347 8.98952 9.92252 9.30543 9.60661C9.61364 9.2984 10.1087 9.29089 10.426 9.58406L10.4494 9.60661L13.7 12.8572C13.9686 13.1257 14.2839 13.3178 14.6188 13.4334L15.8846 6.26039ZM16.9623 9.46328L16.2676 13.3997C16.5543 13.2861 16.8224 13.1137 17.0535 12.8827C17.9602 11.976 17.9627 10.4993 17.0611 9.56277L17.0281 9.52916L16.9623 9.46328ZM9.94232 2.61788C8.0014 2.61788 6.2014 2.921 4.92472 3.42932C4.37614 3.64773 3.96798 3.88827 3.73308 4.10939C3.71811 4.12348 3.70445 4.13691 3.69205 4.14963L3.68024 4.16207L3.70159 4.18448L3.73308 4.21505C3.96798 4.43617 4.37614 4.67671 4.92472 4.89513C6.2014 5.40344 8.0014 5.70656 9.94232 5.70656C11.8832 5.70656 13.6832 5.40344 14.9599 4.89513C15.5085 4.67671 15.9167 4.43617 16.1516 4.21505C16.1665 4.20096 16.1802 4.18753 16.1926 4.17481L16.2045 4.16207L16.1831 4.13996L16.1516 4.10939C15.9167 3.88827 15.5085 3.64773 14.9599 3.42932C13.6832 2.921 11.8832 2.61788 9.94232 2.61788Z" fill="currentColor" />
     </svg>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-    bold?: boolean;
+    size?: number | string;
 }>(), {
-    bold: false,
+    size: 18,
 });
 </script>