feat: improve policy styling, add missing header styles

kleros · Jan 15, 2025 · ade9e06 · ade9e06
1 parent 8920b80
commit ade9e06
Showing 1 changed file with 44 additions and 33 deletions.
diff --git 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} />
                       </Col>
                     </Row>
                   ) : null}
-                  <Row>
-                    <Col md={4}>
-                      <Hexagon className="ternary-fill" />
-                      <StyledPrefixDiv style={{ top: "33px" }}>
-                        <img src={rewardImg} alt="reward" />
+                  <br />
+                  <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%;
 `;