1 files changed, 3 insertions, 17 deletions
diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue
index 4104c74..b0df627 100644
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -37,7 +37,7 @@
       <n-form-item label="Your hash: " label-placement="left">
         <n-input
           v-model:value="compareHash"
-          placeholder="Your hahs to compare..."
+          placeholder="Your hash to compare..."
           autocomplete="off"
           autocorrect="off"
           autocapitalize="off"
@@ -45,9 +45,8 @@
         />
       </n-form-item>
       <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
-        <div class="compare-result" :class="{ positive: compareMatch }">
-          {{ compareMatch ? 'Yes' : 'No' }}
-        </div>
+        <n-tag v-if="compareMatch" :bordered="false" type="success" round>Yes</n-tag>
+        <n-tag v-else :bordered="false" type="error" round>No</n-tag>
       </n-form-item>
     </n-form>
   </n-card>
@@ -57,9 +56,6 @@
 import { computed, ref } from 'vue';
 import { hashSync, compareSync } from 'bcryptjs';
 import { useCopy } from '@/composable/copy';
-import { useThemeVars } from 'naive-ui';
-
-const themeVars = useThemeVars();
 
 const input = ref('');
 const saltCount = ref(10);
@@ -70,13 +66,3 @@ const compareString = ref('');
 const compareHash = ref('');
 const compareMatch = computed(() => compareSync(compareString.value, compareHash.value));
 </script>
-
-<style lang="less" scoped>
-.compare-result {
-  color: v-bind('themeVars.errorColor');
-
-  &.positive {
-    color: v-bind('themeVars.successColor');
-  }
-}
-</style>