changes

app/components/datatable/TimeOption.vue

@@ -8,7 +8,7 @@
       <div
         v-if="enableTime"
         class="cell is-col-span-7 is-flex is-align-items-center is-flex-wrap-wrap"
-        style="row-gap: 0.5rem; column-gap: 1rem"
+        style="row-gap: 0; column-gap: 1rem"
       >
         <Caption
           :title="lang === 'vi' ? 'Thời gian' : 'Time'"
@@ -41,11 +41,14 @@
         </div>
         <span
           v-if="newDataAvailable"
-          class="has-text-danger is-italic is-size-6 ml-2"
+          class="has-text-danger is-italic fs-14 ml-2"
           >Có dữ liệu mới, vui lòng làm mới.</span
         >
       </div>
-      <div class="cell is-col-span-5 is-flex is-align-items-center is-gap-1 is-flex-wrap-wrap">
+      <div
+        class="cell is-col-span-5 is-flex is-align-items-center is-flex-wrap-wrap"
+        style="row-gap: 0; column-gap: 1rem"
+      >
         <Caption
           :title="lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search'"
           type="has-text-orange"
@@ -60,45 +63,50 @@
           :placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
         />
         <div class="field has-addons is-flex is-flex-wrap-wrap is-gap-0 is-align-items-center">
-          <span
-            class="tooltip"
+          <p
             v-if="importdata && $getEditRights()"
+            class="control"
           >
-            <a
-              class="mr-2"
+            <button
+              class="button is-ghost has-text-orange fs-14"
               @click="openImport()"
             >
-              <SvgIcon
-                v-bind="{
-                  name: 'upload.svg',
-                  type: 'findata',
-                  size: 22,
-                }"
-              ></SvgIcon>
-            </a>
+              <span class="icon">
+                <Icon
+                  name="material-symbols:upload-rounded"
+                  :size="22"
+                />
+              </span>
+            </button>
             <span
-              class="tooltiptext"
-              style="min-width: max-content"
+              class="tooltiptext has-background-orange-soft has-text-orange-bold"
+              style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
             >
-              {{ lang === "vi" ? "Nhập dữ liệu" : "Import data" }}
+              Nhập dữ liệu
             </span>
-          </span>
-          <span
-            class="tooltip"
+          </p>
+          <p
             v-if="enableAdd && $getEditRights()"
+            class="control"
           >
-            <a
-              class="mr-2"
+            <button
+              class="button is-ghost has-text-orange fs-14"
               @click="$emit('add')"
             >
-              <SvgIcon v-bind="{ name: 'add1.png', type: 'findata', size: 22 }"></SvgIcon>
-            </a>
+              <span class="icon">
+                <Icon
+                  name="material-symbols:add-rounded"
+                  :size="22"
+                />
+              </span>
+            </button>
             <span
-              class="tooltiptext"
-              style="min-width: max-content"
-              >{{ lang === "vi" ? "Thêm mới" : "Add new" }}</span
+              class="tooltiptext has-background-orange-soft has-text-orange-bold"
+              style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
             >
-          </span>
+              Thêm mới
+            </span>
+          </p>
           <p class="control">
             <button
               class="button is-ghost has-text-orange fs-14"
@@ -110,8 +118,13 @@
                   :size="22"
                 />
               </span>
-              <span>Xuất excel</span>
             </button>
+            <span
+              class="tooltiptext has-background-orange-soft has-text-orange-bold"
+              style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
+            >
+              Xuất Excel
+            </span>
           </p>
           <p class="control">
             <button
@@ -124,8 +137,13 @@
                   :size="22"
                 />
               </span>
-              <span>Làm mới</span>
             </button>
+            <span
+              class="tooltiptext has-background-orange-soft has-text-orange-bold"
+              style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
+            >
+              Làm mới
+            </span>
           </p>
           <Icon
             v-if="loading"