From 981f7cb2497bc94e99fc7342533693e1f55d7963 Mon Sep 17 00:00:00 2001
From: Prisma <goncalves@prisma.io>
Date: Tue, 2 Apr 2024 16:56:08 +0100
Subject: [PATCH] update styling of cards at homepage

---
 src/css/gettingStarted.module.scss  |  8 ++--
 src/pages/index.module.scss         | 64 ++++++++++++++++++-----------
 src/pages/index.tsx                 |  5 ++-
 src/theme/TabItem/styles.module.css |  1 +
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss
index d27ddeb6ab..f14523214e 100644
--- a/src/css/gettingStarted.module.scss
+++ b/src/css/gettingStarted.module.scss
@@ -57,11 +57,11 @@
     transition: all 300ms ease-out;
     display: flex;
     flex-direction: column;
-    text-decoration: none;
+    text-decoration: none !important;
+    background: transparent;
     &:hover {
-      background: var(--main-bgd-color);
-      border-color: #5a67d8;
-      color: var(--main-font-color) !important;
+      border-color: var(--ifm-btn-border-color-active);
+      background: transparent;
     }
     .title {
       display: inline-block;
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index a4bdab2c37..0c4e8e1e35 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -3,6 +3,44 @@
  * and scoped locally.
  */
 
+.linkCardWrapper {
+  border: 1px solid var(--border-color);
+  padding: 20px 24px;
+  border-radius: 8px;
+  color: var(--main-font-color);
+  transition: all 300ms ease-out;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-decoration: none !important;
+  background: transparent;
+  &:hover {
+    border-color: var(--ifm-btn-border-color-active);
+    background: transparent;
+  }
+  .title {
+    display: inline-block;
+    h6 {
+      font-size: 18px;
+      display: inline-block;
+      margin: 0;
+      font-family: Barlow;
+      font-weight: 600;
+      line-height: 24px;
+      letter-spacing: 0px;
+      text-align: left;
+    }
+  }
+  p {
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0em;
+    margin-bottom: 0;
+    text-align: left;
+  }
+}
 .icon {
   width: 64px;
   height: 64px;
@@ -302,13 +340,13 @@
 
   @media only screen and (min-width: 1024px) {
     display: grid;
-    column-gap: 44px;
+    column-gap: 24px;
     grid-template-columns: repeat(4, 1fr);
   }
 
   @media (min-width: 940px) and (max-width: 1024px) {
     display: grid;
-    column-gap: 44px;
+    column-gap: 24px;
     grid-template-columns: repeat(3, 1fr);
   }
 }
@@ -322,28 +360,8 @@
   flex-basis: 21%;
   border-radius: 8px;
   padding: 25px 24px;
-  background-color: var(--orm-card-bg);
   position: relative;
   cursor: pointer;
-
-  &::after {
-    content: '';
-    position: absolute;
-    border-radius: 8px;
-    inset: 0;
-    border: 1px solid var(--grid-border-color);
-    background-color: transparent;
-    cursor: pointer;
-  }
-
-  &:hover {
-    background-color: var(--main-bgd-color);
-
-    &::after {
-      border: 2px solid #5a67d8;
-    }
-  }
-
   img {
     margin: auto 0;
     max-height: 36px;
@@ -359,7 +377,7 @@
   }
 
   @media only screen and (min-width: 940px) {
-    padding: 0 24px;
+    padding: 0 0;
   }
 }
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7cc76cf679..4aac759269 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -14,6 +14,7 @@ import {
 } from '@site/src/data/indexData';
 
 import styles from './index.module.scss';
+import { useRef } from 'react';
 
 
 function HomepageCard({
@@ -116,7 +117,9 @@ function HomepageDatabasesSection() {
       </div>
       <div className={styles.databaseGrid}>
         {DatabaseData.map((e) => (
-          <Link to={e.url}>
+          // <Link to={e.url}>
+          // </Link>
+          <Link to={e.url} className={styles.linkCardWrapper}>
             <div className={styles.databaseEntry}>
               <img src={`/img/technologies/${e.icon}.svg`} style={{
                 height: `100%`,
diff --git a/src/theme/TabItem/styles.module.css b/src/theme/TabItem/styles.module.css
index 8e8d2b0389..4fc857a093 100644
--- a/src/theme/TabItem/styles.module.css
+++ b/src/theme/TabItem/styles.module.css
@@ -8,4 +8,5 @@
 
 .codeChildren {
   width: max-content;
+  max-width: 100%;
 }