feat: improved overview page, evidence page, voting history page, rem…

…oved notif icon etc
kleros · Dec 7, 2024 · dc73747 · dc73747
1 parent 04f2d8d
commit dc73747
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 121 deletions.
diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx
@@ -26,7 +26,7 @@ const QuestionAndDescription = styled.div`
   word-wrap: break-word;
   div:first-child p:first-of-type {
     font-size: 16px;
-    font-weight: 600;
+    font-weight: 400;
     margin: 0;
   }
 `;
@@ -56,6 +56,16 @@ const Answer = styled.div`
   }
 `;
 
+const StyledSmall = styled.small`
+  color: ${({ theme }) => theme.secondaryText};
+  font-weight: 400;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.primaryText};
+  font-weight: 600;
+`;
+
 const AliasesContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -88,11 +98,11 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
         <AnswersContainer>
           {disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
             <Answer key={answer.title}>
-              <small>Option {i + 1}:</small>
-              <label>
+              <StyledSmall>{i + 1 + `.`}</StyledSmall>
+              <StyledLabel>
                 {answer.title}
                 {answer.description.trim() ? ` - ${answer.description}` : null}
-              </label>
+              </StyledLabel>
             </Answer>
           ))}
         </AnswersContainer>

diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
@@ -26,18 +26,33 @@ const StyledCard = styled(Card)`
   height: auto;
 `;
 
-const TextContainer = styled.div`
+const TopContent = styled.div`
+  display: flex;
+  flex-direction: column;
   padding: ${responsiveSize(8, 24)};
+  gap: 8px;
+  overflow-wrap: break-word;
+
   > * {
     overflow-wrap: break-word;
     margin: 0;
   }
