From 53435b75390e96ae4429845cb1de0bbe3baed776 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 19 Dec 2024 20:06:27 +0100
Subject: [PATCH 1/3] chore: slight adjustments, experiment with thinner border
 in mobile

---
 web/src/components/DisputeView/DisputeCardView.tsx         | 7 +++++++
 web/src/components/EvidenceCard.tsx                        | 3 +--
 web/src/pages/Cases/CaseDetails/Evidence/index.tsx         | 2 +-
 web/src/pages/Cases/CaseDetails/Overview/index.tsx         | 2 +-
 .../CaseDetails/Voting/VotesDetails/AccordionTitle.tsx     | 4 ++--
 web/src/pages/Cases/CaseDetails/Voting/index.tsx           | 2 +-
 web/src/pages/Home/Community/index.tsx                     | 2 ++
 web/src/pages/Home/CourtOverview/BarChart.tsx              | 1 -
 web/src/pages/Home/CourtOverview/Chart.tsx                 | 1 +
 web/src/pages/Home/CourtOverview/Stats.tsx                 | 2 ++
 web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx       | 1 -
 web/src/pages/Home/TopJurors/Header/MobileHeader.tsx       | 2 +-
 web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx      | 2 +-
 13 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx
index 3cb231c5a..532af36a6 100644
--- a/web/src/components/DisputeView/DisputeCardView.tsx
+++ b/web/src/components/DisputeView/DisputeCardView.tsx
@@ -17,9 +17,16 @@ import PeriodBanner from "./PeriodBanner";
 
 const StyledCard = styled(Card)`
   ${hoverShortTransitionTiming}
+  border-width: 0.5px;
   width: 100%;
   height: 100%;
   min-height: 290px;
+
+  ${landscapeStyle(
+    () => css`
+      border-width: 1px;
+    `
+  )}
 `;
 
 const CardContainer = styled.div`
diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
index f84334695..a455a3ece 100644
--- a/web/src/components/EvidenceCard.tsx
+++ b/web/src/components/EvidenceCard.tsx
@@ -78,7 +78,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 +91,7 @@ const BottomShade = styled.div`
 
   ${landscapeStyle(
     () => css`
-      padding: 16px 24px;
+      padding: 12px 24px;
     `
   )}
 `;
diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx
index 47746919a..e27947f27 100644
--- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx
+++ b/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`
diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx
index 8cfa1f26b..32e9cd0f6 100644
--- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx
+++ b/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`
diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx
index 4eaed0799..b36e0a2a6 100644
--- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx
+++ b/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;
     `
   )}
 `;
diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx
index e73094054..8b9146292 100644
--- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx
+++ b/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`
diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx
index 0127fb9e0..eb734f7c0 100644
--- a/web/src/pages/Home/Community/index.tsx
+++ b/web/src/pages/Home/Community/index.tsx
@@ -28,6 +28,7 @@ const StyledCard = styled(Card)`
   flex-wrap: wrap;
   padding: 16px;
   align-items: flex-start;
+  border-width: 0.5px;
 
   ${landscapeStyle(
     () => css`
@@ -35,6 +36,7 @@ const StyledCard = styled(Card)`
       justify-content: space-between;
       gap: 20px;
       padding: 24px 32px;
+      border-width: 1px;
     `
   )}
 `;
diff --git a/web/src/pages/Home/CourtOverview/BarChart.tsx b/web/src/pages/Home/CourtOverview/BarChart.tsx
index 647a863c9..82b7af9b4 100644
--- a/web/src/pages/Home/CourtOverview/BarChart.tsx
+++ b/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);
diff --git a/web/src/pages/Home/CourtOverview/Chart.tsx b/web/src/pages/Home/CourtOverview/Chart.tsx
index 94cf8f3bb..8152d4521 100644
--- a/web/src/pages/Home/CourtOverview/Chart.tsx
+++ b/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)`
diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx
index 503bd6a70..69651030d 100644
--- a/web/src/pages/Home/CourtOverview/Stats.tsx
+++ b/web/src/pages/Home/CourtOverview/Stats.tsx
@@ -23,6 +23,7 @@ import StatDisplay, { IStatDisplay } from "components/StatDisplay";
 import { StyledSkeleton } from "components/StyledSkeleton";
 
 const StyledCard = styled(Card)`
+  border-width: 0.5px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   width: auto;
@@ -32,6 +33,7 @@ const StyledCard = styled(Card)`
 
   ${landscapeStyle(
     () => css`
+      border-width: 1px;
       padding: 24px;
     `
   )}
