From f543dd08593686db1f62d46398c4941f9bb0964d Mon Sep 17 00:00:00 2001
From: jaybuidl <jb@kleros.io>
Date: Wed, 15 Jan 2025 00:48:06 +0000
Subject: [PATCH 1/2] feat: improve policy styling, add missing header styles

---
 src/components/court-cascader-modal.js | 77 +++++++++++++++-----------
 1 file changed, 44 insertions(+), 33 deletions(-)

diff --git a/src/components/court-cascader-modal.js b/src/components/court-cascader-modal.js
index 622340d..6353251 100644
--- a/src/components/court-cascader-modal.js
+++ b/src/components/court-cascader-modal.js
@@ -1,4 +1,4 @@
-import { Button, Cascader, Col, Modal, Row, Skeleton, Tooltip } from "antd";
+import { Button, Cascader, Col, Modal, Row, Skeleton, Tooltip, Typography } from "antd";
 import React, { useCallback, useState } from "react";
 import PropTypes from "prop-types";
 import ReactMarkdown from "react-markdown";
@@ -136,10 +136,11 @@ const CourtCascaderModal = ({ onClick }) => {
             <Skeleton active loading={option.loading}>
               <StyledPolicyRow gutter={16}>
                 <Col md={12}>
-                  <StyledPolicySection>
-                    {option.label} | Min Stake = <ETHAmount amount={minStake} decimals={0} tokenSymbol="PNK" />
-                    <div style={{ fontWeight: "400", fontSize: "12px" }}>
-                      Each vote has a stake of{" "}
+                  <Typography.Title level={1}>
+                    {option.label}
+                    <div style={{ fontWeight: "400", fontSize: "12px", margin: "3px 0 20px 0" }}>
+                      Min Stake = <ETHAmount amount={minStake} decimals={0} tokenSymbol="PNK" /> | Each vote has a stake
+                      of{" "}
                       <ETHAmount
                         amount={
                           minStake &&
@@ -151,34 +152,39 @@ const CourtCascaderModal = ({ onClick }) => {
                       />
                       .
                     </div>
-                  </StyledPolicySection>
+                  </Typography.Title>
                   <ReactMarkdown source={option.description} />
                   <ReactMarkdown source={option.summary} />
                 </Col>
-                <Col md={12}>
+                <Col md={12} style={{ marginTop: "62px" }}>
                   {option.requiredSkills ? (
-                    <Row>
-                      <Col md={4}>
-                        <Hexagon className="ternary-fill" />
-                        <StyledPrefixDiv>
-                          <img src={skillsImg} alt="skills" />
+                    <Row gutter={16}>
+                      <Col md={2} offset={2}>
+                        <StyledPrefixDiv style={{ left: "7px", top: "35px" }}>
+                          <Hexagon className="ternary-fill" />
+                        </StyledPrefixDiv>
+                        <StyledPrefixDiv style={{ left: "6px", top: "29px" }}>
+                          <img src={skillsImg} alt="skills" style={{ maxWidth: "108%" }} />
                         </StyledPrefixDiv>
                       </Col>
                       <Col md={20}>
-                        <StyledHeader>Required Skills</StyledHeader>
+                        <Typography.Title level={2}>Required Skills</Typography.Title>
                         <ReactMarkdown source={option.requiredSkills} />
+                        <br />
                       </Col>
                     </Row>
                   ) : null}
-                  <Row>
-                    <Col md={4}>
-                      <Hexagon className="ternary-fill" />
-                      <StyledPrefixDiv style={{ top: "33px" }}>
-                        <img src={rewardImg} alt="reward" />
+                  <Row gutter={16}>
+                    <Col md={2} offset={2}>
+                      <StyledPrefixDiv style={{ left: "7px", top: "35px" }}>
+                        <Hexagon className="ternary-fill" />
+                      </StyledPrefixDiv>
+                      <StyledPrefixDiv style={{ left: "8px", top: "36px" }}>
+                        <img src={rewardImg} alt="reward" style={{ maxWidth: "92%" }} />
                       </StyledPrefixDiv>
                     </Col>
                     <Col md={20}>
-                      <StyledHeader>Reward</StyledHeader>
+                      <Typography.Title level={2}>Reward</Typography.Title>
                       <div>
                         For each coherent vote you will receive{" "}
                         <strong>
@@ -224,6 +230,24 @@ const StyledModal = styled(Modal)`
   width: 90% !important;
   height: 90vh;
 
+  h1 {
+    font-size: 20px;
+    font-weight: bolder;
+    color: #4d00b4;
+  }
+
+  h2 {
+    font-size: 18px;
+    font-weight: bolder;
+    color: #4d00b4;
+  }
+
+  h3 {
+    font-size: 16px;
+    font-weight: bolder;
+    color: #4d00b4;
+  }
+
   .ant-modal {
     &-header {
       border: none;
@@ -287,11 +311,6 @@ const StyledButton = styled(Button)`
   }
 `;
 
-const StyledHeader = styled.div`
-  ffnt-size: 18px;
-  font-weight: bold;
-`;
-
 const StyledCascader = styled(Cascader)`
   display: none;
 
@@ -358,9 +377,7 @@ const StyledCascader = styled(Cascader)`
 `;
 
 const StyledPrefixDiv = styled.div`
-  left: 29px;
   position: absolute;
-  top: 29px;
   transform: translate(-50%, -50%);
 `;
 
@@ -371,11 +388,5 @@ const StyledPolicyWrapper = styled.div`
 
 const StyledPolicyRow = styled(Row)`
   overflow: auto;
-  max-height: 100%;
-`;
-
-const StyledPolicySection = styled.section`
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 20px;
+  height: 100%;
 `;

From 8c37d70f19149f70beeeec45833c15c25e26a785 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Wed, 15 Jan 2025 11:11:08 +0100
Subject: [PATCH 2/2] refactor: switch inline style for styledcomponents and
 improve responsiveness

---
 src/components/court-cascader-modal.js | 35 +++++++++++++++++---------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/court-cascader-modal.js b/src/components/court-cascader-modal.js
index 6353251..3fb15fe 100644
--- a/src/components/court-cascader-modal.js
+++ b/src/components/court-cascader-modal.js
@@ -138,7 +138,7 @@ const CourtCascaderModal = ({ onClick }) => {
                 <Col md={12}>
                   <Typography.Title level={1}>
                     {option.label}
-                    <div style={{ fontWeight: "400", fontSize: "12px", margin: "3px 0 20px 0" }}>
+                    <StyledMinStakeDisplay>
                       Min Stake = <ETHAmount amount={minStake} decimals={0} tokenSymbol="PNK" /> | Each vote has a stake
                       of{" "}
                       <ETHAmount
@@ -151,7 +151,7 @@ const CourtCascaderModal = ({ onClick }) => {
                         tokenSymbol="PNK"
                       />
                       .
-                    </div>
+                    </StyledMinStakeDisplay>
                   </Typography.Title>
                   <ReactMarkdown source={option.description} />
                   <ReactMarkdown source={option.summary} />
@@ -159,15 +159,13 @@ const CourtCascaderModal = ({ onClick }) => {
                 <Col md={12} style={{ marginTop: "62px" }}>
                   {option.requiredSkills ? (
                     <Row gutter={16}>
-                      <Col md={2} offset={2}>
-                        <StyledPrefixDiv style={{ left: "7px", top: "35px" }}>
+                      <Col span={2} offset={2}>
+                        <StyledPrefixDiv>
                           <Hexagon className="ternary-fill" />
-                        </StyledPrefixDiv>
-                        <StyledPrefixDiv style={{ left: "6px", top: "29px" }}>
                           <img src={skillsImg} alt="skills" style={{ maxWidth: "108%" }} />
                         </StyledPrefixDiv>
                       </Col>
-                      <Col md={20}>
+                      <Col span={20}>
                         <Typography.Title level={2}>Required Skills</Typography.Title>
                         <ReactMarkdown source={option.requiredSkills} />
                         <br />
@@ -175,15 +173,13 @@ const CourtCascaderModal = ({ onClick }) => {
                     </Row>
                   ) : null}
                   <Row gutter={16}>
-                    <Col md={2} offset={2}>
-                      <StyledPrefixDiv style={{ left: "7px", top: "35px" }}>
+                    <Col span={2} offset={2}>
+                      <StyledPrefixDiv>
                         <Hexagon className="ternary-fill" />
-                      </StyledPrefixDiv>
-                      <StyledPrefixDiv style={{ left: "8px", top: "36px" }}>
                         <img src={rewardImg} alt="reward" style={{ maxWidth: "92%" }} />
                       </StyledPrefixDiv>
                     </Col>
-                    <Col md={20}>
+                    <Col span={20}>
                       <Typography.Title level={2}>Reward</Typography.Title>
                       <div>
                         For each coherent vote you will receive{" "}
@@ -379,6 +375,15 @@ const StyledCascader = styled(Cascader)`
 const StyledPrefixDiv = styled.div`
   position: absolute;
   transform: translate(-50%, -50%);
+  left: 8px;
+  top: 36px;
+
+  img {
+    position: absolute;
+    right: 50%;
+    top: 50%;
+    transform: translate(50%, -50%);
+  }
 `;
 
 const StyledPolicyWrapper = styled.div`
@@ -390,3 +395,9 @@ const StyledPolicyRow = styled(Row)`
   overflow: auto;
   height: 100%;
 `;
+
+const StyledMinStakeDisplay = styled.div`
+  font-weight: 400;
+  font-size: 12px;
+  margin: 3px 0 20px 0;
+`;