chore: more adjustments

Author: kemuru

web/src/components/DisputePreview/Policies.tsx

@@ -18,7 +18,7 @@ const Container = styled.div`
   flex-direction: row;
   flex-wrap: wrap;
   gap: 8px 16px;
-  padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)};
+  padding: ${responsiveSize(12, 20)} ${responsiveSize(8, 32)};
   background-color: ${({ theme }) => theme.mediumBlue};
 `;
 

web/src/components/DisputeView/DisputeCardView.tsx

@@ -25,7 +25,7 @@ const StyledCard = styled(Card)`
 
 const CardContainer = styled.div`
   height: calc(100% - 45px);
-  padding: ${responsiveSize(20, 24)};
+  padding: ${responsiveSize(20, 24)} ${responsiveSize(8, 24)};
   display: flex;
   flex-direction: column;
   justify-content: space-between;

web/src/components/DisputeView/PeriodBanner.tsx

@@ -20,7 +20,7 @@ const Container = styled.div<IContainer>`
   align-items: center;
   gap: 8px;
   justify-content: space-between;
-  padding: 0 ${({ isCard }) => (isCard ? "24px" : responsiveSize(8, 24, 900))};
+  padding: 0 ${({ isCard }) => (isCard ? responsiveSize(8, 24) : responsiveSize(8, 24, 900))};
   flex-shrink: 0;
   ${({ frontColor, backgroundColor, isCard }) => {
     return `

web/src/pages/Courts/CourtDetails/Description.tsx

@@ -17,6 +17,10 @@ const Container = styled.div`
 const TextContainer = styled.div`
   width: 100%;
   padding: 12px 0;
+
+  p {
+    word-break: break-word;
+  }
 `;
 
 const StyledTabs = styled(Tabs)`

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -31,6 +31,7 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 
 const StyledAccordion = styled(Accordion)`
   > * > button {
+    padding: 12px ${responsiveSize(8, 24)} !important;
     justify-content: unset;
   }
   //adds padding to body container

web/src/pages/Dashboard/Courts/Header.tsx

@@ -14,16 +14,16 @@ import NumberDisplay from "components/NumberDisplay";
 
 const Container = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   width: 100%;
-  gap: 4px;
-  align-items: flex-start;
-  justify-content: space-between;
+  gap: 4px 16px;
+  align-items: center;
   margin-bottom: ${responsiveSize(16, 24)};
 
   ${landscapeStyle(
     () => css`
-      flex-direction: row;
+      justify-content: space-between;
     `
   )}
 `;

web/src/pages/Home/Community/index.tsx

@@ -26,7 +26,7 @@ const StyledCard = styled(Card)`
   gap: 12px;
   flex-direction: column;
   flex-wrap: wrap;
-  padding: 24px;
+  padding: ${responsiveSize(12, 24)} ${responsiveSize(8, 24)};
   align-items: flex-start;
 
   ${landscapeStyle(

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

@@ -12,6 +12,7 @@ import JurorIcon from "svgs/icons/user.svg";
 import { CoinIds } from "consts/coingecko";
 import { useCoinPrice } from "hooks/useCoinPrice";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
+import useIsDesktop from "hooks/useIsDesktop";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format";
 import { isUndefined } from "utils/index";
@@ -24,10 +25,10 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 const StyledCard = styled(Card)`
   width: auto;
   height: fit-content;
-  gap: 32px 0;
-  padding: ${responsiveSize(16, 32)};
+  gap: 16px 8px;
+  padding: ${responsiveSize(16, 24)} ${responsiveSize(8, 24)};
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
 `;
 
 const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) =>
@@ -53,7 +54,7 @@ const stats: IStat[] = [
     icon: PNKIcon,
   },
   {
-    title: "ETH Paid to jurors",
+    title: "ETH Paid",
     coinId: 1,
     getText: (counters) => formatETH(getLastOrZero(counters, "paidETH")),
     getSubtext: (counters, coinPrice) =>
@@ -88,6 +89,8 @@ const Stats = () => {
   const { data } = useHomePageContext();
   const coinIds = [CoinIds.PNK, CoinIds.ETH];
   const { prices: pricesData } = useCoinPrice(coinIds);
+  const isDesktop = useIsDesktop();
+
   return (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
@@ -99,7 +102,7 @@ const Stats = () => {
             {...{ title, color, icon }}
             text={data ? getText(data["counters"]) : <StyledSkeleton />}
             subtext={calculateSubtextRender(data ? data["counters"] : undefined, getSubtext, coinPrice)}
-            isSmallDisplay={false}
+            isSmallDisplay={!isDesktop}
           />
         );
       })}

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

@@ -1,9 +1,10 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
-import { useToggle } from "react-use";
-
 import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+import { useToggle } from "react-use";
 
 import HowItWorks from "components/HowItWorks";
 import JurorLevels from "components/Popup/MiniGuides/JurorLevels";
@@ -13,7 +14,7 @@ const Container = styled.div`
   justify-content: space-between;
   width: 100%;
   background-color: ${({ theme }) => theme.lightBlue};
-  padding: 24px;
+  padding: 16px ${responsiveSize(8, 24)};
   border 1px solid ${({ theme }) => theme.stroke};
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;

web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx

@@ -18,7 +18,7 @@ const Container = styled.div`
   flex-wrap: wrap;
   width: 100%;
   background-color: ${({ theme }) => theme.whiteBackground};
-  padding: 16px 24px 24px 24px;
+  padding: 8px 8px 12px;
   border 1px solid ${({ theme }) => theme.stroke};
   border-top: none;
   align-items: center;