fix: highlight status button on lead/deal page

frontend/src/components/NewDeal.vue

@@ -11,7 +11,9 @@
             v-model="newDeal[field.name]"
           >
             <template v-if="field.name == 'status'" #prefix>
-              <IndicatorIcon :class="getDealStatus(newDeal[field.name]).color" />
+              <IndicatorIcon
+                :class="getDealStatus(newDeal[field.name]).iconColorClass"
+              />
             </template>
           </FormControl>
           <FormControl
@@ -43,31 +45,6 @@
               <UserAvatar class="mr-2" :user="option.email" size="sm" />
             </template>
           </FormControl>
-          <Dropdown
-            v-else-if="field.type === 'dropdown'"
-            :options="statusOptions('deal')"
-            class="w-full flex-1"
-          >
-            <template #default="{ open }">
-              <Button
-                :label="newDeal[field.name]"
-                class="w-full justify-between"
-              >
-                <template #prefix>
-                  <IndicatorIcon
-                    :class="getDealStatus(newDeal[field.name]).color"
-                  />
-                </template>
-                <template #default>{{ newDeal[field.name] }}</template>
-                <template #suffix>
-                  <FeatherIcon
-                    :name="open ? 'chevron-up' : 'chevron-down'"
-                    class="h-4 text-gray-600"
-                  />
-                </template>
-              </Button>
-            </template>
-          </Dropdown>
           <FormControl v-else type="text" v-model="newDeal[field.name]" />
         </div>
       </div>

frontend/src/components/NewLead.vue

@@ -11,7 +11,7 @@
             v-model="newLead[field.name]"
           >
             <template v-if="field.name == 'status'" #prefix>
-              <IndicatorIcon :class="getLeadStatus(newLead[field.name]).color" />
+              <IndicatorIcon :class="getLeadStatus(newLead[field.name]).iconColorClass" />
             </template>
           </FormControl>
           <FormControl
@@ -43,31 +43,6 @@
               <UserAvatar class="mr-2" :user="option.email" size="sm" />
             </template>
           </FormControl>
-          <Dropdown
-            v-else-if="field.type === 'dropdown'"
-            :options="statusOptions('lead')"
-            class="w-full flex-1"
-          >
-            <template #default="{ open }">
-              <Button
-                :label="newLead[field.name]"
-                class="w-full justify-between"
-              >
-                <template #prefix>
-                  <IndicatorIcon
-                    :class="getLeadStatus(newLead[field.name]).color"
-                  />
-                </template>
-                <template #default>{{ newLead[field.name] }}</template>
-                <template #suffix>
-                  <FeatherIcon
-                    :name="open ? 'chevron-up' : 'chevron-down'"
-                    class="h-4 text-gray-600"
-                  />
-                </template>
-              </Button>
-            </template>
-          </Dropdown>
           <FormControl v-else type="text" v-model="newLead[field.name]" />
         </div>
       </div>

frontend/src/pages/Contact.vue

@@ -390,7 +390,7 @@ function getLeadRowObject(lead) {
     },
     status: {
       label: lead.status,
-      color: getLeadStatus(lead.status)?.color,
+      color: getLeadStatus(lead.status)?.iconColorClass,
     },
     email: lead.email,
     mobile_no: lead.mobile_no,
