Merge pull request #8341 from supabase/chore/style-nudges

Chore/style nudges

apps/reference/docs/guides/auth.mdx

@@ -9,6 +9,8 @@ import Link from '@docusaurus/Link'
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import providers from '@site/src/data/authProviders'
+import ButtonCard from '@site/src/components/ButtonCard'
+import useBaseUrl from '@docusaurus/useBaseUrl'
 
 <div class="video-container">
   <iframe
@@ -46,8 +48,13 @@ We provide a suite of Providers and login methods.
   <div class="row is-multiline">
     {providers.map((x) => (
       <div key={x.name} class="col col--6">
-        <Link class="card" to={x.href}>
-          <div class="card__body">
+        <ButtonCard
+          class="card"
+          to={useBaseUrl(x.href)}
+          title={x.name}
+          style={{ height: '100%' }}
+        >
+          <div class="button-card__inner">
             <div
               class=""
               style={{
@@ -93,7 +100,7 @@ We provide a suite of Providers and login methods.
               </div>
             </div>
           </div>
-        </Link>
+        </ButtonCard>
       </div>
     ))}
   </div>

apps/reference/src/components/ButtonCard.js

@@ -15,11 +15,19 @@ export default function ButtonCard({
       to={to}
       className={['button-card', `button-card--${layout}`].join(' ')}
     >
-      <div className="button-card__inner">
-        {icon && typeof icon == 'string' ? <img src={icon} width={24} /> : icon}
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
+      {children ? (
+        children
+      ) : (
+        <div className="button-card__inner">
+          {icon && typeof icon == 'string' ? (
+            <img src={icon} width={24} />
+          ) : (
+            icon
+          )}
+          <h3>{title}</h3>
+          <p>{description}</p>
+        </div>
+      )}
     </Link>
   )
 }

apps/reference/src/css/main.scss

@@ -74,7 +74,7 @@
   --ifm-color-warning: var(--custom-color-orange-600);
   --ifm-color-info-contrast-background: var(--custom-background-color-diff);
   --ifm-pre-background: var(--custom-background-color-diff) !important;
-
+  --ifm-link-hover-color:  var(--custom-primary);
   --prism-background-color: var(#1c1c1c) !important;
 
   /* Primary */