From ec95c4720ee8a493e8d2d1f477487c9f9f02d0a1 Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Tue, 28 Nov 2023 20:42:47 -0800
Subject: [PATCH] face-top: make rename util

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/components/top-matter/FaceTopMatter.vue | 17 +----------------
 src/styles/utils.scss                       | 13 +++++++++++++
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/top-matter/FaceTopMatter.vue b/src/components/top-matter/FaceTopMatter.vue
index ae453536..463d5f97 100644
--- a/src/components/top-matter/FaceTopMatter.vue
+++ b/src/components/top-matter/FaceTopMatter.vue
@@ -8,7 +8,7 @@
     </NcActions>
 
     <div class="name">
-      <div :class="{ rename: isReal }" @click="rename">
+      <div :class="{ 'rename-hover': isReal }" @click="rename">
         {{ displayName }}
       </div>
     </div>
@@ -156,18 +156,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped lang="scss">
-.face-top-matter {
-  .name > .rename {
-    cursor: text;
-    display: inline-block;
-
-    &:hover {
-      text-decoration: underline;
-      text-decoration-color: var(--color-placeholder-light);
-      text-underline-offset: 5px;
-    }
-  }
-}
-</style>
diff --git a/src/styles/utils.scss b/src/styles/utils.scss
index 4632d371..8b43058b 100644
--- a/src/styles/utils.scss
+++ b/src/styles/utils.scss
@@ -47,3 +47,16 @@ input[type='number'] {
     margin: 0;
   }
 }
+
+// Show the hover cursor and an underline
+.rename-hover {
+  cursor: text;
+  display: inline-block;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--color-placeholder-light);
+    text-underline-offset: 5px;
+    text-decoration-thickness: 1px;
+  }
+}