fix(fe2): Update HR and borders in Settings Dialog

packages/frontend-2/components/settings/SectionHeader.vue

@@ -24,7 +24,7 @@
     >
       {{ text }}
     </p>
-    <hr v-if="!subheading && !hideDivider" class="my-6 md:my-8" />
+    <hr v-if="!subheading && !hideDivider" class="my-6 md:my-8 border-outline-2" />
     <slot />
   </div>
 </template>

packages/frontend-2/components/settings/server/General.vue

@@ -69,7 +69,7 @@
           </div>
         </form>
       </div>
-      <hr class="my-6 md:my-8" />
+      <hr class="my-6 md:my-8 border-outline-2" />
       <SettingsServerGeneralVersion />
     </div>
   </section>

packages/frontend-2/components/settings/user/Developer.vue

@@ -26,7 +26,7 @@
               ]"
             />
           </div>
-          <hr />
+          <hr class="border-outline-3" />
           <div class="flex flex-col gap-4">
             <SettingsSectionHeader
               title="Access tokens"
@@ -96,7 +96,7 @@
               </template>
             </LayoutTable>
           </div>
-          <hr />
+          <hr class="border-outline-3" />
           <div class="flex flex-col gap-4">
             <SettingsSectionHeader
               subheading
@@ -172,7 +172,7 @@
               </template>
             </LayoutTable>
           </div>
-          <hr />
+          <hr class="border-outline-3" />
           <div class="flex flex-col gap-4">
             <SettingsSectionHeader
               subheading

packages/frontend-2/components/settings/user/Emails.vue

@@ -7,7 +7,7 @@
       />
       <SettingsSectionHeader title="Your emails" subheading />
       <SettingsUserEmailList class="pt-6" :email-data="emailItems" />
-      <hr class="my-6 md:my-8" />
+      <hr class="my-6 md:my-8 border-outline-2" />
       <SettingsSectionHeader title="Add new email" subheading />
       <div class="flex flex-col md:flex-row w-full pt-4 md:pt-6 pb-6">
         <div class="flex flex-col md:flex-row gap-x-2 w-full">

packages/frontend-2/components/settings/user/Notifications.vue

@@ -22,7 +22,7 @@
           <tr
             v-for="[type, settings] in Object.entries(localPreferences)"
             :key="type"
-            class="border-t"
+            class="border-t border-outline-3"
           >
             <td class="text-body-xs py-4">
               {{ notificationTypeMapping[type] || 'Unknown' }}

packages/frontend-2/components/settings/user/Profile.vue

@@ -3,11 +3,11 @@
     <div class="md:max-w-xl md:mx-auto pb-6 md:pb-0">
       <SettingsSectionHeader title="Profile" text="Manage your profile information" />
       <SettingsUserProfileDetails :user="user" />
-      <hr class="my-6 md:my-8" />
+      <hr class="my-6 md:my-8 border-outline-2" />
       <SettingsUserProfileChangePassword :user="user" />
-      <hr class="my-6 md:my-8" />
+      <hr class="my-6 md:my-8 border-outline-2" />
       <SettingsUserProfileDeleteAccount :user="user" />
-      <hr class="my-6 md:my-8" />
+      <hr class="my-6 md:my-8 border-outline-2" />
       <div class="text-xs text-foreground-2 w-full flex flex-col space-y-2">
         <div class="flex">
           User ID: #{{ user.id }}

packages/frontend-2/components/settings/user/email/ListItem.vue

@@ -1,5 +1,7 @@
 <template>
-  <li class="border-x border-b first:border-t first:rounded-t-lg last:rounded-b-lg p-6">
+  <li
+    class="border-outline-2 border-x border-b first:border-t first:rounded-t-lg last:rounded-b-lg p-6 border-b-outline-3 last:border-b-outline-2"
+  >
     <div
       v-if="emailData.primary || !emailData.verified"
       class="flex w-full gap-x-2 pb-4 md:pb-3"

packages/frontend-2/components/settings/user/profile/Details.vue

@@ -16,7 +16,7 @@
           :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
           @change="save()"
         />
-        <hr class="mt-4 mb-2" />
+        <hr class="mt-4 mb-2 border-outline-3" />
         <FormTextInput
           v-model="company"
           color="foundation"

packages/frontend-2/components/settings/workspaces/General.vue

@@ -39,7 +39,7 @@
           />
         </div>
       </div>
-      <hr class="my-6 md:my-8" />
+      <hr class="my-6 md:my-8 border-outline-2" />
       <div class="flex flex-col space-y-6">
         <SettingsSectionHeader title="Leave workspace" subheading />
         <CommonCard class="bg-foundation">
@@ -52,7 +52,7 @@
         </div>
       </div>
       <template v-if="isAdmin">
-        <hr class="my-6 md:my-8" />
+        <hr class="my-6 md:my-8 border-outline-2" />
         <div class="flex flex-col space-y-6">
           <SettingsSectionHeader title="Delete workspace" subheading />
           <CommonCard class="bg-foundation">

packages/frontend-2/components/settings/workspaces/Security.vue

@@ -25,11 +25,14 @@
           </li>
         </ul>
 
-        <p v-else class="text-body-xs text-foreground-2 border p-6 rounded-lg">
+        <p
+          v-else
+          class="text-body-xs text-foreground-2 border border-outline-2 p-6 rounded-lg"
+        >
           No verified domains yet
         </p>
       </section>
-      <hr class="my-6 md:my-8" />
+      <hr class="my-6 md:my-8 border-outline-2" />
       <section>
         <SettingsSectionHeader title="Add new domain" subheading class="pb-4 md:pb-6" />
         <div class="grid grid-cols-2 gap-x-6 items-center">
@@ -57,7 +60,7 @@
           </div>
         </div>
       </section>
-      <hr class="my-6 md:my-8" />
+      <hr class="my-6 md:my-8 border-outline-2" />
       <section class="flex flex-col space-y-3">
         <SettingsSectionHeader title="Domain features" subheading class="mb-3" />
         <div class="flex flex-col space-y-8">