-  > h3 {
+  p {
+    margin: 0;
+  }
+  h3 {
     display: inline-block;
-    margin: 0px 4px;
+    margin: 0;
   }
 `;
 
+const IndexAndName = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+`;
+
 const Index = styled.p`
   display: inline-block;
 `;
@@ -49,6 +64,9 @@ const StyledReactMarkdown = styled(ReactMarkdown)`
   code {
     color: ${({ theme }) => theme.secondaryText};
   }
+  p {
+    margin: 0;
+  }
 `;
 
 const BottomShade = styled.div`
@@ -65,25 +83,7 @@ const BottomShade = styled.div`
   }
 `;
 
-const AccountContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-
-  canvas {
-    width: 24px;
-    height: 24px;
-  }
-
-  > * {
-    flex-basis: 1;
-    flex-shrink: 0;
-    margin: 0;
-  }
-`;
-
-const LeftContent = styled.div`
+const BottomLeftContent = styled.div`
   display: block;
 
   & > *:not(:last-child) {
@@ -105,21 +105,45 @@ const LeftContent = styled.div`
   )}
 `;
 
+const AccountContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+
+  canvas {
+    width: 24px;
+    height: 24px;
+  }
+
+  > * {
+    flex-basis: 1;
+    flex-shrink: 0;
+    margin: 0;
+  }
+`;
+
 const HoverStyle = css`
   :hover {
     text-decoration: underline;
     color: ${({ theme }) => theme.primaryBlue};
     cursor: pointer;
   }
+  :hover {
+    label {
+      text-decoration: underline;
+      color: ${({ theme }) => theme.primaryBlue};
+      cursor: pointer;
+    }
+  }
 `;
 
 const Address = styled.p`
   ${HoverStyle}
   margin: 0;
 `;
 
-const Timestamp = styled.label`
-  color: ${({ theme }) => theme.secondaryText};
+const StyledExternalLink = styled(ExternalLink)`
   ${HoverStyle}
 `;
 
@@ -191,29 +215,25 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
 
   return (
     <StyledCard>
-      <TextContainer>
-        <Index>#{index}:</Index>
-        {name && description ? (
-          <>
-            <h3>{name}</h3>
-            <StyledReactMarkdown>{description}</StyledReactMarkdown>
-          </>
-        ) : (
-          <p>{evidence}</p>
-        )}
-      </TextContainer>
+      <TopContent>
+        <IndexAndName>
+          <Index>#{index}: </Index>
+          <h3>{name}</h3>
+        </IndexAndName>
+        {name && description ? <StyledReactMarkdown>{description}</StyledReactMarkdown> : <p>{evidence}</p>}
+      </TopContent>
       <BottomShade>
-        <LeftContent>
+        <BottomLeftContent>
           <AccountContainer>
             <Identicon size="24" string={sender} />
             <ExternalLink to={addressExplorerLink} rel="noopener noreferrer" target="_blank">
               <Address>{shortenAddress(sender)}</Address>
             </ExternalLink>
           </AccountContainer>
-          <ExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
-            <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
-          </ExternalLink>
-        </LeftContent>
+          <StyledExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
+            <label>{formatDate(Number(timestamp), true)}</label>
+          </StyledExternalLink>
+        </BottomLeftContent>
         {fileURI && fileURI !== "-" ? (
           <FileLinkContainer>
             <StyledInternalLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>

diff --git a/web/src/components/Verdict/Answer.tsx b/web/src/components/Verdict/Answer.tsx
@@ -11,17 +11,6 @@ const Container = styled.div`
   gap: 6px;
 `;
 
-const AnswerTitle = styled.h3`
-  margin: 0;
-`;
-
-const AnswerDescription = styled.h4`
-  margin: 0;
-  font-size: 15px;
-  color: ${({ theme }) => theme.primaryText};
-  padding-bottom: 0.5px;
-`;
-
 interface IAnswer {
   answer?: Answer;
   currentRuling: number;
@@ -32,14 +21,16 @@ const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
     <>
       {answer ? (
         <Container>
-          <AnswerTitle>
+          <small>
             {answer.title}
             {answer.description.trim() ? " -" : null}
-          </AnswerTitle>
-          <AnswerDescription>{answer.description.trim()}</AnswerDescription>
+          </small>
+          <small>{answer.description.trim()}</small>
         </Container>
       ) : (
-        <Container>{currentRuling !== 0 ? <h3>Answer 0x{currentRuling}</h3> : <h3>Refuse to Arbitrate</h3>}</Container>
+        <Container>
+          {currentRuling !== 0 ? <small>Answer 0x{currentRuling}</small> : <small>Refuse to Arbitrate</small>}
+        </Container>
       )}
     </>
   );

diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx
@@ -24,7 +24,6 @@ import { responsiveSize } from "styles/responsiveSize";
 const Container = styled.div`
   display: flex;
   position: relative;
-  margin-left: 8px;
   flex-direction: column;
 `;
 

diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx
@@ -41,6 +41,14 @@ const JuryContainer = styled.div`
   }
 `;
 
+const VerdictContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(6, 8)};
+`;
+
 const JuryDecisionTag = styled.small`
   font-weight: 400;
   line-height: 19px;
@@ -51,6 +59,15 @@ const StyledDivider = styled(Divider)`
   margin: ${responsiveSize(16, 24)} 0px;
 `;
 
+const ReStyledArrowLink = styled(StyledArrowLink)`
+  font-size: 14px;
+
+  > svg {
+    height: 15px;
+    width: 15px;
+  }
+`;
+
 interface IFinalDecision {
   arbitrable?: `0x${string}`;
 }
@@ -81,27 +98,28 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
 
   return (
     <Container>
-      <VerdictBanner ruled={ruled} />
-
-      {ruled && (
-        <JuryContainer>
-          <JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>
-          <AnswerDisplay {...{ answer, currentRuling }} />
-        </JuryContainer>
-      )}
-      {!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && (
-        <JuryContainer>
-          <JuryDecisionTag>This option is winning:</JuryDecisionTag>
-          <AnswerDisplay {...{ answer, currentRuling }} />
-        </JuryContainer>
-      )}
+      <VerdictContainer>
+        <VerdictBanner ruled={ruled} />
+        {ruled && (
+          <JuryContainer>
+            <JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>
+            <AnswerDisplay {...{ answer, currentRuling }} />
+          </JuryContainer>
+        )}
+        {!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && (
+          <JuryContainer>
+            <JuryDecisionTag>This option is winning:</JuryDecisionTag>
+            <AnswerDisplay {...{ answer, currentRuling }} />
+          </JuryContainer>
+        )}
+      </VerdictContainer>
       <StyledDivider />
       {isLoading && !isDisconnected ? (
         <Skeleton width={250} height={20} />
       ) : (
-        <StyledArrowLink to={`/cases/${id?.toString()}/voting`}>
+        <ReStyledArrowLink to={`/cases/${id?.toString()}/voting`}>
           {buttonText} <ArrowIcon />
-        </StyledArrowLink>
+        </ReStyledArrowLink>
       )}
     </Container>
   );

diff --git a/web/src/components/Verdict/VerdictBanner.tsx b/web/src/components/Verdict/VerdictBanner.tsx
@@ -7,7 +7,7 @@ import HourglassIcon from "svgs/icons/hourglass.svg";
 const BannerContainer = styled.div`
   display: flex;
   gap: 8px;
-  margin-bottom: 8px;
+  align-items: center;
   svg {
     width: 16px;
     height: 16px;

diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx
@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
 import HelpIcon from "svgs/menu-icons/help.svg";
 import LightModeIcon from "svgs/menu-icons/light-mode.svg";
-import NotificationsIcon from "svgs/menu-icons/notifications.svg";
+// import NotificationsIcon from "svgs/menu-icons/notifications.svg";
 import SettingsIcon from "svgs/menu-icons/settings.svg";
 
 import { useToggleTheme } from "hooks/useToggleThemeContext";
@@ -57,7 +57,7 @@ const Menu: React.FC<ISettings & IHelp & IMenu> = ({ toggleIsHelpOpen, toggleIsS
   const isLightTheme = theme === "light";
 
   const buttons = [
-    { text: "Notifications", Icon: NotificationsIcon },
+    // { text: "Notifications", Icon: NotificationsIcon },
     {
       text: "Settings",
       Icon: SettingsIcon,

diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx
@@ -41,7 +41,6 @@ const ScrollButton = styled(Button)`
   background-color: transparent;
   padding: 0;
   flex-direction: row-reverse;
-  margin: 0 0 18px;
   gap: 8px;
   .button-text {
     color: ${({ theme }) => theme.primaryBlue};