From 0dcc1f6ac4180f167370b3899cdeaa28f1f35838 Mon Sep 17 00:00:00 2001
From: taskylizard <75871323+taskylizard@users.noreply.github.com>
Date: Wed, 16 Oct 2024 08:04:29 +0000
Subject: [PATCH] refactor: rework SidebarCard

---
 .../theme/components/SidebarCard.vue          | 56 +++++++------------
 1 file changed, 21 insertions(+), 35 deletions(-)

diff --git a/docs/.vitepress/theme/components/SidebarCard.vue b/docs/.vitepress/theme/components/SidebarCard.vue
index f6eb8baf6..6821f3590 100644
--- a/docs/.vitepress/theme/components/SidebarCard.vue
+++ b/docs/.vitepress/theme/components/SidebarCard.vue
@@ -5,50 +5,36 @@ import ToggleStarred from './ToggleStarred.vue'
 </script>
 
 <template>
-  <div class="card">
-    <div class="card-header">
-      <div class="card-title">Emoji Legend</div>
+  <div
+    class="bg-$vp-c-bg hover:bg-$vp-c-bg/40 border-$vp-c-default-soft hover:border-primary transition-border relative z-0 rounded-lg border-2 border-solid p-5 duration-500"
+  >
+    <div class="align-center mb-4 flex justify-between">
+      <div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">
+        Emoji Legend
+      </div>
     </div>
     <Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
     <Field icon="i-twemoji-repeat-button">Storage Links</Field>
     <Field icon="i-twemoji-star">Recommendations</Field>
-    <div class="card-header">
-      <div class="card-title">Options</div>
+    <div class="align-center mb-4 flex justify-between">
+      <div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">Options</div>
     </div>
     <InputField id="toggle-starred" label="Toggle Starred">
       <template #display>
         <ToggleStarred />
       </template>
     </InputField>
+
+    <Field icon="i-lucide:github">
+      <a
+        href="https://github.com/fmhy/edit"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Star FMHY on GitHub"
+        class="text-primary underline font-bold"
+      >
+        Star on GitHub
+      </a>
+    </Field>
   </div>
 </template>
-
-<style scoped>
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.card-title {
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-  line-height: 32px;
-  font-size: 16px;
-}
-
-.card {
-  background: var(--vp-c-bg);
-  padding: 12px 24px 24px;
-  border-radius: 12px;
-  position: relative;
-  z-index: 0;
-  border: 1px solid transparent;
-  transition: border-color 0.4s ease-in-out;
-}
-
-.card:hover {
-  border-color: var(--vp-c-brand-1);
-}
-</style>