From c071f66cdd0dab854e63435b39520d0f3926af13 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Mon, 24 Apr 2023 13:52:14 -0700
Subject: [PATCH] fix: Update the icon for low priority (#6978)

---
 .../widgets/conversation/PriorityMark.vue     | 106 +++++-------------
 .../components/FluentIcon/DashboardIcon.vue   |  12 +-
 .../shared/components/FluentIcon/Icon.vue     |   6 +-
 .../shared/components/FluentIcon/Index.vue    |  12 +-
 .../FluentIcon/dashboard-icons.json           |  20 +++-
 5 files changed, 74 insertions(+), 82 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
index 0fdc786ca..9f8237397 100644
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -1,78 +1,19 @@
 <template>
-  <span v-if="priority" class="conversation-priority-mark">
-    <svg
-      v-tooltip="tooltipText"
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <template v-if="priority === CONVERSATION_PRIORITY.URGENT">
-        <rect width="14" height="14" rx="2" fill="#FF382D" />
-        <path
-          d="M2.33325 2.91667C2.33325 2.27233 2.85559 1.75 3.49992 1.75C4.14425 1.75 4.66659 2.27233 4.66659 2.91667V8.16667C4.66659 8.811 4.14425 9.33333 3.49992 9.33333C2.85559 9.33333 2.33325 8.811 2.33325 8.16667V2.91667Z"
-          fill="white"
-        />
-        <path
-          d="M2.33325 11.0833C2.33325 10.439 2.85559 9.91667 3.49992 9.91667C4.14425 9.91667 4.66659 10.439 4.66659 11.0833C4.66659 11.7277 4.14425 12.25 3.49992 12.25C2.85559 12.25 2.33325 11.7277 2.33325 11.0833Z"
-          fill="white"
-        />
-        <path
-          d="M5.83325 2.91667C5.83325 2.27233 6.35559 1.75 6.99992 1.75C7.64425 1.75 8.16659 2.27233 8.16659 2.91667V8.16667C8.16659 8.811 7.64425 9.33333 6.99992 9.33333C6.35559 9.33333 5.83325 8.811 5.83325 8.16667V2.91667Z"
-          fill="white"
-        />
-        <path
-          d="M5.83325 11.0833C5.83325 10.439 6.35559 9.91667 6.99992 9.91667C7.64425 9.91667 8.16659 10.439 8.16659 11.0833C8.16659 11.7277 7.64425 12.25 6.99992 12.25C6.35559 12.25 5.83325 11.7277 5.83325 11.0833Z"
-          fill="white"
-        />
-        <path
-          d="M9.33325 2.91667C9.33325 2.27233 9.85559 1.75 10.4999 1.75C11.1443 1.75 11.6666 2.27233 11.6666 2.91667V8.16667C11.6666 8.811 11.1443 9.33333 10.4999 9.33333C9.85559 9.33333 9.33325 8.811 9.33325 8.16667V2.91667Z"
-          fill="white"
-        />
-        <path
-          d="M9.33325 11.0833C9.33325 10.439 9.85559 9.91667 10.4999 9.91667C11.1443 9.91667 11.6666 10.439 11.6666 11.0833C11.6666 11.7277 11.1443 12.25 10.4999 12.25C9.85559 12.25 9.33325 11.7277 9.33325 11.0833Z"
-          fill="white"
-        />
-      </template>
-      <template v-else-if="priority === CONVERSATION_PRIORITY.HIGH">
-        <rect width="14" height="14" rx="2" fill="#F1F5F8" />
-        <path
-          d="M4.87216 3.50012L4.76278 8.29274H3.69555L3.58949 3.50012H4.87216ZM4.22917 10.3609C4.02809 10.3609 3.85574 10.2902 3.71212 10.1488C3.57071 10.0074 3.5 9.83503 3.5 9.63175C3.5 9.43289 3.57071 9.26275 3.71212 9.12133C3.85574 8.97992 4.02809 8.90921 4.22917 8.90921C4.42582 8.90921 4.59596 8.97992 4.73958 9.12133C4.88542 9.26275 4.95833 9.43289 4.95833 9.63175C4.95833 9.76654 4.92408 9.88917 4.85559 9.99965C4.7893 10.1101 4.70092 10.1985 4.59044 10.2648C4.48217 10.3289 4.36174 10.3609 4.22917 10.3609Z"
-          fill="#446888"
-        />
-        <path
-          d="M7.47237 3.50012L7.36299 8.29274H6.29576L6.1897 3.50012H7.47237ZM6.82937 10.3609C6.6283 10.3609 6.45595 10.2902 6.31233 10.1488C6.17092 10.0074 6.10021 9.83503 6.10021 9.63175C6.10021 9.43289 6.17092 9.26275 6.31233 9.12133C6.45595 8.97992 6.6283 8.90921 6.82937 8.90921C7.02603 8.90921 7.19617 8.97992 7.33979 9.12133C7.48562 9.26275 7.55854 9.43289 7.55854 9.63175C7.55854 9.76654 7.52429 9.88917 7.4558 9.99965C7.38951 10.1101 7.30112 10.1985 7.19064 10.2648C7.08237 10.3289 6.96195 10.3609 6.82937 10.3609Z"
-          fill="#446888"
-        />
-        <path
-          d="M10.0726 3.50012L9.9632 8.29274H8.89597L8.78991 3.50012H10.0726ZM9.42958 10.3609C9.22851 10.3609 9.05616 10.2902 8.91254 10.1488C8.77112 10.0074 8.70042 9.83503 8.70042 9.63175C8.70042 9.43289 8.77112 9.26275 8.91254 9.12133C9.05616 8.97992 9.22851 8.90921 9.42958 8.90921C9.62624 8.90921 9.79638 8.97992 9.94 9.12133C10.0858 9.26275 10.1587 9.43289 10.1587 9.63175C10.1587 9.76654 10.1245 9.88917 10.056 9.99965C9.98972 10.1101 9.90133 10.1985 9.79085 10.2648C9.68258 10.3289 9.56216 10.3609 9.42958 10.3609Z"
-          fill="#446888"
-        />
-      </template>
-      <template v-else-if="priority === CONVERSATION_PRIORITY.MEDIUM">
-        <rect width="14" height="14" rx="2" fill="#F1F5F8" />
-        <path
-          d="M6.03866 3.50012L5.92929 8.29274H4.86205L4.75599 3.50012H6.03866ZM5.39567 10.3609C5.1946 10.3609 5.02225 10.2902 4.87863 10.1488C4.73721 10.0074 4.6665 9.83503 4.6665 9.63175C4.6665 9.43289 4.73721 9.26275 4.87863 9.12133C5.02225 8.97992 5.1946 8.90921 5.39567 8.90921C5.59232 8.90921 5.76246 8.97992 5.90609 9.12133C6.05192 9.26275 6.12484 9.43289 6.12484 9.63175C6.12484 9.76654 6.09059 9.88917 6.02209 9.99965C5.9558 10.1101 5.86742 10.1985 5.75694 10.2648C5.64867 10.3289 5.52825 10.3609 5.39567 10.3609Z"
-          fill="#446888"
-        />
-        <path
-          d="M8.63887 3.50012L8.5295 8.29274H7.46226L7.3562 3.50012H8.63887ZM7.99588 10.3609C7.79481 10.3609 7.62246 10.2902 7.47883 10.1488C7.33742 10.0074 7.26671 9.83503 7.26671 9.63175C7.26671 9.43289 7.33742 9.26275 7.47883 9.12133C7.62246 8.97992 7.79481 8.90921 7.99588 8.90921C8.19253 8.90921 8.36267 8.97992 8.5063 9.12133C8.65213 9.26275 8.72505 9.43289 8.72505 9.63175C8.72505 9.76654 8.6908 9.88917 8.6223 9.99965C8.55601 10.1101 8.46763 10.1985 8.35715 10.2648C8.24888 10.3289 8.12845 10.3609 7.99588 10.3609Z"
-          fill="#446888"
-        />
-      </template>
-      <template v-else-if="priority === CONVERSATION_PRIORITY.LOW">
-        <rect width="14" height="14" rx="2" fill="#F1F5F8" />
-        <path
-          d="M6.03866 3.50012L5.92929 8.29274H4.86205L4.75599 3.50012H6.03866ZM5.39567 10.3609C5.1946 10.3609 5.02225 10.2902 4.87863 10.1488C4.73721 10.0074 4.6665 9.83503 4.6665 9.63175C4.6665 9.43289 4.73721 9.26275 4.87863 9.12133C5.02225 8.97992 5.1946 8.90921 5.39567 8.90921C5.59232 8.90921 5.76246 8.97992 5.90609 9.12133C6.05192 9.26275 6.12484 9.43289 6.12484 9.63175C6.12484 9.76654 6.09059 9.88917 6.02209 9.99965C5.9558 10.1101 5.86742 10.1985 5.75694 10.2648C5.64867 10.3289 5.52825 10.3609 5.39567 10.3609Z"
-          fill="#446888"
-        />
-        <path
-          d="M8.63887 3.50012L8.5295 8.29274H7.46226L7.3562 3.50012H8.63887ZM7.99588 10.3609C7.79481 10.3609 7.62246 10.2902 7.47883 10.1488C7.33742 10.0074 7.26671 9.83503 7.26671 9.63175C7.26671 9.43289 7.33742 9.26275 7.47883 9.12133C7.62246 8.97992 7.79481 8.90921 7.99588 8.90921C8.19253 8.90921 8.36267 8.97992 8.5063 9.12133C8.65213 9.26275 8.72505 9.43289 8.72505 9.63175C8.72505 9.76654 8.6908 9.88917 8.6223 9.99965C8.55601 10.1101 8.46763 10.1985 8.35715 10.2648C8.24888 10.3289 8.12845 10.3609 7.99588 10.3609Z"
-          fill="#446888"
-        />
-      </template>
-    </svg>
+  <span
+    v-if="priority"
+    v-tooltip="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="conversation-priority-mark"
+    :class="{ urgent: priority === CONVERSATION_PRIORITY.URGENT }"
+  >
+    <fluent-icon
+      :icon="`priority-${priority.toLowerCase()}`"
+      size="14"
+      view-box="0 0 14 14"
+    />
   </span>
 </template>
 
@@ -84,9 +25,9 @@ export default {
   props: {
     priority: {
       type: String,
-      default: undefined,
+      default: '',
       validate: value =>
-        [...Object.values(CONVERSATION_PRIORITY), undefined].includes(value),
+        [...Object.values(CONVERSATION_PRIORITY), ''].includes(value),
     },
   },
   data() {
@@ -104,9 +45,18 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .conversation-priority-mark {
-  display: inline-flex;
   align-items: center;
+  background: var(--s-50);
+  border-radius: var(--border-radius-small);
+  color: var(--s-600);
+  display: inline-flex;
+  width: var(--space-snug);
+
+  &.urgent {
+    background: var(--r-500);
+    color: var(--w-25);
+  }
 }
 </style>
diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
index b695aaaa7..a1135cfb8 100644
--- a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <base-icon :size="size" :icon="icon" :type="type" :icons="icons" />
+  <base-icon
+    :size="size"
+    :icon="icon"
+    :type="type"
+    :icons="icons"
+    :view-box="viewBox"
+  />
 </template>
 <script>
 import BaseIcon from './Icon';
@@ -23,6 +29,10 @@ export default {
       type: String,
       default: 'outline',
     },
+    viewBox: {
+      type: String,
+      default: '0 0 24 24',
+    },
   },
   data() {
     return { icons };
diff --git a/app/javascript/shared/components/FluentIcon/Icon.vue b/app/javascript/shared/components/FluentIcon/Icon.vue
index e49cb3d6d..6e4fbda73 100644
--- a/app/javascript/shared/components/FluentIcon/Icon.vue
+++ b/app/javascript/shared/components/FluentIcon/Icon.vue
@@ -3,7 +3,7 @@
     :width="size"
     :height="size"
     fill="none"
-    viewBox="0 0 24 24"
+    :viewBox="viewBox"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -33,6 +33,10 @@ export default {
       type: String,
       default: 'outline',
     },
+    viewBox: {
+      type: String,
+      default: '0 0 24 24',
+    },
   },
 
   computed: {
diff --git a/app/javascript/shared/components/FluentIcon/Index.vue b/app/javascript/shared/components/FluentIcon/Index.vue
index 7bc98a7a7..4cc0465d4 100644
--- a/app/javascript/shared/components/FluentIcon/Index.vue
+++ b/app/javascript/shared/components/FluentIcon/Index.vue
@@ -1,5 +1,11 @@
 <template>
-  <base-icon :size="size" :icon="icon" :type="type" :icons="icons" />
+  <base-icon
+    :size="size"
+    :icon="icon"
+    :type="type"
+    :icons="icons"
+    :view-box="viewBox"
+  />
 </template>
 <script>
 import BaseIcon from './Icon';
@@ -23,6 +29,10 @@ export default {
       type: String,
       default: 'outline',
     },
+    viewBox: {
+      type: String,
+      default: '0 0 24 24',
+    },
   },
   data() {
     return { icons };
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index d232e586b..94679eb9f 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -186,5 +186,23 @@
     "M5 11C5 10.4477 5.44772 10 6 10H10C10.5523 10 11 10.4477 11 11V14C11 14.5523 10.5523 15 10 15H6C5.44772 15 5 14.5523 5 14V11Z",
     "M5 18C5 17.4477 5.44772 17 6 17H10C10.5523 17 11 17.4477 11 18V21C11 21.5523 10.5523 22 10 22H6C5.44772 22 5 21.5523 5 21V18Z",
     "M13 18C13 17.4477 13.4477 17 14 17H18C18.5523 17 19 17.4477 19 18V21C19 21.5523 18.5523 22 18 22H14C13.4477 22 13 21.5523 13 21V18Z"
-  ]
+  ],
+  "priority-urgent-outline": [
+    "M2.33325 2.91667C2.33325 2.27233 2.85559 1.75 3.49992 1.75C4.14425 1.75 4.66659 2.27233 4.66659 2.91667V8.16667C4.66659 8.811 4.14425 9.33333 3.49992 9.33333C2.85559 9.33333 2.33325 8.811 2.33325 8.16667V2.91667Z",
+    "M2.33325 11.0833C2.33325 10.439 2.85559 9.91667 3.49992 9.91667C4.14425 9.91667 4.66659 10.439 4.66659 11.0833C4.66659 11.7277 4.14425 12.25 3.49992 12.25C2.85559 12.25 2.33325 11.7277 2.33325 11.0833Z",
+    "M5.83325 2.91667C5.83325 2.27233 6.35559 1.75 6.99992 1.75C7.64425 1.75 8.16659 2.27233 8.16659 2.91667V8.16667C8.16659 8.811 7.64425 9.33333 6.99992 9.33333C6.35559 9.33333 5.83325 8.811 5.83325 8.16667V2.91667Z",
+    "M5.83325 11.0833C5.83325 10.439 6.35559 9.91667 6.99992 9.91667C7.64425 9.91667 8.16659 10.439 8.16659 11.0833C8.16659 11.7277 7.64425 12.25 6.99992 12.25C6.35559 12.25 5.83325 11.7277 5.83325 11.0833Z",
+    "M9.33325 2.91667C9.33325 2.27233 9.85559 1.75 10.4999 1.75C11.1443 1.75 11.6666 2.27233 11.6666 2.91667V8.16667C11.6666 8.811 11.1443 9.33333 10.4999 9.33333C9.85559 9.33333 9.33325 8.811 9.33325 8.16667V2.91667Z",
+    "M9.33325 11.0833C9.33325 10.439 9.85559 9.91667 10.4999 9.91667C11.1443 9.91667 11.6666 10.439 11.6666 11.0833C11.6666 11.7277 11.1443 12.25 10.4999 12.25C9.85559 12.25 9.33325 11.7277 9.33325 11.0833Z"
+  ],
+  "priority-high-outline": [
+    "M4.87216 3.50012L4.76278 8.29274H3.69555L3.58949 3.50012H4.87216ZM4.22917 10.3609C4.02809 10.3609 3.85574 10.2902 3.71212 10.1488C3.57071 10.0074 3.5 9.83503 3.5 9.63175C3.5 9.43289 3.57071 9.26275 3.71212 9.12133C3.85574 8.97992 4.02809 8.90921 4.22917 8.90921C4.42582 8.90921 4.59596 8.97992 4.73958 9.12133C4.88542 9.26275 4.95833 9.43289 4.95833 9.63175C4.95833 9.76654 4.92408 9.88917 4.85559 9.99965C4.7893 10.1101 4.70092 10.1985 4.59044 10.2648C4.48217 10.3289 4.36174 10.3609 4.22917 10.3609Z",
+    "M7.47237 3.50012L7.36299 8.29274H6.29576L6.1897 3.50012H7.47237ZM6.82937 10.3609C6.6283 10.3609 6.45595 10.2902 6.31233 10.1488C6.17092 10.0074 6.10021 9.83503 6.10021 9.63175C6.10021 9.43289 6.17092 9.26275 6.31233 9.12133C6.45595 8.97992 6.6283 8.90921 6.82937 8.90921C7.02603 8.90921 7.19617 8.97992 7.33979 9.12133C7.48562 9.26275 7.55854 9.43289 7.55854 9.63175C7.55854 9.76654 7.52429 9.88917 7.4558 9.99965C7.38951 10.1101 7.30112 10.1985 7.19064 10.2648C7.08237 10.3289 6.96195 10.3609 6.82937 10.3609Z",
+    "M10.0726 3.50012L9.9632 8.29274H8.89597L8.78991 3.50012H10.0726ZM9.42958 10.3609C9.22851 10.3609 9.05616 10.2902 8.91254 10.1488C8.77112 10.0074 8.70042 9.83503 8.70042 9.63175C8.70042 9.43289 8.77112 9.26275 8.91254 9.12133C9.05616 8.97992 9.22851 8.90921 9.42958 8.90921C9.62624 8.90921 9.79638 8.97992 9.94 9.12133C10.0858 9.26275 10.1587 9.43289 10.1587 9.63175C10.1587 9.76654 10.1245 9.88917 10.056 9.99965C9.98972 10.1101 9.90133 10.1985 9.79085 10.2648C9.68258 10.3289 9.56216 10.3609 9.42958 10.3609Z"
+  ],
+  "priority-medium-outline": [
+    "M6.03866 3.50012L5.92929 8.29274H4.86205L4.75599 3.50012H6.03866ZM5.39567 10.3609C5.1946 10.3609 5.02225 10.2902 4.87863 10.1488C4.73721 10.0074 4.6665 9.83503 4.6665 9.63175C4.6665 9.43289 4.73721 9.26275 4.87863 9.12133C5.02225 8.97992 5.1946 8.90921 5.39567 8.90921C5.59232 8.90921 5.76246 8.97992 5.90609 9.12133C6.05192 9.26275 6.12484 9.43289 6.12484 9.63175C6.12484 9.76654 6.09059 9.88917 6.02209 9.99965C5.9558 10.1101 5.86742 10.1985 5.75694 10.2648C5.64867 10.3289 5.52825 10.3609 5.39567 10.3609Z",
+    "M8.63887 3.50012L8.5295 8.29274H7.46226L7.3562 3.50012H8.63887ZM7.99588 10.3609C7.79481 10.3609 7.62246 10.2902 7.47883 10.1488C7.33742 10.0074 7.26671 9.83503 7.26671 9.63175C7.26671 9.43289 7.33742 9.26275 7.47883 9.12133C7.62246 8.97992 7.79481 8.90921 7.99588 8.90921C8.19253 8.90921 8.36267 8.97992 8.5063 9.12133C8.65213 9.26275 8.72505 9.43289 8.72505 9.63175C8.72505 9.76654 8.6908 9.88917 8.6223 9.99965C8.55601 10.1101 8.46763 10.1985 8.35715 10.2648C8.24888 10.3289 8.12845 10.3609 7.99588 10.3609Z"
+  ],
+  "priority-low-outline": "M7.88754 3.5L7.77816 8.29261H6.71093L6.60487 3.5H7.88754ZM7.24455 10.3608C7.04347 10.3608 6.87113 10.2901 6.7275 10.1487C6.58609 10.0073 6.51538 9.83491 6.51538 9.63163C6.51538 9.43277 6.58609 9.26263 6.7275 9.12121C6.87113 8.9798 7.04347 8.90909 7.24455 8.90909C7.4412 8.90909 7.61134 8.9798 7.75496 9.12121C7.9008 9.26263 7.97371 9.43277 7.97371 9.63163C7.97371 9.76641 7.93947 9.88905 7.87097 9.99953C7.80468 10.11 7.7163 10.1984 7.60582 10.2647C7.49755 10.3288 7.37712 10.3608 7.24455 10.3608Z"
 }