feat: bunch of bug fixes, style impros, arrangement impros, refactors

web/src/app.tsx

@@ -95,7 +95,7 @@ const App: React.FC = () => {
                             </Suspense>
                           }
                         />
-                        <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+                        <Route path="*" element={<h1>Page not found</h1>} />
                       </Route>
                     </SentryRoutes>
                   </NewDisputeProvider>

web/src/components/CasesDisplay/index.tsx

@@ -24,6 +24,10 @@ const StyledTitle = styled.h1`
   margin: 0px;
 `;
 
+const StyledLabel = styled.label`
+  font-size: 16px;
+`;
+
 interface ICasesDisplay extends ICasesGrid {
   numberDisputes?: number;
   numberClosedDisputes?: number;
@@ -54,10 +58,10 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
         ) : null}
       </TitleContainer>
       <Search />
-      <StatsAndFilters totalDisputes={numberDisputes ?? 0} closedDisputes={numberClosedDisputes ?? 0} />
+      <StatsAndFilters totalDisputes={numberDisputes || 0} closedDisputes={numberClosedDisputes || 0} />
 
       {disputes?.length === 0 ? (
-        <h1>No cases found</h1>
+        <StyledLabel>No cases found</StyledLabel>
       ) : (
         <CasesGrid
           disputes={disputes}

web/src/components/DisputePreview/Policies.tsx

@@ -1,44 +1,30 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 import PaperclipIcon from "svgs/icons/paperclip.svg";
 import PolicyIcon from "svgs/icons/policy.svg";
 
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { isUndefined } from "utils/index";
 
-import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import { InternalLink } from "components/InternalLink";
 
-const ShadeArea = styled.div`
+const Container = styled.div`
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(16, 24)};
   padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)};
-  margin-top: 16px;
   background-color: ${({ theme }) => theme.mediumBlue};
-
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-      justify-content: space-between;
-    `
-  )};
 `;
 
 const StyledP = styled.p`
   font-size: 14px;
-  margin-top: 0;
-  margin-bottom: 16px;
+  margin: 0;
   color: ${({ theme }) => theme.primaryBlue};
-  ${landscapeStyle(
-    () => css`
-      margin-bottom: 0;
-    `
-  )};
 `;
 
 const StyledPolicyIcon = styled(PolicyIcon)`
@@ -51,13 +37,6 @@ const StyledPaperclipIcon = styled(PaperclipIcon)`
   fill: ${({ theme }) => theme.primaryBlue};
 `;
 
-const LinkContainer = styled.div`
-  display: flex;
-  gap: ${responsiveSize(16, 24)};
-  flex-wrap: wrap;
-  align-items: center;
-`;
-
 const StyledInternalLink = styled(InternalLink)`
   display: flex;
   gap: 4px;
@@ -82,28 +61,26 @@ interface IPolicies {
 
 export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attachment }) => {
   return (
-    <ShadeArea>
-      <StyledP>Make sure you read and understand the Policies</StyledP>
-      <LinkContainer>
-        {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
-          <StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
-            <StyledPaperclipIcon />
-            {attachment.label ?? "Attachment"}
-          </StyledInternalLink>
-        ) : null}
-        {isUndefined(disputePolicyURI) ? null : (
-          <StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
-            <StyledPolicyIcon />
-            Dispute Policy
-          </StyledInternalLink>
-        )}
-        {isUndefined(courtId) ? null : (
-          <StyledInternalLink to={`/courts/${courtId}/policy?section=description`}>
-            <StyledPolicyIcon />
-            Court Policy
-          </StyledInternalLink>
-        )}
-      </LinkContainer>
-    </ShadeArea>
+    <Container>
+      <StyledP>Policy documents:</StyledP>
+      {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
+        <StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
+          <StyledPaperclipIcon />
+          {attachment.label ?? "Attachment"}
+        </StyledInternalLink>
+      ) : null}
+      {isUndefined(disputePolicyURI) ? null : (
+        <StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
+          <StyledPolicyIcon />
+          Dispute Policy
+        </StyledInternalLink>
+      )}
+      {isUndefined(courtId) ? null : (
+        <StyledInternalLink to={`/courts/${courtId}/policy?section=description`}>
+          <StyledPolicyIcon />
+          Court Policy
+        </StyledInternalLink>
+      )}
+    </Container>
   );
 };

web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

@@ -1,14 +1,9 @@
-import React, { useMemo } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 
-import LawBalanceIcon from "svgs/icons/law-balance.svg";
-
-import { useCourtTree } from "hooks/queries/useCourtTree";
-
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import Field, { IField } from "components/Field";
-import { getCourtsPath } from "pages/Courts/CourtDetails";
 
 import CardLabel from "../CardLabels";
 
@@ -22,12 +17,6 @@ const Container = styled.div`
   justify-content: flex-end;
 `;
 
-const CourtBranchFieldContainer = styled.div`
-  display: flex;
-  margin-top: 16px;
-  flex-wrap: wrap;
-`;
-
 const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
   display: flex;
   flex-direction: column;
@@ -42,7 +31,6 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
     css`
       ${landscapeStyle(
         () => css`
-          margin-top: 16px;
           gap: 32px;
           flex-direction: row;
           flex-wrap: wrap;
@@ -56,7 +44,6 @@ const StyledField = styled(Field)`
   max-width: 100%;
   label {
     &.value {
-      margin-left: 8px;
       overflow: hidden;
       text-overflow: ellipsis;
       text-wrap: auto;
@@ -66,36 +53,9 @@ const StyledField = styled(Field)`
 
 type IDisputeInfoCard = { fieldItems: FieldItem[] } & IDisputeInfo;
 
