From b1898e019b60911a0f976ded90dfd76ee1c0bba9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 29 May 2025 23:37:05 +0530
Subject: [PATCH] fix: Design issues with profile settings style (#11630)

# Pull Request Template

## Description

This PR fixes styles issues with the select in profile settings and
toggles the Hotkeys button.

## Type of change

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

## How Has This Been Tested?

### Screenshots

**Select**
| Before  | After (Dark Mode) | After (Light Mode) |
| ------------- | ------------- | ------------- |
| <img width="162" alt="image"
src="https://github.com/user-attachments/assets/6d4ebd45-d233-413e-aca8-7f4db5d6c8a2"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/62c2ca85-479f-4252-a4fc-ffd5a570cff0"
/> | <img width="162" alt="image"
src="https://github.com/user-attachments/assets/7c9780ea-8ab6-429e-82e3-6fb554141bc0"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/726d7a0a-bfbc-4bdc-aedc-a874146230d8"
/> | <img width="162" alt="image"
src="https://github.com/user-attachments/assets/f3022b5f-6ae2-48d6-a2c9-9961f4295b81"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/fa6515c1-35df-4f6f-9096-e7893bffe683"
/> |

**Toggle Hotkeys**
| Before  | After (Dark Mode) | After (Light Mode) |
| ------------- | ------------- | ------------- |
| <img width="783" alt="image"
src="https://github.com/user-attachments/assets/5628fa6a-9692-44f4-bc45-6e5de44588c7"
/> | <img width="783" alt="image"
src="https://github.com/user-attachments/assets/14529e80-fd9c-46cd-9ad8-aab041781238"
/> | <img width="783" alt="image"
src="https://github.com/user-attachments/assets/dfe2cbec-8d05-443d-89a2-0e674fffa518"
/> |

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] 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/dashboard/assets/scss/widgets/_base.scss    | 2 +-
 .../dashboard/routes/dashboard/settings/profile/Index.vue  | 7 ++++++-
 app/javascript/v3/components/Form/Select.vue               | 6 +++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index 9c4ccf126..afaaf91c8 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -101,7 +101,7 @@ select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
   background-size: 9px 6px;
 
-  @apply field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
+  @apply field-base h-10 bg-origin-content bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
 
   &[disabled] {
     @apply field-disabled;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index eedcd21f1..097e0589a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -245,7 +245,12 @@ export default {
         <button
           v-for="hotKey in hotKeys"
           :key="hotKey.key"
-          class="px-0 reset-base w-full sm:flex-1"
+          class="px-0 reset-base w-full sm:flex-1 rounded-xl outline-1 outline"
+          :class="
+            isEditorHotKeyEnabled(hotKey.key)
+              ? 'outline-n-brand/30'
+              : 'outline-n-weak'
+          "
         >
           <HotKeyCard
             :key="hotKey.title"
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index 0fd9ad002..f91c1ebe2 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -64,11 +64,11 @@ export default {
       :selected="modelValue"
       :name="name"
       :class="{
-        'text-ash-400': !modelValue,
-        'text-ash-900': modelValue,
+        'text-n-slate-9': !modelValue,
+        'text-n-slate-12': modelValue,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 text-sm leading-6"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm appearance-none rounded-xl select-caret leading-6"
       @input="onInput"
     >
       <option value="" disabled selected class="hidden">