feat: WEB-498 Add compliance icons to footer (#6117)

* initial version for docusaurus footer with compliance logos * Hide iso and soc logos * Add links to trust prisma on compliance logos
prisma · Jun 24, 2024 · cbfbdc1 · cbfbdc1
1 parent 9b3f4e0
commit cbfbdc1
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 114 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -187,6 +187,51 @@ const config: Config = {
     footer: {
       style: "dark",
       links: [
+        {
+          title: "socials",
+          items: [
+            {
+              label: " ",
+              href: "https://discord.gg/KQyTW2H5ca",
+              customProps: {
+                icon: "fa-brands fa-discord",
+                internal: true,
+              },
+            },
+            {
+              label: " ",
+              href: "https://x.com/prisma",
+              customProps: {
+                icon: "fa-brands fa-x-twitter",
+                internal: true,
+              },
+            },
+            {
+              label: " ",
+              href: "https://www.youtube.com/prismadata",
+              customProps: {
+                icon: "fa-brands fa-youtube",
+                internal: true,
+              },
+            },
+            {
+              label: " ",
+              href: "https://pris.ly/whatsapp",
+              customProps: {
+                icon: "fa-brands fa-whatsapp",
+                internal: true,
+              },
+            },
+            {
+              label: " ",
+              href: "https://github.com/prisma",
+              customProps: {
+                icon: "fa-brands fa-github",
+                internal: true,
+              },
+            },
+          ],
+        },
         {
           title: "Product",
           items: [
@@ -380,50 +425,6 @@ const config: Config = {
             },
           ],
         },
-        {
-          items: [
-            {
-              label: " ",
-              href: "https://discord.gg/KQyTW2H5ca",
-              customProps: {
-                icon: "fa-brands fa-discord",
-                internal: true,
-              },
-            },
-            {
-              label: " ",
-              href: "https://x.com/prisma",
-              customProps: {
-                icon: "fa-brands fa-x-twitter",
-                internal: true,
-              },
-            },
-            {
-              label: " ",
-              href: "https://www.youtube.com/prismadata",
-              customProps: {
-                icon: "fa-brands fa-youtube",
-                internal: true,
-              },
-            },
-            {
-              label: " ",
-              href: "https://pris.ly/whatsapp",
-              customProps: {
-                icon: "fa-brands fa-whatsapp",
-                internal: true,
-              },
-            },
-            {
-              label: " ",
-              href: "https://github.com/prisma",
-              customProps: {
-                icon: "fa-brands fa-github",
-                internal: true,
-              },
-            },
-          ],
-        },
       ],
       logo: {
         srcDark: "img/logo-white.svg",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -734,6 +734,10 @@ hr {
   }
 }
 
+.footer__item .fa-brands {
+  font-size: 24px !important;
+}
+
 .internal>i {
   display: none;
 }
@@ -748,60 +752,6 @@ hr {
   height: 28px;
 }
 
-.footer__col:last-child {
-  position: absolute;
-  height: var(--footer-bottom-height);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0;
-  width: auto;
-  top: calc(100% + 100px);
-  left: 0;
-}
-
-@media (min-width: 520px) {
-  .footer__col:last-child {
-    top: calc(100% + 20px);
-    right: 0;
-    left: unset;
-  }
-}
-
-@media (min-width: 768px) {
-  .footer__col:last-child {
-    top: calc(100% + 80px);
-  }
-}
-
-@media (min-width: 1040px) {
-  .footer__col:last-child {
-    top: calc(100% + 120px);
-  }
-}
-
-.footer__col:last-child>.footer__title {
-  display: none;
-}
-
-.footer__col:last-child>ul {
-  display: flex;
-  gap: 20px;
-  font-size: 1.375rem;
-  color: white;
-}
-
-.footer__col:last-child .footer__item a {
-  font-size: 1.375rem;
-  color: white;
-}
-
-.footer__col:last-child,
-.footer__item a:hover {
-  color: var(--indigo-link-color);
-  text-decoration: none;
-}
-
 .footer__copyright {
   text-align: left;
   font-size: 1.125rem;

diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx
@@ -5,9 +5,11 @@ import React from "react";
 import styles from "./styles.module.scss";
 
 export default function FooterLayout({ style, links, logo, copyright }) {
+  console.log(links)
   return (
     <footer className={clsx(styles[`footer--dark`], "footer", "footer--dark")}>
       <div className={clsx(styles.container, "container", "container-fluid")}>
+        {logo && <div className={clsx(styles.logo, "margin-bottom--sm")}>{logo}</div>}
         {links}
         <img
           className="footer-scarf"
@@ -19,8 +21,17 @@ export default function FooterLayout({ style, links, logo, copyright }) {
         </div>
         {(logo || copyright) && (
           <div className={clsx(styles[`footer__bottom`], "footer__bottom", "text--center")}>
-            {logo && <div className="margin-bottom--sm">{logo}</div>}
             {copyright}
+            <div className={styles.complianceLogos}>
+              <a href="https://trust.prisma.io/" target="__blank" rel="openeer noreferrer" aria-label="Prisma Trust">
+                <img src={"/img/icons/gdpr.svg"} alt="gdpr" width={35} height={35}/>
+              </a>
+              <a href="https://trust.prisma.io/" target="__blank" rel="openeer noreferrer" aria-label="Prisma Trust">
+                <img src={"/img/icons/hipaa.svg"} alt="hipaa" width={62} height={29}/>
+              </a>
+              {/* <img src={"/img/icons/iso27.svg"} alt="iso" width={73} height={27}/>
+              <img src={"/img/icons/soc2.svg"} alt="soc" width={60} height={27}/> */}
+            </div>
           </div>
         )}
       </div>

diff --git a/src/theme/Footer/Layout/styles.module.scss b/src/theme/Footer/Layout/styles.module.scss
@@ -6,6 +6,27 @@
   letter-spacing: 0.08em;
   margin-top: 0px;
 }
+
+.row {
+  display: flex;
+  > div:first-child{
+    position: absolute;
+  }
+}
+
+.logo {
+  position: absolute;
+  height: 40.3px;
+  width: 129px;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  > a {
+    opacity: 1;
+  }
+}
+
 @media only screen and (min-width: 768px) {
   .newsletterRow {
     display: flex;
@@ -38,8 +59,8 @@
 }
 .container {
   --ifm-container-width-xl: 1248px;
-  padding: 40px 2rem 100px;
-  max-width: 1248px;
+  padding: 40px 24px 100px;
+  max-width: 1288px;
   margin: auto;
   width: 100%;
 }
@@ -57,14 +78,26 @@
 }
 
 .footer__bottom {
-  > div:not(.footer__copyright) {
-    margin-bottom: 0 !important;
-    display: flex;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+  gap: 24px;
+  @media (min-width: 768px) {
     align-items: center;
-    justify-content: flex-start;
+    flex-direction: row;
   }
-
-  > div:not(.footer__copyright) > a {
-    opacity: 1;
+  .complianceLogos {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    align-items: center;
+    @media (min-width: 768px) {
+        width: fit-content;
+        gap: 56px;
+    }
+    img {
+      margin: 0;
+    }
   }
 }
diff --git a/src/theme/Footer/Links/MultiColumn/index.tsx b/src/theme/Footer/Links/MultiColumn/index.tsx
@@ -32,11 +32,13 @@ function Column({ column }: { column: ColumnType }) {
     (item, i) => item?.customProps?.dropdown === "legal"
   );
 
+  console.log(column)
+
   return (
-    <div className={clsx(styles.col, "col footer__col")}>
-      <div className="footer__title">{column.title}</div>
-      <ul className="footer__items clean-list">
-        {/* @ts-ignore */}
+    <div className={clsx(styles.col, "col footer__col", column.title === "socials" && styles.socialColWrapper)}>
+      {column.title !== "socials" && <div className="footer__title">{column.title}</div>}
+      {/* @ts-ignore */}
+      <ul className={clsx("footer__items clean-list", column.title === "socials" && styles.socialCol)}>
         {column.items.map(
           (item, i) => !item?.customProps?.dropdown && <ColumnLinkItem key={i} item={item} />
         )}

diff --git a/src/theme/Footer/Links/MultiColumn/styles.module.scss b/src/theme/Footer/Links/MultiColumn/styles.module.scss
@@ -9,8 +9,26 @@
 }
 
 .col {
-  @media (max-width: 996px) {
-    flex-basis: calc(50% - 4px);
+  flex: 1 0 !important;
+  @media (max-width: 768px) {
+    flex-basis: calc(50% - 4px) !important;
     padding: 0;
   }
 }
+
+.socialCol {
+  @media (max-width: 940px) {
+    margin: 0;
+    justify-content: flex-end;
+  }
+  margin: 64px -8px 0 -8px;
+  padding: 0;
+  display: flex;
+  gap: 16px;
+}
+
+.socialColWrapper {
+  @media (max-width: 940px) {
+    flex-basis: 100% !important;
+  }
+}