From d896d8e839d5fde79f53098220b46ec2d318d2f5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 3 Jan 2025 18:18:48 +0530
Subject: [PATCH] fix: use icon color only in status indicators

---
 frontend/src/components/Kanban/KanbanView.vue | 38 ++-----------------
 frontend/src/components/Modals/DealModal.vue  |  2 +-
 frontend/src/components/Modals/LeadModal.vue  |  2 +-
 frontend/src/pages/Contact.vue                |  2 +-
 frontend/src/pages/Deal.vue                   |  7 +---
 frontend/src/pages/Deals.vue                  |  4 +-
 frontend/src/pages/Lead.vue                   |  9 ++---
 frontend/src/pages/Leads.vue                  |  4 +-
 frontend/src/pages/MobileContact.vue          |  2 +-
 frontend/src/pages/MobileDeal.vue             |  7 +---
 frontend/src/pages/MobileLead.vue             |  7 +---
 frontend/src/pages/MobileOrganization.vue     |  2 +-
 frontend/src/pages/Organization.vue           |  2 +-
 frontend/src/stores/statuses.js               | 25 ++----------
 frontend/src/utils/index.js                   | 29 +++++++++++++-
 15 files changed, 55 insertions(+), 87 deletions(-)

diff --git a/frontend/src/components/Kanban/KanbanView.vue b/frontend/src/components/Kanban/KanbanView.vue
index ca5a548f..dbf01962 100644
--- a/frontend/src/components/Kanban/KanbanView.vue
+++ b/frontend/src/components/Kanban/KanbanView.vue
@@ -22,9 +22,7 @@
                     size="sm"
                     class="hover:!bg-surface-gray-2"
                   >
-                    <IndicatorIcon
-                      :class="colorClasses(column.column.color, true)"
-                    />
+                    <IndicatorIcon :class="parseColor(column.column.color)" />
                   </Button>
                 </template>
                 <template #body="{ close }">
@@ -33,13 +31,12 @@
                   >
                     <div class="flex gap-1">
                       <Button
-                        :class="colorClasses(color)"
                         variant="ghost"
                         v-for="color in colors"
                         :key="color"
                         @click="() => (column.column.color = color)"
                       >
-                        <IndicatorIcon />
+                        <IndicatorIcon :class="parseColor(color)" />
                       </Button>
                     </div>
                     <div class="flex flex-row-reverse">
@@ -172,7 +169,7 @@
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import { isTouchScreenDevice } from '@/utils'
+import { isTouchScreenDevice, colors, parseColor } from '@/utils'
 import Draggable from 'vuedraggable'
 import { Dropdown } from 'frappe-ui'
 import { computed } from 'vue'
@@ -265,33 +262,4 @@ function updateColumn(d) {
 
   emit('update', data)
 }
