From 1b00a608366116e673470c7bd519380d729f337c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 23 Dec 2025 15:07:25 +0530
Subject: [PATCH] feat: update icon and colors for model dropdown

---
 .../settings/captain/components/ModelDropdown.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelDropdown.vue b/app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelDropdown.vue
index 2a05a9ec8..0828035f8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelDropdown.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelDropdown.vue
@@ -17,8 +17,8 @@ const props = defineProps({
 const emit = defineEmits(['change']);
 
 const PROVIDER_ICONS = {
-  openai: 'i-logos-openai-icon',
-  anthropic: 'i-logos-anthropic-icon',
+  openai: 'i-ri-openai-fill',
+  anthropic: 'i-ri-anthropic-line',
   mistral: 'i-logos-mistral-icon',
   gemini: 'i-woot-gemini',
 };
@@ -96,7 +96,7 @@ const selectModel = model => {
   <div v-on-clickaway="closeDropdown" class="relative flex-shrink-0">
     <button
       type="button"
-      class="flex items-center gap-2 px-3 py-2 text-sm border rounded-lg border-n-weak bg-n-solid-2 hover:bg-n-solid-3 min-w-[180px] justify-between"
+      class="flex items-center gap-2 px-3 py-2 text-sm border rounded-lg border-n-weak dark:bg-n-solid-2 dark:hover:bg-n-solid-3 bg-n-alpha-2 hover:bg-n-alpha-1 min-w-[180px] justify-between"
       @click="toggleDropdown"
     >
       <span v-if="selectedModelDetails" class="text-n-slate-12">
@@ -119,17 +119,14 @@ const selectModel = model => {
         v-for="model in availableModels"
         :key="model.id"
         :click="() => selectModel(model)"
-        class="rounded-lg hover:bg-n-alpha-1"
+        class="rounded-lg dark:hover:bg-n-solid-3 hover:bg-n-alpha-1"
         :class="{
-          'bg-n-alpha-2': selectedModelId === model.id,
+          'dark:bg-n-solid-3 bg-n-alpha-1': selectedModelId === model.id,
           'pointer-events-none opacity-60': model.coming_soon,
         }"
       >
         <div class="flex gap-2 w-full">
-          <Icon
-            :icon="iconForModel(model)"
-            class="size-4 flex-shrink-0 text-n-slate-11"
-          />
+          <Icon :icon="iconForModel(model)" class="size-4 flex-shrink-0" />
           <div class="flex flex-col w-full text-left gap-1">
             <div
               class="text-sm w-full font-medium leading-none text-n-slate-12 flex items-baseline justify-between"