Fix transparent buttons

WordPress · Mar 30, 2023 · eb15997 · eb15997
1 parent 5690589
commit eb15997
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
@@ -358,10 +358,10 @@ a.button {
   @apply border border-dark-charcoal-20 bg-white text-dark-charcoal hover:border-dark-charcoal;
 }
 .transparent-gray {
-  @apply bg-white text-dark-charcoal hover:bg-dark-charcoal-10;
+  @apply bg-tx text-dark-charcoal hover:bg-dark-charcoal-10;
 }
 .transparent-dark {
-  @apply bg-white text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
+  @apply bg-tx text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
 }
 
 .primary {

diff --git a/frontend/src/components/meta/VButton.stories.mdx b/frontend/src/components/meta/VButton.stories.mdx
@@ -31,7 +31,9 @@ export const buttonSizes = allButtonSizes.filter(
 
 export const Template = (args) => ({
   template: `
-    <div id="wrapper" class="w-40 h-16 flex items-center justify-center bg-white">
+    <div id="wrapper"
+        class="w-40 h-16 flex items-center justify-center"
+        :class="args?.variant.startsWith('transparent') ? 'bg-dark-charcoal-06': 'bg-white'">
     <VButton v-bind="args" @click="onClick" href="/">
       Code is Poetry
     </VButton>