thainv-dev: Fix UI

components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue

@@ -1,48 +1,31 @@
+<script setup lang="ts">
+const isBookmark = ref(false)
+const onClickBookmark = () => {
+  isBookmark.value = !isBookmark.value
+}
+</script>
 <template>
-  <div class="btn-wrap">
-    <div class="center-y">
-      <p title="Quay trở lại" class="class-default">
+  <div class="py-5 flex flex-wrap justify-between items-center">
+    <div class="flex gap-4 items-center">
+      <button title="Quay trở lại" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer">
         <Icon name="fa6-solid:arrow-left" />
-      </p>
-      <button class="defaultClasses">
-        <Icon name="fa6-regular:bookmark" />
+      </button>
+      <button @click="onClickBookmark()" class="w-8 h-8 rounded-full bg-white hover:bg-primary-100 hover:text-primary-600">
+        <Icon v-if="isBookmark === false" name="fa6-regular:bookmark" />
+        <Icon v-if="isBookmark === true" name="fa6-solid:bookmark" class="text-primary-600" />
       </button>
     </div>
 
-    <div class="center-y">
-      <button title="Copy link" class="class-default text-2xl">
+    <div class="flex gap-4 items-center">
+      <button title="Copy link" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
         <Icon name="bi:link-45deg" />
       </button>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
-.btn-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
 
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
-  .class-default {
-    display: grid;
-    place-items: center;
-    border-radius: 9999px;
-    border-width: 1px;
-    width: 3rem;
-    height: 3rem;
-    background-color: #ffffff;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    &:hover {
-      color: #2563eb;
-    }
-  }
-}
 .center-y {
   display: flex;
-  gap: 1rem;
-  align-items: center;
 }
 </style>