fluency-v8-components 1.4.3 → 1.4.5

package/src/components/notifications/NotifyList.vue

@@ -3,7 +3,7 @@
     <Dialog
       v-if="isDialog"
       as="div"
-      :class="success ? 'bg-green-50' : 'bg-red-50'"
+      :class="success ? 'std-green-light' : 'std-red-light'"
       class="rounded-md p-4 fixed bottom-5 z-50"
       style="min-width: 75%; left: 50%; transform: translateX(-50%)"
       @close="closeModal"
@@ -12,22 +12,24 @@
         <div class="flex-shrink-0">
           <CheckCircleIcon
             v-if="success"
-            class="icon-md text-green-400"
+            class="icon-md icon-green"
             aria-hidden="true"
           />
-          <XCircleIcon v-else class="icon-md text-red-400" aria-hidden="true" />
+          <XCircleIcon v-else class="icon-md icon-red" aria-hidden="true" />
         </div>
         <div class="ml-3">
-          <h3 v-if="success" class="text-sm font-medium text-green-800">
+          <h3 v-if="success" class="text-sm font-medium std-green-text">
             {{ title }}
           </h3>
-          <h3 v-else class="text-sm font-medium text-red-800">{{ title }}</h3>
-          <div v-if="success" class="mt-2 text-sm text-green-700">
+          <h3 v-else class="text-sm font-medium std-red-text">
+            {{ title }}
+          </h3>
+          <div v-if="success" class="mt-2 text-sm std-green-text">
             <ul role="list" class="list-disc space-y-1 pl-5">
               <li v-for="item in list" :key="item">{{ item }}</li>
             </ul>
           </div>
-          <div v-else class="mt-2 text-sm text-red-700">
+          <div v-else class="mt-2 text-sm std-red-text">
             <ul role="list" class="list-disc space-y-1 pl-5">
               <li v-for="item in list" :key="item">{{ item }}</li>
             </ul>
@@ -44,7 +46,7 @@
     </Dialog>
     <div
       v-else
-      :class="success ? 'bg-green-50' : 'bg-red-50'"
+      :class="success ? 'std-green-light' : 'std-red-light'"
       class="rounded-md p-4 fixed bottom-5 z-50"
       style="min-width: 75%; left: 50%; transform: translateX(-50%)"
     >
@@ -52,22 +54,24 @@
         <div class="flex-shrink-0">
           <CheckCircleIcon
             v-if="success"
-            class="icon-md text-green-400"
+            class="icon-md icon-green"
             aria-hidden="true"
           />
-          <XCircleIcon v-else class="icon-md text-red-400" aria-hidden="true" />
+          <XCircleIcon v-else class="icon-md icon-red" aria-hidden="true" />
         </div>
         <div class="ml-3">
-          <h3 v-if="success" class="text-sm font-medium text-green-800">
+          <h3 v-if="success" class="text-sm font-medium std-green-text">
+            {{ title }}
+          </h3>
+          <h3 v-else class="text-sm font-medium std-red-text">
             {{ title }}
           </h3>
-          <h3 v-else class="text-sm font-medium text-red-800">{{ title }}</h3>
-          <div v-if="success" class="mt-2 text-sm text-green-700">
+          <div v-if="success" class="mt-2 text-sm std-green-text">
             <ul role="list" class="list-disc space-y-1 pl-5">
               <li v-for="item in list" :key="item">{{ item }}</li>
             </ul>
           </div>
-          <div v-else class="mt-2 text-sm text-red-700">
+          <div v-else class="mt-2 text-sm std-red-text">
             <ul role="list" class="list-disc space-y-1 pl-5">
               <li v-for="item in list" :key="item">{{ item }}</li>
             </ul>

package/src/components/status/ScoreLevel.vue

@@ -1,14 +1,13 @@
 <template>
   <div
     :class="[
-      'text-left justify-start inline-flex items-center rounded-sm mx-2 px-2 py-0.5 text-xs font-medium bg-slate-200 dark:bg-slate-700',
+      'text-left justify-start inline-flex items-center rounded-sm mx-2 px-2 py-0.5 text-xs font-medium std-light dark:std-dark',
       { 'score-none': scoreLevel === 'none' },
       { 'score-low': scoreLevel === 'low' },
       { 'score-medium': scoreLevel === 'medium' },
       { 'score-serious': scoreLevel === 'serious' },
       { 'score-high': scoreLevel === 'high' },
       { 'score-critical': scoreLevel === 'critical' },
