chore: add new icons. new card component

apps/reference/docs/reference.mdx

@@ -6,52 +6,45 @@ hide_table_of_contents: true
 ---
 
 import Link from '@docusaurus/Link'
+import ButtonCard from '@site/src/components/ButtonCard'
 
 The Supabase Reference Docs provide technical descriptions of the products and how to use them.
 
 <div class="container" style={{ padding: 0 }}>
   <div class="row is-multiline">
     {/* Database */}
     <div class="col col--6">
-      <Link
+      <ButtonCard
+        icon={"/docs/img/icons/javascript-icon.svg"}
         class="card"
         to="/docs/reference/javascript"
         style={{ height: '100%' }}
-      >
-        <div class="card__body">
-          <h4>JavaScript</h4>
-          <p>JavaScript and TypeScript documentation.</p>
-        </div>
-      </Link>
+        title="JavaScript"
+        description="JavaScript and TypeScript documentation."
+      > 
+
+      </ButtonCard>
     </div>
     {/* Auth */}
     <div class="col col--6">
-      <Link class="card" to="/docs/reference/dart" style={{ height: '100%' }}>
-        <div class="card__body">
-          <h4>Dart</h4>
-          <p>Dart and Flutter documentation.</p>
-        </div>
-      </Link>
+      <ButtonCard icon={"/docs/img/icons/dart-icon.svg"} class="card" to="/docs/reference/dart" style={{ height: '100%' }} title="Dart" description="Dart and Flutter documentation.">
+
+      </ButtonCard>
     </div>
     {/* Examples - coming soon */}
     <div class="col col--6">
-      <Link class="card" to="/docs/reference/cli" style={{ height: '100%' }}>
-        <div class="card__body">
-          <h4>Supabase CLI</h4>
-          <p>Manage your Supabase projects.</p>
-        </div>
-      </Link>
+      <ButtonCard icon={"/docs/img/icons/cli-icon.svg"} class="card" to="/docs/reference/cli" style={{ height: '100%' }} title="Supabase CLI" description="Manage your Supabase projects.">
+
+      </ButtonCard>
     </div>
     {/* CLI */}
     <div class="col col--6">
-      <Link class="card" to="/docs/reference/api" style={{ height: '100%' }}>
-        <div class="card__body">
-          <h4>Supabase API</h4>
-          <p>Manage your Supabase projects.</p>
-        </div>
-      </Link>
+      <ButtonCard icon={"/docs/img/icons/api-icon.svg"} class="card" to="/docs/reference/api" style={{ height: '100%' }} title="Supabase API" description="Manage your Supabase projects.">
+
+      </ButtonCard>
     </div>
     {/*  */}
+
   </div>
 </div>
 

apps/reference/src/components/ButtonCard.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+
+export default function ButtonCard({
+  children,
+  color,
+  icon,
+  title,
+  description,
+  to,
+}) {
+  return (
+    <Link to={to}>
+      <div className="button-card__container">
+        <img src={icon} width={24} />
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </Link>
+  )
+}

apps/reference/src/css/components/_button-card.scss

@@ -0,0 +1,31 @@
+:root {
+  --custom-button-card-padding: 2rem;
+}
+
+.button-card__container {
+  padding: var(--custom-button-card-padding);
+  border: 1px solid var(--custom-border-color);
+  background-color: var(--custom-background-color-diff);
+  border-radius: 0.5rem;
+
+  margin-bottom: var(--ifm-spacing-horizontal) !important;
+
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+
+  img {
+    margin-bottom: 0.5rem;
+  }
+
+  h3 {
+    color: var(--custom-content-color-emphasis);
+    font-size: var(--custom-font-size-lg);
+    margin-bottom: 0rem;
+  }
+
+  p {
+    color: var(--custom-content-color-light);
+    font-size: var(--custom-font-size-sm);
+    margin-bottom: 0;
+  }
+}

apps/reference/src/css/components/_doc-item.scss

@@ -1,19 +1,11 @@
 :root {
-  --doc-item-container-width: 42rem;
+  // --doc-item-container-width: 42rem;
 }
 
 //overrides
 #__docusaurus {
-  //#region ------------ DocItem -------------
   [class*='docItemCol_'] {
-    // max-width: initial;
-    // min-width: 0;
-    // width: 100%;
-    flex-direction: column;
-
-    @media (min-width: 997px) {
-      // max-width: initial !important;
-    }
+    // flex-direction: column;
   }
 
   [class*='docItemContainer_'] {
@@ -23,17 +15,14 @@
   [class*='docItemContainer_'] {
     max-width: var(--doc-item-container-width);
     margin: 0 auto;
-    width: 100%;
-    // flex-grow: 1;
-    // min-width: 0;
+    // width: 100%;
   }
 
   .theme-doc-version-banner {
     max-width: var(--doc-item-container-width);
     margin: 0 auto;
-    width: 100%;
-    // flex-grow: 1;
-    // min-width: 0;
+    // width: 100%;
+    margin-bottom: 2rem !important;
   }
 
   [class*='docMainContainer_'] {
@@ -43,29 +32,29 @@
     //   }
     // }
 
-    > .container {
-      > .row {
-        > .col {
-          display: flex;
-          justify-content: center;
+    // > .container {
+    //   > .row {
+    //     > .col {
+    //       display: flex;
+    //       justify-content: center;
 
-          min-width: 0;
-        }
-      }
-    }
+    //       min-width: 0;
+    //     }
+    //   }
+    // }
 
-    .spacer {
-      flex-basis: 5rem;
+    // .spacer {
+    //   flex-basis: 5rem;
 
-      @media (max-width: 996px) {
-        display: none;
-      }
-    }
+    //   @media (max-width: 996px) {
+    //     display: none;
+    //   }
+    // }
   }
 
-  [class*='docItemCol_'] {
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-  }
+  // [class*='docItemCol_'] {
+  //   margin-inline-start: auto;
+  //   margin-inline-end: auto;
+  // }
   //#endregion
 }

apps/reference/src/css/components/_doc-page.scss

@@ -1,7 +1,7 @@
 //overrides
 #__docusaurus {
   [class*='docMainContainer_'] {
-    max-width: initial;
+    // max-width: initial;
     padding-top: var(--doc-page-vertical-spacing);
 
     > .container {