Merge pull request #1052 from privacy-scaling-explorations/feat/ui-kit

feat(website): update ui based on feedback

website/package.json

@@ -21,6 +21,7 @@
     "@docusaurus/core": "^3.1.0",
     "@docusaurus/preset-classic": "^3.1.0",
     "@docusaurus/theme-classic": "3.1.0",
+    "@docusaurus/theme-common": "^3.1.0",
     "@easyops-cn/docusaurus-search-local": "^0.40.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.1.0",

website/src/components/HomepageFeatures/index.tsx

@@ -1,22 +1,28 @@
+import { useColorMode } from "@docusaurus/theme-common";
 import Heading from "@theme/Heading";
 import clsx from "clsx";
 
 import boxImage from "../../../static/img/box.png";
+import boxDarkImage from "../../../static/img/box_dark.png";
 import chainImage from "../../../static/img/chain.png";
+import chainDarkImage from "../../../static/img/chain_dark.png";
 import chartImage from "../../../static/img/chart.png";
+import chartDarkImage from "../../../static/img/chart_dark.png";
 
 import styles from "./styles.module.css";
 
 interface FeatureItem {
   title: string;
   img: string;
+  imgDark: string;
   description: JSX.Element;
 }
 
 const FeatureList: FeatureItem[] = [
   {
     title: "Highly secure",
     img: boxImage as string,
+    imgDark: boxDarkImage as string,
     description: (
       <>
         MACI was designed to be a secure voting system. It is built using smart contracts on the Ethereum blockchain,
@@ -27,6 +33,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: "Protects privacy",
     img: chainImage as string,
+    imgDark: chainDarkImage as string,
     description: (
       <>
         With MACI, votes are encrypted before submitting them on-chain to ensure that your privacy is preserved when
@@ -37,6 +44,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: "Powered by zk-SNARKs",
     img: chartImage as string,
+    imgDark: chartDarkImage as string,
     description: (
       <>
         MACI is powered by zk-SNARKs, a cutting edge cryptographic technology that ensures votes are counted correctly
@@ -46,19 +54,25 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-const Feature = ({ title, img, description }: FeatureItem) => (
-  <div className={clsx("col col--4")}>
-    <div className="text--center">
-      <img alt={title} className={styles.featureSvg} src={img} />
-    </div>
+const Feature = ({ title, img, imgDark, description }: FeatureItem) => {
+  const { isDarkTheme } = useColorMode();
+
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <img alt={title} className={styles.featureImg} src={isDarkTheme ? imgDark : img} />
+      </div>
 
-    <div className="text--center padding-horiz--md">
-      <Heading as="h3">{title}</Heading>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3" className={styles.featureTitle}>
+          {title}
+        </Heading>
 
-      <p>{description}</p>
+        <p>{description}</p>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 const HomepageFeatures = (): JSX.Element => (
   <section className={styles.features}>

website/src/components/HomepageFeatures/styles.module.css

@@ -5,6 +5,12 @@
   width: 100%;
 }
 
-.featureSvg {
+.featureImg {
   width: 200px;
 }
+
+.featureTitle {
+  text-decoration: underline;
+  text-decoration-color: var(--ifm-link-color);
+  text-underline-offset: 0.5rem;
+}

website/src/css/custom.css

@@ -28,7 +28,7 @@
   --ifm-footer-background-color: #020203;
   --ifm-footer-color: #ffffff;
   --ifm-footer-link-color: #ffffff;
-  --ifm-footer-link-hover-color: #ffffff;
+  --ifm-footer-link-hover-color: #579bea;
   --ifm-link-color: #579bea;
   --ifm-color-hero: #fcfcfc;
   --ifm-font-family-base: DMSans;
@@ -59,6 +59,21 @@ h2 {
   color: var(--ifm-color-primary);
 }
 
+h3 {
+  font-family: ShareTechMono;
+  color: var(--ifm-color-primary);
+}
+
+h4 {
+  font-family: ShareTechMono;
+  color: var(--ifm-color-primary);
+  font-size: 1.25rem;
+}
+
+nav {
+  font-family: ShareTechMono;
+}
+
 @media screen and (max-width: 996px) {
   h1 {
     font-size: 2.5rem;

website/src/pages/index.module.css

@@ -9,23 +9,30 @@
   overflow: hidden;
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%),
     url("../../static/img/hero.svg");
-  background-position: center;
+  background-position: 0% 75%;
   background-repeat: no-repeat;
   background-size: cover;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   padding: 8rem;
+  color: var(--ifm-color-hero);
+  font-family: ShareTechMono;
+  gap: 1rem;
 }
 
 .heroTitle {
   border: 2px solid white;
   border-radius: 4px;
-  padding: 0rem 0.5rem;
+  padding: 0rem 0.75rem;
+  font-size: 2.5rem;
+  line-height: 3.5rem;
+  letter-spacing: -0.1rem;
 }
 
-.heroColor {
-  color: var(--ifm-color-hero);
+.heroTagline {
+  font-size: 4.5rem;
+  line-height: 5rem;
 }
 
 .buttons {
@@ -46,9 +53,9 @@
 }
 
 .borderBlue {
-  width: max-content;
-  border-bottom: 3px solid var(--ifm-link-color);
-  box-sizing: content-box;
+  text-decoration: underline;
+  text-decoration-color: var(--ifm-link-color);
+  text-underline-offset: 0.5rem;
   margin-bottom: 1rem;
 }
 
@@ -60,4 +67,15 @@
   .introduction {
     padding: 1.5rem;
   }
+
+  .heroTitle {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+    padding: 0rem 0.5rem;
+  }
+
+  .heroTagline {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
 }

website/src/pages/index.tsx

@@ -13,15 +13,13 @@ interface HomepageHeaderProps {
 
 const HomepageHeader = ({ tagline, title }: HomepageHeaderProps) => (
   <header className={clsx("hero hero--dark", styles.heroBanner)}>
-    <div className={styles.heroTitle}>
-      <h2 className={styles.heroColor}>{title}</h2>
-    </div>
+    <div className={styles.heroTitle}>{title}</div>
 
-    <h1 className={styles.heroColor}>
+    <div className={styles.heroTagline}>
       {tagline}
 
       <span className={styles.blue}>.</span>
-    </h1>
+    </div>
   </header>
 );