From 18b13d07859b65f33ce484ebc786288d0b385e6d Mon Sep 17 00:00:00 2001
From: Maiia Diachkovskaia <mayapavlovna@gmail.com>
Date: Tue, 14 Jan 2025 17:03:04 +0900
Subject: [PATCH 1/4] feat: update button design

---
 .../molecules/button/vc-button.stories.ts     |  3 +-
 .../components/molecules/button/vc-button.vue | 64 +++++++++++--------
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/client-app/ui-kit/components/molecules/button/vc-button.stories.ts b/client-app/ui-kit/components/molecules/button/vc-button.stories.ts
index 34a1d3e057..55e1ac85a7 100644
--- a/client-app/ui-kit/components/molecules/button/vc-button.stories.ts
+++ b/client-app/ui-kit/components/molecules/button/vc-button.stories.ts
@@ -51,13 +51,14 @@ export default {
         },
       },
     },
+    onClick: { action: "VcButton click" },
   },
 } as Meta<typeof VcButton>;
 
 const Template: StoryFn<typeof VcButton> = (args) => ({
   components: { VcButton },
   setup: () => ({ args }),
-  template: '<VcButton v-bind="args">Button text</VcButton>',
+  template: '<VcButton v-bind="args" @click="args.onClick">Button text</VcButton>',
 });
 
 export const Basic = Template.bind({});
