chore: slight adjustments, experiment with thinner border in mobile

kleros · Dec 19, 2024 · 53435b7 · 53435b7
1 parent 2a1f4d0
commit 53435b7
Show file tree

Hide file tree

Showing 13 changed files with 20 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -28,13 +28,15 @@ const StyledCard = styled(Card)`
   flex-wrap: wrap;
   padding: 16px;
   align-items: flex-start;
+  border-width: 0.5px;
 
   ${landscapeStyle(
     () => css`
       flex-direction: row;
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;