Merge pull request #74 from kleros/refactor/rest-responsive-pages

Refactor/rest responsive pages

Author: alcercu

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx

@@ -1,24 +1,18 @@
-"use client";
-
-import Image from "next/image";
-
-import { useScreenSize } from "@/hooks/useScreenSize";
+import ResponsiveImage from "@/components/ResponsiveImage";
 
 import { ForLawyersPageKlerosEnterpiseSectionType } from "../../queries/kleros-enterprise-section";
 
 import HighlightedText from "./HighlightedText";
 
 type IDisputeResolutionProcess = Pick<
   ForLawyersPageKlerosEnterpiseSectionType["forLawyersPageKlerosEnterpriseSection"],
-  "disputeResolutionProcessHeader" | "processDiagram" | "processDiagramDesktop"
+  "disputeResolutionProcessHeader" | "processDiagram"
 >;
 
 const DisputeResolutionProcess: React.FC<IDisputeResolutionProcess> = ({
   disputeResolutionProcessHeader,
   processDiagram,
-  processDiagramDesktop,
 }) => {
-  const screenSize = useScreenSize();
   return (
     <div className="flex flex-col gap-8">
       <HighlightedText
@@ -28,21 +22,20 @@ const DisputeResolutionProcess: React.FC<IDisputeResolutionProcess> = ({
       />
 
       <div className="relative flex w-full justify-center">
-        {screenSize === "lg" ? (
-          <Image
-            src={processDiagramDesktop.url}
-            width={1182}
-            height={707}
-            alt="Process diagram"
-          />
-        ) : (
-          <Image
-            src={processDiagram.url}
-            width={342}
-            height={864}
-            alt="Process diagram"
-          />
-        )}
+        <ResponsiveImage
+          mobileProps={{
+            src: processDiagram.mobile.url,
+            alt: "Process diagram",
+            width: 342,
+            height: 864,
+          }}
+          desktopProps={{
+            src: processDiagram.desktop.url,
+            alt: "Process diagram",
+            width: 1182,
+            height: 707,
+          }}
+        />
       </div>
     </div>
   );

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx

@@ -22,7 +22,6 @@ const KlerosEnterpriseSection: React.FC = async () => {
     cards,
     disputeResolutionProcessHeader,
     processDiagram,
-    processDiagramDesktop,
     table,
     arrowLink,
   } = (
@@ -56,7 +55,6 @@ const KlerosEnterpriseSection: React.FC = async () => {
         {...{
           disputeResolutionProcessHeader,
           processDiagram,
-          processDiagramDesktop,
         }}
       />
 

frontend/src/app/for-lawyers/queries/kleros-enterprise-section.ts

@@ -33,11 +33,12 @@ export const forLawyersPageKlerosEnterpriseSectionQuery = gql`
       }
 
       processDiagram {
-        url
-      }
-
-      processDiagramDesktop {
-        url
+        mobile {
+          url
+        }
+        desktop {
+          url
+        }
       }
 
       table {
@@ -90,11 +91,10 @@ export type ForLawyersPageKlerosEnterpiseSectionType = {
     cards: Card[];
     arrowLink: ArrowLink;
     disputeResolutionProcessHeader: HighlightedText;
+
     processDiagram: {
-      url: string;
-    };
-    processDiagramDesktop: {
-      url: string;
+      mobile: { url: string };
+      desktop: { url: string };
     };
     table: Table;
   };

frontend/src/app/home/components/Hero.tsx

@@ -9,6 +9,8 @@ import { request } from "@/utils/graphQLClient";
 
 import { HeroQueryType, heroQuery } from "../queries/hero";
 
+import TokenStats from "./TokenStats";
+
 const Hero: React.FC = async () => {
   const heroData = await request<HeroQueryType>(heroQuery);
   const {
@@ -18,10 +20,11 @@ const Hero: React.FC = async () => {
     secondaryButton,
     arrowLink,
     background,
+    tokenStats,
   } = heroData.homePageHero;
 
   return (
-    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
+    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-20">
       <div className="space-y-8">
         <h1 className="text-2xl font-medium lg:text-3xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
@@ -44,6 +47,7 @@ const Hero: React.FC = async () => {
           text={arrowLink.text}
           className="[&>span]:text-base [&>span]:text-primary-text"
         />
+        <TokenStats {...{ tokenStats }} />
       </div>
       <Image
         src={background.url}

frontend/src/app/home/components/HowKlerosWorks.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-import Image from "next/image";
-
+import ResponsiveImage from "@/components/ResponsiveImage";
 import { request } from "@/utils/graphQLClient";
 
 import {
@@ -25,12 +24,21 @@ const HowKlerosWorks: React.FC = async () => {
         <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
         <p className="text-base lg:text-lg">{subtitle}</p>
       </div>
-      <Image
-        className="mx-auto mt-12"
-        src={explainer.url}
-        alt="Explainer"
-        width="294"
-        height="798"
+      <ResponsiveImage
+        mobileProps={{
+          className: "mx-auto mt-12",
+          src: explainer.mobile.url,
+          alt: "Explainer",
+          width: 294,
+          height: 798,
+        }}
+        desktopProps={{
+          className: "mx-auto mt-12",
+          src: explainer.desktop.url,
+          alt: "Explainer",
+          width: 1182,
+          height: 388,
+        }}
       />
     </div>
   );

frontend/src/app/home/components/TokenStats.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { useScreenSize } from "@/hooks/useScreenSize";
+
+import { HeroQueryType } from "../queries/hero";
+
+const TokenStats: React.FC<{
+  tokenStats: HeroQueryType["homePageHero"]["tokenStats"];
+}> = ({ tokenStats }) => {
+  const screenSize = useScreenSize();
+  return screenSize === "lg" ? (
+    <div className="flex flex-wrap gap-16 pt-28">
+      {tokenStats.map(({ key, primaryValue, secondaryValue }) => (
+        <div key={key} className="flex flex-col">
+          <div className="flex flex-row">
+            <h3 className="text-2xl font-medium">{primaryValue}</h3>
+            <h3 className="text-2xl text-primary-blue">{secondaryValue}</h3>
+          </div>
+          <p className="font-medium">{key}</p>
+        </div>
+      ))}
+    </div>
+  ) : null;
+};
+
+export default TokenStats;

frontend/src/app/home/queries/hero.tsx

@@ -23,6 +23,11 @@ export const heroQuery = gql`
           url
         }
       }
+      tokenStats {
+        key
+        primaryValue
+        secondaryValue
+      }
       background {
         url
       }
@@ -52,6 +57,11 @@ export type HeroQueryType = {
         url: string;
       };
     };
+    tokenStats: Array<{
+      key: string;
+      primaryValue: string;
+      secondaryValue: string;
+    }>;
     background: {
       url: string;
     };

frontend/src/app/home/queries/how-kleros-works.ts

@@ -7,7 +7,12 @@ export const homeHowKlerosWorksQuery = gql`
       title
       subtitle
       explainer {
-        url
+        mobile {
+          url
+        }
+        desktop {
+          url
+        }
       }
     }
   }
@@ -19,7 +24,12 @@ export type HomeHowKlerosWorksQueryType = {
     title: string;
     subtitle: string;
     explainer: {
-      url: string;
+      mobile: {
+        url: string;
+      };
+      desktop: {
+        url: string;
+      };
     };
   };
 };

frontend/src/components/Community/hero.tsx

@@ -16,7 +16,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-[277px] pt-44 lg:px-32 lg:pb-[331px]">
       <div className="space-y-8">
-        <h1 className="pt-1 text-3xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
         </h1>
         <p className="text-lg">{subtitle}</p>

frontend/src/components/Cooperative/MemberSection/index.tsx

@@ -9,12 +9,14 @@ interface IMemberSection {
 const MemberSection: React.FC<IMemberSection> = ({ memberData }) => {
   return (
     <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="mb-8 text-2xl font-medium text-primary-text lg:text-3xl">
+      <h1 className="mb-8 text-xl font-medium text-primary-text lg:text-3xl">
         {memberData.header}
       </h1>
-      <p className="mb-16 text-lg text-secondary-text">{memberData.subtitle}</p>
+      <p className="mb-16 text-secondary-text lg:text-lg">
+        {memberData.subtitle}
+      </p>
       <LearnMore {...memberData.learnMoreSection} />
-      <h1 className="mb-8 mt-16 text-2xl font-medium text-primary-text lg:text-3xl">
+      <h1 className="mb-8 mt-16 text-xl font-medium text-primary-text lg:text-3xl">
         {memberData.secondaryHeader}
       </h1>
       <ExternalLink

frontend/src/components/Cooperative/ReportSection/ReportCard.tsx

@@ -66,10 +66,10 @@ const ReportCard: React.FC<IReportCard> = ({
       )}
     >
       <div className="flex flex-col items-start gap-8">
-        <h2 className="text-2xl font-medium text-primary-text md:text-3xl">
+        <h2 className="text-xl font-medium text-primary-text md:text-3xl">
           {title}
         </h2>
-        <p className="text-lg text-secondary-text">{subtitle}</p>
+        <p className="text-secondary-text lg:text-lg">{subtitle}</p>
 
         <DropdownContainer
           {...{

frontend/src/components/Cooperative/hero.tsx

@@ -17,7 +17,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-52 pt-44 lg:px-32 lg:pb-56 lg:pt-52">
       <div className="space-y-8">
-        <h1 className="pt-1 text-3xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
         </h1>
         <p className="max-w-[685px] text-lg">{subtitle}</p>

frontend/src/components/Earn/TabSection/index.tsx

@@ -1,7 +1,3 @@
-"use client";
-
-import { useMemo, useState } from "react";
-
 import Tab from "@/components/Tab";
 import { TabSectionQueryType } from "@/queries/earn/tabs-data";
 
@@ -13,30 +9,26 @@ interface ITabSection {
 }
 
 const TabSection: React.FC<ITabSection> = ({ tabsData }) => {
-  const [activeTab, setActiveTab] = useState(0);
-
-  const tabItems = useMemo(
-    () => [
-      { text: tabsData.earnPageBecomeAJurorTabContent.tabName, value: 0 },
-      { text: tabsData.earnPageBecomeACuratorTabContent.tabName, value: 1 },
-    ],
-    [tabsData],
-  );
-
   return (
     <div className="bg-background-2 px-6 py-12 lg:px-32">
       <Tab
-        items={tabItems}
-        currentValue={activeTab}
-        callback={(val: number) => {
-          setActiveTab(val);
-        }}
+        items={[
+          {
+            text: tabsData.earnPageBecomeAJurorTabContent.tabName,
+            children: (
+              <JurorTabContent {...tabsData.earnPageBecomeAJurorTabContent} />
+            ),
+          },
+          {
+            text: tabsData.earnPageBecomeACuratorTabContent.tabName,
+            children: (
+              <CuratorTabContent
+                {...tabsData.earnPageBecomeACuratorTabContent}
+              />
+            ),
+          },
+        ]}
       />
-      {activeTab === 1 ? (
-        <CuratorTabContent {...tabsData.earnPageBecomeACuratorTabContent} />
-      ) : (
-        <JurorTabContent {...tabsData.earnPageBecomeAJurorTabContent} />
-      )}
     </div>
   );
 };

frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-import Image from "next/image";
-
+import ResponsiveImage from "@/components/ResponsiveImage";
 import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
 
 interface IHeader {
@@ -17,11 +16,19 @@ const Header: React.FC<IHeader> = ({ useCasesData }) => {
       <p className="mb-12 text-secondary-text lg:mb-16 lg:text-xl">
         {useCasesData.useCaseDescription}
       </p>
-      <Image
-        src={useCasesData.useCaseBanner.url}
-        alt="UseCaseBanner mobile"
-        width="400"
-        height="835"
+      <ResponsiveImage
+        mobileProps={{
+          src: useCasesData.useCaseBanner.mobile.url,
+          alt: "UseCaseBanner mobile",
+          width: 400,
+          height: 835,
+        }}
+        desktopProps={{
+          src: useCasesData.useCaseBanner.desktop.url,
+          alt: "UseCaseBanner mobile",
+          width: 1182,
+          height: 388,
+        }}
       />
     </div>
   );