From 8a8b36d21e94d3fc4ebc4d5edff9a73c5fa347d7 Mon Sep 17 00:00:00 2001
From: taskylizard <75871323+taskylizard@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:28:40 +0530
Subject: [PATCH] nicer sidebar card

---
 .vitepress/theme/components/Modal.vue       |  2 +-
 .vitepress/theme/components/SidebarCard.vue | 17 +++++++++++++++--
 .vitepress/theme/style.css                  |  4 ++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/.vitepress/theme/components/Modal.vue b/.vitepress/theme/components/Modal.vue
index 2a1d56739..e22cdf338 100644
--- a/.vitepress/theme/components/Modal.vue
+++ b/.vitepress/theme/components/Modal.vue
@@ -6,7 +6,7 @@ const showModal = ref(false);
 </script>
 
 <template>
-  <button class="modal-button" @click="showModal = true">Feedback</button>
+  <button class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled" @click="showModal = true" />
 
   <Teleport to="body">
     <Transition name="modal">
diff --git a/.vitepress/theme/components/SidebarCard.vue b/.vitepress/theme/components/SidebarCard.vue
index fc4f0af24..88216895d 100644
--- a/.vitepress/theme/components/SidebarCard.vue
+++ b/.vitepress/theme/components/SidebarCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Field from "./CardField.vue";
 import Modal from "./Modal.vue";
+import InputField from "./InputField.vue";
 </script>
 
 <template>
@@ -11,7 +12,20 @@ import Modal from "./Modal.vue";
     <Field icon="i-twemoji-star">Recommendations</Field>
     <Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
     <Field icon="i-twemoji-repeat-button">Storage Links</Field>
-    <Modal />
+    <div class="card-header">
+      <div class="card-title">Options</div>
+    </div>
+    <InputField id="feedback" label="Feedback">
+      <template #display>
+        <Modal />
+      </template>
+    </InputField>
+    <InputField id="toggle-starred" label="Toggle Starred">
+      <template #display>
+        <p>i will do this later do not complain lmao</p>
+        <div class="i-carbon:star"></div>
+      </template>
+    </InputField>
   </div>
 </template>
 
@@ -35,7 +49,6 @@ import Modal from "./Modal.vue";
   padding: 12px 24px 24px;
   border-radius: 12px;
   position: relative;
-  margin-top: 1rem;
   z-index: 0;
   border: 1px solid transparent;
   transition: border-color 0.4s ease-in-out;
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 310ee3e62..8a7c0479e 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -83,6 +83,10 @@
   -webkit-text-decoration-color: var(--vp-c-brand-1);
 }
 
+::selection {
+  background-color: var(--vp-button-brand-bg);
+}
+
 /**
  * Component: Home
 */