Make text inside logos consistent in size

opentofu · Sep 18, 2023 · 634a302 · 634a302
1 parent a4ad9fa
commit 634a302
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -247,16 +247,27 @@ const config = {
       Gruntwork: {
         dark: "/logos/gruntwork-dark.svg",
         light: "/logos/gruntwork-light.svg",
+        textRatio: 1,
       },
       Spacelift: {
         dark: "/logos/spacelift-dark.svg",
         light: "/logos/spacelift-light.svg",
+        textRatio: 2.1,
+      },
+      env0: {
+        dark: "/logos/env0-dark.svg",
+        light: "/logos/env0-light.svg",
+        textRatio: 0.9,
+      },
+      Scalr: {
+        dark: "/logos/scalr-dark.svg",
+        light: "/logos/scalr-light.svg",
+        textRatio: 1.1,
       },
-      env0: { dark: "/logos/env0-dark.svg", light: "/logos/env0-light.svg" },
-      Scalr: { dark: "/logos/scalr-dark.svg", light: "/logos/scalr-light.svg" },
       Harness: {
         dark: "/logos/harness-dark.svg",
         light: "/logos/harness-light.svg",
+        textRatio: 1.1,
       },
     },
   },

diff --git a/src/components/SupportersList/index.tsx b/src/components/SupportersList/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import clsx from "clsx";
 
 type SupportersListProps = {
   list: {
@@ -20,7 +21,10 @@ export default function SupportersList({ list }: SupportersListProps) {
     <div className="mt-6 md:mt-12 mb-6 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl mx-auto w-full text-gray-600 dark:text-gray-500">
       {list.map((supporter, index) => (
         <div
-          className="py-3 md:py-6 border-b dark:border-gray-800 border-gray-200 flex gap-4 justify-between items-center"
+          className={clsx(
+            "border-b dark:border-gray-800 border-gray-200 flex gap-4 justify-between items-center",
+            logos[supporter.name] ? "py-2 md:py-4" : "py-3 md:py-6"
+          )}
           key={index}
         >
           <Link
@@ -39,8 +43,9 @@ export default function SupportersList({ list }: SupportersListProps) {
                   "--dark-img": `url('${useBaseUrl(
                     logos[supporter.name].dark
                   )}')`,
+                  height: `calc(${logos[supporter.name].textRatio} * 18px)`,
                 }}
-                className="w-28 h-8 [background-image:--light-img] dark:[background-image:--dark-img] bg-no-repeat bg-center"
+                className="w-28 [background-image:--light-img] dark:[background-image:--dark-img] bg-no-repeat bg-center"
               />
             ) : (
               supporter.name