fix(frontend): add more feedback

alcercu · alcercu · commit f3b24bef5f94 · 2025-04-07T15:52:34.000+02:00
diff --git a/frontend/src/app/enterprise/components/KlerosEnterpriseSection/HighlightedText.tsx b/frontend/src/app/enterprise/components/KlerosEnterpriseSection/HighlightedText.tsx
@@ -1,48 +1,14 @@
-import clsx from "clsx";
+import _HighlightedText from "@/components/HighlightedText";
 
 import { HighlightedText as IHighlightedText } from "../../queries/kleros-enterprise-section";
 
 const HighlightedText: React.FC<
   IHighlightedText & { fullTextStyle?: string; highlightedTextStyle?: string }
 > = ({ fullText, highlightedText, fullTextStyle, highlightedTextStyle }) => {
-  const FullText = (
-    <span
-      className={clsx(
-        "text-base font-normal text-secondary-text lg:text-lg lg:font-medium",
-        fullTextStyle,
-      )}
-    >
-      {fullText}
-    </span>
-  );
-  if (!highlightedText) return FullText;
-
-  const index = fullText.indexOf(highlightedText);
-
-  if (index === -1) return FullText;
-
-  const beforeMatch = fullText.slice(0, index);
-  const match = fullText.slice(index, index + highlightedText.length);
-  const afterMatch = fullText.slice(index + highlightedText.length);
-
   return (
-    <span
-      className={clsx(
-        "text-base font-normal text-secondary-text lg:text-lg lg:font-medium",
-        fullTextStyle,
-      )}
-    >
-      {beforeMatch}
-      <span
-        className={clsx(
-          "text-base font-normal text-primary-purple lg:text-lg lg:font-medium",
-          highlightedTextStyle,
-        )}
-      >
-        {match}
-      </span>
-      {afterMatch}
-    </span>
+    <_HighlightedText
+      {...{ fullText, highlightedText, fullTextStyle, highlightedTextStyle }}
+    />
   );
 };
 
diff --git a/frontend/src/app/enterprise/components/KlerosForGovernments/index.tsx b/frontend/src/app/enterprise/components/KlerosForGovernments/index.tsx
@@ -1,4 +1,7 @@
+import clsx from "clsx";
+
 import Card from "@/components/CtaCard";
+import HighlightedText from "@/components/HighlightedText";
 import Quote from "@/components/Quote";
 import { request } from "@/utils/graphQLClient";
 
