From 3409821e3aae2ebc7e409ea46bbba7accf4f46c7 Mon Sep 17 00:00:00 2001
From: Connor <12714889+ConnorSimply@users.noreply.github.com>
Date: Fri, 19 May 2023 15:43:56 -0500
Subject: [PATCH] Update Docs Card Component Styling (#18628)

* add border glow, default icon, and text underline

* Create strange-ears-pull.md
---
 .changeset/strange-ears-pull.md     |  5 +++++
 docs/.vitepress/components/Card.vue | 13 +++++++------
 docs/public/icons/card_link.svg     |  4 ++++
 3 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/strange-ears-pull.md
 create mode 100644 docs/public/icons/card_link.svg

diff --git a/.changeset/strange-ears-pull.md b/.changeset/strange-ears-pull.md
new file mode 100644
index 0000000000..0c040e1527
--- /dev/null
+++ b/.changeset/strange-ears-pull.md
@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+Improved Affordance of Docs Card Component Link
diff --git a/docs/.vitepress/components/Card.vue b/docs/.vitepress/components/Card.vue
index 10144c9504..da678f1db2 100644
--- a/docs/.vitepress/components/Card.vue
+++ b/docs/.vitepress/components/Card.vue
@@ -3,7 +3,7 @@ const props = defineProps({
 	title: { type: String, required: true },
 	h: { type: String, required: false, default: '2' },
 	text: { type: String, required: true },
-	icon: { type: String, required: false, default: null },
+	icon: { type: String, required: false, default: "/icons/card_link.svg" },
 	url: { type: String, required: false, default: null },
 });
 
@@ -25,7 +25,7 @@ const headerType = 'h' + props.h;
 
 <style scoped>
 .card {
-	border: 1px solid var(--vp-c-divider);
+	border: 2px solid var(--vp-c-brand-light);
 	border-radius: 8px;
 	transition: border-color 0.25s, background-color 0.25s;
 	padding: 1.5rem;
@@ -35,6 +35,7 @@ const headerType = 'h' + props.h;
 	gap: 1.5em;
 	margin-top: 1em;
 	margin-bottom: 1em;
+	box-shadow: 0 0 4px var(--vp-c-brand-light) ;
 }
 
 .card p {
@@ -45,7 +46,9 @@ const headerType = 'h' + props.h;
 }
 
 .card:hover {
-	border-color: var(--vp-c-brand);
+	border: 2px solid var(--vp-c-brand);
+	box-shadow: 0 0 8px var(--vp-c-brand) ;
+	text-decoration: underline;
 }
 .icon {
 	width: 44px;
@@ -55,9 +58,7 @@ img {
 	width: auto;
 	border-radius: 0 !important;
 }
-.card:hover {
-	text-decoration: none;
-}
+
 .vp-doc h2 {
 	padding-top: 0;
 	margin: 0;
diff --git a/docs/public/icons/card_link.svg b/docs/public/icons/card_link.svg
new file mode 100644
index 0000000000..6b17b87c1a
--- /dev/null
+++ b/docs/public/icons/card_link.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">
+    <path fill="#a08bff"
+        d="M450 776H280q-83 0-141.5-58.5T80 576q0-83 58.5-141.5T280 376h170v60H280q-58.333 0-99.167 40.765-40.833 40.764-40.833 99Q140 634 180.833 675q40.834 41 99.167 41h170v60ZM325 606v-60h310v60H325Zm185 170v-60h170q58.333 0 99.167-40.765 40.833-40.764 40.833-99Q820 518 779.167 477 738.333 436 680 436H510v-60h170q83 0 141.5 58.5T880 576q0 83-58.5 141.5T680 776H510Z" />
+</svg>
\ No newline at end of file