feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/button/Button.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
+
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 const props = defineProps({
   label: {
@@ -29,12 +31,21 @@ const props = defineProps({
   size: {
     type: String,
     default: 'default',
-    validator: value => ['default', 'sm', 'lg', 'icon'].includes(value),
+    validator: value => ['default', 'sm', 'lg'].includes(value),
+  },
+  type: {
+    type: String,
+    default: 'button',
+    validator: value => ['button', 'submit', 'reset'].includes(value),
   },
   icon: {
     type: String,
     default: '',
   },
+  emoji: {
+    type: String,
+    default: '',
+  },
   iconPosition: {
     type: String,
     default: 'left',
@@ -44,6 +55,10 @@ const props = defineProps({
     type: String,
     default: 'fluent',
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['click']);
@@ -51,33 +66,28 @@ const emit = defineEmits(['click']);
 const buttonVariants = {
   variant: {
     default:
-      'bg-woot-500 dark:bg-woot-500 text-white dark:text-white hover:bg-woot-600 dark:hover:bg-woot-600',
-    destructive:
-      'bg-ruby-700 dark:bg-ruby-700 text-white dark:text-white hover:bg-ruby-800 dark:hover:bg-ruby-800',
+      'bg-n-brand text-white dark:text-white hover:bg-woot-600 dark:hover:bg-woot-600',
+    destructive: 'bg-n-ruby-9 text-white dark:text-white hover:bg-n-ruby-10',
     outline:
-      'border border-slate-200 dark:border-slate-700/50 hover:border-slate-300 dark:hover:border-slate-600',
-    secondary:
-      'bg-slate-50 text-slate-900 dark:bg-slate-700/50 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-600',
-    ghost:
-      'text-slate-900 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800',
-    link: 'text-woot-500 underline-offset-4 hover:underline dark:hover:underline',
+      'border border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6',
+    secondary: 'bg-n-solid-3 text-n-slate-12 hover:bg-n-solid-2',
+    ghost: 'text-n-slate-12',
+    link: 'text-n-brand underline-offset-4 hover:underline dark:hover:underline',
   },
   size: {
     default: 'h-10 px-4 py-2',
-    sm: 'h-8 px-3',
-    lg: 'h-11 px-4',
-    icon: 'h-auto w-auto px-2',
+    sm: 'h-8 px-3 py-1',
+    lg: 'h-12 px-5 py-3',
   },
   text: {
     default:
-      '!text-woot-500 dark:!text-woot-500 hover:!text-woot-600 dark:hover:!text-woot-600',
+      '!text-n-brand dark:!text-n-brand hover:!text-woot-600 dark:hover:!text-woot-600',
     success:
       '!text-green-500 dark:!text-green-500 hover:!text-green-600 dark:hover:!text-green-600',
     warning:
       '!text-amber-600 dark:!text-amber-600 hover:!text-amber-600 dark:hover:!text-amber-600',
-    danger:
-      '!text-ruby-700 dark:!text-ruby-700 hover:!text-ruby-800 dark:hover:!text-ruby-800',
-    info: '!text-slate-500 dark:!text-slate-400 hover:!text-slate-600 dark:hover:!text-slate-500',
+    danger: '!text-n-ruby-11 hover:!text-n-ruby-10',
+    info: '!text-n-slate-12 hover:!text-n-slate-11',
   },
 };
 
@@ -100,35 +110,43 @@ const iconSize = computed(() => {
   return 18;
 });
 
-const handleClick = () => {
-  emit('click');
+const handleClick = e => {
+  emit('click', e);
 };
 </script>
 
 <template>
   <button
     :class="buttonClasses"
-    class="inline-flex items-center justify-center h-10 min-w-0 gap-2 text-sm font-medium transition-all duration-200 ease-in-out rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+    :type="type"
+    class="inline-flex items-center justify-center min-w-0 gap-2 text-sm font-medium transition-all duration-200 ease-in-out rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
     @click="handleClick"
   >
     <FluentIcon
-      v-if="icon && iconPosition === 'left'"
+      v-if="icon && iconPosition === 'left' && !isLoading"
       :icon="icon"
       :size="iconSize"
       :icon-lib="iconLib"
       class="flex-shrink-0"
+      :class="{
+        'text-n-slate-11 dark:text-n-slate-11': variant === 'secondary',
+      }"
     />
-    <slot>
-      <span v-if="label" class="min-w-0 truncate">
-        {{ label }}
-      </span>
-    </slot>
+    <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />
+    <slot name="leftPrefix" />
+    <span v-if="emoji">{{ emoji }}</span>
+    <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
+    <slot />
+    <slot name="rightPrefix" />
     <FluentIcon
       v-if="icon && iconPosition === 'right'"
       :icon="icon"
       :size="iconSize"
       :icon-lib="iconLib"
       class="flex-shrink-0"
+      :class="{
+        'text-n-slate-11 dark:text-n-slate-11': variant === 'secondary',
+      }"
     />
   </button>
 </template>