From 99c7251a78446b38276b43a3f1178ed735c60f65 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 10 Sep 2024 11:30:03 +0200
Subject: [PATCH] docs: refactor and fix become sponsor button colors

---
 .../theme/components/HomeSponsors.vue         | 50 +++++++++++++++----
 packages/docs/.vitepress/theme/index.ts       |  1 -
 .../docs/.vitepress/theme/styles/sponsors.css | 26 ----------
 3 files changed, 39 insertions(+), 38 deletions(-)
 delete mode 100644 packages/docs/.vitepress/theme/styles/sponsors.css

diff --git a/packages/docs/.vitepress/theme/components/HomeSponsors.vue b/packages/docs/.vitepress/theme/components/HomeSponsors.vue
index 458b02c7d..9ff540140 100644
--- a/packages/docs/.vitepress/theme/components/HomeSponsors.vue
+++ b/packages/docs/.vitepress/theme/components/HomeSponsors.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
+import sponsors from './sponsors.json'
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const translations = {
+  en: 'Become a sponsor',
+  'en-US': 'Become a Sponsor!',
+  'zh-CN': '成为赞助者！',
+}
+</script>
+
 <template>
   <div class="sponsors_outer">
     <div>
@@ -24,20 +37,35 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
-import sponsors from './sponsors.json'
-import { useData } from 'vitepress'
 
-const { site } = useData()
-const translations = {
-  en: 'Become a sponsor',
-  'en-US': 'Become a Sponsor!',
-  'zh-CN': '成为赞助者！',
+<style scoped>
+.become-sponsor {
+  font-size: 0.9em;
+  font-weight: 700;
+  width: auto;
+  text-align: center;
+  background-color: transparent;
+  padding: 0.75em 2em;
+  border-radius: 2em;
+  transition: all 0.30s ease;
+  box-sizing: border-box;
+  border: 2px solid var(--vp-c-brand-1);
+  text-decoration: none;
+}
+
+.become-sponsor:hover {
+  background-color: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: var(--vp-button-brand-text) !important;
+}
+
+.sponsors-top .become-sponsor {
+  font-size: 0.75em;
+  padding: 0.2em;
+  width: auto;
+  max-width: 150px;
 }
-</script>
 
-<style scoped>
 .sponsors_outer {
   text-align: center;
   padding: 35px 40px 45px;
diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
index 4fd5c4eb0..25da9d003 100644
--- a/packages/docs/.vitepress/theme/index.ts
+++ b/packages/docs/.vitepress/theme/index.ts
@@ -5,7 +5,6 @@ import AsideSponsors from './components/AsideSponsors.vue'
 // import HomeSponsors from './components/HomeSponsors.vue'
 import TranslationStatus from 'vitepress-translation-helper/ui/TranslationStatus.vue'
 import './styles/vars.css'
-import './styles/sponsors.css'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 import status from '../translation-status.json'
diff --git a/packages/docs/.vitepress/theme/styles/sponsors.css b/packages/docs/.vitepress/theme/styles/sponsors.css
deleted file mode 100644
index 6350ff37d..000000000
--- a/packages/docs/.vitepress/theme/styles/sponsors.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.become-sponsor {
-  font-size: 0.9em;
-  font-weight: 700;
-  width: auto;
-  text-align: center;
-  background-color: transparent;
-  padding: 0.75em 2em;
-  border-radius: 2em;
-  transition: all 0.15s ease;
-  box-sizing: border-box;
-  border: 2px solid var(--vp-c-brand-dark);
-}
-
-.become-sponsor:hover {
-  background-color: var(--vp-c-brand);
-  text-decoration: none;
-  border-color: var(--vp-c-brand);
-  color: var(--vp-button-brand-text) !important;
-}
-
-.sponsors-top .become-sponsor {
-  font-size: 0.75em;
-  padding: 0.2em;
-  width: auto;
-  max-width: 150px;
-}