changes

app/components/datatable/FormatOption.vue

@@ -134,48 +134,51 @@
   </template>
 
   <template v-else-if="tab.code === 'script' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
-    <p class="my-4 mx-4">
-      <a
-        @click="copyContent(script ? script : '')"
-        class="mr-6"
+    <div class="buttons has-addons mb-3">
+      <button
+        @click="copyContent(script || '')"
+        class="button is-primary is-light fs-14"
       >
-        <span class="icon-text">
-          <SvgIcon
-            class="mr-2"
-            v-bind="{ name: 'copy.svg', type: 'primary', siz: 18 }"
-          ></SvgIcon>
-          <span class="fs-16">Copy</span>
+        <span class="icon">
+          <Icon
+            name="material-symbols:content-copy-outline-rounded"
+            :size="18"
+          />
         </span>
-      </a>
-      <a
+        <span>Copy</span>
+      </button>
+      <button
         @click="paste()"
-        class="mr-6"
+        class="button is-primary is-light fs-14"
       >
-        <span class="icon-text">
-          <SvgIcon
-            class="mr-2"
-            v-bind="{ name: 'pen1.svg', type: 'primary', siz: 18 }"
-          ></SvgIcon>
-          <span class="fs-16">Paste</span>
+        <span class="icon">
+          <Icon
+            name="material-symbols:content-paste-rounded"
+            :size="18"
+          />
         </span>
-      </a>
-    </p>
-    <div class="mx-4">
-      <textarea
-        class="textarea fs-14"
-        rows="8"
-        v-model="script"
-        @change="checkScript()"
-        @dblclick="doCheck"
-      ></textarea>
+        <span>Paste</span>
+      </button>
     </div>
-    <p class="mt-5 mx-4">
-      <span class="icon-text fsb-18">
-        Replace
-        <SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
+    <textarea
+      class="textarea fs-13 is-family-monospace"
+      rows="4"
+      v-model="script"
+      @change="checkScript()"
+      @dblclick="doCheck"
+    ></textarea>
+    <p class="mt-5">
+      <span class="icon-text">
+        <span class="fs-17 font-semibold">Replace</span>
+        <span class="icon">
+          <Icon
+            name="material-symbols:arrow-forward-ios-rounded"
+            :size="18"
+          />
+        </span>
       </span>
     </p>
-    <div class="field is-grouped mx-4 mt-4">
+    <div class="field is-grouped mt-4">
       <div class="control">
         <p class="fsb-14 mb-1">Đoạn text</p>
         <input
@@ -194,22 +197,32 @@
           v-model="target"
         />
       </div>
-      <div class="control pl-5">
+      <div class="control">
+        <label
+          class="label"
+          style="opacity: 0"
+          >Hidden</label
+        >
         <button
-          class="button is-primary is-rounded is-outlined mt-5"
+          class="button is-primary is-light"
           @click="replace()"
         >
           Replace
         </button>
       </div>
     </div>
-    <p class="mt-5 pt-2 mx-4">
-      <span class="icon-text fsb-18">
-        Thay đổi màu
-        <SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
+    <p class="mt-5">
+      <span class="icon-text">
+        <span class="fs-17 font-semibold">Thay đổi màu</span>
+        <span class="icon">
+          <Icon
+            name="material-symbols:arrow-forward-ios-rounded"
+            :size="18"
+          />
+        </span>
       </span>
     </p>
-    <p class="mx-4 mt-4">
+    <p class="mt-4">
       <button
         class="button is-primary is-rounded"
         @click="changeScript()"