feat: Update auth screens (#11108)

# Pull Request Template

## Description

This PR includes style updates for auth screens

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/v3/components/Divider/SimpleDivider.vue

@@ -12,12 +12,10 @@ export default {
 <template>
   <div class="relative my-4 section-separator">
     <div class="absolute inset-0 flex items-center" aria-hidden="true">
-      <div class="w-full border-t border-slate-200 dark:border-slate-600" />
+      <div class="w-full border-t border-n-strong" />
     </div>
     <div v-if="label" class="relative flex justify-center text-sm">
-      <span
-        class="bg-white dark:bg-slate-800 px-2 text-slate-500 dark:text-white"
-      >
+      <span class="bg-white dark:bg-n-solid-2 px-2 text-n-slate-10">
         {{ label }}
       </span>
     </div>

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

@@ -7,6 +7,10 @@ defineProps({
     type: String,
     required: true,
   },
+  type: {
+    type: String,
+    default: 'text',
+  },
   icon: {
     type: String,
     default: '',
@@ -51,9 +55,13 @@ const model = defineModel({
     <input
       v-bind="$attrs"
       v-model="model"
-      type="text"
+      :type="type"
+      class="block w-full border-none rounded-md shadow-sm bg-n-alpha-black2 appearance-none outline outline-1 focus:outline focus:outline-1 text-n-slate-12 placeholder:text-n-slate-10 sm:text-sm sm:leading-6 px-3 py-3"
       :class="{
-        error: hasError,
+        'error outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8':
+          hasError,
+        'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus:outline-n-brand dark:focus:outline-n-brand':
+          !hasError,
         'px-3 py-3': spacing === 'base',
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,

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

@@ -45,10 +45,10 @@ export default {
   <div class="flex flex-col">
     <a
       :href="getGoogleAuthUrl()"
-      class="inline-flex justify-center w-full px-4 py-3 bg-white rounded-md shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+      class="inline-flex justify-center w-full px-4 py-3 bg-n-background dark:bg-n-solid-3 rounded-md shadow-sm ring-1 ring-inset ring-n-container dark:ring-n-container focus:outline-offset-0 hover:bg-n-alpha-2 dark:hover:bg-n-alpha-2"
     >
       <span class="i-logos-google-icon h-6" />
-      <span class="ml-2 text-base font-medium text-slate-600 dark:text-white">
+      <span class="ml-2 text-base font-medium text-n-slate-12">
         {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
       </span>
     </a>