-const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
-  isOverview,
-  showLabels,
-  fieldItems,
-  court,
-  courtId,
-  disputeID,
-  round,
-}) => {
-  const { data } = useCourtTree();
-  const courtPath = getCourtsPath(data?.court, courtId);
-  const items = useMemo(
-    () => [...(courtPath?.map((node) => ({ text: node.name, value: node.id })) ?? [])],
-    [courtPath]
-  );
-
-  const courtBranchValue = items.map((item) => item.text).join(" / ");
+const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({ isOverview, showLabels, fieldItems, disputeID, round }) => {
   return (
     <Container>
-      {court && courtId && isOverview && (
-        <CourtBranchFieldContainer>
-          <StyledField
-            link={`/courts/${courtId}`}
-            icon={LawBalanceIcon}
-            name="Court Branch"
-            value={courtBranchValue}
-            {...{ isOverview }}
-          />
-        </CourtBranchFieldContainer>
-      )}
       <RestOfFieldsContainer {...{ isOverview }}>
         {fieldItems.map((item) =>
           item.display ? <StyledField key={item.name} {...(item as IField)} {...{ isOverview }} /> : null

web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx

@@ -30,6 +30,7 @@ const RestOfFieldsContainer = styled.div`
   grid-template-columns: repeat(3, min-content);
   justify-content: start;
 `;
+
 const StyledField = styled(Field)<{ style?: string }>`
   ${({ style }) => style ?? ""}
 `;

web/src/components/DisputeView/DisputeInfo/index.tsx

@@ -76,7 +76,7 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
         name: "Court",
         value: court,
         link: `/courts/${courtId}`,
-        display: !isUndefined(court) && !isUndefined(courtId) && !isOverview,
+        display: !isUndefined(court) && !isUndefined(courtId),
       },
       {
         icon: RoundIcon,

web/src/components/Field.tsx

@@ -48,6 +48,9 @@ const FieldContainer = styled.div<FieldContainerProps>`
             text-align: none;
             font-weight: 600;
           }
+          a {
+            font-weight: 600;
+          }
           svg {
             margin-right: 0;
           }
@@ -56,7 +59,9 @@ const FieldContainer = styled.div<FieldContainerProps>`
     `};
 `;
 
-const LinkContainer = styled.div``;
+const LinkContainer = styled.div`
+  padding-bottom: 1px;
+`;
 
 const StyledInternalLink = styled(InternalLink)`
   text-wrap: auto;

web/src/components/LightButton.tsx

@@ -4,7 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 
 import { Button } from "@kleros/ui-components-library";
 
-const StyledButton = styled(Button)`
+const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
   background-color: transparent;
   padding: 8px !important;
   border-radius: 7px;
@@ -13,12 +13,12 @@ const StyledButton = styled(Button)`
     font-weight: 400;
   }
   .button-svg {
-    fill: ${({ theme }) => theme.white}BF !important;
+    fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.secondaryText : `${theme.white}BF`)} !important;
   }
 
   &:hover {
     .button-svg {
-      fill: ${({ theme }) => theme.white} !important;
+      fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important;
     }
     transition: background-color 0.1s;
     background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
@@ -40,10 +40,11 @@ interface ILightButton {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;
   className?: string;
+  isMobileNavbar?: boolean;
 }
 
-const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className }) => (
-  <StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className }} />
+const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
+  <StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className, isMobileNavbar }} />
 );
 
 export default LightButton;

web/src/components/Verdict/Answer.tsx

@@ -3,9 +3,24 @@ import styled from "styled-components";
 
 import { Answer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+`;
+
 const AnswerTitle = styled.h3`
   margin: 0;
 `;
+
+const AnswerDescription = styled.h4`
+  margin: 0;
+  font-size: 15px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
 interface IAnswer {
   answer?: Answer;
   currentRuling: number;
@@ -14,12 +29,12 @@ const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
   return (
     <>
       {answer ? (
-        <div>
+        <Container>
           <AnswerTitle>{answer.title}</AnswerTitle>
-          <small>{answer.description}</small>
-        </div>
+          <AnswerDescription>{answer.description}</AnswerDescription>
+        </Container>
       ) : (
-        <>{currentRuling !== 0 ? <h3>Answer 0x{currentRuling}</h3> : <h3>Refuse to Arbitrate</h3>}</>
+        <Container>{currentRuling !== 0 ? <h3>Answer 0x{currentRuling}</h3> : <h3>Refuse to Arbitrate</h3>}</Container>
       )}
     </>
   );

web/src/components/Verdict/FinalDecision.tsx

@@ -30,8 +30,11 @@ const Container = styled.div`
 
 const JuryContainer = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 8px;
+
   h3 {
     line-height: 21px;
     margin-bottom: 0px;
@@ -45,7 +48,7 @@ const JuryDecisionTag = styled.small`
 `;
 
 const StyledDivider = styled(Divider)`
-  margin: ${responsiveSize(16, 32)} 0px;
+  margin: ${responsiveSize(16, 24)} 0px;
 `;
 
 interface IFinalDecision {

web/src/components/Verdict/VerdictBanner.tsx

@@ -4,12 +4,10 @@ import styled from "styled-components";
 import ClosedCaseIcon from "svgs/icons/check-circle-outline.svg";
 import HourglassIcon from "svgs/icons/hourglass.svg";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 const BannerContainer = styled.div`
   display: flex;
   gap: 8px;
-  margin-bottom: ${responsiveSize(16, 24)};
+  margin-bottom: 8px;
   svg {
     width: 16px;
     height: 16px;