@@ -415,7 +415,7 @@ function getDealRowObject(deal) {
     annual_revenue: formatNumberIntoCurrency(deal.annual_revenue),
     status: {
       label: deal.status,
-      color: getDealStatus(deal.status)?.color,
+      color: getDealStatus(deal.status)?.iconColorClass,
     },
     email: deal.email,
     mobile_no: deal.mobile_no,

frontend/src/pages/Deal.vue

@@ -20,14 +20,17 @@
       </FormControl>
       <Dropdown :options="statusOptions('deal', updateField)">
         <template #default="{ open }">
-          <Button :label="deal.data.status">
+          <Button
+            :label="deal.data.status"
+            :class="getDealStatus(deal.data.status).colorClass"
+          >
             <template #prefix>
-              <IndicatorIcon :class="getDealStatus(deal.data.status).color" />
+              <IndicatorIcon />
             </template>
             <template #suffix>
               <FeatherIcon
                 :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4 text-gray-600"
+                class="h-4"
               />
             </template>
           </Button>

frontend/src/pages/Deals.vue

@@ -150,7 +150,7 @@ const rows = computed(() => {
       } else if (row == 'status') {
         _rows[row] = {
           label: deal.status,
-          color: getDealStatus(deal.status)?.color,
+          color: getDealStatus(deal.status)?.iconColorClass,
         }
       } else if (row == 'deal_owner') {
         _rows[row] = {

frontend/src/pages/Lead.vue

@@ -20,15 +20,19 @@
       </FormControl>
       <Dropdown :options="statusOptions('lead', updateField)">
         <template #default="{ open }">
-          <Button :label="lead.data.status">
+          <Button
+            :label="lead.data.status"
+            :class="getLeadStatus(lead.data.status).colorClass"
+          >
             <template #prefix>
-              <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
+              <IndicatorIcon />
             </template>
-            <template #suffix
+            <template #suffix>
-              ><FeatherIcon
+              <FeatherIcon
                 :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4 text-gray-600"
+                class="h-4"
-            /></template>
+              />
+            </template>
           </Button>
         </template>
       </Dropdown>

frontend/src/pages/Leads.vue

@@ -152,7 +152,7 @@ const rows = computed(() => {
       } else if (row == 'status') {
         _rows[row] = {
           label: lead.status,
-          color: getLeadStatus(lead.status)?.color,
+          color: getLeadStatus(lead.status)?.iconColorClass,
         }
       } else if (row == 'lead_owner') {
         _rows[row] = {

frontend/src/pages/Organization.vue

@@ -454,7 +454,7 @@ function getLeadRowObject(lead) {
     },
     status: {
       label: lead.status,
-      color: getLeadStatus(lead.status)?.color,
+      color: getLeadStatus(lead.status)?.iconColorClass,
     },
     email: lead.email,
     mobile_no: lead.mobile_no,
@@ -479,7 +479,7 @@ function getDealRowObject(deal) {
     annual_revenue: formatNumberIntoCurrency(deal.annual_revenue),
     status: {
       label: deal.status,
-      color: getDealStatus(deal.status)?.color,
+      color: getDealStatus(deal.status)?.iconColorClass,
     },
     email: deal.email,
     mobile_no: deal.mobile_no,

frontend/src/stores/statuses.js

@@ -16,10 +16,8 @@ export const statusesStore = defineStore('crm-statuses', () => {
     auto: true,
     transform(statuses) {
       for (let status of statuses) {
-        status.color =
+        status.colorClass = colorClasses(status.color)
-          status.color == 'black'
+        status.iconColorClass = colorClasses(status.color, true)
-            ? '!text-gray-900'
-            : `!text-${status.color}-600`
         leadStatusesByName[status.name] = status
       }
       return statuses
@@ -35,16 +33,27 @@ export const statusesStore = defineStore('crm-statuses', () => {
     auto: true,
     transform(statuses) {
       for (let status of statuses) {
-        status.color =
+        status.colorClass = colorClasses(status.color)
-          status.color == 'black'
+        status.iconColorClass = colorClasses(status.color, true)
-            ? '!text-gray-900'
-            : `!text-${status.color}-600`
         dealStatusesByName[status.name] = status
       }
       return statuses
     },
   })
 
+  function colorClasses(color, onlyIcon = false) {
+    let textColor = `!text-${color}-600`
+    if (color == 'black') {
+      textColor = '!text-gray-900'
+    } else if (['gray', 'green'].includes(color)) {
+      textColor = `!text-${color}-700`
+    }
+  
+    let bgColor = `!bg-${color}-100 hover:!bg-${color}-200 active:!bg-${color}-300`
+  
+    return [textColor, onlyIcon ? '' : bgColor]
+  }
+
   function getLeadStatus(name) {
     return leadStatusesByName[name]
   }
@@ -60,7 +69,10 @@ export const statusesStore = defineStore('crm-statuses', () => {
     for (const status in statusesByName) {
       options.push({
         label: statusesByName[status].name,
-        icon: () => h(IndicatorIcon, { class: statusesByName[status].color }),
+        icon: () =>
+          h(IndicatorIcon, {
+            class: statusesByName[status].iconColorClass,
+          }),
         onClick: () => {
           action && action('status', statusesByName[status].name)
         },

frontend/tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
     './node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
     '../node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
   ],
-  safelist: [{ pattern: /!text-/ }],
+  safelist: [{ pattern: /(!text|!bg|hover:!bg)-/ }],
   theme: {
     extend: {},
   },