fix: sign icon hover

tzuyi0817 · Jun 6, 2024 · 1ceebef · 1ceebef
1 parent 15039fb
commit 1ceebef
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/src/components/SignIcon.vue b/src/components/SignIcon.vue
@@ -10,7 +10,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  hoverColor: 'primary',
+  hoverColor: 'hover:text-primary',
   prefix: 'icon',
   color: '#4D4D4D',
   hoverChangeSvg: false,
@@ -23,7 +23,6 @@ const symbolId = computed(() => {
   if (props.hoverChangeSvg && isHover.value && !props.name.includes('_h')) return `${symbol}_h`;
   return symbol;
 });
-const hoverColor = computed(() => `hover:text-${props.hoverColor}`);
 </script>
 
 <template>

diff --git a/src/components/signature/SignatureImage.vue b/src/components/signature/SignatureImage.vue
@@ -127,7 +127,7 @@ function close() {
           v-show="currentSelect === image"
           name="close_s"
           class="absolute top-1 right-1 w-8 h-8 text-gray-80 drop-shadow-md"
-          hover-color="gray-60"
+          hover-color="hover:text-danger"
           @click="toggleWarnPopup(true)"
         />
       </li>

diff --git a/src/components/signature/SignatureLiteral.vue b/src/components/signature/SignatureLiteral.vue
@@ -115,22 +115,21 @@ function close() {
           @dragstart="dragLiteral"
         >
           {{ literal }}
-        </p>
-
-        <template v-if="currentSelect === literal">
-          <sign-icon
-            name="close_s"
-            class="absolute top-1 right-1 w-8 h-8 text-gray-80"
-            hover-color="gray-60"
-            @click="toggleWarnPopup(true)"
-          />
           <sign-icon
+            v-show="currentSelect === literal"
             name="edit"
-            class="absolute top-6 right-1 w-8 h-8 text-gray-80"
-            hover-color="gray-60"
+            class="w-5 h-5 text-gray-80 inline relative scale-150 -top-[2px]"
+            hover-color="hover:text-pen-blue"
             @click="toggleLiteralPopup(true, true)"
           />
-        </template>
+        </p>
+        <sign-icon
+          v-show="currentSelect === literal"
+          name="close_s"
+          class="absolute top-1 right-1 w-8 h-8 text-gray-80"
+          hover-color="hover:text-danger"
+          @click="toggleWarnPopup(true)"
+        />
       </li>
     </ul>
 

diff --git a/src/components/signature/SignatureSign.vue b/src/components/signature/SignatureSign.vue
@@ -88,7 +88,7 @@ function close() {
           v-show="currentSelect === signature"
           name="close_s"
           class="absolute top-1 right-1 w-8 h-8 text-gray-80"
-          hover-color="gray-60"
+          hover-color="hover:text-danger"
           @click="toggleWarnPopup(true)"
         />
       </li>