feat(web): desktop responsiveness navbar, footer, community section, dashboard juror info, home page..

web/src/components/ConnectWallet/AccountDisplay.tsx

@@ -1,14 +1,31 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi";
 import Identicon from "react-identicons";
 import { shortenAddress } from "utils/shortenAddress";
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  height: auto;
   align-items: flex-start;
   gap: 8px;
+  align-items: center;
+  background-color: ${({ theme }) => theme.whiteBackground};
+  padding: 0px;
+
+  ${landscapeStyle(
+    () => css`
+      background-color: ${({ theme }) => theme.whiteLowOpacity};
+      flex-direction: row;
+      align-content: center;
+      border-radius: 300px;
+      gap: 0px;
+      padding: 0 12px;
+    `
+  )}
 `;
 
 const AccountContainer = styled.div`
@@ -17,22 +34,36 @@ const AccountContainer = styled.div`
   align-items: center;
   width: fit-content;
   gap: 8px;
+
   > label {
-    color: ${({ theme }) => theme.primaryText};
     font-size: 16px;
     font-weight: 600;
   }
+
+  ${landscapeStyle(
+    () => css`
+      gap: 12px;
+      > label {
+        color: ${({ theme }) => theme.primaryText};
+        font-weight: 400;
+        font-size: 14px;
+      }
+    `
+  )}
 `;
 const ChainConnectionContainer = styled.div`
+  display: flex;
   width: fit-content;
   min-height: 32px;
-  display: flex;
   align-items: center;
+  padding-left: 0px;
   > label {
     color: ${({ theme }) => theme.success};
     font-size: 16px;
-    margin-right: 4px;
+
+    font-weight: 500;
   }
+
   :before {
     content: "";
     width: 8px;
@@ -41,6 +72,12 @@ const ChainConnectionContainer = styled.div`
     border-radius: 50%;
     background-color: ${({ theme }) => theme.success};
   }
+
+  ${landscapeStyle(
+    () => css`
+      display: none;
+    `
+  )}
 `;
 
 const StyledIdenticon = styled(Identicon)<{ size: `${number}` }>`

web/src/components/ConnectWallet/index.tsx

@@ -1,19 +1,9 @@
 import React from "react";
-import styled from "styled-components";
 import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
 import { useWeb3Modal } from "@web3modal/react";
 import { Button } from "@kleros/ui-components-library";
 import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 import AccountDisplay from "./AccountDisplay";
-import { DisconnectWalletButton } from "layout/Header/navbar/Menu/Settings/General";
-
-const Container = styled.div`
-  display: flex;
-  gap: 16px;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: center;
-`;
 
 export const SwitchChainButton: React.FC = () => {
   const { switchNetwork, isLoading } = useSwitchNetwork();
@@ -49,13 +39,7 @@ const ConnectWallet: React.FC = () => {
   if (isConnected) {
     if (chain && chain.id !== DEFAULT_CHAIN) {
       return <SwitchChainButton />;
-    } else
-      return (
-        <Container>
-          <AccountDisplay />
-          <DisconnectWalletButton />
-        </Container>
-      );
+    } else return <AccountDisplay />;
   } else return <ConnectButton />;
 };
 

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 { landscapeStyle } from "styles/landscapeStyle";
 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,62 @@ const BottomShade = styled.div`
 `;
 
 const StyledA = styled.a`
+  display: flex;
   margin-left: auto;
-  margin-right: 8px;
+  gap: calc(5px + (6 - 5) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+
+  ${landscapeStyle(
+    () => css`
+      > svg {
+        width: 16px;
+        fill: ${({ theme }) => theme.primaryBlue};
+      }
+    `
+  )}
+`;
+
+const AccountContainer = styled.div`
   display: flex;
-  > svg {
-    width: 16px;
-    fill: ${({ theme }) => theme.primaryBlue};
+  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`
+  display: none;
+  ${landscapeStyle(
+    () => css`
+      display: inline;
+    `
+  )}
+`;
+
+const MobileText = styled.span`
+  ${landscapeStyle(
+    () => css`
+      display: none;
+    `
+  )}
+`;
+
+const AttachedFileText: React.FC = () => (
+  <>
+    <DesktopText>View attached file</DesktopText>
+    <MobileText>File</MobileText>
+  </>
+);
+
 interface IEvidenceCard {
   evidence: string;
   sender: string;
@@ -73,11 +121,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>

web/src/components/Overlay.tsx

@@ -7,5 +7,5 @@ export const Overlay = styled.div`
   width: 100vw;
   height: 100vh;
   background-color: ${({ theme }) => theme.blackLowOpacity};
-  z-index: 0;
+  z-index: 1;
 `;

web/src/components/Popup/index.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import { Button } from "@kleros/ui-components-library";
 import { Overlay } from "components/Overlay";
 import StakeWithdraw from "./Description/StakeWithdraw";
@@ -44,6 +45,8 @@ const Container = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  max-height: 80vh;
+  overflow-y: auto;
 
   z-index: 10;
   flex-direction: column;
@@ -59,6 +62,12 @@ const Container = styled.div`
   svg {
     visibility: visible;
   }
+
+  ${landscapeStyle(
+    () => css`
+      overflow-y: hidden;
+    `
+  )}
 `;
 
 const VoteDescriptionContainer = styled.div`

web/src/components/StatDisplay.tsx

@@ -1,10 +1,18 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import styled, { useTheme, css } from "styled-components";
 
 const Container = styled.div`
   display: flex;
+  max-width: 196px;
   align-items: center;
   gap: 8px;
+
+  ${landscapeStyle(
+    () => css`
+      margin-bottom: calc(16px + (30 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+    `
+  )}
 `;
 
 const SVGContainer = styled.div<{ iconColor: string; backgroundColor: string }>`

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 {