Merge pull request #1211 from kleros/feat(web)/desktop-navbar-and-responsiveness

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

Author: alcercu

…/svgs/header/header-darkmode-desktop.svg …sets/svgs/hero/hero-darkmode-desktop.svgweb/src/assets/svgs/header/header-darkmode-desktop.svg renamed to web/src/assets/svgs/hero/hero-darkmode-desktop.svg web/src/assets/svgs/header/header-darkmode-desktop.svg renamed to web/src/assets/svgs/hero/hero-darkmode-desktop.svg

@@ -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}` }>`

…s/svgs/header/header-darkmode-mobile.svg …ssets/svgs/hero/hero-darkmode-mobile.svgweb/src/assets/svgs/header/header-darkmode-mobile.svg renamed to web/src/assets/svgs/hero/hero-darkmode-mobile.svg web/src/assets/svgs/header/header-darkmode-mobile.svg renamed to web/src/assets/svgs/hero/hero-darkmode-mobile.svg

@@ -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 />;
 };
 

…svgs/header/header-lightmode-desktop.svg …ets/svgs/hero/hero-lightmode-desktop.svgweb/src/assets/svgs/header/header-lightmode-desktop.svg renamed to web/src/assets/svgs/hero/hero-lightmode-desktop.svg web/src/assets/svgs/header/header-lightmode-desktop.svg renamed to web/src/assets/svgs/hero/hero-lightmode-desktop.svg

@@ -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>