@@ -10,32 +13,39 @@ import {
   ICCCardsSection,
   ICCLongText,
   ICCQuote,
+  ICCHightlightText,
 } from "./queries";
 
 const ForGovernments: React.FC = async () => {
   const sections = (await request<IForGovernmentsQuery>(forGovernmentsQuery))
     .enterprise.GovernmentSection;
-  const { text } = getBlock<ICCText>(sections, "ComponentContentText");
-  const { longtext } = getBlock<ICCLongText>(
+  const [{ fullText, highlightedText }] = getBlock<ICCHightlightText>(
     sections,
-    "ComponentContentLongText",
+    "ComponentContentHighlightText",
   );
-  const { cards } = getBlock<ICCCardsSection>(
+  const [{ longtext }] = getBlock<ICCLongText>(
     sections,
-    "ComponentContentCardsSection",
+    "ComponentContentLongText",
   );
-  const quote = getBlock<ICCQuote>(sections, "ComponentContentQuote");
+  const [{ text }] = getBlock<ICCText>(sections, "ComponentContentText");
+  const [{ cards: objectivesCards }, { cards: disputeTypesCards }] =
+    getBlock<ICCCardsSection>(sections, "ComponentContentCardsSection");
+  const [quote] = getBlock<ICCQuote>(sections, "ComponentContentQuote");
 
   return (
     <div
       className={"flex flex-col gap-20 px-6 py-12 lg:gap-28 lg:px-32 lg:py-24"}
     >
       <div className="space-y-6">
-        <span className="text-xl font-medium lg:text-2xl">{text}</span>
+        <HighlightedText
+          {...{ fullText, highlightedText }}
+          fullTextStyle="!text-primary-text !text-xl !font-medium lg:!text-2xl"
+          highlightedTextStyle="!text-xl !font-medium lg:!text-2xl"
+        />
         <p className="lg:text-lg">{longtext}</p>
       </div>
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {cards.map((card) => (
+        {objectivesCards.map((card) => (
           <Card
             key={card.title}
             title={card.title}
@@ -45,6 +55,24 @@ const ForGovernments: React.FC = async () => {
         ))}
       </div>
       <Quote {...quote} />
+      <div>
+        <h3 className="mb-12 text-lg font-medium text-primary-text lg:text-xl">
+          {text}
+        </h3>
+        <div className="flex flex-wrap gap-4">
+          {disputeTypesCards.map((card) => (
+            <div
+              key={card.title}
+              className={clsx(
+                "text-md rounded-2xl border border-stroke bg-background-2 p-6",
+                "lg:text-lg",
+              )}
+            >
+              {card.title}
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/app/enterprise/components/KlerosForGovernments/queries.ts b/frontend/src/app/enterprise/components/KlerosForGovernments/queries.ts
@@ -5,6 +5,10 @@ export const forGovernmentsQuery = gql`
     enterprise {
       GovernmentSection {
         __typename
+        ... on ComponentContentHighlightText {
+          fullText
+          highlightedText
+        }
         ... on ComponentContentText {
           text
         }
@@ -40,6 +44,12 @@ export const forGovernmentsQuery = gql`
   }
 `;
 
+export type ICCHightlightText = {
+  __typename: "ComponentContentHighlightText";
+  fullText: string;
+  highlightedText: string;
+};
+
 export type ICCText = {
   __typename: "ComponentContentText";
   text: string;
@@ -79,6 +89,7 @@ export type ICCQuote = {
 };
 
 type GovernmentSectionBlock =
+  | ICCHightlightText
   | ICCText
   | ICCLongText
   | ICCCardsSection
@@ -93,6 +104,6 @@ export type IForGovernmentsQuery = {
 export function getBlock<T extends GovernmentSectionBlock>(
   blocks: GovernmentSectionBlock[],
   typename: T["__typename"],
-): T {
-  return blocks.find((block) => block.__typename === typename) as T;
+): T[] {
+  return blocks.filter((block) => block.__typename === typename) as T[];
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -42,7 +42,7 @@ export default async function RootLayout({
       <body className="min-w-80 bg-background-1 antialiased">
         <main className={clsx(urbanist.className)}>
           <Navbar {...{ navbarData }} />
-          <div className="mx-auto max-w-screen-2xl"> {children} </div>
+          <div className="mx-auto max-w-[1800px]"> {children} </div>
           <Footer />
         </main>
       </body>
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -20,7 +20,7 @@ const Footer: React.FC = async () => {
     cta: result.footerSubscribeCta,
   }));
   return (
-    <div className="mx-auto max-w-screen-2xl">
+    <div className="mx-auto max-w-[1800px]">
       <div className={"bg-background-dark py-16 md:px-16 xl:px-32"}>
         <div
           className={clsx(
diff --git a/frontend/src/components/HighlightedText.tsx b/frontend/src/components/HighlightedText.tsx
@@ -0,0 +1,58 @@
+import clsx from "clsx";
+import { ClassValue } from "clsx";
+
+interface IHighlightedText {
+  fullText: string;
+  highlightedText: string;
+  fullTextStyle: ClassValue;
+  highlightedTextStyle: ClassValue;
+}
+
+const HighlightedText: React.FC<IHighlightedText> = ({
+  fullText,
+  highlightedText,
+  fullTextStyle,
+  highlightedTextStyle,
+}) => {
+  const FullText = (
+    <span
+      className={clsx(
+        "text-base font-normal text-secondary-text lg:text-lg lg:font-medium",
+        fullTextStyle,
+      )}
+    >
+      {fullText}
+    </span>
+  );
+  if (!highlightedText) return FullText;
+
+  const index = fullText.indexOf(highlightedText);
+
+  if (index === -1) return FullText;
+
+  const beforeMatch = fullText.slice(0, index);
+  const match = fullText.slice(index, index + highlightedText.length);
+  const afterMatch = fullText.slice(index + highlightedText.length);
+
+  return (
+    <span
+      className={clsx(
+        "text-base font-normal text-secondary-text lg:text-lg lg:font-medium",
+        fullTextStyle,
+      )}
+    >
+      {beforeMatch}
+      <span
+        className={clsx(
+          "text-base font-normal text-primary-purple lg:text-lg lg:font-medium",
+          highlightedTextStyle,
+        )}
+      >
+        {match}
+      </span>
+      {afterMatch}
+    </span>
+  );
+};
+
+export default HighlightedText;
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
@@ -36,7 +36,7 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
         "backdrop-blur-md",
       )}
     >
-      <div className="mx-auto h-full max-w-screen-2xl px-2 md:px-16 xl:px-32">
+      <div className="mx-auto h-full max-w-[1800px] px-2 md:px-16 xl:px-32">
         <div
           className={clsx(
             "flex h-full items-center justify-between",

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {`
`36`	`36`	`"backdrop-blur-md",`
`37`	`37`	`)}`
`38`	`38`	`>`
`39`		`- <div className="mx-auto h-full max-w-screen-2xl px-2 md:px-16 xl:px-32">`
	`39`	`+ <div className="mx-auto h-full max-w-[1800px] px-2 md:px-16 xl:px-32">`
`40`	`40`	`<div`
`41`	`41`	`className={clsx(`
`42`	`42`	`"flex h-full items-center justify-between",`