-
-function colorClasses(color, onlyIcon = false) {
-  let textColor = `!text-${color}-600`
-  if (color == 'black') {
-    textColor = '!text-ink-gray-9'
-  } 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]
-}
-
-const colors = [
-  'gray',
-  'blue',
-  'green',
-  'red',
-  'pink',
-  'orange',
-  'amber',
-  'yellow',
-  'cyan',
-  'teal',
-  'violet',
-  'purple',
-  'black',
-]
 </script>
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index 80d2e9ec..3afd2d63 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -163,7 +163,7 @@ const tabs = createResource({
             if (field.fieldname == 'status') {
               field.fieldtype = 'Select'
               field.options = dealStatuses.value
-              field.prefix = getDealStatus(deal.status).iconColorClass
+              field.prefix = getDealStatus(deal.status).color
             }
 
             if (field.fieldtype === 'Table') {
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index ed27c5ef..3f7476d2 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -76,7 +76,7 @@ const tabs = createResource({
             if (field.fieldname == 'status') {
               field.fieldtype = 'Select'
               field.options = leadStatuses.value
-              field.prefix = getLeadStatus(lead.status).iconColorClass
+              field.prefix = getLeadStatus(lead.status).color
             }
 
             if (field.fieldtype === 'Table') {
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index c6d08a76..f6698667 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -582,7 +582,7 @@ function getDealRowObject(deal) {
     annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
-      color: getDealStatus(deal.status)?.iconColorClass,
+      color: getDealStatus(deal.status)?.color,
     },
     email: deal.email,
     mobile_no: deal.mobile_no,
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index c441d957..fb2af335 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -21,12 +21,9 @@
         :options="statusOptions('deal', updateField, deal.data._customStatuses)"
       >
         <template #default="{ open }">
-          <Button
-            :label="deal.data.status"
-            :class="getDealStatus(deal.data.status).colorClass"
-          >
+          <Button :label="deal.data.status">
             <template #prefix>
-              <IndicatorIcon />
+              <IndicatorIcon :class="getDealStatus(deal.data.status).color" />
             </template>
             <template #suffix>
               <FeatherIcon
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 8afcdfe9..afe921e3 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -362,7 +362,7 @@ function getGroupedByRows(listRows, groupByField, columns) {
     if (groupByField.name == 'status') {
       groupDetail.icon = () =>
         h(IndicatorIcon, {
-          class: getDealStatus(option)?.iconColorClass,
+          class: getDealStatus(option)?.color,
         })
     }
     groupedRows.push(groupDetail)
@@ -421,7 +421,7 @@ function parseRows(rows, columns = []) {
       } else if (row == 'status') {
         _rows[row] = {
           label: deal.status,
-          color: getDealStatus(deal.status)?.iconColorClass,
+          color: getDealStatus(deal.status)?.color,
         }
       } else if (row == 'sla_status') {
         let value = deal.sla_status
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 398c972a..509f2c52 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -21,12 +21,11 @@
         :options="statusOptions('lead', updateField, lead.data._customStatuses)"
       >
         <template #default="{ open }">
-          <Button
-            :label="lead.data.status"
-            :class="getLeadStatus(lead.data.status).colorClass"
-          >
+          <Button :label="lead.data.status">
             <template #prefix>
-              <IndicatorIcon />
+              <IndicatorIcon
+                :class="getLeadStatus(lead.data.status).color"
+              />
             </template>
             <template #suffix>
               <FeatherIcon
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index c6884feb..d3508ef3 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -382,7 +382,7 @@ function getGroupedByRows(listRows, groupByField, columns) {
     if (groupByField.name == 'status') {
       groupDetail.icon = () =>
         h(IndicatorIcon, {
-          class: getLeadStatus(option)?.iconColorClass,
+          class: getLeadStatus(option)?.color,
         })
     }
     groupedRows.push(groupDetail)
@@ -444,7 +444,7 @@ function parseRows(rows, columns = []) {
       } else if (row == 'status') {
         _rows[row] = {
           label: lead.status,
-          color: getLeadStatus(lead.status)?.iconColorClass,
+          color: getLeadStatus(lead.status)?.color,
         }
       } else if (row == 'sla_status') {
         let value = lead.sla_status
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 452d611b..3dfef255 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -592,7 +592,7 @@ function getDealRowObject(deal) {
     annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
-      color: getDealStatus(deal.status)?.iconColorClass,
+      color: getDealStatus(deal.status)?.color,
     },
     email: deal.email,
     mobile_no: deal.mobile_no,
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index eab59318..f25b07ba 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -15,12 +15,9 @@
           "
         >
           <template #default="{ open }">
-            <Button
-              :label="deal.data.status"
-              :class="getDealStatus(deal.data.status).colorClass"
-            >
+            <Button :label="deal.data.status">
               <template #prefix>
-                <IndicatorIcon />
+                <IndicatorIcon :class="getDealStatus(deal.data.status).color" />
               </template>
               <template #suffix>
                 <FeatherIcon
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 70c79f57..78859be8 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -15,12 +15,9 @@
           "
         >
           <template #default="{ open }">
-            <Button
-              :label="lead.data.status"
-              :class="getLeadStatus(lead.data.status).colorClass"
-            >
+            <Button :label="lead.data.status">
               <template #prefix>
-                <IndicatorIcon />
+                <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
               </template>
               <template #suffix>
                 <FeatherIcon
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index 2694b28d..0399faad 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -457,7 +457,7 @@ function getDealRowObject(deal) {
     annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
-      color: getDealStatus(deal.status)?.iconColorClass,
+      color: getDealStatus(deal.status)?.color,
     },
     email: deal.email,
     mobile_no: deal.mobile_no,
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index c1832046..533440ce 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -459,7 +459,7 @@ function getDealRowObject(deal) {
     annual_revenue: getFormattedCurrency('annual_revenue', deal),
     status: {
       label: deal.status,
-      color: getDealStatus(deal.status)?.iconColorClass,
+      color: getDealStatus(deal.status)?.color,
     },
     email: deal.email,
     mobile_no: deal.mobile_no,
diff --git a/frontend/src/stores/statuses.js b/frontend/src/stores/statuses.js
index 40665283..044ef18b 100644
--- a/frontend/src/stores/statuses.js
+++ b/frontend/src/stores/statuses.js
@@ -1,5 +1,6 @@
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import { capture } from '@/telemetry'
+import { parseColor } from '@/utils'
 import { defineStore } from 'pinia'
 import { createListResource } from 'frappe-ui'
 import { reactive, h } from 'vue'
@@ -18,8 +19,7 @@ export const statusesStore = defineStore('crm-statuses', () => {
     auto: true,
     transform(statuses) {
       for (let status of statuses) {
-        status.colorClass = colorClasses(status.color)
-        status.iconColorClass = colorClasses(status.color, true)
+        status.color = parseColor(status.color)
         leadStatusesByName[status.name] = status
       }
       return statuses
@@ -35,8 +35,7 @@ export const statusesStore = defineStore('crm-statuses', () => {
     auto: true,
     transform(statuses) {
       for (let status of statuses) {
-        status.colorClass = colorClasses(status.color)
-        status.iconColorClass = colorClasses(status.color, true)
+        status.color = parseColor(status.color)
         dealStatusesByName[status.name] = status
       }
       return statuses
@@ -57,19 +56,6 @@ export const statusesStore = defineStore('crm-statuses', () => {
     },
   })
 
-  function colorClasses(color, onlyIcon = false) {
-    let textColor = `!text-${color}-600`
-    if (color == 'black') {
-      textColor = '!text-ink-gray-9'
-    } 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) {
     if (!name) {
       name = leadStatuses.data[0].name
@@ -107,10 +93,7 @@ export const statusesStore = defineStore('crm-statuses', () => {
       options.push({
         label: statusesByName[status]?.name,
         value: statusesByName[status]?.name,
-        icon: () =>
-          h(IndicatorIcon, {
-            class: statusesByName[status]?.iconColorClass,
-          }),
+        icon: () => h(IndicatorIcon, { class: statusesByName[status]?.color }),
         onClick: () => {
           capture('status_changed', { doctype, status })
           action && action('status', statusesByName[status]?.name)
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 272e37cd..196c80d2 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -234,6 +234,33 @@ export function copyToClipboard(text) {
   }
 }
 
+export const colors = [
+  'gray',
+  'blue',
+  'green',
+  'red',
+  'pink',
+  'orange',
+  'amber',
+  'yellow',
+  'cyan',
+  'teal',
+  'violet',
+  'purple',
+  'black',
+]
+
+export function parseColor(color) {
+  let textColor = `!text-${color}-600`
+  if (color == 'black') {
+    textColor = '!text-ink-gray-9'
+  } else if (['gray', 'green'].includes(color)) {
+    textColor = `!text-${color}-700`
+  }
+
+  return textColor
+}
+
 export function isEmoji(str) {
   const emojiList = gemoji.map((emoji) => emoji.emoji)
   return emojiList.includes(str)
@@ -306,7 +333,7 @@ export function isImage(extention) {
   )
 }
 
-export function getRandom(len=4) {
+export function getRandom(len = 4) {
   let text = ''
   const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'