From dc737479ea67938ef0fab555cc39fc96acf60be4 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Sat, 7 Dec 2024 06:14:53 +0100 Subject: [PATCH] feat: improved overview page, evidence page, voting history page, removed notif icon etc --- .../DisputePreview/DisputeContext.tsx | 18 +++- web/src/components/EvidenceCard.tsx | 100 +++++++++++------- web/src/components/Verdict/Answer.tsx | 21 ++-- .../components/Verdict/DisputeTimeline.tsx | 1 - web/src/components/Verdict/FinalDecision.tsx | 50 ++++++--- web/src/components/Verdict/VerdictBanner.tsx | 2 +- web/src/layout/Header/navbar/Menu/index.tsx | 4 +- .../Cases/CaseDetails/Evidence/index.tsx | 1 - .../CaseDetails/Voting/VotesDetails/index.tsx | 19 ++-- .../CaseDetails/Voting/VotingHistory.tsx | 67 +++++++----- .../pages/Cases/CaseDetails/Voting/index.tsx | 10 +- .../StakePanel/Simulator/index.tsx | 2 +- web/src/utils/beautifyStatNumber.ts | 2 +- 13 files changed, 176 insertions(+), 121 deletions(-) diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 12ce6a104..6f1cba411 100644 --- 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 = ({ disputeDetails, isRp {disputeDetails?.answers?.map((answer: IAnswer, i: number) => ( - Option {i + 1}: - + ))} diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index f561cbd70..a4facdb7f 100644 --- 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,12 +105,37 @@ 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` @@ -118,8 +143,7 @@ const Address = styled.p` margin: 0; `; -const Timestamp = styled.label` - color: ${({ theme }) => theme.secondaryText}; +const StyledExternalLink = styled(ExternalLink)` ${HoverStyle} `; @@ -191,29 +215,25 @@ const EvidenceCard: React.FC = ({ return ( - - #{index}: - {name && description ? ( - <> -

{name}

- {description} - - ) : ( -

{evidence}

- )} - + + + #{index}: +

{name}

+ + {name && description ? {description} :

{evidence}

} + - +
{shortenAddress(sender)}
 - - {formatDate(Number(timestamp), true)} - - + + + + {fileURI && fileURI !== "-" ? ( diff --git a/web/src/components/Verdict/Answer.tsx b/web/src/components/Verdict/Answer.tsx index 7eb3553e0..ba2ba3f0f 100644 --- 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 = ({ answer, currentRuling }) => { <> {answer ? ( - + {answer.title} {answer.description.trim() ? " -" : null} - - {answer.description.trim()} + + {answer.description.trim()} ) : ( - {currentRuling !== 0 ?

Answer 0x{currentRuling}

:

Refuse to Arbitrate

} + + {currentRuling !== 0 ? Answer 0x{currentRuling} : Refuse to Arbitrate} + )} ); diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx index 79dc38cc7..0947ab043 100644 --- 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 index 3b0a01ce4..b5e15b2b3 100644 --- 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 = ({ arbitrable }) => { return ( - - - {ruled && ( - - The jury decided in favor of: - - - )} - {!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && ( - - This option is winning: - - - )} + + + {ruled && ( + + The jury decided in favor of: + + + )} + {!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && ( + + This option is winning: + + + )} + {isLoading && !isDisconnected ? ( ) : ( - + {buttonText} - + )} ); diff --git a/web/src/components/Verdict/VerdictBanner.tsx b/web/src/components/Verdict/VerdictBanner.tsx index cb6d33619..3c5bf544f 100644 --- 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 index a54ff3240..354f690be 100644 --- 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 = ({ 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 index d3c6173ae..40f32dc4f 100644 --- 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}; diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx index d385532f9..83e557044 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx @@ -17,22 +17,25 @@ import AccordionTitle from "./AccordionTitle"; const Container = styled.div` display: flex; flex-direction: column; - margin-top: 8px; `; const StyledAccordion = styled(CustomAccordion)` width: 100%; - > * > button { - justify-content: unset; - padding: 11.5px ${responsiveSize(8, 18)} !important; + + [class*="accordion-item"] { + margin: 0; + } + + [class*="accordion-button"] { + padding: 16px ${responsiveSize(8, 18)} !important; background-color: ${({ theme }) => theme.whiteBackground} !important; border: 1px solid ${({ theme }) => theme.stroke} !important; > svg { fill: ${({ theme }) => theme.primaryText} !important; } } - //adds padding to body container - > * > div > div { + + [class*="Body"] { padding: ${responsiveSize(16, 24)} ${responsiveSize(8, 16)}; } `; @@ -40,8 +43,8 @@ const StyledAccordion = styled(CustomAccordion)` const StyledCard = styled(Card)` width: 100%; height: auto; - padding: 11.5px ${responsiveSize(8, 18)}; - margin: 8px 0; + padding: 16px ${responsiveSize(8, 18)}; + border: 1px solid ${({ theme }) => theme.stroke}; `; const AccordionContentContainer = styled.div` diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx index 402c4f3e8..831dac2be 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx @@ -25,12 +25,14 @@ import PendingVotesBox from "./PendingVotesBox"; import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators"; import VotesAccordion from "./VotesDetails"; -const Container = styled.div``; +const Container = styled.div` + display: flex; + flex-direction: column; + gap: ${responsiveSize(16, 24)}; +`; const StyledTabs = styled(Tabs)` width: 100%; - margin-bottom: 16px; - margin-top: 48px; `; const Header = styled.div` @@ -40,7 +42,6 @@ const Header = styled.div` align-items: center; justify-content: space-between; gap: 16px; - margin-bottom: ${responsiveSize(16, 32)}; `; const StyledTitle = styled.h1` @@ -50,6 +51,14 @@ const StyledTitle = styled.h1` const StyledReactMarkDown = styled(ReactMarkdown)` max-width: inherit; word-wrap: break-word; + p { + margin: 0; + } +`; + +const TabsContainer = styled.div` + display: flex; + flex-direction: column; `; const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean }> = ({ arbitrable, isQuestion }) => { @@ -75,6 +84,10 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean return ( +
Voting History )} - - ({ - text: `Round ${i + 1}`, - value: i, - }))} - callback={(i: number) => setCurrentTab(i)} - /> - - + + ({ + text: `Round ${i + 1}`, + value: i, + }))} + callback={(i: number) => setCurrentTab(i)} + /> + + + ) : ( diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index 1b2ea3571..75d0226ad 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/index.tsx @@ -31,6 +31,11 @@ const Container = styled.div` padding-bottom: ${responsiveSize(8, 16)}; `; +const InfoCardContainer = styled.div` + display: flex; + margin-bottom: ${responsiveSize(16, 24)}; +`; + const useFinalDate = (lastPeriodChange: string, currentPeriodIndex?: number, timesPerPeriod?: string[]) => useMemo(() => { if (!isUndefined(currentPeriodIndex) && !isUndefined(timesPerPeriod)) @@ -70,14 +75,13 @@ const Voting: React.FC = ({ arbitrable, currentPeriodIndex }) => { )} {userWasDrawn || isDisconnected ? null : ( - <> + {isDrawDataLoading ? ( ) : ( )} -
- + )} {isPopupOpen && ( diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx index 95aadc68e..134045dbe 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx @@ -232,7 +232,7 @@ const Simulator: React.FC = ({ amountToStake, isStaking }) => { - {simulatorItems.map((item, index) => ( + {simulatorItems.map((item) => ( {item.icon} diff --git a/web/src/utils/beautifyStatNumber.ts b/web/src/utils/beautifyStatNumber.ts index 04ceae540..0c2051536 100644 --- a/web/src/utils/beautifyStatNumber.ts +++ b/web/src/utils/beautifyStatNumber.ts @@ -18,7 +18,7 @@ export function beautifyStatNumber(value: number, invertValue: boolean = false): } } - return commify(value.toFixed(0)); + return commify(value.toFixed(2)); } export function unbeautifyStatNumber(value: string): number {