feat: update styles

app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue

@@ -9,6 +9,7 @@
       placeholder="Please enter your new password"
       :has-error="false"
       :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+      disabled
     />
     <form-button
       type="submit"

app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue

@@ -16,7 +16,7 @@
           v-model="item.model"
           type="checkbox"
           :value="item.value"
-          class="mt-1 border-ash-400 checked:bg-primary-600 dark:checked:bg-primary-600 shadow 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-1 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow 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"
           @input="onChange"
         />
         <label class="text-sm font-normal text-ash-900">

app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue

@@ -19,7 +19,7 @@
         <input
           :id="`radio-${option.value}`"
           v-model="selectedValue"
-          class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-5 h-5 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[16px] checked:before:h-[16px] checked:border checked:border-primary-600"
+          class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-4 h-4 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[14px] checked:before:h-[14px] checked:border checked:border-primary-600"
           type="radio"
           :value="option.value"
           @change="emitChange"
@@ -51,9 +51,9 @@ const props = defineProps({
 });
 
 const options = [
-  { value: 'all', label: 'All' },
-  { value: 'mentions', label: 'Mentions' },
   { value: 'none', label: 'None' },
+  { value: 'assigned', label: 'Assigned' },
+  { value: 'all', label: 'All' },
 ];
 
 const selectedValue = ref(props.value);

app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="flex items-center w-full overflow-y-auto">
-    <div
-      class="flex flex-col h-full p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 font-inter"
-    >
+    <div class="flex flex-col h-full p-5 pt-16 mx-auto my-0 font-inter">
       <div class="flex flex-col gap-16 sm:max-w-[720px]">
         <div class="flex flex-col gap-6">
           <h2 class="mt-4 text-2xl font-medium text-ash-900">

app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue

@@ -5,7 +5,7 @@
   >
     <input
       v-model="localFlags"
-      class="mt-1 border-ash-400 checked:bg-primary-600 dark:checked:bg-primary-600 shadow 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="mt-1 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow 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"
       type="checkbox"
       :value="localValue"
       @input="handleInput"

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

@@ -26,6 +26,7 @@
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,
       }"
+      disabled
       class="block w-full h-10 ltr:pl-3 ltr:pr-2 rtl:pl-2 rtl:pr-3 py-2.5 !border-none shadow-sm appearance-none reset-base rounded-xl outline outline-1 focus:outline-1 text-ash-900 placeholder:text-ash-200 sm:text-sm sm:leading-6"
       @input="onInput"
       @blur="$emit('blur')"
@@ -88,6 +89,10 @@ export default {
       default: 'base',
       validator: value => ['base', 'compact'].includes(value),
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     onInput(e) {