fix: use icon color only in status indicators

frontend/src/components/Kanban/KanbanView.vue

@@ -22,9 +22,7 @@
                     size="sm"
                     class="hover:!bg-surface-gray-2"
                   >
-                    <IndicatorIcon
+                    <IndicatorIcon :class="parseColor(column.column.color)" />
-                      :class="colorClasses(column.column.color, true)"
-                    />
                   </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>

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') {

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') {

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,

frontend/src/pages/Deal.vue

@@ -21,12 +21,9 @@
         :options="statusOptions('deal', updateField, deal.data._customStatuses)"
       >
         <template #default="{ open }">
-          <Button
+          <Button :label="deal.data.status">
-            :label="deal.data.status"
-            :class="getDealStatus(deal.data.status).colorClass"
-          >
             <template #prefix>
-              <IndicatorIcon />
+              <IndicatorIcon :class="getDealStatus(deal.data.status).color" />
             </template>
             <template #suffix>
               <FeatherIcon

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

frontend/src/pages/Lead.vue

@@ -21,12 +21,11 @@
         :options="statusOptions('lead', updateField, lead.data._customStatuses)"
       >
         <template #default="{ open }">
-          <Button
+          <Button :label="lead.data.status">
-            :label="lead.data.status"
-            :class="getLeadStatus(lead.data.status).colorClass"
-          >
             <template #prefix>
-              <IndicatorIcon />
+              <IndicatorIcon
+                :class="getLeadStatus(lead.data.status).color"
+              />
             </template>
             <template #suffix>
               <FeatherIcon

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

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,

frontend/src/pages/MobileDeal.vue

@@ -15,12 +15,9 @@
           "
         >
           <template #default="{ open }">
-            <Button
+            <Button :label="deal.data.status">
-              :label="deal.data.status"
-              :class="getDealStatus(deal.data.status).colorClass"
-            >
               <template #prefix>
-                <IndicatorIcon />
+                <IndicatorIcon :class="getDealStatus(deal.data.status).color" />
               </template>
               <template #suffix>
                 <FeatherIcon

frontend/src/pages/MobileLead.vue

@@ -15,12 +15,9 @@
           "
         >
           <template #default="{ open }">
-            <Button
+            <Button :label="lead.data.status">
-              :label="lead.data.status"
-              :class="getLeadStatus(lead.data.status).colorClass"
-            >
               <template #prefix>
-                <IndicatorIcon />
+                <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
               </template>
               <template #suffix>
                 <FeatherIcon

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,

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,

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.color = parseColor(status.color)
-        status.iconColorClass = colorClasses(status.color, true)
         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.color = parseColor(status.color)
-        status.iconColorClass = colorClasses(status.color, true)
         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: () =>
+        icon: () => h(IndicatorIcon, { class: statusesByName[status]?.color }),
-          h(IndicatorIcon, {
-            class: statusesByName[status]?.iconColorClass,
-          }),
         onClick: () => {
           capture('status_changed', { doctype, status })
           action && action('status', statusesByName[status]?.name)

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'