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/DisputeContext.tsx

@@ -27,13 +27,10 @@ const QuestionAndDescription = styled.div`
   div:first-child p:first-of-type {
     font-size: 16px;
     font-weight: 600;
+    margin: 0;
   }
 `;
 
-const StyledReactMarkDown = styled(ReactMarkdown)`
-  margin: 0px;
-`;
-
 const VotingOptions = styled(QuestionAndDescription)`
   display: flex;
   flex-direction: column;
@@ -45,11 +42,15 @@ const AnswersContainer = styled.div`
   flex-direction: column;
 `;
 
+const AnswersHeader = styled.h3`
+  margin: 0;
+`;
+
 const Answer = styled.div`
   margin: 0px;
   display: flex;
   flex-wrap: wrap;
-  gap: ${responsiveSize(2, 8)};
+  gap: 6px;
   > label {
     max-width: 100%;
   }
@@ -70,11 +71,11 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
   const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR;
   return (
     <>
-      <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : disputeDetails?.title ?? errMsg}</StyledH1>
+      <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
       {!isUndefined(disputeDetails) && (
         <QuestionAndDescription>
-          <StyledReactMarkDown>{disputeDetails?.question}</StyledReactMarkDown>
-          <StyledReactMarkDown>{disputeDetails?.description}</StyledReactMarkDown>
+          <ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
+          <ReactMarkdown>{disputeDetails?.description}</ReactMarkdown>
         </QuestionAndDescription>
       )}
       {isUndefined(disputeDetails?.frontendUrl) ? null : (
@@ -83,14 +84,14 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
         </a>
       )}
       <VotingOptions>
-        {isUndefined(disputeDetails) ? null : <h3>Voting Options</h3>}
+        {isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
         <AnswersContainer>
           {disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
             <Answer key={answer.title}>
               <small>Option {i + 1}:</small>
               <label>
                 {answer.title}
-                {answer.description ? ` - ${answer.description}` : null}
+                {answer.description.trim() ? ` - ${answer.description}` : null}
               </label>
             </Answer>
           ))}

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: 8px 16px;
   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;