diff --git a/client-app/ui-kit/components/molecules/button/vc-button.vue b/client-app/ui-kit/components/molecules/button/vc-button.vue
index 25d34ce65a..8083d61106 100644
--- a/client-app/ui-kit/components/molecules/button/vc-button.vue
+++ b/client-app/ui-kit/components/molecules/button/vc-button.vue
@@ -64,9 +64,6 @@ export interface IEmits {
 interface IAttributes {
   to?: RouteLocationRaw | null;
   href?: string;
-  style?: {
-    minWidth?: string;
-  };
 }
 
 interface IProps {
@@ -87,6 +84,7 @@ interface IProps {
   fullWidth?: boolean;
   noWrap?: boolean;
   minWidth?: string;
+  tag?: string;
 }
 
 defineEmits<IEmits>();
@@ -102,6 +100,8 @@ const props = withDefaults(defineProps<IProps>(), {
   truncate: false,
   fullWidth: false,
   noWrap: false,
+  minWidth: "",
+  tag: "",
 });
 
 const enabled = eagerComputed<boolean>(() => !props.disabled && !props.loading);
@@ -113,6 +113,10 @@ const target = computed<string | undefined>(() =>
 );
 
 const componentTag = computed(() => {
+  if (props.tag) {
+    return props.tag;
+  }
+
   if (isRouterLink.value) {
     return "router-link";
   }
@@ -135,19 +139,14 @@ const attrs = computed(() => {
     attributes.href = props.externalLink;
   }
 
-  if (props.minWidth) {
-    attributes.style = {
-      minWidth: props.minWidth,
-    };
-  }
-
   return attributes;
 });
 </script>
 
 <style lang="scss">
 .vc-button {
-  --min-w: var(--vc-button-min-width, auto);
+  --props-min-width: v-bind(props.minWidth);
+  --min-w: var(--props-min-width, var(--vc-button-min-width, auto));
 
   $colors: primary, secondary, success, info, neutral, warning, danger, accent;
 
@@ -160,7 +159,7 @@ const attrs = computed(() => {
   $loaderIcon: "";
   $noWrap: "";
 
-  @apply relative inline-block rounded border-2 select-none text-center tracking-wide;
+  @apply relative inline-block rounded border-2 select-none text-center;
 
   &--truncate {
     $truncate: &;
@@ -208,21 +207,25 @@ const attrs = computed(() => {
     &--xs {
       --line-height: 0.875rem;
 
-      @apply px-2.5 py-1 text-xs/[--line-height] font-bold;
+      @apply px-3 py-1.5 text-xs/[--line-height] font-bold;
 
       &#{$icon} {
-        @apply px-1;
+        @apply px-1.5;
       }
 
       & #{$loaderIcon} {
-        @apply border-2 w-3.5 h-3.5;
+        @apply border-2 size-3.5;
       }
     }
 
     &--sm {
-      --line-height: 1rem;
+      --line-height: 1.25rem;
+
+      @apply px-3.5 py-2 text-xs/[--line-height] uppercase font-black;
 
-      @apply p-2 text-xs/[--line-height] uppercase font-black;
+      &#{$icon} {
+        @apply px-2;
+      }
 
       & #{$loaderIcon} {
         @apply border-2 w-4 h-4;
@@ -232,7 +235,11 @@ const attrs = computed(() => {
     &--md {
       --line-height: 1.25rem;
 
-      @apply p-2.5 text-sm/[--line-height] uppercase font-black;
+      @apply px-4 py-2.5 text-sm/[--line-height] uppercase font-black;
+
+      &#{$icon} {
+        @apply px-2.5;
+      }
 
       & #{$loaderIcon} {
         @apply border-[3px] w-5 h-5;
@@ -242,7 +249,11 @@ const attrs = computed(() => {
     &--lg {
       --line-height: 1.5rem;
 
-      @apply p-3.5 text-base/[--line-height] uppercase font-black;
+      @apply px-5 py-3.5 text-base/[--line-height] uppercase font-black;
+
+      &#{$icon} {
+        @apply px-3.5;
+      }
 
       & #{$loaderIcon} {
         @apply border-[3px] w-6 h-6;
@@ -257,13 +268,13 @@ const attrs = computed(() => {
       }
 
       &:not([class*="--solid--"]) #{$loaderIcon} {
-        @apply border-[--color-#{$color}-100] border-r-[--color-#{$color}-500];
+        @apply border-[--color-#{$color}-100] border-r-[--color-#{$color}-600];
       }
     }
 
     &--solid--#{$color} {
-      @apply bg-[--color-#{$color}-500]
-      border-[--color-#{$color}-500]
+      @apply bg-[--color-#{$color}-600]
+      border-[--color-#{$color}-600]
       text-additional-50;
 
       &:hover:not(#{$loading}, #{$disabled}) {
@@ -277,7 +288,7 @@ const attrs = computed(() => {
     }
 
     &--no-border--#{$color} {
-      @apply bg-additional-50 text-[--color-#{$color}-500] border-additional-50;
+      @apply bg-additional-50 text-[--color-#{$color}-600] border-additional-50;
 
       &:hover:not(#{$loading}, #{$disabled}) {
         @apply bg-[--color-#{$color}-100] border-[--color-#{$color}-100] text-[--color-#{$color}-700];
@@ -287,21 +298,17 @@ const attrs = computed(() => {
     &--outline {
       &--#{$color} {
         @apply bg-additional-50
-        text-[--color-#{$color}-500]
+        text-[--color-#{$color}-600]
         border-current;
 
         &:hover:not(#{$loading}, #{$disabled}) {
           @apply text-[--color-#{$color}-700];
         }
       }
-
-      &--secondary {
-        @apply text-secondary-600;
-      }
     }
 
     &--no-background--#{$color} {
-      @apply bg-transparent text-[--color-#{$color}-500] border-transparent;
+      @apply bg-transparent text-[--color-#{$color}-600] border-transparent;
 
       &:hover:not(#{$loading}, #{$disabled}) {
         @apply text-[--color-#{$color}-700];
@@ -309,6 +316,7 @@ const attrs = computed(() => {
     }
   }
 
+  &#{$disabled}:not(#{$loading}),
   &:disabled#{$disabled}:not(#{$loading}) {
     &[class*="--solid--"] {
       @apply bg-neutral-200 border-neutral-200 text-neutral-400;

From e858fac244626fe5279877d9fd161a00140db46b Mon Sep 17 00:00:00 2001
From: Maiia Diachkovskaia <mayapavlovna@gmail.com>
Date: Thu, 23 Jan 2025 16:52:24 +0900
Subject: [PATCH 2/4] fix: vc-button design

---
 .../ui-kit/components/molecules/button/vc-button.vue   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client-app/ui-kit/components/molecules/button/vc-button.vue b/client-app/ui-kit/components/molecules/button/vc-button.vue
index 8083d61106..ba59cd068b 100644
--- a/client-app/ui-kit/components/molecules/button/vc-button.vue
+++ b/client-app/ui-kit/components/molecules/button/vc-button.vue
@@ -221,14 +221,14 @@ const attrs = computed(() => {
     &--sm {
       --line-height: 1.25rem;
 
-      @apply px-3.5 py-2 text-xs/[--line-height] uppercase font-black;
+      @apply px-3.5 py-1.5 text-xs/[--line-height] uppercase font-black;
 
       &#{$icon} {
-        @apply px-2;
+        @apply px-1.5;
       }
 
       & #{$loaderIcon} {
-        @apply border-2 w-4 h-4;
+        @apply border-2 size-5;
       }
     }
 
@@ -249,10 +249,10 @@ const attrs = computed(() => {
     &--lg {
       --line-height: 1.5rem;
 
-      @apply px-5 py-3.5 text-base/[--line-height] uppercase font-black;
+      @apply px-5 py-3 text-base/[--line-height] uppercase font-black;
 
       &#{$icon} {
-        @apply px-3.5;
+        @apply px-3;
       }
 
       & #{$loaderIcon} {

From 4a886850721c198fcf9cd111c40951ffc3e82556 Mon Sep 17 00:00:00 2001
From: Maiia Diachkovskaia <mayapavlovna@gmail.com>
Date: Thu, 23 Jan 2025 16:53:42 +0900
Subject: [PATCH 3/4] feat: implement min-width to checkout-defaults button

---
 client-app/pages/account/checkout-defaults.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client-app/pages/account/checkout-defaults.vue b/client-app/pages/account/checkout-defaults.vue
index a85061ee5f..eaeb6e9f11 100644
--- a/client-app/pages/account/checkout-defaults.vue
+++ b/client-app/pages/account/checkout-defaults.vue
@@ -112,7 +112,12 @@
           </template>
         </VcSelect>
 
-        <VcButton :disabled="!isDirty" class="mt-8 self-center lg:self-start" @click="saveDefaults()">
+        <VcButton
+          :disabled="!isDirty"
+          class="mt-8 self-center lg:self-start"
+          min-width="6.25rem"
+          @click="saveDefaults()"
+        >
           {{ $t("pages.account.checkout_defaults.update_button") }}
         </VcButton>
       </div>

From a55c22a8934c257699920cb1a625cfb61524a021 Mon Sep 17 00:00:00 2001
From: Maiia Diachkovskaia <mayapavlovna@gmail.com>
Date: Mon, 27 Jan 2025 17:41:54 +0900
Subject: [PATCH 4/4] fix: checkout-defaults button min-width

---
 client-app/pages/account/checkout-defaults.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/client-app/pages/account/checkout-defaults.vue b/client-app/pages/account/checkout-defaults.vue
index eaeb6e9f11..89149a100d 100644
--- a/client-app/pages/account/checkout-defaults.vue
+++ b/client-app/pages/account/checkout-defaults.vue
@@ -112,12 +112,7 @@
           </template>
         </VcSelect>
 
-        <VcButton
-          :disabled="!isDirty"
-          class="mt-8 self-center lg:self-start"
-          min-width="6.25rem"
-          @click="saveDefaults()"
-        >
+        <VcButton :disabled="!isDirty" class="mt-8 self-center lg:self-start" min-width="12rem" @click="saveDefaults()">
           {{ $t("pages.account.checkout_defaults.update_button") }}
         </VcButton>
       </div>