Chore(frontend)/upgrade tailwind

frontend/package.json

@@ -23,6 +23,7 @@
     "react-use": "^17.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "4.0.0",
     "@types/node": "^22.10.5",
     "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
@@ -34,8 +35,8 @@
     "lint-staged": "^15.3.0",
     "postcss": "^8",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "tailwindcss": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "4.0.0",
     "typescript": "^5"
   },
   "volta": {

frontend/postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

frontend/src/app/for-lawyers/components/Card.tsx

@@ -7,13 +7,13 @@ const Card: React.FC<ICard> = ({ title, description, icon }) => {
   return (
     <div
       className={clsx(
-        "rounded-2xl border border-stroke bg-background-2",
+        "border-stroke bg-background-2 rounded-2xl border",
         "p-6 pb-[56px] lg:pb-[60px]",
         "flex flex-col items-start gap-4",
       )}
     >
       <Image src={icon.url} width={90} height={90} alt="Card Icon" />
-      <h2 className="mb-2 text-lg font-medium text-primary-text lg:text-xl">
+      <h2 className="text-primary-text mb-2 text-lg font-medium lg:text-xl">
         {title}
       </h2>
 

frontend/src/app/for-lawyers/components/Flowchart.tsx

@@ -20,7 +20,7 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
           "flex items-center justify-center p-6",
         )}
       >
-        <span className="text-center text-lg font-medium text-primary-text lg:text-xl">
+        <span className="text-primary-text text-center text-lg font-medium lg:text-xl">
           {name}
         </span>
       </div>
@@ -29,24 +29,24 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
       <div className="pr-[14px]">
         <div
           className={clsx(
-            "relative h-7 w-[100%-14px] bg-primary-blue",
+            "bg-primary-blue relative h-7 w-[100%-14px]",
             "flex items-center justify-center",
             //start-arrow
-            "before:absolute before:-left-[1px] before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
-            "before:border-b-transparent before:border-t-transparent",
+            "before:absolute before:top-0 before:-left-[1px] before:border-t-[14px] before:border-b-[14px] before:border-l-[14px]",
+            "before:border-t-transparent before:border-b-transparent",
             background === "primary"
               ? "before:border-l-background-1"
               : "before:border-l-background-2",
             //end arrow
-            "after:absolute after:right-[-14px] after:top-0 after:border-b-[14px] after:border-l-[14px] after:border-t-[14px]",
-            "after:border-b-transparent after:border-l-primary-blue after:border-t-transparent",
+            "after:absolute after:top-0 after:right-[-14px] after:border-t-[14px] after:border-b-[14px] after:border-l-[14px]",
+            "after:border-l-primary-blue after:border-t-transparent after:border-b-transparent",
           )}
         >
-          <span className="text-xl text-background-2">{index}</span>
+          <span className="text-background-2 text-xl">{index}</span>
         </div>
       </div>
 
-      <div className="rounded-3xl border-2 border-stroke bg-background-2 p-6">
+      <div className="border-stroke bg-background-2 rounded-3xl border-2 p-6">
         <p className="text-secondary-text lg:text-lg">{description}</p>
       </div>
     </div>

frontend/src/app/for-lawyers/components/Hero.tsx

@@ -15,7 +15,7 @@ const Hero: React.FC = async () => {
   ).forLawyersPageHero;
 
   return (
-    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
+    <div className="relative px-6 pt-44 pb-28 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-8">
         <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
@@ -33,15 +33,15 @@ const Hero: React.FC = async () => {
         <ExternalLink
           text={arrowLink.text}
           url={arrowLink.link.url}
-          className="text-start lg:pb-9 [&>span]:text-primary-text"
+          className="[&>span]:text-primary-text text-start lg:pb-9"
         />
       </div>
       <Image
         src={background.url}
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );

frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx

@@ -63,7 +63,7 @@ const TableCardContent: React.FC<ArbitrationMethodTableType> = ({
           width={53.251}
           height={49.259}
           alt="Kleros-icon"
-          className="absolute right-[33.75px] top-[32px]"
+          className="absolute top-[32px] right-[33.75px]"
         />
       ) : null}
     </div>

frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx

@@ -19,19 +19,19 @@ const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
     >
       <div
         className={clsx(
-          "box-border rounded-3xl border-2 border-stroke bg-background-2",
-          "absolute left-0 top-0 h-full min-h-fit w-full",
-          "pb-[66.666%] lg:pb-0 lg:pr-[66.666%]",
+          "border-stroke bg-background-2 box-border rounded-3xl border-2",
+          "absolute top-0 left-0 h-full min-h-fit w-full",
+          "pb-[66.666%] lg:pr-[66.666%] lg:pb-0",
         )}
       >
         <TableCardContent {...table?.[0]} />
       </div>
 
       <div
         className={clsx(
-          "box-border rounded-3xl bg-background-1",
-          "absolute left-0 top-1/3 h-2/3 min-h-fit w-full lg:left-1/3 lg:top-0 lg:h-full lg:w-2/3",
-          "pb-[33.333%] lg:pb-0 lg:pr-[33.333%]",
+          "bg-background-1 box-border rounded-3xl",
+          "absolute top-1/3 left-0 h-2/3 min-h-fit w-full lg:top-0 lg:left-1/3 lg:h-full lg:w-2/3",
+          "pb-[33.333%] lg:pr-[33.333%] lg:pb-0",
         )}
       >
         <TableCardContent {...table?.[1]} />
@@ -41,7 +41,7 @@ const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
         className={clsx(
           "box-border rounded-3xl",
           "bg-[linear-gradient(0deg,_#5B2B99_0%,_#27CDFE_100%)]",
-          "absolute left-0 top-2/3 h-1/3 w-full p-[6px] lg:left-2/3 lg:top-0 lg:h-full lg:w-1/3",
+          "absolute top-2/3 left-0 h-1/3 w-full p-[6px] lg:top-0 lg:left-2/3 lg:h-full lg:w-1/3",
         )}
       >
         <div

frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx

@@ -25,28 +25,28 @@ const KlerosEscrowSection: React.FC = async () => {
     <div>
       <h1
         className={
-          "mb-6 text-lg font-medium text-primary-text lg:px-32 lg:text-2xl"
+          "text-primary-text mb-6 text-lg font-medium lg:px-32 lg:text-2xl"
         }
       >
         {header}
       </h1>
-      <p className="mb-16 text-secondary-text lg:px-32 lg:text-lg">
+      <p className="text-secondary-text mb-16 lg:px-32 lg:text-lg">
         {subtitle}
       </p>
 
-      <p className="mb-12 text-primary-purple lg:px-32 lg:text-lg">
+      <p className="text-primary-purple mb-12 lg:px-32 lg:text-lg">
         {flowchartLabel}
       </p>
       <Flowchart items={flowchart} background="secondary" />
 
       <h2
         className={
-          "mb-6 mt-12 text-lg font-medium text-primary-text lg:px-32 lg:text-xl"
+          "text-primary-text mt-12 mb-6 text-lg font-medium lg:px-32 lg:text-xl"
         }
       >
         {secondHeader}
       </h2>
-      <p className="mb-8 text-secondary-text lg:px-32 lg:text-lg">
+      <p className="text-secondary-text mb-8 lg:px-32 lg:text-lg">
         {secondSubtitle}
       </p>
 

frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx

@@ -37,17 +37,17 @@ const ResearchSection: React.FC<IResearchSection> = ({
 
   return (
     <div className="lg:px-32">
-      <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
+      <h2 className="text-primary-text mb-6 text-lg font-medium lg:text-xl">
         {secondHeader}
       </h2>
-      <p className="mb-12 text-secondary-text lg:text-lg">{secondSubtitle}</p>
+      <p className="text-secondary-text mb-12 lg:text-lg">{secondSubtitle}</p>
 
       <div className="mb-12 grid grid-cols-1 gap-4 lg:grid-cols-3">
         {items.map((publication, index) => (
           <PublicationCard
             key={`${publication.topic}-${index}`}
             {...{ publication }}
-            className="[&>h2]:mb-4 [&>h2]:!text-lg [&>p]:mb-2"
+            className="[&>h2]:mb-4 [&>h2]:text-lg! [&>p]:mb-2"
           />
         ))}
       </div>

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

@@ -36,10 +36,10 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       )}
     >
       <div className="flex flex-col gap-6 lg:px-32">
-        <h3 className="mb-6 text-primary-purple lg:text-lg">
+        <h3 className="text-primary-purple mb-6 lg:text-lg">
           {headerSubtitle}
         </h3>
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+        <h1 className="text-primary-text text-xl font-medium lg:text-3xl">
           {header}
         </h1>
         <p className="text-secondary-text lg:text-lg">{subtitle}</p>
@@ -49,7 +49,7 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       <ResearchSection {...{ secondHeader, secondSubtitle, publications }} />
 
       <div className="my-4 lg:px-32">
-        <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
+        <h2 className="text-primary-text mb-6 text-lg font-medium lg:text-xl">
           {thirdHeader}
         </h2>
         <p className="text-secondary-text lg:text-lg">{thirdSubtitle}</p>

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

@@ -17,8 +17,8 @@ const DisputeResolutionProcess: React.FC<IDisputeResolutionProcess> = ({
     <div className="flex flex-col gap-8 lg:px-32">
       <HighlightedText
         {...disputeResolutionProcessHeader}
-        fullTextStyle="!text-primary-text !text-lg !font-medium lg:!text-xl"
-        highlightedTextStyle="!text-lg !font-medium lg:!text-xl"
+        fullTextStyle="text-primary-text! text-lg! font-medium! lg:text-xl!"
+        highlightedTextStyle="text-lg! font-medium! lg:text-xl!"
       />
 
       <div className="relative flex w-full justify-center">

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

@@ -8,7 +8,7 @@ const HighlightedText: React.FC<
   const FullText = (
     <span
       className={clsx(
-        "text-base font-normal text-secondary-text lg:text-lg lg:font-medium",
+        "text-secondary-text text-base font-normal lg:text-lg lg:font-medium",
         fullTextStyle,
       )}
     >
@@ -28,14 +28,14 @@ const HighlightedText: React.FC<
   return (
     <span
       className={clsx(
-        "text-base font-normal text-secondary-text lg:text-lg lg:font-medium",
+        "text-secondary-text text-base font-normal lg:text-lg lg:font-medium",
         fullTextStyle,
       )}
     >
       {beforeMatch}
       <span
         className={clsx(
-          "text-base font-normal text-primary-purple lg:text-lg lg:font-medium",
+          "text-primary-purple text-base font-normal lg:text-lg lg:font-medium",
           highlightedTextStyle,
         )}
       >

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

@@ -21,17 +21,17 @@ const LemonCashSection: React.FC = async () => {
 
   return (
     <div className="lg:px-32">
-      <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
+      <h2 className="text-primary-text mb-6 text-lg font-medium lg:text-2xl">
         {header}
       </h2>
       <p className="text-primary-purple lg:text-lg">{primarySubtitle}</p>
-      <p className="mb-12 text-secondary-text lg:text-lg">
+      <p className="text-secondary-text mb-12 lg:text-lg">
         {secondarySubtitle}
       </p>
 
       <div
         className={clsx(
-          "rounded-2xl border border-stroke px-6 py-12 lg:px-12",
+          "border-stroke rounded-2xl border px-6 py-12 lg:px-12",
           "flex flex-col items-center gap-12 lg:flex-row lg:gap-16",
         )}
       >
@@ -40,7 +40,7 @@ const LemonCashSection: React.FC = async () => {
           height={180}
           src={icon.url}
           alt="Lemon cash"
-          className="flex-shrink-0"
+          className="shrink-0"
         />
         <div className="flex flex-col gap-4">
           <p className="text-primary-text lg:text-lg">{testimony}</p>

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx

@@ -10,8 +10,8 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
   return (
     <div
       className={clsx(
-        "rounded-2xl border-2 border-stroke bg-background-1",
-        "grid overflow-auto pl-8 pt-9",
+        "border-stroke bg-background-1 rounded-2xl border-2",
+        "grid overflow-auto pt-9 pl-8",
       )}
       style={{
         gridTemplateColumns: `repeat(${tableHeadings.length}, minmax(0, 1fr))`,
@@ -21,12 +21,12 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
         <div
           key={heading}
           className={clsx(
-            "border-b border-b-stroke pb-4 pl-4 pt-0",
+            "border-b-stroke border-b pt-0 pb-4 pl-4",
             index === 0 && "pl-0",
             index === tableHeadings.length - 1 && "pr-8",
           )}
         >
-          <span className="break-words text-lg font-medium text-primary-purple">
+          <span className="text-primary-purple text-lg font-medium break-words">
             {heading}
           </span>
         </div>
@@ -38,11 +38,11 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
             key={rowHeading}
             className={clsx(
               "py-4",
-              rowIndex !== tableRows.length - 1 && "border-b border-b-stroke",
+              rowIndex !== tableRows.length - 1 && "border-b-stroke border-b",
             )}
           >
             <span
-              className={"break-words text-lg font-medium text-primary-purple"}
+              className={"text-primary-purple text-lg font-medium break-words"}
             >
               {rowHeading}
             </span>
@@ -52,7 +52,7 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
             <div
               key={`${primaryValue}-${index}`}
               className={clsx(
-                "border-b border-b-stroke bg-background-2",
+                "border-b-stroke bg-background-2 border-b",
                 "flex flex-col p-4 pr-0",
                 //top-rows first element
                 index === 0 && rowIndex === 0 && "rounded-tl-2xl",
@@ -61,15 +61,15 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
                   rowIndex === tableRows.length - 1 &&
                   "rounded-bl-2xl border-none",
                 // last element of each row
-                index === rowData.length - 1 && "!pr-8",
+                index === rowData.length - 1 && "pr-8!",
                 //last row
                 rowIndex === tableRows.length - 1 && "border-none",
               )}
             >
-              <p className="break-words text-lg font-medium text-primary-text">
+              <p className="text-primary-text text-lg font-medium break-words">
                 {primaryValue}
               </p>
-              <p className="break-words text-secondary-text">
+              <p className="text-secondary-text break-words">
                 {secondaryValue}
               </p>
             </div>

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx

@@ -16,12 +16,12 @@ const TableItem: React.FC<{
   return (
     <div
       className={clsx(
-        "rounded-2xl border-2 border-stroke bg-background-1",
-        "px-6 pb-16 pt-8",
+        "border-stroke bg-background-1 rounded-2xl border-2",
+        "px-6 pt-8 pb-16",
         "flex flex-col gap-6",
       )}
     >
-      <h2 className="text-lg font-medium text-primary-text">{heading}</h2>{" "}
+      <h2 className="text-primary-text text-lg font-medium">{heading}</h2>{" "}
       <Divider />
       {tableHeadings.slice(1).map(({ heading }, index) => (
         <div key={`${heading}-${index}`} className="flex flex-col gap-4">

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

@@ -39,7 +39,7 @@ const KlerosEnterpriseSection: React.FC = async () => {
     >
       <div className="flex flex-col gap-6 lg:px-32">
         <h3 className="text-primary-purple lg:text-lg">{headerSubtitle}</h3>
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+        <h1 className="text-primary-text text-xl font-medium lg:text-3xl">
           {header}
         </h1>
         <HighlightedText {...subtitle} />