fix: Primevue css update to fix google font icon text-size done.

src/assets/primevue.css

@@ -1,10 +0,0 @@
-/* @import './primevue/common.css';
-@import './primevue/badge.css';
-@import './primevue/button.css';
-@import './primevue/checkbox.css';
-@import './primevue/colorPicker.css';
-@import './primevue/inputText.css';
-@import './primevue/radioButton.css';
-@import './primevue/ripple.css';
-@import './primevue/tooltip.css'; */
-/* @import 'primevue/resources/themes/saga-blue/theme.css'; */

src/assets/tailwind.css

@@ -5,7 +5,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer tailwind-base, primevue;
+@layer  tailwind-base, primevue;
 /* @layer tailwind-base, primevue, tailwind-utilities; */
 
 @layer tailwind-base {

src/components/Discover/Conformance/ConformanceResults.vue

@@ -7,10 +7,10 @@
   <!-- total group -->
   <ul class=" text-neutral-10 text-sm flex gap-2 py-2">
     <li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
-      <span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conforming<span>{{ data.counts.conforming }}</span>
+      <span class="material-symbols-outlined !text-base align-middle mr-2">check_circle</span>Conforming<span>{{ data.counts.conforming }}</span>
     </li>
     <li class=" bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
-      <span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Not Conforming<span>{{ data.counts.not_conforming }}</span>
+      <span class="material-symbols-outlined !text-base align-middle mr-2">cancel</span>Not Conforming<span>{{ data.counts.not_conforming }}</span>
     </li>
     <li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2" v-show="data.counts.not_applicable != 0">
       <iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>{{ data.counts.not_applicable }}</span>
@@ -21,7 +21,7 @@
     <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
       <p class="p-2 flex justify-between items-center">
         <div>
-          <span class="block text-sm font-bold mb-2">Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
+          <span class="block text-sm font-bold mb-2">Conformance Rate<span class="material-symbols-outlined !text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
           <small class="text-neutral-700 font-normal block">{{ data.charts.rate.xMin }} ~ {{ data.charts.rate.xMax }}</small>
         </div>
         <span class="text-2xl font-bold">{{ data.charts.rate.rate }}%</span>
@@ -31,7 +31,7 @@
     <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
       <p class="p-2 flex justify-between items-center">
         <div>
-          <span class="block text-sm font-bold mb-2">Cases<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.case">info</span></span>
+          <span class="block text-sm font-bold mb-2">Cases<span class="material-symbols-outlined !text-sm align-middle ml-2" v-tooltip.bottom="tooltip.case">info</span></span>
           <small class="text-neutral-700 font-normal block">{{ data.charts.cases.xMin }} ~ {{ data.charts.cases.xMax }}</small>
         </div>
         <span class="text-2xl font-bold"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
@@ -107,7 +107,7 @@
             <tbody>
               <tr v-for="(trace, key) in data.loops" :key="key">
                 <td class="p-2 pl-6 truncate max-w-0 w-1/3">
-                  <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
+                  <span class="material-symbols-outlined disc !text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
                 </td>
                 <td class="p-2 min-w-[96px] w-2/5">
                   <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
@@ -142,7 +142,7 @@
         <!-- Issues chart -->
         <div v-if="data.timeTrend.chart != null" class="border rounded border-neutral-300 p-2 bg-neutral-10" :class="data.issues === null || data.issues?.length === 0 ? 'w-full' : 'w-1/2'">
           <p class="h2 p-2 flex justify-between items-center">
-            <span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.timeTrend">info</span></span>
+            <span>Time Trend<span class="material-symbols-outlined !text-sm align-middle ml-2" v-tooltip.bottom="tooltip.timeTrend">info</span></span>
             <span class="text-2xl"><span class="text-cfm-secondary">{{ data.timeTrend.not_conforming }}</span>&nbsp/&nbsp{{ data.timeTrend.total }}</span>
           </p>
           <Chart type="line" :data="timeChartData" :options="timeChartOptions" class="w-[99%]"/>
@@ -155,7 +155,7 @@
             <tbody>
               <tr v-for="(trace, key) in data.issues" :key="key">
                 <td class="p-2 pl-6 truncate max-w-0 w-1/3">
-                  <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
+                  <span class="material-symbols-outlined disc !text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
                 </td>
                 <td class="p-2 min-w-[96px] w-2/5">
                   <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">

src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue

@@ -1,7 +1,7 @@
 <template>
   <ul id="cyp-conformance-result-dot">
     <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in data" :key="index + act">
-      <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>
+      <span class="material-symbols-outlined disc !text-sm align-middle mr-1">fiber_manual_record</span>
       <span class="mr-2 block w-12">{{ act.category }}</span>
       <span class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block">{{ act.task }}</span>
     </li>

src/components/Discover/Conformance/MoreModal.vue

@@ -10,7 +10,7 @@
     <section class="w-80 h-full pr-4">
       <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
       <p class="text-primary h2 px-2 mb-2">
-        <span class="material-symbols-outlined text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
+        <span class="material-symbols-outlined !text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
       </p>
       <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
         <table class="border-separate border-spacing-x-2 text-sm">

src/components/Discover/Map/Filter/Timeframes.vue

@@ -3,7 +3,7 @@
     <section class="pt-2 pb-20 space-y-2 text-sm min-w-[48%] h-full">
       <p class="h2">Range Selection</p>
       <div class="text-primary h2 flex items-center justify-start">
-        <span class="material-symbols-outlined mr-2 text-base">info</span>
+        <span class="material-symbols-outlined mr-2 !text-base">info</span>
         <p>Select or fill in a time range.</p>
       </div>
       <div class="chartContainer h-3/5 relative">

src/components/Discover/Map/Filter/Trace.vue

@@ -4,7 +4,7 @@
     <section class="py-2 space-y-2 text-sm min-w-[48%] h-full">
       <p class="h2">Range Selection</p>
       <div class="text-primary h2 flex items-center justify-start">
-        <span class="material-symbols-outlined mr-2 text-base">info</span>
+        <span class="material-symbols-outlined mr-2 !text-base">info</span>
         <p>Select a percentage range.</p>
       </div>
       <Chart type="bar" :data="chartData" :options="chartOptions" class="h-2/5" />
@@ -17,7 +17,7 @@
     <section class="h-full min-w-[48%] py-2 space-y-2">
       <p class="h2">Trace List ({{ traceTotal }})</p>
       <p class="text-primary h2 flex items-center justify-start">
-        <span class="material-symbols-outlined mr-2 text-base">info</span>Click trace number to see more.
+        <span class="material-symbols-outlined mr-2 !text-base">info</span>Click trace number to see more.
       </p>
       <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
         <table class="border-separate border-spacing-x-2 text-sm w-full">

src/components/Discover/Map/SidebarState.vue

@@ -96,7 +96,7 @@
           </li>
           <li>Connection:&nbsp;
             <span class="text-primary break-words" v-for="(item, key) in insights.most_time_edges" :key="key">
-              <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub ">arrow_forward</span>&nbsp;</span>
+              <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub ">arrow_forward</span>&nbsp;</span>
               </span><span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">,&nbsp;</span>
             </span>
           </li>
@@ -124,7 +124,7 @@
                 <p v-if="insights.short_loops.length === 0">No data</p>
                 <ul v-else class="list-disc ml-6 space-y-1">
                   <li class="break-words" v-for="(item, key) in insights.short_loops" :key="key">
-                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">sync_alt</span>&nbsp;</span>
+                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">sync_alt</span>&nbsp;</span>
                     </span>
                   </li>
                 </ul>
@@ -133,7 +133,7 @@
                 <p v-if="insights.shortest_traces.length === 0">No data</p>
                 <ul v-else class="list-disc ml-6 space-y-1">
                   <li class="break-words" v-for="(item, key) in insights.shortest_traces" :key="key">
-                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span>
+                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span>
                     </span>
                   </li>
                 </ul>
@@ -142,7 +142,7 @@
                 <p v-if="insights.longest_traces.length === 0">No data</p>
                 <ul v-else class="list-disc ml-6 space-y-1">
                   <li class="break-words" v-for="(item, key) in insights.longest_traces" :key="key">
-                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span>
+                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span>
                     </span>
                   </li>
                 </ul>
@@ -151,7 +151,7 @@
                 <li v-if="insights.most_freq_traces.length === 0">No data</li>
                 <ul v-else class="list-disc ml-6 space-y-1">
                   <li class="break-words" v-for="(item, key) in insights.most_freq_traces" :key="key">
-                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span>
+                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span>
                     </span>
                   </li>
                 </ul>

src/components/Discover/Map/SidebarTraces.vue

@@ -8,7 +8,7 @@
       <section class="w-80 h-full pr-4 border-r border-neutral-300">
         <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
         <p class="text-primary h2 px-2 mb-2">
-          <span class="material-symbols-outlined text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
+          <span class="material-symbols-outlined !text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
         </p>
         <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
           <table class="border-separate border-spacing-x-2 text-sm">

src/components/Discover/StatusBar.vue

@@ -77,7 +77,7 @@
   </ul>
   <!-- control button -->
   <div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
-    <span class="material-symbols-outlined block px-8 text-xs ">{{ isPanel ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down' }}</span>
+    <span class="material-symbols-outlined block px-8 !text-xs ">{{ isPanel ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down' }}</span>
   </div>
 </section>
 </template>

src/module/alertModal.js

@@ -30,7 +30,7 @@ export async function saveFilter(addFilterId) {
       fileName = value;
     },
     icon: 'info',
-    iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
+    iconHtml: '<span class="material-symbols-outlined !text-[58px]">cloud_upload</span>',
     iconColor: '#0099FF',
     reverseButtons:true,
     confirmButtonColor: '#0099FF',
@@ -114,7 +114,7 @@ export async function saveConformance(addConformanceCreateCheckId) {
       fileName = value;
     },
     icon: 'info',
-    iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
+    iconHtml: '<span class="material-symbols-outlined !text-[58px]">cloud_upload</span>',
     iconColor: '#0099FF',
     reverseButtons:true,
     confirmButtonColor: '#0099FF',
@@ -310,7 +310,7 @@ export async function renameModal(rename, type, id) {
       fileName = value;
     },
     icon: 'info',
-    iconHtml: '<span class="material-symbols-outlined text-[58px]">edit_square</span>',
+    iconHtml: '<span class="material-symbols-outlined !text-[58px]">edit_square</span>',
     iconColor: '#0099FF',
     reverseButtons: true,
     confirmButtonColor: '#0099FF',

src/views/Compare/Dashboard/index.vue

@@ -84,7 +84,7 @@
         <div class="bg-transparent z-10">
           <ul class="flex flex-col justify-center items-center">
             <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
-              <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+              <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
                 info
               </span>
             </li>

src/views/Discover/Map/index.vue

@@ -3,17 +3,17 @@
   <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-50':''">
     <ul class="space-y-4 flex flex-col justify-center items-center">
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarView = !sidebarView" :class="{'border-primary': sidebarView}">
-        <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
           track_changes
         </span>
       </li>
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{'border-primary': sidebarFilter}">
-        <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
           tornado
         </span>
       </li>
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"  @click="sidebarTraces = !sidebarTraces" :class="{'border-primary': sidebarTraces}">
-        <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
           rebase
         </span>
       </li>
@@ -21,7 +21,7 @@
 
     <!-- <ul class="flex flex-col justify-center items-center">
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary">
-        <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5">
+        <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5">
           highlight
         </span>
       </li>
@@ -37,7 +37,7 @@
   <div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
     <ul class="flex flex-col justify-center items-center">
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
-        <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+        <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
           info
         </span>
       </li>

src/views/Discover/Performance/index.vue

@@ -34,7 +34,7 @@
                     <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
                   </li>
                   <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleEfficiency.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer text-base" v-tooltip.bottom="tooltip.avgCycleEfficiency">info</span></span>
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleEfficiency.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgCycleEfficiency">info</span></span>
                     <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
                   </li>
                 </ul>
@@ -60,7 +60,7 @@
                     <Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
                   </li>
                   <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
-                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer text-base" v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span>
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span>
                     <Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
                   </li>
                 </ul>

src/views/Files/index.vue

@@ -19,7 +19,7 @@
               <template #item="{element}">
                 <div class="w-full h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
                   <div class="h-full">
-                    <span class="material-symbols-outlined mb-2 text-[32px] block">
+                    <span class="material-symbols-outlined mb-2 !text-[32px] block">
                       {{element.icon}}
                     </span>
                     <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
@@ -51,7 +51,7 @@
               <template #item="{element}">
                 <div class="w-full h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
                   <div>
-                    <span class="material-symbols-outlined mb-2 text-[32px] block">
+                    <span class="material-symbols-outlined mb-2 !text-[32px] block">
                       {{element.icon}}
                     </span>
                     <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
@@ -82,7 +82,7 @@
           <!-- card item v-for -->
           <li class="w-[216px] min-w-[216px] h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
             <div>
-              <span class="material-symbols-outlined mb-2 text-[32px] block">
+              <span class="material-symbols-outlined mb-2 !text-[32px] block">
                 {{ file.icon }}
               </span>
               <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
@@ -120,7 +120,7 @@
           <template #item="{ element }">
             <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"  :title="element.name" >
               <div>
-                <span class="material-symbols-outlined mb-2 text-[32px] block">
+                <span class="material-symbols-outlined mb-2 !text-[32px] block">
                   {{ element.icon }}
                 </span>
                 <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
@@ -181,7 +181,7 @@
         <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar" v-else>
         <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
             <div>
-              <span class="material-symbols-outlined mb-2 text-[32px] block">
+              <span class="material-symbols-outlined mb-2 !text-[32px] block">
                 {{ file.icon }}
               </span>
               <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">