chore: Remove older UI (#11720)

app/javascript/v3/App.vue

@@ -50,10 +50,6 @@ export default {
 @tailwind utilities;
 
 @import '../dashboard/assets/scss/next-colors';
-@import 'shared/assets/stylesheets/colors';
-@import 'shared/assets/stylesheets/spacing';
-@import 'shared/assets/stylesheets/font-size';
-@import 'shared/assets/stylesheets/border-radius';
 
 html,
 body {
@@ -68,7 +64,7 @@ body {
 }
 
 .text-link {
-  @apply text-woot-500 font-medium hover:text-woot-600;
+  @apply text-n-brand font-medium hover:text-n-blue-10;
 }
 
 .v-popper--theme-tooltip .v-popper__inner {

app/javascript/v3/components/Button/SubmitButton.vue

@@ -1,65 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    Spinner,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    buttonText: {
-      type: String,
-      default: '',
-    },
-    buttonClass: {
-      type: String,
-      default: '',
-    },
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'submit',
-    },
-  },
-  computed: {
-    computedClass() {
-      return `
-        ${this.disabled ? 'opacity-40 hover:bg-woot-500' : ''}
-        ${this.buttonClass || ' '}
-      `;
-    },
-  },
-  created() {
-    if (import.meta.env.DEV) {
-      // eslint-disable-next-line
-      console.warn(
-        '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
-      );
-    }
-  },
-};
-</script>
-
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
-  >
-    <span>{{ buttonText }}</span>
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <Spinner v-if="loading" />
-  </button>
-</template>

app/javascript/v3/components/Form/Button.vue

@@ -1,101 +0,0 @@
-<script setup>
-import { computed, useAttrs } from 'vue';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'solid',
-    validator: value => ['outline', 'ghost', 'solid'].includes(value),
-  },
-  size: {
-    type: String,
-    default: 'large',
-    validator: value => ['medium', 'large'].includes(value),
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  colorScheme: {
-    type: String,
-    default: 'primary',
-    validator: value => ['primary', 'secondary', 'danger'].includes(value),
-  },
-  trailingIcon: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const attrs = useAttrs();
-
-const baseClasses = {
-  outline: 'outline outline-1 -outline-offset-1',
-  ghost: 'hover:text-600 active:text-600 focus:outline focus:outline-offset-1',
-  solid:
-    'hover:bg-700 active:bg-700 focus:outline focus:outline-offset-1 focus:outline-2',
-};
-
-const colorClass = computed(() => {
-  if (attrs.disabled) {
-    return 'bg-ash-200 text-ash-600 cursor-not-allowed';
-  }
-
-  const styleMap = {
-    primary: {
-      outline: `${baseClasses.outline} outline-primary-400 hover:text-primary-600 active:text-primary-600`,
-      ghost: `${baseClasses.ghost} focus:outline-primary-400`,
-      solid: `${baseClasses.solid} bg-primary-600 text-white focus:outline-primary-400`,
-    },
-    secondary: {
-      outline: `${baseClasses.outline} outline-ash-400 hover:text-ash-900 active:text-ash-900 `,
-      ghost: `${baseClasses.ghost} focus:outline-ash-400`,
-      solid: `${baseClasses.solid} bg-ash-100 text-ash-900 focus:outline-ash-400`,
-    },
-    danger: {
-      outline: `${baseClasses.outline} outline-ruby-400 hover:text-ruby-600 active:text-ruby-600`,
-      ghost: `${baseClasses.ghost} focus:outline-ruby-400`,
-      solid: `${baseClasses.solid} bg-ruby-600 text-white focus:outline-ruby-400`,
-    },
-  };
-
-  const schemeStyles = styleMap[props.colorScheme];
-  return schemeStyles[props.variant] || schemeStyles.solid;
-});
-
-const sizeClass = computed(() => {
-  if (props.size === 'medium') {
-    return 'h-8 px-3 py-1.5 text-sm';
-  }
-  return 'h-10 px-4 py-2.5 text';
-});
-
-const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
-</script>
-
-<template>
-  <button
-    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
-    :class="buttonClasses"
-    v-bind="$attrs"
-  >
-    <fluent-icon
-      v-if="icon && !trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-    <span
-      v-if="$slots.default"
-      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
-    >
-      <slot />
-    </span>
-    <fluent-icon
-      v-if="icon && trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-  </button>
-</template>

app/javascript/v3/components/Form/CheckBox.vue

@@ -26,6 +26,6 @@ const checked = computed({
     v-model="checked"
     type="checkbox"
     :value="value"
-    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+    class="flex-shrink-0 mt-0.5 border-n-strong border bg-n-slate-2 checked:border-none checked:bg-n-brand shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
   />
 </template>

app/javascript/v3/components/Form/InitialsAvatar.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { userInitial } from 'v3/helpers/CommonHelper';
-const props = defineProps({
-  name: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: Number,
-    default: 72,
-  },
-});
-const colors = {
-  1: 'bg-ash-200 text-ash-900',
-  2: 'bg-amber-200 text-amber-900',
-  3: 'bg-pink-100 text-pink-800',
-  4: 'bg-purple-100 text-purple-800',
-  5: 'bg-indigo-100 text-indigo-800',
-  6: 'bg-grass-100 text-grass-800',
-  7: 'bg-mint-100 text-mint-800',
-  8: 'bg-orange-100 text-orange-800',
-};
-const style = computed(() => ({
-  fontSize: `${Math.floor(props.size / 2.5)}px`,
-}));
-const colorClass = computed(() => {
-  return colors[(props.name.length % 8) + 1];
-});
-
-const initial = computed(() => userInitial(props.name));
-</script>
-
-<template>
-  <div
-    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
-    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
-    :style="style"
-    aria-hidden="true"
-  >
-    <slot>{{ initial }}</slot>
-  </div>
-</template>

app/javascript/v3/components/Form/Switch.vue

@@ -17,9 +17,7 @@ export default {
     type="button"
     class="relative flex-shrink-0 h-4 p-0 border-none shadow-inner w-7 rounded-3xl"
     :class="
-      modelValue
-        ? 'bg-primary-600 shadow-primary-800'
-        : 'shadow-ash-400 bg-ash-200'
+      modelValue ? 'bg-n-brand shadow-n-brand' : 'shadow-n-slate-6 bg-n-slate-5'
     "
     role="switch"
     :aria-checked="modelValue.toString()"
@@ -27,7 +25,7 @@ export default {
   >
     <span
       aria-hidden="true"
-      class="rounded-full bg-white top-0.5 absolute dark:bg-white w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
+      class="rounded-full bg-n-background top-0.5 absolute w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
       :class="
         modelValue
           ? 'ltr:translate-x-0 rtl:translate-x-[0.75rem]'

app/javascript/v3/components/Form/Textarea.vue

@@ -1,85 +0,0 @@
-<script>
-import WithLabel from './WithLabel.vue';
-export default {
-  components: {
-    WithLabel,
-  },
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    rows: {
-      type: Number,
-      default: 3,
-    },
-    allowResize: {
-      type: Boolean,
-      default: true,
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    dataTestid: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue', 'blur'],
-  methods: {
-    onInput(e) {
-      this.$emit('update:modelValue', e.target.value);
-    },
-  },
-};
-</script>
-
-<template>
-  <WithLabel
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <textarea
-      :id="name"
-      :name="name"
-      autocomplete="off"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="modelValue"
-      :rows="rows"
-      :class="{
-        'focus:outline-red-600 outline-red-600': hasError,
-        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
-          !hasError,
-        'resize-none': !allowResize,
-      }"
-      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
-      @update:model-value="onInput"
-      @blur="$emit('blur')"
-    />
-  </WithLabel>
-</template>

app/javascript/v3/components/SnackBar/Item.vue

@@ -17,7 +17,7 @@ export default {
 
 <template>
   <div
-    class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
+    class="bg-n-slate-12 dark:bg-n-slate-7 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
     :class="isActionPresent ? 'justify-between' : 'justify-center'"
   >
     <div class="text-sm font-medium text-white">

app/javascript/v3/views/auth/password/Edit.vue

@@ -3,14 +3,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import FormInput from '../../../components/Form/Input.vue';
-import SubmitButton from '../../../components/Button/SubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { setNewPassword } from '../../../api/auth';
 
 export default {
   components: {
     FormInput,
-    SubmitButton,
+    NextButton,
   },
   props: {
     resetPasswordToken: { type: String, default: '' },
@@ -120,14 +120,18 @@ export default {
           :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.confirmPassword.$touch"
         />
-        <SubmitButton
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :label="$t('SET_NEW_PASSWORD.SUBMIT')"
           :disabled="
             v$.credentials.password.$invalid ||
             v$.credentials.confirmPassword.$invalid ||
             newPasswordAPI.showLoading
           "
-          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
-          :loading="newPasswordAPI.showLoading"
+          :is-loading="newPasswordAPI.showLoading"
         />
       </div>
     </form>

app/javascript/v3/views/auth/reset/password/Index.vue

@@ -6,10 +6,10 @@ import { required, minLength, email } from '@vuelidate/validators';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import FormInput from '../../../../components/Form/Input.vue';
 import { resetPassword } from '../../../../api/auth';
-import SubmitButton from '../../../../components/Button/SubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: { FormInput, SubmitButton },
+  components: { FormInput, NextButton },
   mixins: [globalConfigMixin],
   setup() {
     return { v$: useVuelidate() };
@@ -98,10 +98,14 @@ export default {
           :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
           @input="v$.credentials.email.$touch"
         />
-        <SubmitButton
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :label="$t('RESET_PASSWORD.SUBMIT')"
           :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
-          :button-text="$t('RESET_PASSWORD.SUBMIT')"
-          :loading="resetPassword.showLoading"
+          :is-loading="resetPassword.showLoading"
         />
       </div>
       <p class="mt-4 -mb-1 text-sm text-n-slate-11">

app/javascript/v3/views/auth/signup/components/Signup/Form.vue

@@ -7,7 +7,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import FormInput from '../../../../../components/Form/Input.vue';
-import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { isValidPassword } from 'shared/helpers/Validators';
 import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
 import { register } from '../../../../../api/auth';
@@ -17,7 +17,7 @@ export default {
   components: {
     FormInput,
     GoogleOAuthButton,
-    SubmitButton,
+    NextButton,
     VueHcaptcha,
   },
   mixins: [globalConfigMixin],
@@ -195,23 +195,28 @@ export default {
         />
         <span
           v-if="!hasAValidCaptcha && didCaptchaReset"
-          class="text-xs text-red-400"
+          class="text-xs text-n-ruby-9"
         >
           {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
         </span>
       </div>
-      <SubmitButton
-        :button-text="$t('REGISTER.SUBMIT')"
+      <NextButton
+        lg
+        type="submit"
+        data-testid="submit_button"
+        class="w-full"
+        icon="i-lucide-chevron-right"
+        trailing-icon
+        :label="$t('REGISTER.SUBMIT')"
         :disabled="isSignupInProgress || !isFormValid"
-        :loading="isSignupInProgress"
-        icon-class="arrow-chevron-right"
+        :is-loading="isSignupInProgress"
       />
     </form>
     <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
       {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
     </GoogleOAuthButton>
     <p
-      class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
+      class="text-sm mb-1 mt-5 text-n-slate-12 [&>a]:text-n-brand [&>a]:font-medium [&>a]:hover:brightness-110"
       v-html="termsLink"
     />
   </div>
@@ -221,8 +226,7 @@ export default {
 .h-captcha--box {
   &::v-deep .error {
     iframe {
-      border: 1px solid var(--r-500);
-      border-radius: var(--border-radius-normal);
+      @apply rounded-md border border-n-ruby-8 dark:border-n-ruby-8;
     }
   }
 }

app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue

@@ -28,7 +28,7 @@ export default {
 <template>
   <div
     v-show="testimonials.length"
-    class="relative flex-1 min-h-screen hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
+    class="relative flex-1 min-h-screen hidden overflow-hidden bg-n-blue-8 dark:bg-n-blue-5 xl:flex"
   >
     <img
       src="assets/images/auth/top-left.svg"

app/javascript/v3/views/login/Index.vue

@@ -15,7 +15,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import FormInput from '../../components/Form/Input.vue';
 import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import SubmitButton from '../../components/Button/SubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const ERROR_MESSAGES = {
   'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
@@ -29,7 +29,7 @@ export default {
     FormInput,
     GoogleOAuthButton,
     Spinner,
-    SubmitButton,
+    NextButton,
   },
   mixins: [globalConfigMixin],
   props: {
@@ -237,11 +237,15 @@ export default {
               </router-link>
             </p>
           </FormInput>
-          <SubmitButton
-            :disabled="loginApi.showLoading"
+          <NextButton
+            lg
+            type="submit"
+            data-testid="submit_button"
+            class="w-full"
             :tabindex="3"
-            :button-text="$t('LOGIN.SUBMIT')"
-            :loading="loginApi.showLoading"
+            :label="$t('LOGIN.SUBMIT')"
+            :disabled="loginApi.showLoading"
+            :is-loading="loginApi.showLoading"
           />
         </form>
       </div>

app/javascript/v3/views/onboarding/OnboardingStep.vue

@@ -24,19 +24,19 @@ export default {
 
 <template>
   <div
-    class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-slate-200 before:-bottom-8 before:left-[24px] hide-before-of-last"
+    class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-n-slate-3 before:-bottom-8 before:left-[24px] hide-before-of-last"
     :class="{
-      'text-woot-500 ': isActive,
-      'text-slate-400': !isActive || isComplete,
-      'before:bg-woot-500': !isActive && isComplete,
+      'text-n-brand ': isActive,
+      'text-n-slate-6': !isActive || isComplete,
+      'before:bg-n-brand': !isActive && isComplete,
     }"
   >
     <div
       class="grid w-8 h-8 border border-solid rounded-full place-content-center"
       :class="{
-        'border-woot-500': !isActive || isComplete,
-        'border-slate-200 dark:border-slate-600': !isActive && !isComplete,
-        'text-woot-500': isComplete,
+        'border-n-brand': !isActive || isComplete,
+        'border-n-weak': !isActive && !isComplete,
+        'text-n-brand': isComplete,
       }"
     >
       <fluent-icon v-if="isComplete" size="20" icon="checkmark" />