chore: smaller logo size, dont show court keyword if it ends with it, gap adjustment, max-width

Author: kemuru

web/src/components/ErrorFallback.tsx

@@ -17,7 +17,7 @@ const Container = styled.div`
   height: 100vh;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: 1400px;
   margin: 0 auto;
 `;
 

web/src/layout/Header/DesktopHeader.tsx

@@ -34,6 +34,7 @@ import Settings from "./navbar/Menu/Settings";
 const Container = styled.div`
   display: none;
   position: absolute;
+  height: 64px;
 
   ${landscapeStyle(
     () => css`

web/src/layout/Header/Logo.tsx

@@ -3,22 +3,19 @@ import styled, { Theme } from "styled-components";
 
 import { Link } from "react-router-dom";
 
-import KlerosCourtLogo from "svgs/header/kleros-court.svg";
-
 import { ArbitratorTypes, getArbitratorType } from "consts/index";
+
 import { isUndefined } from "utils/index";
 
+import KlerosCourtLogo from "svgs/header/kleros-court.svg";
+
 const Container = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 16px;
 `;
 
-const StyledLink = styled(Link)`
-  min-height: 48px;
-`;
-
 const BadgeContainer = styled.div<{ backgroundColor: keyof Theme }>`
   transform: skewX(-15deg);
   background-color: ${({ theme, backgroundColor }) => theme[backgroundColor]};
@@ -32,6 +29,9 @@ const BadgeText = styled.label`
 `;
 
 const StyledKlerosCourtLogo = styled(KlerosCourtLogo)`
+  max-height: 40px;
+  width: auto;
+
   &:hover {
     path {
       fill: ${({ theme }) => theme.white}BF;
@@ -61,9 +61,9 @@ const CourtBadge: React.FC = () => {
 const Logo: React.FC = () => (
   <Container>
     {" "}
-    <StyledLink to={"/"}>
+    <Link to={"/"}>
       <StyledKlerosCourtLogo />
-    </StyledLink>
+    </Link>
     <CourtBadge />
   </Container>
 );

web/src/layout/Header/MobileHeader.tsx

@@ -17,6 +17,7 @@ const Container = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 64px;
 
   ${landscapeStyle(
     () => css`

web/src/layout/Header/index.tsx

@@ -17,7 +17,7 @@ const Container = styled.div`
 
 const HeaderContainer = styled.div`
   width: 100%;
-  padding: 8px 24px;
+  padding: 0 24px;
 `;
 
 const Header: React.FC = () => {

web/src/pages/Cases/index.tsx

@@ -13,7 +13,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: 1400px;
   margin: 0 auto;
 `;
 

web/src/pages/Courts/CourtDetails/StakePanel/index.tsx

@@ -64,7 +64,8 @@ const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Cour
         </TagArea>
         <TextArea>
           <strong>{`${isStaking ? "Stake" : "Withdraw"} PNK`}</strong> {`${isStaking ? "to join the" : "from"}`}{" "}
-          {courtName} court
+          {courtName}
+          {courtName.toLowerCase().endsWith("court") || courtName.toLowerCase().startsWith("corte") ? null : " Court"}
         </TextArea>
         <StakeArea>
           <InputDisplay {...{ action, amount, setAmount }} />

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

@@ -1,6 +1,7 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 import { useParams } from "react-router-dom";
 import { Accordion } from "@kleros/ui-components-library";
@@ -39,11 +40,19 @@ const StyledAccordion = styled(Accordion)`
   }
   //adds padding to body container
   > * > div > div {
-    padding: 0 24px;
+    padding: 0;
   }
   [class*="accordion-item"] {
     margin: 0;
   }
+
+  ${landscapeStyle(
+    () => css`
+      > * > div > div {
+        padding: 0 24px;
+      }
+    `
+  )}
 `;
 
 const TimeDisplayContainer = styled.div`

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

@@ -77,14 +77,13 @@ const StakePanelAndStats = styled.div`
   flex-direction: row;
   justify-content: space-between;
   margin-top: 24px;
-  gap: 20px;
+  gap: 16px;
   flex-wrap: wrap;
 
   ${landscapeStyle(
     () => css`
       & > * {
-        flex: 1 1 calc(50% - 10px);
-        max-width: calc(50% - 10px);
+        flex: 1 1 calc(50% - 8px);
       }
     `
   )}

web/src/pages/Courts/index.tsx

@@ -12,7 +12,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: 1400px;
   margin: 0 auto;
 `;
 

web/src/pages/Dashboard/index.tsx

@@ -25,7 +25,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: 1400px;
   margin: 0 auto;
 `;
 

web/src/pages/GetPnk/index.tsx

@@ -19,7 +19,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: 1400px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;

web/src/pages/Home/index.tsx

@@ -22,7 +22,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: 1400px;
   margin: 0 auto;
 `;
 

web/src/pages/Resolver/index.tsx

@@ -38,7 +38,7 @@ const Container = styled.div`
   padding: ${responsiveSize(24, 32)};
   padding-top: ${responsiveSize(24, 28)};
   padding-bottom: ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: 1400px;
   margin: 0 auto;
 `;
 

web/src/pages/Settings/index.tsx

@@ -11,7 +11,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: 1400px;
   margin: 0 auto;
 `;