diff --git a/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx b/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx
index 594f6efb9..bdfd07d6d 100644
--- a/web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx
+++ b/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);
diff --git a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx
index 17ac929a7..d1da590d0 100644
--- a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx
+++ b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx
@@ -14,7 +14,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBlue};
   padding: 16px;
-  border 1px solid ${({ theme }) => theme.stroke};
+  border 0.5px solid ${({ theme }) => theme.stroke};
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-bottom: none;
diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
index 7bf467191..5b7315e25 100644
--- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
+++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
@@ -21,7 +21,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.whiteBackground};
   padding: 8px 16px 12px;
-  border: 1px solid ${({ theme }) => theme.stroke};
+  border: 0.5px solid ${({ theme }) => theme.stroke};
   border-top: none;
   align-items: center;
   gap: 16px;

From 6ec0c93f6937581b40fe37bd5886100acb5ef111 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 19 Dec 2024 20:38:34 +0100
Subject: [PATCH 2/3] chore: remove the thinner border

---
 web/src/components/DisputeView/DisputeCardView.tsx    | 7 -------
 web/src/pages/Home/Community/index.tsx                | 2 --
 web/src/pages/Home/CourtOverview/Stats.tsx            | 2 --
 web/src/pages/Home/TopJurors/Header/MobileHeader.tsx  | 3 ++-
 web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx | 2 +-
 5 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx
index 532af36a6..3cb231c5a 100644
--- a/web/src/components/DisputeView/DisputeCardView.tsx
+++ b/web/src/components/DisputeView/DisputeCardView.tsx
@@ -17,16 +17,9 @@ import PeriodBanner from "./PeriodBanner";
 
 const StyledCard = styled(Card)`
   ${hoverShortTransitionTiming}
-  border-width: 0.5px;
   width: 100%;
   height: 100%;
   min-height: 290px;
-
-  ${landscapeStyle(
-    () => css`
-      border-width: 1px;
-    `
-  )}
 `;
 
 const CardContainer = styled.div`
diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx
index eb734f7c0..0127fb9e0 100644
--- a/web/src/pages/Home/Community/index.tsx
+++ b/web/src/pages/Home/Community/index.tsx
@@ -28,7 +28,6 @@ const StyledCard = styled(Card)`
   flex-wrap: wrap;
   padding: 16px;
   align-items: flex-start;
-  border-width: 0.5px;
 
   ${landscapeStyle(
     () => css`
@@ -36,7 +35,6 @@ const StyledCard = styled(Card)`
       justify-content: space-between;
       gap: 20px;
       padding: 24px 32px;
-      border-width: 1px;
     `
   )}
 `;
diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx
index 69651030d..503bd6a70 100644
--- a/web/src/pages/Home/CourtOverview/Stats.tsx
+++ b/web/src/pages/Home/CourtOverview/Stats.tsx
@@ -23,7 +23,6 @@ import StatDisplay, { IStatDisplay } from "components/StatDisplay";
 import { StyledSkeleton } from "components/StyledSkeleton";
 
 const StyledCard = styled(Card)`
-  border-width: 0.5px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   width: auto;
@@ -33,7 +32,6 @@ const StyledCard = styled(Card)`
 
   ${landscapeStyle(
     () => css`
-      border-width: 1px;
       padding: 24px;
     `
   )}
diff --git a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx
index d1da590d0..f2ad48c0a 100644
--- a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx
+++ b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx
@@ -14,11 +14,12 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBlue};
   padding: 16px;
-  border 0.5px solid ${({ theme }) => theme.stroke};
+  border 1px solid ${({ theme }) => theme.stroke};
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-bottom: none;
   flex-wrap: wrap;
+
   ${landscapeStyle(
     () => css`
       display: none;
diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
index 5b7315e25..7bf467191 100644
--- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
+++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
@@ -21,7 +21,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.whiteBackground};
   padding: 8px 16px 12px;
-  border: 0.5px solid ${({ theme }) => theme.stroke};
+  border: 1px solid ${({ theme }) => theme.stroke};
   border-top: none;
   align-items: center;
   gap: 16px;

From 37d768d990a458e3bd6340703f3b1c1a6355d0c0 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 19 Dec 2024 21:03:24 +0100
Subject: [PATCH 3/3] chore: nitpick in evidence cards

---
 web/src/components/EvidenceCard.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
index a455a3ece..0a328b29d 100644
--- a/web/src/components/EvidenceCard.tsx
+++ b/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)`
@@ -230,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>}