-      { 'score-warn': scoreLevel === 'warn' },
     ]"
   >
     <ExclamationTriangleIcon class="icon mr-1" />

package/src/components/status/TicketStatus.vue

@@ -2,7 +2,7 @@
   <Menu as="div" class="inline-block text-left">
     <div>
       <MenuButton
-        class="inline-flex w-full justify-center rounded-md bg-white dark:bg-transparent px-3 py-1 text-sm font-semibold text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:hover:dark-bg-hover"
+        class="inline-flex w-full justify-center rounded-md std-white std-white-ring px-3 py-1 text-sm font-semibold shadow-xs ring-1 ring-inset hover:std-white-hover"
         :disabled="disabled"
         @click="($event) => closeMenu($event)"
       >
@@ -17,10 +17,6 @@
             "
             class="icon mt-0.5 icon-blue"
           />
-          <CheckCircleIcon
-            v-if="selectedItem === 'resolved' || selectedItem === 'Resolved'"
-            class="icon mt-0.5 icon-green"
-          />
           <XCircleIcon
             v-if="selectedItem === 'closed' || selectedItem === 'Closed'"
             class="icon mt-0.5 icon-gray"
@@ -31,7 +27,7 @@
         </div>
         <ChevronDownIcon
           v-if="!disabled"
-          class="-mr-1 icon-md text-gray-400"
+          class="-mr-1 icon-md"
           aria-hidden="true"
         />
       </MenuButton>
@@ -46,7 +42,7 @@
       leave-to-class="transform opacity-0 scale-95"
     >
       <MenuItems
-        class="absolute z-10 w-30 origin-top-right rounded-xs shadow-lg ring-1 ring-gray-900/5 focus:outline-hidden bg-white dark:bg-black"
+        class="std-white absolute z-10 w-40 origin-top-right rounded-xs shadow-lg focus:outline-hidden "
         style="transform: translateX(-60px)"
       >
         <div class="py-0.5" v-for="(item, index) in data" :key="index">
@@ -58,10 +54,8 @@
           >
             <a
               :class="[
-                active
-                  ? 'bg-gray-100 text-gray-900 dark:text-black'
-                  : 'text-gray-700',
-                'block px-4 py-1 text-sm dark:text-white dark:std-dark',
+                { 'std-white-hover': active}, 
+                'std-white-text block px-4 py-1 text-sm cursor-pointer',
               ]"
             >
               <div class="flex">
@@ -90,11 +84,9 @@
             <MenuItem v-slot="{ active }">
               <div
                 :class="[
-                  active
-                    ? 'bg-gray-100 text-gray-900 dark:text-black'
-                    : 'text-gray-700',
-                  'block px-4 py-1 text-sm dark:text-white dark:std-dark',
-                ]"
+                  { 'std-white-hover': active}, 
+                  'std-white-text block px-4 py-1 text-sm',
+              ]"
               >
                 <div class="flex">
                   <XCircleIcon class="icon mt-0.5 icon-gray" />
@@ -105,14 +97,14 @@
             <div
               v-if="openClassification"
               :class="[
-                'absolute top-0 w-80 rounded-xs bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-black dark:ring-gray-300/5',
+                'absolute top-0 w-80 rounded-xs std-white shadow-lg',
                 { 'left-full': subItemDirection === 'right' },
                 { 'right-full': subItemDirection === 'left' },
               ]"
             >
               <a
                 v-for="classification in classifications"
-                class="block px-4 py-1 text-sm text-gray-700 dark:text-white dark:std-dark hover:bg-gray-100 hover:text-gray-900"
+                class="cursor-pointer block px-4 py-1 text-sm std-white-text hover:std-white-hover"
                 @click.stop="selectSubItem(item, classification)"
               >
                 <div class="flex">
@@ -130,11 +122,10 @@
 <script setup>
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import {
-  CheckCircleIcon,
-  ClockIcon,
   ChevronDownIcon,
   ExclamationCircleIcon,
   XCircleIcon,
+  ClockIcon,
 } from "@heroicons/vue/24/outline";
 import { ref, watch } from "vue";
 // constants

