chore: Remove older UI (#11720)

2025-07-01 09:43:44 +05:30
parent 58da92a252
commit 24ea968b00
369 changed files with 974 additions and 9363 deletions
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/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>
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/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">
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/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;
    }
  }
 }
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/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"
--- a/app/javascript/v3/views/login/Index.vue
+++ b/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>
--- a/app/javascript/v3/views/onboarding/OnboardingStep.vue
+++ b/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" />