Merge pull request #1811 from kleros/feat/ui-improvements

chore: slight cosmetic adjustments

Author: alcercu

web/src/components/EvidenceCard.tsx

@@ -57,11 +57,12 @@ const IndexAndName = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
 `;
 
 const Index = styled.p`
   display: inline-block;
+  color: ${({ theme }) => theme.secondaryText};
 `;
 
 const StyledReactMarkdown = styled(ReactMarkdown)`
@@ -78,7 +79,6 @@ const StyledReactMarkdown = styled(ReactMarkdown)`
 
 const BottomShade = styled.div`
   background-color: ${({ theme }) => theme.lightBlue};
-  border-top: 1px solid ${({ theme }) => theme.stroke};
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -92,7 +92,7 @@ const BottomShade = styled.div`
 
   ${landscapeStyle(
     () => css`
-      padding: 16px 24px;
+      padding: 12px 24px;
     `
   )}
 `;
@@ -231,7 +231,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
     <StyledCard>
       <TopContent>
         <IndexAndName>
-          <Index>#{index}: </Index>
+          <Index>#{index}. </Index>
           <h3>{name}</h3>
         </IndexAndName>
         {name && description ? <StyledReactMarkdown>{description}</StyledReactMarkdown> : <p>{evidence}</p>}

web/src/pages/Cases/CaseDetails/Evidence/index.tsx

@@ -27,7 +27,7 @@ const Container = styled.div`
   flex-direction: column;
   gap: 16px;
   align-items: center;
-  padding: 16px;
+  padding: 20px 16px 16px;
 
   ${landscapeStyle(
     () => css`

web/src/pages/Cases/CaseDetails/Overview/index.tsx

@@ -25,7 +25,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 16px;
+  padding: 20px 16px 16px;
 
   ${landscapeStyle(
     () => css`

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx

@@ -10,18 +10,18 @@ import { isUndefined } from "utils/index";
 import { shortenAddress } from "utils/shortenAddress";
 
 import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
 
 const TitleContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: start;
-  gap: ${responsiveSize(8, 12)};
+  gap: 11px;
   flex-wrap: wrap;
   ${landscapeStyle(
     () => css`
       flex-direction: row;
       align-items: center;
+      gap: 12px;
     `
   )}
 `;

web/src/pages/Cases/CaseDetails/Voting/index.tsx

@@ -28,7 +28,7 @@ import Classic from "./Classic";
 import VotingHistory from "./VotingHistory";
 
 const Container = styled.div`
-  padding: 16px;
+  padding: 20px 16px 16px;
 
   ${landscapeStyle(
     () => css`

web/src/pages/Home/CourtOverview/BarChart.tsx

@@ -21,7 +21,6 @@ const formatter = new Intl.NumberFormat("en", { notation: "compact" });
 
 const BarContainer = styled.div`
   height: 220px;
-  margin-top: 16px;
 `;
 
 ChartJS.register(BarElement);

web/src/pages/Home/CourtOverview/Chart.tsx

@@ -20,6 +20,7 @@ const Container = styled.div`
   margin-bottom: ${responsiveSize(16, 32)};
   display: flex;
   flex-direction: column;
+  gap: 16px;
 `;
 
 const StyledDropdown = styled(DropdownSelect)`

web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx

@@ -16,7 +16,6 @@ import "chartjs-adapter-moment";
 
 const LineContainer = styled.div`
   height: 220px;
-  margin-top: 16px;
 `;
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, TimeScale, Tooltip);

web/src/pages/Home/TopJurors/Header/MobileHeader.tsx

@@ -19,6 +19,7 @@ const Container = styled.div`
   border-top-right-radius: 3px;
   border-bottom: none;
   flex-wrap: wrap;
+
   ${landscapeStyle(
     () => css`
       display: none;