package/src/components/tables/ArgumentTable.vue

@@ -1,6 +1,6 @@
 <template>
   <table class="w-full select-none std-table">
-    <thead class="text-left bg-neutral-200 dark:dark-bg">
+    <thead class="text-left">
       <tr>
         <TableHeader title="Name" />
         <TableHeader title="Description" />

package/src/constants/colors.js

@@ -2,7 +2,7 @@ import * as d3 from "d3";
 
 const colors = {
   light: {
-    canvas: "#f3f4f6",
+    canvas: "#ececee",
     primary: "#003153",
     secondary: "#2d6f9d",
     accent: "#9C27B0",

package/src/fpl/Configs/Counter.vue

@@ -31,5 +31,6 @@ const formatOptions = [
   { label: "Thousands Seperated", value: "comma" },
   { label: "Thousands Seperated (Data)", value: "comma_data" },
   { label: "Data", value: "Data" },
+  { label: "Cost", value: "Cost" },
 ];
 </script>

package/src/fpl/Configs/Image.vue

@@ -71,7 +71,7 @@
       <input
         v-if="backgroundColor"
         type="color"
-        class="mx-2 block w-20 bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700"
+        class="mx-2 block w-20 border std-white std-white-border cursor-pointer rounded-md"
         id="hs-color-input"
         v-model="local.panelConfig.backgroundColor"
       />

package/src/fpl/Configs/Table.vue

@@ -1,6 +1,6 @@
 <template>
   <table class="w-full select-none std-table">
-    <thead class="text-left bg-neutral-200 dark:dark-bg">
+    <thead class="text-left">
       <tr>
         <TableHeader title="" />
         <TableHeader title="Selected" />

package/src/fpl/Panel.vue

@@ -14,7 +14,7 @@
       </span>
     </div>
     <Menu v-if="!viewing" as="div" class="absolute right-1 top-2">
-      <MenuButton class="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500">
+      <MenuButton class="-m-2.5 block p-2.5 icon-gray hover:opacity-50">
         <span class="sr-only">Open options</span>
         <EllipsisHorizontalIcon class="icon-md" aria-hidden="true" />
       </MenuButton>
@@ -27,13 +27,13 @@
         leave-to-class="transform opacity-0 scale-95"
       >
         <MenuItems
-          class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-hidden bg-white dark:bg-black"
+          class="std-white absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md py-2 shadow-lg"
         >
           <MenuItem v-slot="{ active }">
             <div
               :class="[
-                active ? 'cursor-pointer bg-gray-50 dark:bg-gray-800' : '',
-                'block px-3 py-1 text-sm leading-6',
+                { 'std-blue std-white-text': active },
+                'block px-3 py-1 text-sm leading-6 cursor-pointer',
               ]"
               @click="emits('edit', panel)"
             >
@@ -43,8 +43,8 @@
           <MenuItem v-if="panel.panelType === 'table'" v-slot="{ active }">
             <div
               :class="[
-                active ? 'cursor-pointer bg-gray-50 dark:bg-gray-800' : '',
-                'block px-3 py-1 text-sm leading-6',
+                { 'std-blue std-white-text': active },
+                'block px-3 py-1 text-sm leading-6 cursor-pointer',
               ]"
               @click="downloadTableCSV"
             >
@@ -54,8 +54,8 @@
           <MenuItem v-slot="{ active }">
             <div
               :class="[
-                active ? 'cursor-pointer bg-gray-50 dark:bg-gray-800' : '',
-                'block px-3 py-1 text-sm leading-6',
+                { 'std-blue std-white-text': active },
+                'block px-3 py-1 text-sm leading-6 cursor-pointer',
               ]"
               @click="emits('delete', panel.key)"
             >

package/src/fpl/Panels/Counter.vue

@@ -35,6 +35,7 @@ if (props.obj.table.rows[0]) {
 // function defs
 function formatCol(total, format) {
   if (format === "Data") return dataCount(total) + "B";
+  if (format === "Cost") return "$" + total.toFixed(2);
   if (format === "Readable Numbers") return humanCount(total.toPrecision(3));
   if (format === "comma") return total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   if (format === "comma_data") return total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "B";