From 82c73f18d9f76e26e428673d69ed354a83ea2cda Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 19 Nov 2024 06:59:27 +0530
Subject: [PATCH] Update design

---
 .../dashboard/settings/SettingsHeader.vue     |  1 +
 .../dashboard/settings/SettingsWrapper.vue    |  4 +-
 .../dashboard/settings/agents/Index.vue       |  4 +-
 .../components/BaseSettingsHeader.vue         | 12 ++--
 .../dashboard/settings/macros/MacroEditor.vue | 43 ++++++------
 .../dashboard/settings/macros/MacroNodes.vue  | 13 ++--
 .../settings/macros/MacroProperties.vue       | 12 ++--
 .../settings/macros/macros.routes.js          | 40 ++++--------
 .../dashboard/settings/reports/Index.vue      |  3 +-
 .../settings/reports/LiveReports.vue          | 65 ++++++++++---------
 .../settings/reports/ReportContainer.vue      |  8 +--
 .../components/overview/MetricCard.vue        |  6 +-
 .../settings/reports/reports.routes.js        |  9 ---
 13 files changed, 97 insertions(+), 123 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index cc1a26fe0..c45a8aade 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -69,6 +69,7 @@ export default {
         {{ headerTitle }}
       </span>
     </h1>
+    <slot name="action-button" />
     <router-link
       v-if="showNewButton && isAdmin"
       :to="buttonRoute"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
index 51c667335..7fa13a674 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
@@ -8,9 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div
-    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-background"
-  >
+  <div class="flex flex-col w-full h-full m-0 overflow-auto bg-n-background">
     <div class="flex items-start w-full max-w-6xl mx-auto">
       <router-view v-slot="{ Component }">
         <keep-alive v-if="keepAlive">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 739a0b719..2799923f6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -150,8 +150,8 @@ const confirmDeletion = () => {
       >
         <template #actions>
           <woot-button
-            class="rounded-md button nice"
-            icon="add-circle"
+            class="inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 !bg-n-brand text-white hover:brightness-110 outline-transparent px-3 !text-sm"
+            icon="add"
             @click="openAddPopup"
           >
             {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index ba8f7f28a..c72cdd1cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -64,7 +64,7 @@ const openInNewTab = url => {
           </div>
         </div>
         <h1
-          class="text-2xl font-semibold tracking-[0.3px] text-slate-900 dark:text-slate-25"
+          class="text-xl font-interDisplay font-semibold tracking-[0.3px] text-slate-900 dark:text-slate-25"
         >
           {{ title }}
         </h1>
@@ -74,9 +74,9 @@ const openInNewTab = url => {
         <slot name="actions" />
       </div>
     </div>
-    <div class="flex flex-col gap-3 text-slate-600 dark:text-slate-300 w-full">
+    <div class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 w-full">
       <p
-        class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
+        class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl leading-5"
       >
         <slot name="description">{{ description }}</slot>
       </p>
@@ -86,14 +86,14 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium hover:underline"
+          class="sm:inline-flex hidden gap-1 w-fit items-center text-n-brand text-sm font-medium hover:underline"
         >
           {{ linkText }}
           <fluent-icon
             size="16"
             icon="chevron-right"
             type="outline"
-            class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+            class="flex-shrink-0 text-n-brand"
           />
         </a>
       </CustomBrandPolicyWrapper>
@@ -107,7 +107,7 @@ const openInNewTab = url => {
           v-if="helpURL && linkText"
           color-scheme="secondary"
           icon="arrow-outwards"
-          class="flex-row-reverse rounded-md min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
+          class="flex-row-reverse rounded-md text-sm min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
           @click="openInNewTab(helpURL)"
         >
           {{ linkText }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index 0817cda17..69be8be37 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -8,6 +8,7 @@ import { MACRO_ACTION_TYPES } from './constants';
 import { useAlert } from 'dashboard/composables';
 import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
 import { useMacros } from 'dashboard/composables/useMacros';
+import SettingsHeader from '../SettingsHeader.vue';
 
 const store = useStore();
 const getters = useStoreGetters();
@@ -122,19 +123,23 @@ const saveMacro = async macroData => {
 </script>
 
 <template>
-  <div
-    class="flex flex-col flex-1 pb-10 max-w-[960px] mx-auto w-full overflow-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
-  >
-    <woot-loading-state
-      v-if="uiFlags.isFetchingItem"
-      :message="t('MACROS.EDITOR.LOADING')"
-    />
-    <MacroForm
-      v-if="macro && !uiFlags.isFetchingItem"
-      :macro-data="macro"
-      @update:macro-data="macro = $event"
-      @submit="saveMacro"
-    />
+  <div class="overflow-auto flex-1 px-4 lg:px-0">
+    <SettingsHeader :header-title="t('MACROS.HEADER')" show-back-button />
+    <div
+      class="max-w-[960px] mx-auto w-full overflow-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
+    >
+      <woot-loading-state
+        v-if="uiFlags.isFetchingItem"
+        :message="t('MACROS.EDITOR.LOADING')"
+      />
+
+      <MacroForm
+        v-if="macro && !uiFlags.isFetchingItem"
+        :macro-data="macro"
+        @update:macro-data="macro = $event"
+        @submit="saveMacro"
+      />
+    </div>
   </div>
 </template>
 
@@ -143,20 +148,16 @@ const saveMacro = async macroData => {
 
 @layer components {
   .macro-gradient-radial {
-    background-image: radial-gradient(
-        ellipse at center,
+    background-image: radial-gradient(ellipse at center,
         transparent 0%,
-        #fdfdfd 80%
-      ),
+        #fdfdfd 80%),
       radial-gradient(#cbe5ff 1.2px, transparent 0);
   }
 
   .macro-dark-gradient-radial {
-    background-image: radial-gradient(
-        circle at center,
+    background-image: radial-gradient(circle at center,
         transparent 0%,
-        #121213 70%
-      ),
+        #121213 70%),
       radial-gradient(#293f51 1.2px, transparent 0);
   }
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index 416db7142..cdd519c53 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -69,12 +69,13 @@ export default {
             type="add"
             :index="i"
             :error-key="errors[`action_${i}`]"
-            :file-name="fileName(
-              actionData[i].action_params[0],
-              actionData[i].action_name,
-              files
-            )
-              "
+            :file-name="
+              fileName(
+                actionData[i].action_params[0],
+                actionData[i].action_name,
+                files
+              )
+            "
             :single-node="actionData.length === 1"
             @reset-action="$emit('resetAction', i)"
             @delete-node="$emit('deleteNode', i)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index be2f4d7ae..9e9044306 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -56,12 +56,12 @@ export default {
             v-if="macroVisibility === 'global'"
             icon="checkmark-circle"
             type="solid"
-            class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
+            class="absolute text-n-brand top-2 right-2"
           />
-          <p class="block m-0 text-sm font-medium mb-1">
+          <p class="block m-0 text-sm text-n-slate-12 font-medium mb-1">
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
           </p>
-          <p class="text-sm text-slate-500 dark:text-slate-200">
+          <p class="text-sm text-n-slate-11 mb-0">
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
           </p>
         </button>
@@ -74,12 +74,12 @@ export default {
             v-if="macroVisibility === 'personal'"
             icon="checkmark-circle"
             type="solid"
-            class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
+            class="absolute text-n-brand top-2 right-2"
           />
-          <p class="block m-0 text-sm font-medium mb-1">
+          <p class="block m-0 text-sm text-n-slate-12 font-medium mb-1">
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
           </p>
-          <p class="text-sm text-slate-500 dark:text-slate-200">
+          <p class="text-sm text-n-slate-11 mb-0">
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
           </p>
         </button>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
index e1d4729e6..4b150276a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
@@ -4,7 +4,6 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-import SettingsContent from '../Wrapper.vue';
 import SettingsWrapper from '../SettingsWrapper.vue';
 import Macros from './Index.vue';
 import MacroEditor from './MacroEditor.vue';
@@ -26,33 +25,20 @@ export default {
       ],
     },
     {
-      path: frontendURL('accounts/:accountId/settings/macros'),
-      component: SettingsContent,
-      props: () => {
-        return {
-          headerTitle: 'MACROS.HEADER',
-          icon: 'flash-settings',
-          showBackButton: true,
-        };
+      path: frontendURL('accounts/:accountId/settings/macros/:macroId/edit'),
+      name: 'macros_edit',
+      component: MacroEditor,
+      meta: {
+        permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+      },
+    },
+    {
+      path: frontendURL('accounts/:accountId/settings/macros/new'),
+      name: 'macros_new',
+      component: MacroEditor,
+      meta: {
+        permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
       },
-      children: [
-        {
-          path: ':macroId/edit',
-          name: 'macros_edit',
-          component: MacroEditor,
-          meta: {
-            permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          },
-        },
-        {
-          path: 'new',
-          name: 'macros_new',
-          component: MacroEditor,
-          meta: {
-            permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          },
-        },
-      ],
     },
   ],
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 506ec9ba0..274c13b30 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -101,8 +101,7 @@ export default {
   <div class="flex-1 p-1 overflow-auto">
     <div class="max-w-[960px] w-full mx-auto mb-10">
       <woot-button
-        color-scheme="success"
-        class-names="button--fixed-top"
+        color-scheme="primary"
         icon="arrow-download"
         @click="downloadAgentReports"
       >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index 9a4402b2c..589dddfea 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -124,50 +124,51 @@ export default {
 
 <template>
   <div class="flex-1 overflow-auto">
-    <div class="max-w-[960px] mx-auto w-full">
-      <div class="flex flex-col items-center md:flex-row">
-        <div
-          class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
-        >
+    <div class="max-w-[960px] mx-auto w-full gap-3 flex flex-col p-1 pb-16">
+      <div class="flex flex-col items-center md:flex-row gap-3">
+        <div class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%]">
           <MetricCard
             :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
             :is-loading="uiFlags.isFetchingAccountConversationMetric"
-            :loading-message="
-              $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
-            "
+            :loading-message="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
+              "
           >
-            <div
-              v-for="(metric, name, index) in conversationMetrics"
-              :key="index"
-              class="flex-1 min-w-0 pb-2"
-            >
-              <h3 class="text-base text-slate-700 dark:text-slate-100">
-                {{ name }}
-              </h3>
-              <p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
-                {{ metric }}
-              </p>
+            <div class="grid grid-cols-2 auto-cols-auto xl:grid-cols-4 w-full">
+              <div
+                v-for="(metric, name, index) in conversationMetrics"
+                :key="index"
+                class="w-full"
+              >
+                <h3 class="text-base text-n-slate-11">
+                  {{ name }}
+                </h3>
+                <p class="text-n-slate-12 text-3xl mb-0 mt-1">
+                  {{ metric }}
+                </p>
+              </div>
             </div>
           </MetricCard>
         </div>
         <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
           <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
-            <div
-              v-for="(metric, name, index) in agentStatusMetrics"
-              :key="index"
-              class="flex-1 min-w-0 pb-2"
-            >
-              <h3 class="text-base text-slate-700 dark:text-slate-100">
-                {{ name }}
-              </h3>
-              <p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
-                {{ metric }}
-              </p>
+            <div class="grid grid-cols-2 auto-cols-auto xl:grid-cols-4 w-full">
+              <div
+                v-for="(metric, name, index) in agentStatusMetrics"
+                :key="index"
+                class="w-full"
+              >
+                <h3 class="text-base text-n-slate-11">
+                  {{ name }}
+                </h3>
+                <p class="text-n-slate-12 text-3xl mb-0 mt-1">
+                  {{ metric }}
+                </p>
+              </div>
             </div>
           </MetricCard>
         </div>
       </div>
-      <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+      <div class="flex flex-row w-full max-w-full ml-auto mr-auto">
         <MetricCard
           :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')"
         >
@@ -188,7 +189,7 @@ export default {
           />
         </MetricCard>
       </div>
-      <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+      <div class="flex flex-row w-full max-w-full ml-auto mr-auto">
         <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
           <AgentTable
             :agents="agents"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index 0b847fd68..449a68be5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -135,13 +135,9 @@ export default {
 
 <template>
   <div
-    class="grid grid-cols-1 px-6 py-5 md:grid-cols-2 lg:grid-cols-3 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
+    class="grid grid-cols-1 px-6 py-5 md:grid-cols-2 gap-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
   >
-    <div
-      v-for="metric in metrics"
-      :key="metric.KEY"
-      class="p-4 mb-3 rounded-md"
-    >
+    <div v-for="metric in metrics" :key="metric.KEY">
       <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
       <div class="mt-4 h-72">
         <woot-loading-state
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index ecc2b4250..03fe4b22c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -25,15 +25,15 @@ export default {
 
 <template>
   <div
-    class="metric-card mb-2 p flex flex-col m-2 px-6 py-5 overflow-hidden flex-grow text-slate-700 dark:text-slate-100 min-h-[10rem] shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
+    class="metric-card flex flex-col px-6 py-5 overflow-hidden flex-grow text-slate-700 dark:text-slate-100 min-h-[8rem] shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
   >
     <div
-      class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
+      class="card-header grid w-full mb-4 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
     >
       <slot name="header">
         <div class="flex items-center gap-0.5 flex-row">
           <h5
-            class="mb-0 text-slate-800 dark:text-slate-100 font-medium text-xl"
+            class="mb-0 text-slate-800 dark:text-slate-100 font-medium text-lg"
           >
             {{ header }}
           </h5>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index d19c081d1..1e85bcc0c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -19,7 +19,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'OVERVIEW_REPORTS.HEADER',
-        icon: 'arrow-trending-lines',
         keepAlive: false,
       },
       children: [
@@ -44,7 +43,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'REPORT.HEADER',
-        icon: 'chat',
         keepAlive: false,
       },
       children: [
@@ -63,7 +61,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CSAT_REPORTS.HEADER',
-        icon: 'emoji',
         keepAlive: false,
       },
       children: [
@@ -82,7 +79,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'BOT_REPORTS.HEADER',
-        icon: 'bot',
         keepAlive: false,
       },
       children: [
@@ -102,7 +98,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_REPORTS.HEADER',
-        icon: 'people',
         keepAlive: false,
       },
       children: [
@@ -121,7 +116,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'LABEL_REPORTS.HEADER',
-        icon: 'tag',
         keepAlive: false,
       },
       children: [
@@ -140,7 +134,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'INBOX_REPORTS.HEADER',
-        icon: 'mail-inbox-all',
         keepAlive: false,
       },
       children: [
@@ -159,7 +152,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'TEAM_REPORTS.HEADER',
-        icon: 'people-team',
       },
       children: [
         {
@@ -177,7 +169,6 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'SLA_REPORTS.HEADER',
-        icon: 'document-list-clock',
         keepAlive: false,
       },
       children: [