remove unused GuideCard color variants and fix its background color for dark mode

Author: fturmel

src/components/GuideCard.js

@@ -1,23 +1,16 @@
 import React, { memo } from 'react';
 import { Link } from 'gatsby';
-import cn from 'classnames';
 
 import ButtonPanel from './ButtonPanel';
 import Image from './Image';
 
 import * as css from './GuideCard.module.css';
 
-const GuideCard = ({
-  title,
-  slug,
-  meta,
-  icon = '📒',
-  description,
-  image,
-  variant
-}) => {
+const GuideCard = ({ title, slug, meta, icon = '📒', description, image }) => {
+  // TODO refactor this to use a single ButtonPanel instance?
+
   return (
-    <article className={cn(css.root, css[variant])}>
+    <article className={css.root}>
       <div className={css.top}>
         <div className={css.icon}>{icon}</div>
         <h2 className={css.title}>
@@ -32,7 +25,7 @@ const GuideCard = ({
             text={meta}
             buttonLink={slug}
             buttonText="Read"
-            variant={variant}
+            variant="purple"
             rainbow
           />
         </div>
@@ -45,7 +38,7 @@ const GuideCard = ({
             text={meta}
             buttonLink={slug}
             buttonText="Read"
-            variant={variant}
+            variant="purple"
             rainbow
           />
         </div>

src/components/GuideCard.module.css

@@ -5,46 +5,18 @@
   display: flex;
   flex-direction: column;
 
-  --color: var(--gray-dark);
+  --color: var(--purple);
+  --border: var(--border-purple);
 
   @media (--medium) {
     width: 100%;
     flex-basis: 100%;
   }
 }
 
-/* variants */
-.root.purple {
-  --color: var(--purple);
-  --border: var(--border-purple);
-  --background-color: var(--purple-light);
-}
-
-.root.red {
-  --color: var(--red);
-  --border: var(--border-red);
-  --background-color: var(--red-light);
-}
-
-.root.orange {
-  --color: var(--orange);
-  --border: var(--border-orange);
-  --background-color: var(--orange-light);
-}
-
-.root.cyan {
-  --color: var(--cyan);
-  --border: var(--border-cyan);
-  --background-color: var(--cyan-light);
-}
 .title {
   color: var(--text-color);
 }
-.icon {
-  border-right: var(--border);
-  border-bottom: var(--border);
-  border-left: var(--border);
-}
 
 .top {
   height: var(--baseline);
@@ -62,6 +34,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  border-right: var(--border);
+  border-bottom: var(--border);
+  border-left: var(--border);
 }
 
 .top h2 {
@@ -98,7 +74,7 @@
   text-overflow: ellipsis;
   border-bottom: var(--border);
   border-left: var(--border);
-  /* background-color: white; */
+  background-color: var(--background-color);
   color: var(--text-color);
 }
 

src/pages/guides.js

@@ -84,7 +84,6 @@ const GuidesPage = ({ data }) => {
                 guide.cover?.file?.childImageSharp?.gatsbyImageData ??
                 guidesPlaceholderImage
               }
-              variant={variant}
             />
             {i % 2 === 0 && (
               <div