feat: sdk cards logo improvements

fix: github card flex fixes
fix: sdk card spacing fixes

src/components/sdks/GithubCard.module.css

@@ -1,3 +1,19 @@
+:root {
+  --bt-card-background-color: linear-gradient(
+    100.66deg,
+    #ffffff 18.43%,
+    #f0f3ff 120.94%
+  );
+}
+
+[data-theme="dark"] {
+  --bt-card-background-color: linear-gradient(
+    273.61deg,
+    #111424 19.2%,
+    #191d32 82.55%
+  );
+}
+
 .metadata {
   display: inline-flex;
   align-items: center;
@@ -11,26 +27,14 @@
 
 .gh-card {
   display: flex !important;
+  place-items: center;
   background: var(--bt-card-background-color);
 }
 
-.repository {
-  display: flex;
-  margin-bottom: 18px;
-  font-family: var(--ifm-font-family-monospace);
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 140%;
-}
-
-.repository svg {
-  margin-right: 6px;
-}
-
-@media only screen and (max-width: 800px) {
-  .repository {
-    place-content: center;
-  }
+.gh-card--logo {
+  background: #fff !important;
+  width: 100px !important;
+  height: 100px !important;
 }
 
 @media only screen and (max-width: 800px) {

src/components/sdks/GithubCard.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 
 import { Button } from "../shared/Button";
 import styles from "./GithubCard.module.css";
+import utils from "./utils.module.css";
 
 import Contributor from "@site/static/img/sdk/github-card/contributor.svg";
 import Star from "@site/static/img/sdk/github-card/star.svg";
@@ -12,6 +13,7 @@ import { Card } from "../shared/Card";
 import { Version } from "../shared/Version";
 import { isValidSdk, SDK } from "../types";
 import { getSdkIcon } from "./utils";
+import clsx from "clsx";
 
 interface GithubCard {
   heading: string;
@@ -75,7 +77,11 @@ export const GithubCard = ({
   return (
     <Card
       hoverable={false}
-      img={<Icon />}
+      img={
+        <div className={clsx([styles["gh-card--logo"], utils["round-border"]])}>
+          <Icon />
+        </div>
+      }
       className={styles["gh-card"]}
       heading={<Card.PrimaryHeader>{heading}</Card.PrimaryHeader>}
       cta={
@@ -85,7 +91,7 @@ export const GithubCard = ({
       }
     >
       <>
-        <div className={styles.repository}>
+        <div className={utils.repository}>
           <Package /> {repository}
         </div>
 

src/components/sdks/SdkCard.module.css

@@ -1,27 +1,9 @@
 .card {
   display: inline-flex;
   align-items: center;
+  place-items: center;
 }
 
 .repository {
-  display: flex;
-  margin-bottom: 18px;
-  font-family: var(--ifm-font-family-monospace);
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 140%;
-}
-
-.repository svg {
-  margin-right: 6px;
-}
-
-@media only screen and (max-width: 800px) {
-  .icon {
-    margin-right: 0;
-  }
-
-  .repository {
-    place-content: center;
-  }
+  margin: 0px !important;
 }

src/components/sdks/SdkCard.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 
 import styles from "./SdkCard.module.css";
+import utils from "./utils.module.css";
 
 import clsx from "clsx";
 import { Card } from "../shared/Card";
@@ -38,12 +39,16 @@ const SdkCard = ({
       hoverable={hoverable}
       className={clsx([className, styles.card])}
       href={href}
-      img={<Icon width="100" height="100" />}
+      img={
+        <div className={utils["round-border"]}>
+          <Icon />
+        </div>
+      }
       cta={cta}
       heading={heading}
     >
       <>
-        <div className={styles.repository}>
+        <div className={clsx([utils.repository, styles.repository])}>
           <Package /> {repository}
         </div>
       </>

src/components/sdks/utils.module.css

@@ -0,0 +1,39 @@
+:root {
+  --bt-sdk-logo-background-color: #fff;
+}
+
+[data-theme="dark"] {
+  --bt-sdk-logo-background-color: var(--bt-sidebar-background-color);
+}
+
+.round-border {
+  border: 1px solid var(--bt-default-border-color);
+  border-radius: 50%;
+  width: 74px;
+  height: 74px;
+  padding: 5px;
+  background: var(--bt-sdk-logo-background-color);
+}
+.round-border svg {
+  width: 100%;
+  height: 100%;
+}
+
+.repository {
+  display: flex;
+  margin-bottom: 18px;
+  font-family: var(--ifm-font-family-monospace);
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 140%;
+}
+
+.repository svg {
+  margin-right: 6px;
+}
+
+@media only screen and (max-width: 800px) {
+  .repository {
+    place-content: center;
+  }
+}

src/components/sdks/utils.ts

@@ -1,14 +1,14 @@
 import { SDK } from "../types";
 
-import Android from "@site/static/img/sdk/sdk-card/android.svg";
-import DotNet from "@site/static/img/sdk/sdk-card/dotNet.svg";
-import Go from "@site/static/img/sdk/sdk-card/go.svg";
-import Ios from "@site/static/img/sdk/sdk-card/ios.svg";
-import JavaScript from "@site/static/img/sdk/sdk-card/javascript.svg";
-import Node from "@site/static/img/sdk/sdk-card/node.svg";
-import Python from "@site/static/img/sdk/sdk-card/python.svg";
-import ReactSvg from "@site/static/img/sdk/sdk-card/react.svg";
-import Terraform from "@site/static/img/sdk/sdk-card/terraform.svg";
+import Android from "@site/static/img/sdk/logos/android.svg";
+import DotNet from "@site/static/img/sdk/logos/dotNet.svg";
+import Go from "@site/static/img/sdk/logos/go.svg";
+import Apple from "@site/static/img/sdk/logos/Apple.svg";
+import JavaScript from "@site/static/img/sdk/logos/javascript.svg";
+import Node from "@site/static/img/sdk/logos/nodejs.svg";
+import Python from "@site/static/img/sdk/logos/python.svg";
+import ReactSvg from "@site/static/img/sdk/logos/react.svg";
+import Terraform from "@site/static/img/sdk/logos/terraform.svg";
 
 export const getSdkIcon = (icon: SDK) =>
   ({
@@ -20,5 +20,5 @@ export const getSdkIcon = (icon: SDK) =>
     [SDK.REACT]: ReactSvg,
     [SDK.JAVASCRIPT]: JavaScript,
     [SDK.ANDROID]: Android,
-    [SDK.IOS]: Ios,
+    [SDK.IOS]: Apple,
   }[icon]);

src/css/bt-variables.scss

@@ -47,20 +47,10 @@
   );
 
   /* Cards */
-  --bt-card-background-color: linear-gradient(
-    100.66deg,
-    #ffffff 18.43%,
-    #f0f3ff 120.94%
-  );
-
   --bt-primary-button-color: #fff;
   --bt-card-border-shadow-hover: 0px 10px 15px -3px rgba(7, 10, 27, 0.05),
     0px 4px 6px -4px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #b9bcd1;
 
-  /* Search */
-
-  --bt-search-border-color: #cfd3e8;
-
   /* intro */
 
   --bt-intro-image-background: url("data:image/svg+xml,%3Csvg width='280' height='280' viewBox='0 0 280 280' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M172.578 140H140M172.578 140H192.125M172.578 140V119.367M172.578 140H226.875M172.578 140V172.578M172.578 140H279M140 140V107.422M140 140H107.422M140 140V172.578M279 140H192.125M279 140V53.125M279 140H226.875M279 140V279H226.875M140 107.422V53.125M140 107.422H172.578M140 107.422V87.875M140 107.422H119.367M140 107.422V1M192.125 140V119.367M279 53.125V1H140M279 53.125H192.125M140 1V53.125M140 1V87.875M140 1H53.125M140 53.125H192.125M192.125 53.125V107.422M192.125 107.422H180.18M192.125 107.422V119.367M172.578 107.422H180.18M172.578 107.422V119.367M180.18 107.422V119.367M180.18 119.367H172.578M180.18 119.367H192.125M107.422 140H53.125M107.422 140V107.422M107.422 140H87.875M107.422 140V160.633M107.422 140H1M140 87.875H119.367M53.125 1H1V140M53.125 1V87.875M1 140H53.125M1 140H87.875M1 140V226.875M53.125 140V87.875M53.125 87.875H107.422M107.422 87.875V99.8203M107.422 87.875H119.367M107.422 107.422V99.8203M107.422 107.422H119.367M107.422 99.8203H119.367M119.367 99.8203V107.422M119.367 99.8203V87.875M140 172.578V192.125M140 172.578H160.633M140 172.578V226.875M140 172.578H107.422M140 172.578V279M140 279V192.125M140 279H226.875M140 279V226.875M140 279H1V226.875M140 192.125H160.633M226.875 279V192.125M226.875 140V192.125M226.875 192.125H172.578M172.578 192.125V180.18M172.578 192.125H160.633M172.578 172.578V180.18M172.578 172.578H160.633M172.578 180.18H160.633M160.633 180.18V172.578M160.633 180.18V192.125M87.875 140V160.633M1 226.875H87.875M140 226.875H87.875M87.875 226.875V172.578M87.875 172.578H99.8203M87.875 172.578V160.633M107.422 172.578H99.8203M107.422 172.578V160.633M99.8203 172.578V160.633M99.8203 160.633H107.422M99.8203 160.633H87.875' stroke='url(%23paint0_radial_773_20104)' stroke-width='1.31132' /%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_773_20104' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(140 140.5) rotate(45) scale(63.6396 86.0615)'%3E%3Cstop stop-color='%23E0E7FF' /%3E%3Cstop offset='1' stop-color='%23E0E7FF' stop-opacity='0' /%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
@@ -121,14 +111,11 @@
   );
 
   /* Cards */
-  --bt-card-background-color: var(--bt-sidebar-background-color);
+
   --bt-primary-button-color: #000;
   --bt-card-border-shadow-hover: 0px 8px 10px rgba(4, 6, 17, 0.2),
     inset 0px 0px 0px 1px rgba(255, 255, 255, 0.18);
 
-  /* Search */
-  --bt-search-border-color: rgba(209, 215, 255, 0.15);
-
   /* intro */
   --bt-intro-image-background: url("data:image/svg+xml,%3Csvg width='280' height='279' viewBox='0 0 280 279' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.2' d='M172.578 139.5H140M172.578 139.5H192.125M172.578 139.5V118.867M172.578 139.5H226.875M172.578 139.5V172.078M172.578 139.5H279M140 139.5V106.922M140 139.5H107.422M140 139.5V172.078M279 139.5H192.125M279 139.5V52.625M279 139.5H226.875M279 139.5V278.5H226.875M140 106.922V52.625M140 106.922H172.578M140 106.922V87.375M140 106.922H119.367M140 106.922V0.5M192.125 139.5V118.867M279 52.625V0.5H140M279 52.625H192.125M140 0.5V52.625M140 0.5V87.375M140 0.5H53.125M140 52.625H192.125M192.125 52.625V106.922M192.125 106.922H180.18M192.125 106.922V118.867M172.578 106.922H180.18M172.578 106.922V118.867M180.18 106.922V118.867M180.18 118.867H172.578M180.18 118.867H192.125M107.422 139.5H53.125M107.422 139.5V106.922M107.422 139.5H87.875M107.422 139.5V160.133M107.422 139.5H1M140 87.375H119.367M53.125 0.5H1V139.5M53.125 0.5V87.375M1 139.5H53.125M1 139.5H87.875M1 139.5V226.375M53.125 139.5V87.375M53.125 87.375H107.422M107.422 87.375V99.3203M107.422 87.375H119.367M107.422 106.922V99.3203M107.422 106.922H119.367M107.422 99.3203H119.367M119.367 99.3203V106.922M119.367 99.3203V87.375M140 172.078V191.625M140 172.078H160.633M140 172.078V226.375M140 172.078H107.422M140 172.078V278.5M140 278.5V191.625M140 278.5H226.875M140 278.5V226.375M140 278.5H1V226.375M140 191.625H160.633M226.875 278.5V191.625M226.875 139.5V191.625M226.875 191.625H172.578M172.578 191.625V179.68M172.578 191.625H160.633M172.578 172.078V179.68M172.578 172.078H160.633M172.578 179.68H160.633M160.633 179.68V172.078M160.633 179.68V191.625M87.875 139.5V160.133M1 226.375H87.875M140 226.375H87.875M87.875 226.375V172.078M87.875 172.078H99.8203M87.875 172.078V160.133M107.422 172.078H99.8203M107.422 172.078V160.133M99.8203 172.078V160.133M99.8203 160.133H107.422M99.8203 160.133H87.875' stroke='url(%23paint0_radial_773_20388)' /%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_773_20388' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(140 140) rotate(45) scale(63.6396 86.0615)'%3E%3Cstop stop-color='%23E0E7FF' /%3E%3Cstop offset='1' stop-color='%23E0E7FF' stop-opacity='0' /%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
 }

src/css/navbar.scss

@@ -4,7 +4,7 @@
 
   & .navbar__search {
     & .navbar__search-input {
-      border: 1px solid var(--bt-search-border-color);
+      border: 1px solid var(--bt-default-border-color);
       border-radius: 4px;
     }
   }