feat(web): multiple changes to css across all frontend

kleros · Sep 9, 2023 · 06eb085 · 06eb085
1 parent 6fd16e8
commit 06eb085
Show file tree

Hide file tree

Showing 23 changed files with 249 additions and 91 deletions.
diff --git a/web/src/assets/svgs/icons/vea.svg b/web/src/assets/svgs/icons/vea.svg
diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { smallScreenStyle } from "styles/smallScreenStyle";
 import Identicon from "react-identicons";
 import { Card } from "@kleros/ui-components-library";
 import AttachmentIcon from "svgs/icons/attachment.svg";
@@ -13,7 +14,7 @@ const StyledCard = styled(Card)`
 `;
 
 const TextContainer = styled.div`
-  padding: 8px;
+  padding: calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   > * {
     overflow-wrap: break-word;
     margin: 0;
@@ -32,8 +33,8 @@ const BottomShade = styled.div`
   background-color: ${({ theme }) => theme.lightBlue};
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px;
+  gap: 16px;
+  padding: 12px calc(8px + (24 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   > * {
     flex-basis: 1;
     flex-shrink: 0;
@@ -42,15 +43,63 @@ const BottomShade = styled.div`
 `;
 
 const StyledA = styled.a`
-  margin-left: auto;
-  margin-right: 8px;
+  gap: calc(5px + (6 - 5) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   display: flex;
   > svg {
     width: 16px;
     fill: ${({ theme }) => theme.primaryBlue};
   }
+
+  ${smallScreenStyle(
+    () => css`
+      margin-left: auto;
+    `
+  )}
 `;
 
+const AccountContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+
+  canvas {
+    width: 24px;
+    height: 24px;
+  }
+
+  > * {
+    flex-basis: 1;
+    flex-shrink: 0;
+    margin: 0;
+  }
+`;
+
+const DesktopText = styled.span`
+  ${smallScreenStyle(
+    () => css`
+      display: none;
+    `
+  )}
+`;
+
+const MobileText = styled.span`
+  display: none;
+
+  ${smallScreenStyle(
+    () => css`
+      display: inline;
+    `
+  )}
+`;
+
+const AttachedFileText: React.FC = () => (
+  <>
+    <DesktopText>View attached file</DesktopText>
+    <MobileText>File</MobileText>
+  </>
+);
+
 interface IEvidenceCard {
   evidence: string;
   sender: string;
@@ -73,11 +122,14 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
         )}
       </TextContainer>
       <BottomShade>
-        <Identicon size="24" string={sender} />
-        <p>{shortenAddress(sender)}</p>
+        <AccountContainer>
+          <Identicon size="24" string={sender} />
+          <p>{shortenAddress(sender)}</p>
+        </AccountContainer>
         {data && typeof data.fileURI !== "undefined" && (
           <StyledA href={`${IPFS_GATEWAY}${data.fileURI}`} target="_blank" rel="noreferrer">
             <AttachmentIcon />
+            <AttachedFileText />
           </StyledA>
         )}
       </BottomShade>

diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx
@@ -16,19 +16,17 @@ const Container = styled.div`
   display: flex;
   position: relative;
   margin-left: 8px;
+  flex-direction: column;
 `;
 
 const StyledTimeline = styled(CustomTimeline)`
   width: 100%;
-  margin-bottom: 32px;
 `;
 
 const EnforcementContainer = styled.div`
-  position: absolute;
-  bottom: 0;
   display: flex;
   gap: 8px;
-  margin-bottom: 8px;
+  margin-top: calc(12px + (24 - 12) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   fill: ${({ theme }) => theme.secondaryText};
 
   small {

diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx
@@ -19,6 +19,7 @@ const JuryContainer = styled.div`
   gap: 8px;
   h3 {
     line-height: 21px;
+    margin-bottom: 0px;
   }
 `;
 
@@ -28,10 +29,6 @@ const JuryDecisionTag = styled.small`
   color: ${({ theme }) => theme.secondaryText};
 `;
 
-const Divider = styled.hr`
-  color: ${({ theme }) => theme.stroke};
-`;
-
 const UserContainer = styled.div`
   display: flex;
   align-items: center;
@@ -65,12 +62,19 @@ const StyledButton = styled(LightButton)`
   > .button-text {
     color: ${({ theme }) => theme.primaryBlue};
   }
+  padding-top: 0px;
 `;
 
 const AnswerTitle = styled.h3`
   margin: 0;
 `;
 
+const Divider = styled.hr`
+  display: flex;
+  color: ${({ theme }) => theme.stroke};
+  margin: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 0px;
+`;
+
 interface IFinalDecision {
   arbitrable?: `0x${string}`;
 }

diff --git a/web/src/components/Verdict/VerdictBanner.tsx b/web/src/components/Verdict/VerdictBanner.tsx
@@ -6,7 +6,7 @@ import HourglassIcon from "assets/svgs/icons/hourglass.svg";
 const BannerContainer = styled.div`
   display: flex;
   gap: 8px;
-  margin: 16px 0px;
+  margin-bottom: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   svg {
     width: 16px;
     height: 16px;

diff --git a/web/src/context/StyledComponentsProvider.tsx b/web/src/context/StyledComponentsProvider.tsx
@@ -8,7 +8,7 @@ import { lightTheme, darkTheme } from "styles/themes";
 const StyledComponentsProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
-  const [theme, setTheme] = useLocalStorage<string>("theme", "light");
+  const [theme, setTheme] = useLocalStorage<string>("theme", "dark");
   const toggleTheme = () => {
     if (theme === "light") setTheme("dark");
     else setTheme("light");

diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx
@@ -10,6 +10,7 @@ import Governor from "svgs/icons/governor.svg";
 import Court from "svgs/icons/kleros.svg";
 import Linguo from "svgs/icons/linguo.svg";
 import POH from "svgs/icons/poh-image.png";
+import Vea from "svgs/icons/vea.svg";
 import Tokens from "svgs/icons/tokens.svg";
 import Product from "./Product";
 import { Overlay } from "components/Overlay";
@@ -76,16 +77,16 @@ const ITEMS = [
     Icon: Court,
     url: "https://court.kleros.io/",
   },
+  {
+    text: "Vea",
+    Icon: Vea,
+    url: "https://veascan.io",
+  },
   {
     text: "Escrow",
     Icon: Escrow,
     url: "https://escrow.kleros.io",
   },
-  {
-    text: "Tokens",
-    Icon: Tokens,
-    url: "https://tokens.kleros.io",
-  },
   {
     text: "POH",
     Icon: POH,
@@ -96,6 +97,11 @@ const ITEMS = [
     Icon: Curate,
     url: "https://curate.kleros.io",
   },
+  {
+    text: "Tokens",
+    Icon: Tokens,
+    url: "https://tokens.kleros.io",
+  },
   {
     text: "Resolver",
     Icon: Resolver,

diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx
@@ -24,24 +24,9 @@ const Container = styled.a`
     line-height: 19px;
     font-size: 14px;
   }
-
-  svg {
-    max-width: 48px;
-    max-height: 48px;
-    fill: none;
-    visibility: visible;
-    display: inline-block;
-  }
 `;
 
-const StyledIcon = styled.svg`
-  max-width: 48px;
-  max-height: 48px;
-  fill: none;
-  visibility: visible;
-  display: inline-block;
-  fill: ${({ theme }) => theme.secondaryPurple};
-`;
+const StyledIcon = styled.svg``;
 
 const StyledImg = styled.img`
   max-width: 48px;

diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx
@@ -15,6 +15,12 @@ import {
   useFundingContext,
 } from "hooks/useClassicAppealContext";
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
 const StyledField = styled(Field)`
   width: 100%;
   & > input {
@@ -86,7 +92,7 @@ const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
   const fundAppeal = useFundAppeal(parsedAmount);
 
   return needFund ? (
-    <div>
+    <Container>
       <label>How much ETH do you want to contribute?</label>
       <div>
         <StyledField
@@ -116,7 +122,7 @@ const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
           />
         </EnsureChain>
       </div>
-    </div>
+    </Container>
   ) : (
     <></>
   );

diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageOne.tsx
@@ -8,6 +8,7 @@ import {
   useOptionsContext,
   useSelectedOptionContext,
 } from "hooks/useClassicAppealContext";
+import { formatUnitsWei } from "utils/format";
 
 const Container = styled.div`
   margin: 24px 0;
@@ -20,7 +21,11 @@ const OptionsContainer = styled.div`
   margin-top: 12px;
 `;
 
-const StageOne: React.FC = () => {
+interface IStageOne {
+  setAmount: (val: string) => void;
+}
+
+const StageOne: React.FC<IStageOne> = ({ setAmount }) => {
   const { paidFees, winningChoice, loserRequiredFunding, winnerRequiredFunding } = useFundingContext();
   const options = useOptionsContext();
   const loserSideCountdown = useLoserSideCountdownContext();
@@ -33,17 +38,23 @@ const StageOne: React.FC = () => {
         {typeof paidFees !== "undefined" &&
           typeof winnerRequiredFunding !== "undefined" &&
           typeof loserRequiredFunding !== "undefined" &&
-          options?.map((answer: string, i: number) => (
-            <OptionCard
-              key={answer}
-              text={answer}
-              selected={i === selectedOption}
-              winner={i.toString() === winningChoice}
-              funding={paidFees[i] ? BigInt(paidFees[i]) : 0n}
-              required={i.toString() === winningChoice ? winnerRequiredFunding : loserRequiredFunding}
-              onClick={() => setSelectedOption(i)}
-            />
-          ))}
+          options?.map((answer: string, i: number) => {
+            const requiredFunding = i.toString() === winningChoice ? winnerRequiredFunding : loserRequiredFunding;
+            return (
+              <OptionCard
+                key={answer}
+                text={answer}
+                selected={i === selectedOption}
+                winner={i.toString() === winningChoice}
+                funding={paidFees[i] ? BigInt(paidFees[i]) : 0n}
+                required={requiredFunding}
+                onClick={() => {
+                  setSelectedOption(i);
+                  setAmount(formatUnitsWei(requiredFunding));
+                }}
+              />
+            );
+          })}
       </OptionsContainer>
     </Container>
   );

diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/StageTwo.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import OptionCard from "../../OptionCard";
 import { useFundingContext, useOptionsContext, useSelectedOptionContext } from "hooks/useClassicAppealContext";
 import { isUndefined } from "utils/index";
+import { formatUnitsWei } from "utils/format";
 
 const Container = styled.div`
   margin: 24px 0;
@@ -15,12 +16,17 @@ const OptionsContainer = styled.div`
   margin-top: 12px;
 `;
 
-const StageOne: React.FC = () => {
+interface IStageTwo {
+  setAmount: (val: string) => void;
+}
+
+const StageTwo: React.FC<IStageTwo> = ({ setAmount }) => {
   const { paidFees, winningChoice, winnerRequiredFunding, fundedChoices } = useFundingContext();
   const options = useOptionsContext();
   const { selectedOption, setSelectedOption } = useSelectedOptionContext();
   useEffect(() => {
     if (!isUndefined(winningChoice)) setSelectedOption(parseInt(winningChoice));
+    if (!isUndefined(winnerRequiredFunding)) setAmount(formatUnitsWei(winnerRequiredFunding));
   });
   return (
     <Container>
@@ -50,4 +56,4 @@ const StageOne: React.FC = () => {
   );
 };
 
-export default StageOne;
+export default StageTwo;