From 53e4bc4948a0e9c2277b3de414338479b38c18da Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Sun, 1 Dec 2024 16:56:19 +0100 Subject: [PATCH 01/11] feat: hover effects in case cards, anchors, bug fix in court page --- web/src/components/CasesDisplay/index.tsx | 19 +++----------- .../DisputeView/DisputeCardView.tsx | 7 ++++- .../DisputeView/DisputeListView.tsx | 8 +++++- web/src/components/Field.tsx | 4 +++ web/src/components/StyledArrowLink.tsx | 23 ++++++++++++++++ web/src/components/Verdict/FinalDecision.tsx | 25 ++++-------------- .../pages/Courts/CourtDetails/Description.tsx | 2 +- .../Dashboard/Courts/CourtCard/CourtName.tsx | 26 ++++++++----------- .../Home/TopJurors/JurorCard/JurorTitle.tsx | 2 +- web/src/styles/global-style.ts | 7 ++++- 10 files changed, 68 insertions(+), 55 deletions(-) create mode 100644 web/src/components/StyledArrowLink.tsx diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 5fdf19a3b..5f0d052b3 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/web/src/components/CasesDisplay/index.tsx @@ -7,11 +7,10 @@ import ArrowIcon from "svgs/icons/arrow.svg"; import { responsiveSize } from "styles/responsiveSize"; -import LightButton from "../LightButton"; - import CasesGrid, { ICasesGrid } from "./CasesGrid"; import Search from "./Search"; import StatsAndFilters from "./StatsAndFilters"; +import { StyledArrowLink } from "../StyledArrowLink"; const TitleContainer = styled.div` display: flex; @@ -25,16 +24,6 @@ const StyledTitle = styled.h1` margin: 0px; `; -const StyledButton = styled(LightButton)` - display: flex; - flex-direction: row-reverse; - gap: 8px; - > .button-text { - color: ${({ theme }) => theme.primaryBlue}; - } - padding: 0px; -`; - interface ICasesDisplay extends ICasesGrid { numberDisputes?: number; numberClosedDisputes?: number; @@ -59,9 +48,9 @@ const CasesDisplay: React.FC = ({ {title} {location.pathname.startsWith("/cases/display/1/desc/all") ? ( - - - + + Create a case + ) : null} diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx index 1027b0436..fbc489e6d 100644 --- a/web/src/components/DisputeView/DisputeCardView.tsx +++ b/web/src/components/DisputeView/DisputeCardView.tsx @@ -19,6 +19,11 @@ const StyledCard = styled(Card)` height: 100%; max-height: 335px; min-height: 290px; + transition: background-color 0.1s; + + &:hover { + background-color: ${({ theme }) => theme.lightGrey}; + } `; const CardContainer = styled.div` @@ -56,7 +61,7 @@ interface IDisputeCardView { const DisputeCardView: React.FC = ({ isLoading, ...props }) => { return ( - + {isLoading ? : } diff --git a/web/src/components/DisputeView/DisputeListView.tsx b/web/src/components/DisputeView/DisputeListView.tsx index cbecdeedb..9504a5e15 100644 --- a/web/src/components/DisputeView/DisputeListView.tsx +++ b/web/src/components/DisputeView/DisputeListView.tsx @@ -18,7 +18,13 @@ const StyledListItem = styled(Card)` flex-grow: 1; width: 100%; height: 82px; + transition: background-color 0.1s; + + &:hover { + background-color: ${({ theme }) => theme.lightGrey}; + } `; + const ListContainer = styled.div` display: flex; justify-content: space-between; @@ -58,7 +64,7 @@ const DisputeListView: React.FC = (props) => { const { isDisconnected } = useAccount(); return ( - + diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx index 94cc74f9e..d407d82c3 100644 --- a/web/src/components/Field.tsx +++ b/web/src/components/Field.tsx @@ -62,6 +62,10 @@ const StyledLink = styled(Link)` color: ${({ theme }) => theme.primaryBlue}; text-wrap: auto; justify-content: end; + + &:hover { + text-decoration: underline ${({ theme }) => theme.secondaryBlue}; + } `; type FieldContainerProps = { diff --git a/web/src/components/StyledArrowLink.tsx b/web/src/components/StyledArrowLink.tsx new file mode 100644 index 000000000..3d7a7abf2 --- /dev/null +++ b/web/src/components/StyledArrowLink.tsx @@ -0,0 +1,23 @@ +import styled from "styled-components"; + +import { Link } from "react-router-dom"; + +export const StyledArrowLink = styled(Link)` + display: flex; + gap: 8px; + align-items: center; + font-size: 16px; + + > svg { + height: 16px; + width: 16px; + + path { + fill: ${({ theme }) => theme.primaryBlue}; + } + } + + &:hover svg path { + fill: ${({ theme }) => theme.secondaryBlue}; + } +`; diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx index bc0bcfc8b..c287284c7 100644 --- a/web/src/components/Verdict/FinalDecision.tsx +++ b/web/src/components/Verdict/FinalDecision.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from "react"; import styled from "styled-components"; import Skeleton from "react-loading-skeleton"; -import { useNavigate, useParams } from "react-router-dom"; +import { useParams } from "react-router-dom"; import { useAccount } from "wagmi"; import ArrowIcon from "svgs/icons/arrow.svg"; @@ -19,11 +19,10 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { responsiveSize } from "styles/responsiveSize"; -import LightButton from "../LightButton"; - import AnswerDisplay from "./Answer"; import VerdictBanner from "./VerdictBanner"; import { Divider } from "../Divider"; +import { StyledArrowLink } from "../StyledArrowLink"; const Container = styled.div` width: 100%; @@ -45,16 +44,6 @@ const JuryDecisionTag = styled.small` color: ${({ theme }) => theme.secondaryText}; `; -const StyledButton = styled(LightButton)` - display: flex; - flex-direction: row-reverse; - gap: 8px; - > .button-text { - color: ${({ theme }) => theme.primaryBlue}; - } - padding-top: 0px; -`; - const StyledDivider = styled(Divider)` margin: ${responsiveSize(16, 32)} 0px; `; @@ -73,7 +62,6 @@ const FinalDecision: React.FC = ({ arbitrable }) => { const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute); const ruled = disputeDetails?.dispute?.ruled ?? false; const periodIndex = Periods[disputeDetails?.dispute?.period ?? "evidence"]; - const navigate = useNavigate(); const { data: currentRulingArray } = useReadKlerosCoreCurrentRuling({ query: { refetchInterval: REFETCH_INTERVAL }, args: [BigInt(id ?? 0)], @@ -108,12 +96,9 @@ const FinalDecision: React.FC = ({ arbitrable }) => { {isLoading && !isDisconnected ? ( ) : ( - navigate(`/cases/${id?.toString()}/voting`)} - text={buttonText} - Icon={ArrowIcon} - className="reverse-button" - /> + + {buttonText} + )} ); diff --git a/web/src/pages/Courts/CourtDetails/Description.tsx b/web/src/pages/Courts/CourtDetails/Description.tsx index 5d30f358e..a808b3ddc 100644 --- a/web/src/pages/Courts/CourtDetails/Description.tsx +++ b/web/src/pages/Courts/CourtDetails/Description.tsx @@ -95,7 +95,7 @@ const Description: React.FC = () => { {policy?.requiredSkills}

} /> - } /> + 0 ? filteredTabs[0].path : ""} replace />} /> diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx index 4ff454167..6b53b480d 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx @@ -4,7 +4,8 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import ArrowIcon from "svgs/icons/arrow.svg"; -import { Link } from "react-router-dom"; + +import { StyledArrowLink } from "components/StyledArrowLink"; const Container = styled.div` display: flex; @@ -20,24 +21,19 @@ const Container = styled.div` } ${landscapeStyle( - () => - css` - justify-content: flex-start; - width: auto; - ` + () => css` + justify-content: flex-start; + width: auto; + ` )} `; -const StyledLink = styled(Link)` - display: flex; - gap: 8px; - align-items: center; +const ReStyledArrowLink = styled(StyledArrowLink)` + font-size: 14px; + > svg { height: 15px; width: 15px; - path { - fill: ${({ theme }) => theme.primaryBlue}; - } } `; @@ -50,9 +46,9 @@ const CourtName: React.FC = ({ name, id }) => { return ( {name} - + Open Court - + ); }; diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx index 6d2c68963..5ab94d883 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx @@ -25,7 +25,7 @@ const StyledA = styled.a` text-decoration: underline; label { cursor: pointer; - color: ${({ theme }) => theme.primaryBlue}; + color: ${({ theme }) => theme.secondaryBlue}; } } `; diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts index cb5f5caa0..546ec90da 100644 --- a/web/src/styles/global-style.ts +++ b/web/src/styles/global-style.ts @@ -90,8 +90,13 @@ export const GlobalStyle = createGlobalStyle` font-size: 14px; text-decoration: none; color: ${({ theme }) => theme.primaryBlue}; + transition: color 0.1s; } - + + a:hover { + color: ${({ theme }) => theme.secondaryBlue} !important; + } + hr { opacity: 1; border: 1px solid ${({ theme }) => theme.stroke}; From f745bf5254a0292eb134a6f9dcc80a1fceb1ad5d Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 2 Dec 2024 04:37:06 +0100 Subject: [PATCH 02/11] feat: more hover effects, style impros --- .../components/DisputePreview/Policies.tsx | 20 ++-- web/src/components/EvidenceCard.tsx | 106 +++++++++++------- web/src/components/HowItWorks.tsx | 25 ++--- web/src/components/ScrollTop.tsx | 23 +++- web/src/consts/community-elements.tsx | 41 ++----- web/src/layout/Header/navbar/Product.tsx | 3 +- .../pages/Cases/AttachmentDisplay/Header.tsx | 8 ++ .../pages/Cases/AttachmentDisplay/index.tsx | 8 ++ .../Cases/CaseDetails/Evidence/index.tsx | 13 ++- .../Voting/VotesDetails/AccordionTitle.tsx | 2 +- .../pages/Courts/CourtDetails/Description.tsx | 13 --- web/src/pages/Dashboard/JurorInfo/Header.tsx | 5 +- web/src/pages/Home/Community/Element.tsx | 28 +++-- web/src/pages/Home/Community/index.tsx | 2 +- web/src/utils/date.ts | 2 +- 15 files changed, 168 insertions(+), 131 deletions(-) diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index f30bce9ef..d5da3eaa8 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -41,12 +41,6 @@ const StyledP = styled.p` )}; `; -const StyledA = styled.a` - display: flex; - align-items: center; - gap: 4px; -`; - const StyledPolicyIcon = styled(PolicyIcon)` width: 16px; fill: ${({ theme }) => theme.primaryBlue}; @@ -67,6 +61,12 @@ const LinkContainer = styled.div` const StyledLink = styled(Link)` display: flex; gap: 4px; + + &:hover { + svg { + fill: ${({ theme }) => theme.secondaryBlue}; + } + } `; type Attachment = { @@ -85,10 +85,10 @@ export const Policies: React.FC = ({ disputePolicyURI, courtId, attac Make sure you read and understand the Policies {!isUndefined(attachment) && !isUndefined(attachment.uri) ? ( - + {attachment.label ?? "Attachment"} - + ) : null} {isUndefined(disputePolicyURI) ? null : ( @@ -97,10 +97,10 @@ export const Policies: React.FC = ({ disputePolicyURI, courtId, attac )} {isUndefined(courtId) ? null : ( - + Court Policy - + )} diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index 75eb614d8..e6d0fc0a0 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -54,7 +54,7 @@ const BottomShade = styled.div` display: flex; flex-wrap: wrap; align-items: center; - gap: 16px; + justify-content: space-between; padding: 12px ${responsiveSize(8, 24)}; > * { flex-basis: 1; @@ -81,55 +81,81 @@ const AccountContainer = styled.div` } `; -const DesktopText = styled.span` - display: none; +const LeftContent = styled.div` + display: block; + + & > *:not(:last-child) { + margin-bottom: 8px; + } + ${landscapeStyle( () => css` - display: inline; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0 12px; + + & > *:not(:last-child) { + margin-bottom: 0; + } ` )} `; +const HoverStyle = css` + :hover { + text-decoration: underline; + color: ${({ theme }) => theme.secondaryBlue}; + cursor: pointer; + } +`; + +const Address = styled.p` + ${HoverStyle} + margin: 0; +`; + const Timestamp = styled.label` color: ${({ theme }) => theme.secondaryText}; + ${HoverStyle} `; -const MobileText = styled.span` +const DesktopText = styled.span` + display: none; ${landscapeStyle( () => css` - display: none; + display: inline; ` )} `; -const StyledLink = styled(Link)` - height: fit-content; - display: flex; - margin-left: auto; - gap: ${responsiveSize(5, 6)}; +const MobileText = styled.span` ${landscapeStyle( () => css` - > svg { - width: 16px; - fill: ${({ theme }) => theme.primaryBlue}; - } + display: none; ` )} `; -const StyledA = styled.a` - :hover { - text-decoration: underline; - p { - color: ${({ theme }) => theme.primaryBlue}; - } - label { - cursor: pointer; - color: ${({ theme }) => theme.primaryBlue}; - } +const StyledLink = styled(Link)` + display: flex; + gap: ${responsiveSize(5, 6)}; + > svg { + width: 16px; + fill: ${({ theme }) => theme.primaryBlue}; + } + + :hover svg { + transition: fill 0.1s; + fill: ${({ theme }) => theme.secondaryBlue}; } `; +const FileLinkContainer = styled.div` + margin-left: auto; +`; + const AttachedFileText: React.FC = () => ( <> View attached file @@ -175,20 +201,24 @@ const EvidenceCard: React.FC = ({ )} - - - -

{shortenAddress(sender)}

- - - - {formatDate(Number(timestamp), true)} - - {fileURI && fileURI !== "-" ? ( - - - + + + + +
{shortenAddress(sender)}
+ + + + {formatDate(Number(timestamp), true)} + + {fileURI && fileURI !== "-" ? ( + + + + + + ) : null} diff --git a/web/src/components/HowItWorks.tsx b/web/src/components/HowItWorks.tsx index 1e6651e5d..6d629f791 100644 --- a/web/src/components/HowItWorks.tsx +++ b/web/src/components/HowItWorks.tsx @@ -6,29 +6,26 @@ import BookOpenIcon from "svgs/icons/book-open.svg"; const Container = styled.div` display: flex; align-items: center; + font-size: 14px; + font-weight: 400; gap: 8px; + cursor: pointer; color: ${({ theme }) => theme.primaryBlue}; + transition: color 0.1s; - &, - & * { - cursor: pointer; + svg path { + fill: ${({ theme }) => theme.primaryBlue}; + transition: fill 0.1s; } &:hover { - text-decoration: underline; - } - - svg { - path { - fill: ${({ theme }) => theme.primaryBlue}; + color: ${({ theme }) => theme.secondaryBlue}; + svg path { + fill: ${({ theme }) => theme.secondaryBlue}; } } `; -const StyledLabel = styled.label` - color: ${({ theme }) => theme.primaryBlue}; -`; - interface IHowItWorks { isMiniGuideOpen: boolean; toggleMiniGuide: () => void; @@ -40,7 +37,7 @@ const HowItWorks: React.FC = ({ isMiniGuideOpen, toggleMiniGuide, M <> - How it works + How it works {isMiniGuideOpen && } diff --git a/web/src/components/ScrollTop.tsx b/web/src/components/ScrollTop.tsx index 5a1732c72..08bd9e228 100644 --- a/web/src/components/ScrollTop.tsx +++ b/web/src/components/ScrollTop.tsx @@ -1,14 +1,33 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useRef } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; import { useScrollTop } from "hooks/useScrollTop"; const ScrollTop: React.FC = () => { const scrollTop = useScrollTop(); + const { search, pathname } = useLocation(); + const navigate = useNavigate(); + const hasScrolled = useRef(false); useEffect(() => { + if (hasScrolled.current) return; + const params = new URLSearchParams(search); + const section = params.get("section"); + + if (section) { + const targetElement = document.getElementById(section); + if (targetElement) { + targetElement.scrollIntoView({ behavior: "smooth" }); + hasScrolled.current = true; + navigate(pathname, { replace: true }); + return; + } + } + scrollTop(); }, []); - return <>; + return null; }; + export default ScrollTop; diff --git a/web/src/consts/community-elements.tsx b/web/src/consts/community-elements.tsx index e5918fd46..1189e8d70 100644 --- a/web/src/consts/community-elements.tsx +++ b/web/src/consts/community-elements.tsx @@ -1,4 +1,3 @@ -import React from "react"; import styled, { css } from "styled-components"; import FrenchFlagIcon from "svgs/icons/french-flag.svg"; @@ -8,13 +7,6 @@ import TelegramIcon from "svgs/socialmedia/telegram.svg"; import { IElement } from "../pages/Home/Community/Element"; -const StyledLabel = styled.label` - color: ${({ theme }) => theme.primaryBlue}; - :hover { - cursor: pointer; - } -`; - const fillWithSecondaryPurple = css` fill: ${({ theme }) => theme.secondaryPurple}; `; @@ -34,39 +26,24 @@ const StyledTelegramIcon = styled(TelegramIcon)` export const section: IElement[] = [ { Icon: StyledPNKIcon, - urls: [ - { - node: Kleros Forum, - link: "https://forum.kleros.io/", - }, - ], + title: "Kleros Forum", + link: "https://forum.kleros.io/", }, + { Icon: SnapshotIcon, - urls: [ - { - node: Vote on proposals, - link: "https://snapshot.org/#/kleros.eth/", - }, - ], + title: "Vote on proposals", + link: "https://snapshot.org/#/kleros.eth/", }, { Icon: StyledTelegramIcon, + title: "Community Calls", + link: "https://t.me/kleros", primaryText: "Wednesday, 18h UTC", - urls: [ - { - node: Community Calls, - link: "https://t.me/kleros", - }, - ], }, { Icon: FrenchFlagIcon, - urls: [ - { - node: Join the Coopérative, - link: "https://kleros.io/coop/", - }, - ], + title: "Join the Coopérative", + link: "https://kleros.io/coop/", }, ]; diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx index ec866320e..bcd1d4e0d 100644 --- a/web/src/layout/Header/navbar/Product.tsx +++ b/web/src/layout/Header/navbar/Product.tsx @@ -13,8 +13,7 @@ const Container = styled.a` border-radius: 3px; :hover { transform: scale(1.05); - transition: 350ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition: 0.1s; } gap: 8px; width: ${responsiveSize(100, 130)}; diff --git a/web/src/pages/Cases/AttachmentDisplay/Header.tsx b/web/src/pages/Cases/AttachmentDisplay/Header.tsx index 98faa738b..dc6a3bd67 100644 --- a/web/src/pages/Cases/AttachmentDisplay/Header.tsx +++ b/web/src/pages/Cases/AttachmentDisplay/Header.tsx @@ -53,6 +53,14 @@ const StyledButton = styled(Button)` :focus, :hover { background-color: transparent; + .button-svg { + path { + fill: ${({ theme }) => theme.secondaryBlue}; + } + } + .button-text { + color: ${({ theme }) => theme.secondaryBlue}; + } } `; diff --git a/web/src/pages/Cases/AttachmentDisplay/index.tsx b/web/src/pages/Cases/AttachmentDisplay/index.tsx index e844294db..4f72f40b0 100644 --- a/web/src/pages/Cases/AttachmentDisplay/index.tsx +++ b/web/src/pages/Cases/AttachmentDisplay/index.tsx @@ -30,6 +30,14 @@ const NewTabInfo = styled.a` display: flex; gap: 8px; align-items: center; + + :hover { + text-decoration: underline; + svg path { + transition: fill 0.1s; + fill: ${({ theme }) => theme.secondaryBlue}; + } + } `; const StyledNewTabIcon = styled(NewTabIcon)` diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index 488893801..d3c6173ae 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -49,10 +49,21 @@ const ScrollButton = styled(Button)` } .button-svg { margin: 0; + path { + fill: ${({ theme }) => theme.primaryBlue}; + } } - :focus, + :hover { background-color: transparent; + .button-svg { + path { + fill: ${({ theme }) => theme.secondaryBlue}; + } + } + .button-text { + color: ${({ theme }) => theme.secondaryBlue}; + } } `; diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx index 4eaed0799..305c97ff1 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx @@ -46,7 +46,7 @@ const StyledA = styled.a` text-decoration: underline; label { cursor: pointer; - color: ${({ theme }) => theme.primaryBlue}; + color: ${({ theme }) => theme.secondaryBlue}; } } `; diff --git a/web/src/pages/Courts/CourtDetails/Description.tsx b/web/src/pages/Courts/CourtDetails/Description.tsx index a808b3ddc..bec214d5e 100644 --- a/web/src/pages/Courts/CourtDetails/Description.tsx +++ b/web/src/pages/Courts/CourtDetails/Description.tsx @@ -67,19 +67,6 @@ const Description: React.FC = () => { const filteredTabs = TABS.filter(({ isVisible }) => isVisible(policy)); - const location = useLocation(); - const queryParams = new URLSearchParams(location.search); - const scrollToSection = queryParams.get("section"); - - useEffect(() => { - if (scrollToSection === "description") { - const element = document.getElementById(scrollToSection); - if (element) { - element.scrollIntoView({ behavior: "smooth" }); - } - } - }, [scrollToSection]); - return ( theme.primaryBlue}; width: 16px; height: 16px; + fill: ${({ theme }) => theme.primaryBlue}; `; const StyledLink = styled.a` @@ -59,6 +59,9 @@ const StyledLink = styled.a` &:hover { text-decoration: underline; + svg { + fill: ${({ theme }) => theme.secondaryBlue}; + } } `; diff --git a/web/src/pages/Home/Community/Element.tsx b/web/src/pages/Home/Community/Element.tsx index 31426ce04..283262267 100644 --- a/web/src/pages/Home/Community/Element.tsx +++ b/web/src/pages/Home/Community/Element.tsx @@ -11,11 +11,6 @@ const Container = styled.div` width: 16px; height: 16px; } - - .link-container { - display: flex; - gap: 8px; - } `; const StyledLabel = styled.label` @@ -26,24 +21,27 @@ const StyledLabel = styled.label` const StyledA = styled.a` display: flex; align-items: center; + gap: 8px; + + &:hover { + text-decoration: underline; + } `; export interface IElement { - primaryText?: string; - urls: { node: React.ReactNode; link: string }[]; Icon?: React.FC>; + title: string; + link: string; + primaryText?: string; } -export const Element: React.FC = ({ primaryText, urls, Icon }) => ( +export const Element: React.FC = ({ primaryText, title, link, Icon }) => ( - {Icon && } -
- {urls.map(({ node, link }) => ( - - {node} - - ))} + + {Icon && } + {title} +
{primaryText && {primaryText}} diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index 58553aaec..0c2cf8547 100644 --- a/web/src/pages/Home/Community/index.tsx +++ b/web/src/pages/Home/Community/index.tsx @@ -59,7 +59,7 @@ const Community = () => ( {section.slice(0, 3).map((element) => ( - + ))} diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts index 15a1c6c89..3320083be 100644 --- a/web/src/utils/date.ts +++ b/web/src/utils/date.ts @@ -24,7 +24,7 @@ export function formatDate(unixTimestamp: number, withTime = false): string { const date = new Date(unixTimestamp * 1000); const options: Intl.DateTimeFormatOptions = withTime ? { - month: "long", + month: "short", day: "2-digit", year: "numeric", hour: "numeric", From 9985f0b15389e7b670d141c1a61a3baecd2de542 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:56:27 +0100 Subject: [PATCH 03/11] feat: bug fixes, more hover effects --- .../ConnectWallet/AccountDisplay.tsx | 17 +++++++- .../components/DisputePreview/Policies.tsx | 19 +++++---- .../DisputeView/DisputeCardView.tsx | 2 +- .../DisputeView/DisputeListView.tsx | 2 +- web/src/components/EvidenceCard.tsx | 24 ++++++----- web/src/components/ExternalLink.tsx | 8 ++++ web/src/components/Field.tsx | 13 ++---- web/src/components/InternalLink.tsx | 8 ++++ web/src/components/LightButton.tsx | 27 +++++++++--- .../Popup/MiniGuides/JurorLevels.tsx | 4 +- web/src/components/StyledArrowLink.tsx | 8 +++- web/src/layout/Header/DesktopHeader.tsx | 18 ++------ web/src/layout/Header/Logo.tsx | 11 ++++- web/src/layout/Header/navbar/DappList.tsx | 18 ++++---- web/src/layout/Header/navbar/Explore.tsx | 41 +++++++++---------- web/src/layout/Header/navbar/Menu/Help.tsx | 5 +-- web/src/layout/Header/navbar/Menu/index.tsx | 10 ----- web/src/layout/Header/navbar/Product.tsx | 27 ++++++++---- web/src/layout/Header/navbar/index.tsx | 1 - .../pages/Cases/AttachmentDisplay/index.tsx | 23 ++++------- web/src/pages/Dashboard/JurorInfo/Header.tsx | 14 ++----- web/src/pages/Home/Community/Element.tsx | 10 ++--- .../Home/TopJurors/JurorCard/JurorTitle.tsx | 13 +++--- web/src/styles/global-style.ts | 5 +-- web/src/styles/themes.ts | 6 ++- 25 files changed, 178 insertions(+), 156 deletions(-) create mode 100644 web/src/components/ExternalLink.tsx create mode 100644 web/src/components/InternalLink.tsx diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx index 2a415237a..bc44bafc7 100644 --- a/web/src/components/ConnectWallet/AccountDisplay.tsx +++ b/web/src/components/ConnectWallet/AccountDisplay.tsx @@ -21,10 +21,22 @@ const Container = styled.div` align-items: center; background-color: ${({ theme }) => theme.whiteBackground}; padding: 0px; + cursor: pointer; + + &:hover { + label { + color: ${({ theme }) => theme.white} !important; + transition: color 0.2s; + } + } ${landscapeStyle( () => css` - background-color: ${({ theme }) => theme.whiteLowOpacity}; + background-color: ${({ theme }) => theme.whiteLowOpacitySubtle}; + &:hover { + transition: background-color 0.1s; + background-color: ${({ theme }) => theme.whiteLowOpacityStrong}; + } flex-direction: row; align-content: center; border-radius: 300px; @@ -50,13 +62,14 @@ const AccountContainer = styled.div` () => css` gap: 12px; > label { - color: ${({ theme }) => theme.primaryText}; + color: ${({ theme }) => theme.white}CC !important; font-weight: 400; font-size: 14px; } ` )} `; + const ChainConnectionContainer = styled.div` display: flex; width: fit-content; diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index d5da3eaa8..6ade8eb00 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -1,8 +1,6 @@ import React from "react"; import styled, { css } from "styled-components"; -import { Link } from "react-router-dom"; - import PaperclipIcon from "svgs/icons/paperclip.svg"; import PolicyIcon from "svgs/icons/policy.svg"; @@ -12,6 +10,8 @@ import { isUndefined } from "utils/index"; import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { InternalLink } from "components/InternalLink"; + const ShadeArea = styled.div` display: flex; flex-direction: column; @@ -58,12 +58,13 @@ const LinkContainer = styled.div` align-items: center; `; -const StyledLink = styled(Link)` +const StyledInternalLink = styled(InternalLink)` display: flex; gap: 4px; &:hover { svg { + transition: fill 0.1s; fill: ${({ theme }) => theme.secondaryBlue}; } } @@ -85,22 +86,22 @@ export const Policies: React.FC = ({ disputePolicyURI, courtId, attac Make sure you read and understand the Policies {!isUndefined(attachment) && !isUndefined(attachment.uri) ? ( - + {attachment.label ?? "Attachment"} - + ) : null} {isUndefined(disputePolicyURI) ? null : ( - + Dispute Policy - + )} {isUndefined(courtId) ? null : ( - + Court Policy - + )} diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx index fbc489e6d..2c2e370a3 100644 --- a/web/src/components/DisputeView/DisputeCardView.tsx +++ b/web/src/components/DisputeView/DisputeCardView.tsx @@ -22,7 +22,7 @@ const StyledCard = styled(Card)` transition: background-color 0.1s; &:hover { - background-color: ${({ theme }) => theme.lightGrey}; + background-color: ${({ theme }) => theme.lightGrey}BB; } `; diff --git a/web/src/components/DisputeView/DisputeListView.tsx b/web/src/components/DisputeView/DisputeListView.tsx index 9504a5e15..cdd4e64c3 100644 --- a/web/src/components/DisputeView/DisputeListView.tsx +++ b/web/src/components/DisputeView/DisputeListView.tsx @@ -21,7 +21,7 @@ const StyledListItem = styled(Card)` transition: background-color 0.1s; &:hover { - background-color: ${({ theme }) => theme.lightGrey}; + background-color: ${({ theme }) => theme.lightGrey}BB; } `; diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index e6d0fc0a0..f561cbd70 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -1,9 +1,11 @@ import React, { useMemo } from "react"; import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import Identicon from "react-identicons"; import ReactMarkdown from "react-markdown"; -import { Link } from "react-router-dom"; import { Card } from "@kleros/ui-components-library"; @@ -16,8 +18,8 @@ import { shortenAddress } from "utils/shortenAddress"; import { type Evidence } from "src/graphql/graphql"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; +import { ExternalLink } from "./ExternalLink"; +import { InternalLink } from "./InternalLink"; const StyledCard = styled(Card)` width: 100%; @@ -106,7 +108,7 @@ const LeftContent = styled.div` const HoverStyle = css` :hover { text-decoration: underline; - color: ${({ theme }) => theme.secondaryBlue}; + color: ${({ theme }) => theme.primaryBlue}; cursor: pointer; } `; @@ -138,7 +140,7 @@ const MobileText = styled.span` )} `; -const StyledLink = styled(Link)` +const StyledInternalLink = styled(InternalLink)` display: flex; gap: ${responsiveSize(5, 6)}; > svg { @@ -204,20 +206,20 @@ const EvidenceCard: React.FC = ({ - +
{shortenAddress(sender)}
- + - + {formatDate(Number(timestamp), true)} - + {fileURI && fileURI !== "-" ? ( - + - + ) : null} diff --git a/web/src/components/ExternalLink.tsx b/web/src/components/ExternalLink.tsx new file mode 100644 index 000000000..f85920a1a --- /dev/null +++ b/web/src/components/ExternalLink.tsx @@ -0,0 +1,8 @@ +import { Link } from "react-router-dom"; +import styled from "styled-components"; + +export const ExternalLink = styled(Link)` + :hover { + text-decoration: underline; + } +`; diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx index d407d82c3..1bf44717c 100644 --- a/web/src/components/Field.tsx +++ b/web/src/components/Field.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; -import { Link } from "react-router-dom"; +import { InternalLink } from "./InternalLink"; const FieldContainer = styled.div` display: flex; @@ -58,14 +58,9 @@ const FieldContainer = styled.div` const LinkContainer = styled.div``; -const StyledLink = styled(Link)` - color: ${({ theme }) => theme.primaryBlue}; +const StyledInternalLink = styled(InternalLink)` text-wrap: auto; justify-content: end; - - &:hover { - text-decoration: underline ${({ theme }) => theme.secondaryBlue}; - } `; type FieldContainerProps = { @@ -104,14 +99,14 @@ const Field: React.FC = ({ {(!displayAsList || isOverview || isJurorBalance) && } {link ? ( - { event.stopPropagation(); }} > {value} - + ) : ( diff --git a/web/src/components/InternalLink.tsx b/web/src/components/InternalLink.tsx new file mode 100644 index 000000000..2025427b3 --- /dev/null +++ b/web/src/components/InternalLink.tsx @@ -0,0 +1,8 @@ +import { Link } from "react-router-dom"; +import styled from "styled-components"; + +export const InternalLink = styled(Link)` + :hover { + color: ${({ theme }) => theme.secondaryBlue} !important; + } +`; diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx index 273d48352..ff8f28e78 100644 --- a/web/src/components/LightButton.tsx +++ b/web/src/components/LightButton.tsx @@ -1,23 +1,38 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; import { Button } from "@kleros/ui-components-library"; const StyledButton = styled(Button)` background-color: transparent; - padding-left: 0; + padding: 8px 8px 8px 0 !important; + border-radius: 7px; .button-text { color: ${({ theme }) => theme.primaryText}; font-weight: 400; } .button-svg { - fill: ${({ theme }) => theme.secondaryPurple}; + margin-right: 8px; + fill: ${({ theme }) => theme.white}BF !important; } - :focus, - :hover { - background-color: transparent; + &:hover { + .button-svg { + fill: ${({ theme }) => theme.white} !important; + } + transition: background-color 0.1s; + background-color: ${({ theme }) => theme.whiteLowOpacityStrong}; } + + ${landscapeStyle( + () => css` + padding: 8px !important; + .button-svg { + margin-right: 0; + } + ` + )} `; interface ILightButton { diff --git a/web/src/components/Popup/MiniGuides/JurorLevels.tsx b/web/src/components/Popup/MiniGuides/JurorLevels.tsx index 6d1083211..411be1f09 100644 --- a/web/src/components/Popup/MiniGuides/JurorLevels.tsx +++ b/web/src/components/Popup/MiniGuides/JurorLevels.tsx @@ -32,7 +32,7 @@ const Card = styled(_Card)` const leftPageContents = [ { - title: "Juror Level 1: Phytagoras", + title: "Juror Level 1: Pythagoras", paragraphs: [ "Jurors are classified into distinct levels according to their performance starting from Level 1.", "Level 1: Jurors with 0 cases arbitrated, OR Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.", @@ -62,7 +62,7 @@ const leftPageContents = [ const userLevelData = [ { level: 1, - title: "Phytagoras", + title: "Pythagoras", totalCoherentVotes: 6, totalResolvedVotes: 10, }, diff --git a/web/src/components/StyledArrowLink.tsx b/web/src/components/StyledArrowLink.tsx index 3d7a7abf2..5a69e4b7d 100644 --- a/web/src/components/StyledArrowLink.tsx +++ b/web/src/components/StyledArrowLink.tsx @@ -17,7 +17,11 @@ export const StyledArrowLink = styled(Link)` } } - &:hover svg path { - fill: ${({ theme }) => theme.secondaryBlue}; + &:hover { + color: ${({ theme }) => theme.secondaryBlue}; + svg path { + transition: fill 0.1s; + fill: ${({ theme }) => theme.secondaryBlue}; + } } `; diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index fc889ccda..ac17f602f 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -48,6 +48,7 @@ const Container = styled.div` const LeftSide = styled.div` display: flex; + gap: 8px; `; const MiddleSide = styled.div` @@ -56,12 +57,11 @@ const MiddleSide = styled.div` left: 50%; top: 50%; transform: translate(-50%, -50%); - color: ${({ theme }) => theme.white} !important; `; const RightSide = styled.div` display: flex; - gap: ${responsiveSize(8, 16, 300, 1024)}; + gap: ${responsiveSize(4, 8)}; margin-left: 8px; canvas { @@ -72,9 +72,6 @@ const RightSide = styled.div` const LightButtonContainer = styled.div` display: flex; align-items: center; - width: 16px; - margin-left: ${responsiveSize(4, 8)}; - margin-right: ${responsiveSize(12, 16)}; `; const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)` @@ -84,17 +81,8 @@ const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)` const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain: boolean }>` label { color: ${({ theme }) => theme.white}; + cursor: pointer; } - - ${({ isConnected, isDefaultChain }) => - isConnected && - isDefaultChain && - css` - cursor: pointer; - & > * { - pointer-events: none; - } - `} `; const PopupContainer = styled.div` diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx index 2d94cf174..730121153 100644 --- a/web/src/layout/Header/Logo.tsx +++ b/web/src/layout/Header/Logo.tsx @@ -31,6 +31,15 @@ const BadgeText = styled.label` color: ${({ theme }) => theme.darkPurple}; `; +const StyledKlerosCourtLogo = styled(KlerosCourtLogo)` + &:hover { + path { + fill: ${({ theme }) => theme.white}BF; + transition: fill 0.1s; + } + } +`; + const CourtBadge: React.FC = () => { const { text, color } = useMemo<{ text?: string; color?: keyof Theme }>(() => { switch (getArbitratorType()) { @@ -53,7 +62,7 @@ const Logo: React.FC = () => ( {" "} - + diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx index 9c1db313d..c6fa55ec3 100644 --- a/web/src/layout/Header/navbar/DappList.tsx +++ b/web/src/layout/Header/navbar/DappList.tsx @@ -16,14 +16,6 @@ import { responsiveSize } from "styles/responsiveSize"; import Product from "./Product"; -const Header = styled.h1` - padding-top: 32px; - padding-bottom: 20px; - font-size: 24px; - font-weight: 600; - line-height: 32.68px; -`; - const Container = styled.div` display: flex; position: absolute; @@ -37,7 +29,6 @@ const Container = styled.div` width: 86vw; max-width: 480px; - min-width: 300px; border-radius: 3px; border: 1px solid ${({ theme }) => theme.stroke}; background-color: ${({ theme }) => theme.whiteBackground}; @@ -60,10 +51,17 @@ const Container = styled.div` )} `; +const Header = styled.h1` + padding-top: 24px; + font-size: 24px; + font-weight: 600; + line-height: 32.68px; +`; + const ItemsDiv = styled.div` display: grid; overflow-y: auto; - padding: 16px ${responsiveSize(8, 24, 480)}; + padding: 4px ${responsiveSize(8, 24)} 16px ${responsiveSize(8, 24)}; row-gap: 8px; column-gap: 2px; justify-items: center; diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index b3f597dc9..5b9321928 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -4,31 +4,24 @@ import styled, { css } from "styled-components"; import { Link, useLocation } from "react-router-dom"; import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; import { useOpenContext } from "../MobileHeader"; const Container = styled.div` display: flex; - gap: 0px; + gap: 0; flex-direction: column; ${landscapeStyle( () => css` flex-direction: row; - gap: ${responsiveSize(4, 16)}; ` )}; `; -const LinkContainer = styled.div` - display: flex; - min-height: 32px; - align-items: center; -`; - const Title = styled.h1` display: block; + margin-bottom: 8px; ${landscapeStyle( () => css` @@ -38,15 +31,22 @@ const Title = styled.h1` `; const StyledLink = styled(Link)<{ isActive: boolean }>` - color: ${({ theme }) => theme.primaryText}; + display: flex; + align-items: center; text-decoration: none; font-size: 16px; + color: ${({ isActive, theme }) => (isActive ? theme.primaryText : `${theme.primaryText}BA`)}; + padding: 8px 8px 8px 0; + border-radius: 7px; - font-weight: ${({ isActive }) => (isActive ? "600" : "normal")}; + &:hover { + color: ${({ theme }) => theme.white} !important; + } ${landscapeStyle( () => css` - color: ${({ theme }) => theme.white}; + color: ${({ isActive, theme }) => (isActive ? theme.white : `${theme.white}BA`)}; + padding: 16px 8px; ` )}; `; @@ -67,15 +67,14 @@ const Explore: React.FC = () => { Explore {links.map(({ to, text }) => ( - - - {text} - - + + {text} + ))} ); diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx index 0cc502aca..3e242718a 100644 --- a/web/src/layout/Header/navbar/Menu/Help.tsx +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -57,10 +57,7 @@ const ListItem = styled.a` padding: 0px 8px; cursor: pointer; :hover { - transform: scale(1.02) translateZ(0); - transition: 200ms; - transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1); - backface-visibility: hidden; + transform: scale(1.02); } small { diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx index 93d8a83ab..3da8d3853 100644 --- a/web/src/layout/Header/navbar/Menu/index.tsx +++ b/web/src/layout/Header/navbar/Menu/index.tsx @@ -17,14 +17,11 @@ import { IHelp, ISettings } from ".."; const Container = styled.div` display: flex; - flex-direction: column; - gap: 0px; ${landscapeStyle( () => css` flex-direction: row; - gap: 8px; ` )} `; @@ -42,15 +39,8 @@ const ButtonContainer = styled.div` display: block; } - .button-svg { - fill: ${({ theme }) => theme.secondaryPurple}; - } - ${landscapeStyle( () => css` - .button-svg { - fill: ${({ theme }) => theme.white}; - } .button-text { display: none; } diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx index bcd1d4e0d..269383068 100644 --- a/web/src/layout/Header/navbar/Product.tsx +++ b/web/src/layout/Header/navbar/Product.tsx @@ -1,5 +1,6 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; +import Skeleton from "react-loading-skeleton"; import { responsiveSize } from "styles/responsiveSize"; @@ -8,16 +9,18 @@ const Container = styled.a` display: flex; flex-direction: column; align-items: center; - padding: 20px 8px 35px 8px; + padding: 16px 8px 28px 8px; max-width: 100px; border-radius: 3px; :hover { - transform: scale(1.05); - transition: 0.1s; + transition: + transform 0.15s, + background-color 0.3s; + transform: scale(1.02); + background-color: ${({ theme }) => theme.lightGrey}; } gap: 8px; width: ${responsiveSize(100, 130)}; - background-color: ${({ theme }) => theme.lightBackground}; `; @@ -26,9 +29,10 @@ const StyledIcon = styled.svg` height: 48px; `; -const StyledImg = styled.img` +const StyledImg = styled.img<{ isLoaded: boolean }>` width: 48px; height: 48px; + display: ${({ isLoaded }) => (isLoaded ? "block" : "none")}; `; const StyledSmall = styled.small` @@ -45,9 +49,18 @@ interface IProduct { } const Product: React.FC = ({ text, url, Icon }) => { + const [isImgLoaded, setIsImgLoaded] = useState(false); + return ( - {typeof Icon === "string" ? : } + {typeof Icon === "string" ? ( + <> + {!isImgLoaded ? : null} + setIsImgLoaded(true)} /> + + ) : ( + + )} {text} ); diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index c47c12601..a2caa7174 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/web/src/layout/Header/navbar/index.tsx @@ -44,7 +44,6 @@ const Container = styled.div<{ isOpen: boolean }>` overflow-y: auto; z-index: 1; background-color: ${({ theme }) => theme.whiteBackground}; - border: 1px solid ${({ theme }) => theme.stroke}; box-shadow: 0px 2px 3px ${({ theme }) => theme.defaultShadow}; transform-origin: top; transform: scaleY(${({ isOpen }) => (isOpen ? "1" : "0")}); diff --git a/web/src/pages/Cases/AttachmentDisplay/index.tsx b/web/src/pages/Cases/AttachmentDisplay/index.tsx index 4f72f40b0..5259c14f2 100644 --- a/web/src/pages/Cases/AttachmentDisplay/index.tsx +++ b/web/src/pages/Cases/AttachmentDisplay/index.tsx @@ -7,37 +7,30 @@ import NewTabIcon from "svgs/icons/new-tab.svg"; import Loader from "components/Loader"; import ScrollTop from "components/ScrollTop"; +import { ExternalLink } from "components/ExternalLink"; import Header from "./Header"; const FileViewer = lazy(() => import("components/FileViewer")); const Container = styled.div` - width: 100%; display: flex; flex-direction: column; + width: 100%; gap: 8px; `; const LoaderContainer = styled.div` - width: 100%; display: flex; justify-content: center; + width: 100%; `; -const NewTabInfo = styled.a` - align-self: flex-end; +const StyledExternalLink = styled(ExternalLink)` display: flex; - gap: 8px; align-items: center; - - :hover { - text-decoration: underline; - svg path { - transition: fill 0.1s; - fill: ${({ theme }) => theme.secondaryBlue}; - } - } + align-self: flex-end; + gap: 8px; `; const StyledNewTabIcon = styled(NewTabIcon)` @@ -55,9 +48,9 @@ const AttachmentDisplay: React.FC = () => {
{url ? ( <> - + Open in new tab - + diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index 1ff9492f8..00660f3b7 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -10,6 +10,7 @@ import { responsiveSize } from "styles/responsiveSize"; import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; +import { ExternalLink } from "components/ExternalLink"; const Container = styled.div` display: flex; @@ -51,18 +52,9 @@ const StyledXIcon = styled(XIcon)` fill: ${({ theme }) => theme.primaryBlue}; `; -const StyledLink = styled.a` +const StyledLink = styled(ExternalLink)` display: flex; - border: 0px; - align-items: center; gap: 8px; - - &:hover { - text-decoration: underline; - svg { - fill: ${({ theme }) => theme.secondaryBlue}; - } - } `; interface IHeader { @@ -90,7 +82,7 @@ const Header: React.FC = ({ levelTitle, levelNumber, totalCoherentVotes MiniGuideComponent={JurorLevels} /> {totalResolvedVotes > 0 ? ( - + Share your juror score ) : null} diff --git a/web/src/pages/Home/Community/Element.tsx b/web/src/pages/Home/Community/Element.tsx index 283262267..84c90d63b 100644 --- a/web/src/pages/Home/Community/Element.tsx +++ b/web/src/pages/Home/Community/Element.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; +import { ExternalLink } from "components/ExternalLink"; + const Container = styled.div` display: flex; gap: 8px; @@ -18,14 +20,10 @@ const StyledLabel = styled.label` font-weight: 600; `; -const StyledA = styled.a` +const StyledA = styled(ExternalLink)` display: flex; align-items: center; gap: 8px; - - &:hover { - text-decoration: underline; - } `; export interface IElement { @@ -38,7 +36,7 @@ export interface IElement { export const Element: React.FC = ({ primaryText, title, link, Icon }) => (
- + {Icon && } {title} diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx index 5ab94d883..a60ae994e 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx @@ -1,9 +1,11 @@ import React, { useMemo } from "react"; import styled from "styled-components"; -import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay"; import { DEFAULT_CHAIN, getChain } from "consts/chains"; +import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay"; +import { ExternalLink } from "components/ExternalLink"; + const Container = styled.div` display: flex; gap: 8px; @@ -20,12 +22,11 @@ const Container = styled.div` } `; -const StyledA = styled.a` +const StyledExternalLink = styled(ExternalLink)` :hover { - text-decoration: underline; label { cursor: pointer; - color: ${({ theme }) => theme.secondaryBlue}; + color: ${({ theme }) => theme.primaryBlue}; } } `; @@ -42,9 +43,9 @@ const JurorTitle: React.FC = ({ address }) => { return ( - + - + ); }; diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts index 546ec90da..9b1f1d58f 100644 --- a/web/src/styles/global-style.ts +++ b/web/src/styles/global-style.ts @@ -17,6 +17,7 @@ export const GlobalStyle = createGlobalStyle` body { font-family: "Open Sans", sans-serif; margin: 0px; + background-color: ${({ theme }) => theme.primaryPurple}; } html { @@ -93,10 +94,6 @@ export const GlobalStyle = createGlobalStyle` transition: color 0.1s; } - a:hover { - color: ${({ theme }) => theme.secondaryBlue} !important; - } - hr { opacity: 1; border: 1px solid ${({ theme }) => theme.stroke}; diff --git a/web/src/styles/themes.ts b/web/src/styles/themes.ts index 6715eccfb..e648ca4ba 100644 --- a/web/src/styles/themes.ts +++ b/web/src/styles/themes.ts @@ -25,7 +25,8 @@ export const lightTheme = { defaultShadow: "#00000002", hoveredShadow: "#00000002", - whiteLowOpacity: "#0000000d", + whiteLowOpacitySubtle: "#FFFFFF0D", + whiteLowOpacityStrong: "#FFFFFF26", blackLowOpacity: "#00000080", success: "#00C42B", @@ -72,7 +73,8 @@ export const darkTheme = { defaultShadow: "#00000000", hoveredShadow: "#42498f80", - whiteLowOpacity: "#FFFFFF0F", + whiteLowOpacitySubtle: "#FFFFFF0F", + whiteLowOpacityStrong: "#FFFFFF24", blackLowOpacity: "#00000080", success: "#65DC7F", From bc0298526263772081b829e682db717020e741bf Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 3 Dec 2024 17:34:10 +0100 Subject: [PATCH 04/11] fix: responsiveness in macbook air m1 13dot3 inches, cases grid, extrastats --- web/src/components/CasesDisplay/CasesGrid.tsx | 4 ++-- web/src/components/LatestCases.tsx | 4 ++-- web/src/pages/Home/CourtOverview/ExtraStats.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web/src/components/CasesDisplay/CasesGrid.tsx b/web/src/components/CasesDisplay/CasesGrid.tsx index a61051dd5..2aa57c20c 100644 --- a/web/src/components/CasesDisplay/CasesGrid.tsx +++ b/web/src/components/CasesDisplay/CasesGrid.tsx @@ -17,9 +17,9 @@ import DisputeView from "components/DisputeView"; import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton"; const GridContainer = styled.div` - --gap: 24px; + --gap: 16px; display: grid; - grid-template-columns: repeat(auto-fill, minmax(min(100%, max(350px, (100% - var(--gap) * 2)/3)), 1fr)); + grid-template-columns: repeat(auto-fill, minmax(min(100%, max(312px, (100% - var(--gap) * 2)/3)), 1fr)); align-items: center; gap: var(--gap); `; diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index a85396f39..c0d57ba98 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.tsx @@ -21,9 +21,9 @@ const Title = styled.h1` `; const DisputeContainer = styled.div` - --gap: 24px; + --gap: 16px; display: grid; - grid-template-columns: repeat(auto-fill, minmax(min(100%, max(350px, (100% - var(--gap) * 2)/3)), 1fr)); + grid-template-columns: repeat(auto-fill, minmax(min(100%, max(312px, (100% - var(--gap) * 2)/3)), 1fr)); align-items: center; gap: var(--gap); `; diff --git a/web/src/pages/Home/CourtOverview/ExtraStats.tsx b/web/src/pages/Home/CourtOverview/ExtraStats.tsx index f0fbdd4fb..c75517ed7 100644 --- a/web/src/pages/Home/CourtOverview/ExtraStats.tsx +++ b/web/src/pages/Home/CourtOverview/ExtraStats.tsx @@ -13,7 +13,7 @@ import ExtraStatsDisplay from "components/ExtraStatsDisplay"; const StyledCard = styled.div` display: flex; flex-wrap: wrap; - gap: 0 32px; + gap: 0 24px; justify-content: center; `; From 738314b92ebc6aca3a4a7f778883d2fa27403b21 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 4 Dec 2024 00:30:12 +0100 Subject: [PATCH 05/11] feat: tons of improvements --- .../src/assets/svgs/socialmedia/discord.svg | 4 +- .../src/assets/svgs/socialmedia/etherscan.svg | 4 +- .../assets/svgs/socialmedia/ghost-blog.svg | 4 +- .../src/assets/svgs/socialmedia/github.svg | 4 +- .../src/assets/svgs/socialmedia/linkedin.svg | 4 +- .../src/assets/svgs/socialmedia/reddit.svg | 4 +- .../src/assets/svgs/socialmedia/slack.svg | 4 +- .../src/assets/svgs/socialmedia/snapshot.svg | 4 +- .../src/assets/svgs/socialmedia/youtube.svg | 4 +- .../assets/svgs/footer/secured-by-kleros.svg | 8 +-- web/src/assets/svgs/icons/book-open.svg | 2 +- web/src/assets/svgs/icons/close.svg | 2 +- web/src/assets/svgs/icons/code.svg | 18 ++----- web/src/assets/svgs/icons/eth.svg | 2 +- web/src/assets/svgs/socialmedia/discord.svg | 4 +- web/src/assets/svgs/socialmedia/etherscan.svg | 4 +- .../assets/svgs/socialmedia/ghost-blog.svg | 4 +- web/src/assets/svgs/socialmedia/github.svg | 4 +- web/src/assets/svgs/socialmedia/linkedin.svg | 4 +- web/src/assets/svgs/socialmedia/reddit.svg | 4 +- web/src/assets/svgs/socialmedia/slack.svg | 4 +- web/src/assets/svgs/socialmedia/snapshot.svg | 4 +- web/src/assets/svgs/socialmedia/telegram.svg | 4 +- web/src/assets/svgs/socialmedia/youtube.svg | 4 +- web/src/components/DottedMenuButton.tsx | 5 ++ web/src/components/HowItWorks.tsx | 2 +- web/src/components/LightButton.tsx | 3 +- .../MiniGuides/MainStructureTemplate.tsx | 4 ++ web/src/consts/socialmedia.tsx | 14 +++-- web/src/layout/Footer/index.tsx | 53 ++++++++++--------- web/src/layout/Header/MobileHeader.tsx | 6 +-- web/src/layout/Header/navbar/Menu/Help.tsx | 29 +++++----- .../StakePanel/SimulatorPopup/index.tsx | 2 +- .../Courts/CourtDetails/StakePanel/index.tsx | 2 +- web/src/pages/Courts/CourtDetails/Stats.tsx | 26 +++++---- web/src/pages/Courts/CourtDetails/index.tsx | 19 ++++--- web/src/pages/Resolver/Parameters/Jurors.tsx | 5 ++ 37 files changed, 148 insertions(+), 130 deletions(-) diff --git a/web-devtools/src/assets/svgs/socialmedia/discord.svg b/web-devtools/src/assets/svgs/socialmedia/discord.svg index cd9ecfead..8689eefd8 100644 --- a/web-devtools/src/assets/svgs/socialmedia/discord.svg +++ b/web-devtools/src/assets/svgs/socialmedia/discord.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/etherscan.svg b/web-devtools/src/assets/svgs/socialmedia/etherscan.svg index bb140d2cc..56aea0390 100644 --- a/web-devtools/src/assets/svgs/socialmedia/etherscan.svg +++ b/web-devtools/src/assets/svgs/socialmedia/etherscan.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg b/web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg index 6734e2d0d..cbd9a8137 100644 --- a/web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg +++ b/web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/github.svg b/web-devtools/src/assets/svgs/socialmedia/github.svg index e38d90278..74c5a4a9c 100644 --- a/web-devtools/src/assets/svgs/socialmedia/github.svg +++ b/web-devtools/src/assets/svgs/socialmedia/github.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/linkedin.svg b/web-devtools/src/assets/svgs/socialmedia/linkedin.svg index 6a710c481..0b10e33e9 100644 --- a/web-devtools/src/assets/svgs/socialmedia/linkedin.svg +++ b/web-devtools/src/assets/svgs/socialmedia/linkedin.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/reddit.svg b/web-devtools/src/assets/svgs/socialmedia/reddit.svg index 56f344582..29638aba9 100644 --- a/web-devtools/src/assets/svgs/socialmedia/reddit.svg +++ b/web-devtools/src/assets/svgs/socialmedia/reddit.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/slack.svg b/web-devtools/src/assets/svgs/socialmedia/slack.svg index 9a2a63779..25551ed1d 100644 --- a/web-devtools/src/assets/svgs/socialmedia/slack.svg +++ b/web-devtools/src/assets/svgs/socialmedia/slack.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/snapshot.svg b/web-devtools/src/assets/svgs/socialmedia/snapshot.svg index dee191af5..fa69e3684 100644 --- a/web-devtools/src/assets/svgs/socialmedia/snapshot.svg +++ b/web-devtools/src/assets/svgs/socialmedia/snapshot.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web-devtools/src/assets/svgs/socialmedia/youtube.svg b/web-devtools/src/assets/svgs/socialmedia/youtube.svg index 42fbfdc45..6411254ea 100644 --- a/web-devtools/src/assets/svgs/socialmedia/youtube.svg +++ b/web-devtools/src/assets/svgs/socialmedia/youtube.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/footer/secured-by-kleros.svg b/web/src/assets/svgs/footer/secured-by-kleros.svg index a195863ea..eac640c7a 100644 --- a/web/src/assets/svgs/footer/secured-by-kleros.svg +++ b/web/src/assets/svgs/footer/secured-by-kleros.svg @@ -1,12 +1,12 @@ - - - + + + - + diff --git a/web/src/assets/svgs/icons/book-open.svg b/web/src/assets/svgs/icons/book-open.svg index 36d3597e3..fb1010fb1 100644 --- a/web/src/assets/svgs/icons/book-open.svg +++ b/web/src/assets/svgs/icons/book-open.svg @@ -1,3 +1,3 @@ - + diff --git a/web/src/assets/svgs/icons/close.svg b/web/src/assets/svgs/icons/close.svg index a768ad17f..e2c3c9d66 100644 --- a/web/src/assets/svgs/icons/close.svg +++ b/web/src/assets/svgs/icons/close.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/web/src/assets/svgs/icons/code.svg b/web/src/assets/svgs/icons/code.svg index aae881487..ee8f0de12 100644 --- a/web/src/assets/svgs/icons/code.svg +++ b/web/src/assets/svgs/icons/code.svg @@ -1,15 +1,5 @@ - - - - - - - - - - - - - - + + + + \ No newline at end of file diff --git a/web/src/assets/svgs/icons/eth.svg b/web/src/assets/svgs/icons/eth.svg index da728a2d8..28595a80c 100644 --- a/web/src/assets/svgs/icons/eth.svg +++ b/web/src/assets/svgs/icons/eth.svg @@ -1,3 +1,3 @@ - + diff --git a/web/src/assets/svgs/socialmedia/discord.svg b/web/src/assets/svgs/socialmedia/discord.svg index cd9ecfead..8689eefd8 100644 --- a/web/src/assets/svgs/socialmedia/discord.svg +++ b/web/src/assets/svgs/socialmedia/discord.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/etherscan.svg b/web/src/assets/svgs/socialmedia/etherscan.svg index bb140d2cc..56aea0390 100644 --- a/web/src/assets/svgs/socialmedia/etherscan.svg +++ b/web/src/assets/svgs/socialmedia/etherscan.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/ghost-blog.svg b/web/src/assets/svgs/socialmedia/ghost-blog.svg index 6734e2d0d..cbd9a8137 100644 --- a/web/src/assets/svgs/socialmedia/ghost-blog.svg +++ b/web/src/assets/svgs/socialmedia/ghost-blog.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/github.svg b/web/src/assets/svgs/socialmedia/github.svg index e38d90278..74c5a4a9c 100644 --- a/web/src/assets/svgs/socialmedia/github.svg +++ b/web/src/assets/svgs/socialmedia/github.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/linkedin.svg b/web/src/assets/svgs/socialmedia/linkedin.svg index 6a710c481..0b10e33e9 100644 --- a/web/src/assets/svgs/socialmedia/linkedin.svg +++ b/web/src/assets/svgs/socialmedia/linkedin.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/reddit.svg b/web/src/assets/svgs/socialmedia/reddit.svg index 56f344582..29638aba9 100644 --- a/web/src/assets/svgs/socialmedia/reddit.svg +++ b/web/src/assets/svgs/socialmedia/reddit.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/slack.svg b/web/src/assets/svgs/socialmedia/slack.svg index 9a2a63779..25551ed1d 100644 --- a/web/src/assets/svgs/socialmedia/slack.svg +++ b/web/src/assets/svgs/socialmedia/slack.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/snapshot.svg b/web/src/assets/svgs/socialmedia/snapshot.svg index dee191af5..fa69e3684 100644 --- a/web/src/assets/svgs/socialmedia/snapshot.svg +++ b/web/src/assets/svgs/socialmedia/snapshot.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/telegram.svg b/web/src/assets/svgs/socialmedia/telegram.svg index 22e46b18a..85690c4fd 100644 --- a/web/src/assets/svgs/socialmedia/telegram.svg +++ b/web/src/assets/svgs/socialmedia/telegram.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/assets/svgs/socialmedia/youtube.svg b/web/src/assets/svgs/socialmedia/youtube.svg index 42fbfdc45..6411254ea 100644 --- a/web/src/assets/svgs/socialmedia/youtube.svg +++ b/web/src/assets/svgs/socialmedia/youtube.svg @@ -1,10 +1,10 @@ - + - + diff --git a/web/src/components/DottedMenuButton.tsx b/web/src/components/DottedMenuButton.tsx index ab279ddd0..3684b24ed 100644 --- a/web/src/components/DottedMenuButton.tsx +++ b/web/src/components/DottedMenuButton.tsx @@ -60,6 +60,11 @@ const ButtonContainer = styled.div` border-radius: 50%; z-index: 1; background-color: ${({ theme }) => theme.lightBackground}; + + transition: background-color 0.1s; + :hover { + background-color: ${({ theme }) => theme.lightGrey}; + } `; const StyledDottedMenu = styled(DottedMenu)` diff --git a/web/src/components/HowItWorks.tsx b/web/src/components/HowItWorks.tsx index 6d629f791..7fc2cf8d9 100644 --- a/web/src/components/HowItWorks.tsx +++ b/web/src/components/HowItWorks.tsx @@ -15,12 +15,12 @@ const Container = styled.div` svg path { fill: ${({ theme }) => theme.primaryBlue}; - transition: fill 0.1s; } &:hover { color: ${({ theme }) => theme.secondaryBlue}; svg path { + transition: fill 0.1s; fill: ${({ theme }) => theme.secondaryBlue}; } } diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx index ff8f28e78..610c75e72 100644 --- a/web/src/components/LightButton.tsx +++ b/web/src/components/LightButton.tsx @@ -6,14 +6,13 @@ import { Button } from "@kleros/ui-components-library"; const StyledButton = styled(Button)` background-color: transparent; - padding: 8px 8px 8px 0 !important; + padding: 8px !important; border-radius: 7px; .button-text { color: ${({ theme }) => theme.primaryText}; font-weight: 400; } .button-svg { - margin-right: 8px; fill: ${({ theme }) => theme.white}BF !important; } diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index dfe24c7b4..5771b660f 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx @@ -69,6 +69,10 @@ const HowItWorks = styled.div` gap: 8px; margin-bottom: ${responsiveSize(32, 64)}; + svg path { + fill: ${({ theme }) => theme.secondaryPurple}; + } + label { color: ${({ theme }) => theme.secondaryPurple}; } diff --git a/web/src/consts/socialmedia.tsx b/web/src/consts/socialmedia.tsx index 2318054d1..9f1500cc2 100644 --- a/web/src/consts/socialmedia.tsx +++ b/web/src/consts/socialmedia.tsx @@ -1,5 +1,3 @@ -import React from "react"; - import DiscordLogo from "svgs/socialmedia/discord.svg"; import GithubLogo from "svgs/socialmedia/github.svg"; import LinkedinLogo from "svgs/socialmedia/linkedin.svg"; @@ -9,27 +7,27 @@ import XLogo from "svgs/socialmedia/x.svg"; export const socialmedia = { telegram: { - icon: , + icon: TelegramLogo, url: "https://t.me/kleros", }, x: { - icon: , + icon: XLogo, url: "https://x.com/kleros_io", }, discord: { - icon: , + icon: DiscordLogo, url: "https://discord.com/invite/MhXQGCyHd9", }, youtube: { - icon: , + icon: YouTubeLogo, url: "https://youtube.com/@kleros_io", }, github: { - icon: , + icon: GithubLogo, url: "https://github.com/kleros", }, linkedin: { - icon: , + icon: LinkedinLogo, url: "https://www.linkedin.com/company/kleros/", }, }; diff --git a/web/src/layout/Footer/index.tsx b/web/src/layout/Footer/index.tsx index d72781487..e199fc573 100644 --- a/web/src/layout/Footer/index.tsx +++ b/web/src/layout/Footer/index.tsx @@ -1,11 +1,14 @@ import React from "react"; import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; + import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg"; import { socialmedia } from "consts/socialmedia"; -import { landscapeStyle } from "styles/landscapeStyle"; +import LightButton from "components/LightButton"; +import { ExternalLink } from "components/ExternalLink"; const Container = styled.div` height: 122px; @@ -26,43 +29,43 @@ const Container = styled.div` padding-bottom: 0; ` )} +`; + +const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)` + min-height: 24px; - .secured-by-kleros { - min-height: 24px; + path { + fill: ${({ theme }) => theme.white}BF; } - .socialmedia { - display: flex; - gap: 16px; - justify-content: center; + :hover path { + fill: ${({ theme }) => theme.white}; + transition: fill 0.1s; + } +`; + +const StyledSocialMedia = styled.div` + display: flex; - a { - display: inline-block; - svg { - height: 16px; - width: 16px; - max-heigth: 16px; - max-width: 16px; - fill: white; - } - } + .button-svg { + margin-right: 0; } `; const SecuredByKleros: React.FC = () => ( - - - + + + ); const SocialMedia = () => ( -
+ {Object.values(socialmedia).map((site, i) => ( - - {site.icon} - + + + ))} -
+ ); const Footer: React.FC = () => ( diff --git a/web/src/layout/Header/MobileHeader.tsx b/web/src/layout/Header/MobileHeader.tsx index c8a22877c..6900ac759 100644 --- a/web/src/layout/Header/MobileHeader.tsx +++ b/web/src/layout/Header/MobileHeader.tsx @@ -26,14 +26,10 @@ const Container = styled.div` `; const StyledLightButton = styled(LightButton)` - padding: 0; + padding: 0 !important; .button-svg { margin-right: 0px; - fill: white; - } - .button-text { - display: none; } `; diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx index 3e242718a..75385826d 100644 --- a/web/src/layout/Header/navbar/Menu/Help.tsx +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -1,8 +1,11 @@ import React, { useRef } from "react"; import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; import { useClickAway, useToggle } from "react-use"; +import { getDevToolsUrl } from "consts/index"; + import Book from "svgs/icons/book-open.svg"; import Guide from "svgs/icons/book.svg"; import Bug from "svgs/icons/bug.svg"; @@ -11,14 +14,9 @@ import ETH from "svgs/icons/eth.svg"; import Faq from "svgs/menu-icons/help.svg"; import Telegram from "svgs/socialmedia/telegram.svg"; -import { getDevToolsUrl } from "consts/index"; - -import { landscapeStyle } from "styles/landscapeStyle"; - import Onboarding from "components/Popup/MiniGuides/Onboarding"; - -import { IHelp } from ".."; import Debug from "../Debug"; +import { IHelp } from "../index"; const Container = styled.div` display: flex; @@ -32,8 +30,7 @@ const Container = styled.div` left: 50%; transform: translateX(-50%); z-index: 1; - padding: 27px 10px; - gap: 23px; + padding: 12px 12px 24px 12px; border: 1px solid ${({ theme }) => theme.stroke}; background-color: ${({ theme }) => theme.whiteBackground}; border-radius: 3px; @@ -54,17 +51,25 @@ const Container = styled.div` const ListItem = styled.a` display: flex; gap: 8px; - padding: 0px 8px; + padding: 12px 8px; cursor: pointer; - :hover { - transform: scale(1.02); - } + transition: transform 0.2s; small { font-size: 16px; font-weight: 400; } + + :hover { + transform: scale(1.02); + } + + :hover small { + transition: color 0.1s; + color: ${({ theme }) => theme.secondaryPurple}; + } `; + const Icon = styled.svg` display: inline-block; width: 16px; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx index 5c52bf08d..03bb047bb 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx @@ -269,7 +269,7 @@ const SimulatorPopup: React.FC = ({ amountToStake, isStaking }) - {!amountToStake || amountToStake === 0 ? "Enter amount" : null} + {!amountToStake || amountToStake === 0 ? "?" : null} {!isUndefined(amountToStake) && amountToStake > 0 && (!isUndefined(item.futureValue) ? item.futureValue : )} diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx index 166871a05..73ec4a3b3 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx @@ -18,7 +18,7 @@ import SimulatorPopup from "./SimulatorPopup"; const Container = styled.div` position: relative; width: 100%; - margin-top: 32px; + margin-top: 12px; display: flex; flex-direction: column; gap: 28px; diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index d695b1ea9..50e841230 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -36,7 +36,7 @@ import Info from "./Info"; const StyledAccordion = styled(Accordion)` width: 100%; - margin-bottom: 12px; + margin-top: 24px; > * > button { justify-content: unset; background-color: ${({ theme }) => theme.whiteBackground} !important; @@ -67,6 +67,7 @@ const AllTimeContainer = styled(TimeDisplayContainer)` const TimeSelectorContainer = styled(TimeDisplayContainer)` padding-top: 12px; + padding-bottom: 12px; flex-wrap: wrap; `; @@ -88,7 +89,7 @@ const StyledCard = styled.div` height: fit-content; display: grid; gap: 32px; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding-top: ${responsiveSize(28, 32)}; padding-bottom: ${responsiveSize(20, 0)}; @@ -141,6 +142,17 @@ const stats: IStat[] = [ color: "purple", icon: VoteStake, }, + { + title: "Juror Reward per Coherent Vote", + coinId: 1, + getText: (data) => { + const jurorReward = formatUnitsWei(data?.feeForJuror); + return jurorReward; + }, + getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.feeForJuror)) * (coinPrice ?? 0)), + color: "purple", + icon: EthereumIcon, + }, { title: "Active Jurors", getText: (data) => data?.numberStakedJurors, @@ -168,7 +180,7 @@ const stats: IStat[] = [ icon: BalanceIcon, }, { - title: "ETH paid to Jurors", + title: "Total ETH paid to Jurors", coinId: 1, getText: (data) => formatETH(data?.paidETH), getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidETH)) * (coinPrice ?? 0)), @@ -200,13 +212,9 @@ interface ITimeframedStat { } const timeRanges = [ - { value: 7, text: "Last 7 days" }, { value: 30, text: "Last 30 days" }, { value: 90, text: "Last 90 days" }, - /* we can uncomment as court creation time increases, - but it's a bit tricky because this affects every court */ - // { value: 180, text: "Last 180 days" }, - // { value: 365, text: "Last 365 days" }, + { value: 180, text: "Last 180 days" }, { value: "allTime", text: "All Time" }, ]; @@ -326,8 +334,8 @@ const Stats = () => { defaultValue={selectedRange} callback={handleTimeRangeChange} /> - + {timeframedStats.map(({ title, getText, color, icon }) => { return ( diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index 271ea9891..ce255278c 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -20,7 +20,6 @@ import HowItWorks from "components/HowItWorks"; import LatestCases from "components/LatestCases"; import Staking from "components/Popup/MiniGuides/Staking"; import { StyledSkeleton } from "components/StyledSkeleton"; -import { Divider } from "components/Divider"; import ScrollTop from "components/ScrollTop"; import Description from "./Description"; @@ -35,6 +34,13 @@ const CourtHeader = styled.h1` justify-content: space-between; gap: 24px; flex-wrap: wrap; + margin-bottom: 24px; + + ${landscapeStyle( + () => css` + margin-bottom: 20px; + ` + )}; `; const CourtInfo = styled.div` @@ -44,7 +50,7 @@ const CourtInfo = styled.div` ${landscapeStyle( () => css` - gap: 32px; + gap: 20px; ` )}; `; @@ -54,19 +60,19 @@ const ButtonContainer = styled.div` flex-wrap: wrap; flex-direction: column; align-items: flex-start; - gap: 16px; + gap: 8px; ${landscapeStyle( () => css` align-items: flex-end; - gap: 32px; ` )}; `; const StyledCard = styled(Card)` padding: ${responsiveSize(16, 32)}; - margin-top: ${responsiveSize(16, 24)}; + padding-bottom: 16px; + margin-top: 12px; width: 100%; height: auto; min-height: 100px; @@ -112,9 +118,8 @@ const CourtDetails: React.FC = () => { {!isProductionDeployment() && } - - + diff --git a/web/src/pages/Resolver/Parameters/Jurors.tsx b/web/src/pages/Resolver/Parameters/Jurors.tsx index 05fcefcb9..b0ec68ae9 100644 --- a/web/src/pages/Resolver/Parameters/Jurors.tsx +++ b/web/src/pages/Resolver/Parameters/Jurors.tsx @@ -39,10 +39,15 @@ const StyledField = styled(Field)` const StyledDisplay = styled(DisplaySmall)` width: 290px; margin-bottom: ${responsiveSize(20, 48)}; + h2::after { content: "ETH"; margin-left: 4px; } + + path { + fill: ${({ theme }) => theme.secondaryPurple}; + } `; const Jurors: React.FC = () => { From d9a06f54ec64bea3524799263df75d23b9fdc52f Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 4 Dec 2024 00:37:11 +0100 Subject: [PATCH 06/11] chore: remove unnecessary div --- web/src/pages/Home/Community/Element.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/web/src/pages/Home/Community/Element.tsx b/web/src/pages/Home/Community/Element.tsx index 84c90d63b..a5db25059 100644 --- a/web/src/pages/Home/Community/Element.tsx +++ b/web/src/pages/Home/Community/Element.tsx @@ -20,7 +20,7 @@ const StyledLabel = styled.label` font-weight: 600; `; -const StyledA = styled(ExternalLink)` +const StyledExternalLink = styled(ExternalLink)` display: flex; align-items: center; gap: 8px; @@ -35,12 +35,10 @@ export interface IElement { export const Element: React.FC = ({ primaryText, title, link, Icon }) => ( -
- - {Icon && } - {title} - -
+ + {Icon && } + {title} + {primaryText && {primaryText}} ); From eddaff09553144d9963f5a51459eefef49466b0c Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 4 Dec 2024 01:07:23 +0100 Subject: [PATCH 07/11] fix: primary blue on accordion title on voting history tab --- .../Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx index 305c97ff1..4eaed0799 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx @@ -46,7 +46,7 @@ const StyledA = styled.a` text-decoration: underline; label { cursor: pointer; - color: ${({ theme }) => theme.secondaryBlue}; + color: ${({ theme }) => theme.primaryBlue}; } } `; From 108a6c447c3e19575e98a267301520a9a98ed2de Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 4 Dec 2024 12:18:35 +0100 Subject: [PATCH 08/11] feat: harmeet feedback --- web/src/components/DisputePreview/Policies.tsx | 2 +- .../{community-elements.tsx => community-elements.ts} | 0 web/src/consts/{socialmedia.tsx => socialmedia.ts} | 0 web/src/pages/Cases/AttachmentDisplay/Header.tsx | 9 ++++++++- web/src/pages/Cases/index.tsx | 1 + web/src/pages/Courts/CourtDetails/Stats.tsx | 6 +++--- 6 files changed, 13 insertions(+), 5 deletions(-) rename web/src/consts/{community-elements.tsx => community-elements.ts} (100%) rename web/src/consts/{socialmedia.tsx => socialmedia.ts} (100%) diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index 6ade8eb00..ee761cf82 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -86,7 +86,7 @@ export const Policies: React.FC = ({ disputePolicyURI, courtId, attac Make sure you read and understand the Policies {!isUndefined(attachment) && !isUndefined(attachment.uri) ? ( - + {attachment.label ?? "Attachment"} diff --git a/web/src/consts/community-elements.tsx b/web/src/consts/community-elements.ts similarity index 100% rename from web/src/consts/community-elements.tsx rename to web/src/consts/community-elements.ts diff --git a/web/src/consts/socialmedia.tsx b/web/src/consts/socialmedia.ts similarity index 100% rename from web/src/consts/socialmedia.tsx rename to web/src/consts/socialmedia.ts diff --git a/web/src/pages/Cases/AttachmentDisplay/Header.tsx b/web/src/pages/Cases/AttachmentDisplay/Header.tsx index dc6a3bd67..325a368a6 100644 --- a/web/src/pages/Cases/AttachmentDisplay/Header.tsx +++ b/web/src/pages/Cases/AttachmentDisplay/Header.tsx @@ -73,7 +73,14 @@ const Header: React.FC = () => { navigate(-1); }; - const title = location.pathname.includes("policy") ? `Policy File - Case #${id}` : "Attachment File"; + let title = ""; + if (location.pathname.includes("policy")) { + title = `Policy - Case #${id}`; + } else if (location.pathname.includes("evidence")) { + title = "Attached File"; + } else if (location.pathname.includes("attachment")) { + title = `Attachment - Case #${id}`; + } return ( diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx index 555724987..03de868e0 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -23,6 +23,7 @@ const Cases: React.FC = () => ( } /> } /> } /> + } /> } /> diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index 50e841230..7d1db45bc 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -89,7 +89,7 @@ const StyledCard = styled.div` height: fit-content; display: grid; gap: 32px; - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); padding-top: ${responsiveSize(28, 32)}; padding-bottom: ${responsiveSize(20, 0)}; @@ -143,7 +143,7 @@ const stats: IStat[] = [ icon: VoteStake, }, { - title: "Juror Reward per Coherent Vote", + title: "Reward per Vote", coinId: 1, getText: (data) => { const jurorReward = formatUnitsWei(data?.feeForJuror); @@ -180,7 +180,7 @@ const stats: IStat[] = [ icon: BalanceIcon, }, { - title: "Total ETH paid to Jurors", + title: "Total ETH paid", coinId: 1, getText: (data) => formatETH(data?.paidETH), getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidETH)) * (coinPrice ?? 0)), From 40fe52da0d234872c168e6f11188e638cedeabad Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 4 Dec 2024 12:50:09 +0100 Subject: [PATCH 09/11] fix: coherency to coherence and redirect to policy section instead of purpose --- .../components/DisputePreview/Policies.tsx | 2 +- .../Popup/MiniGuides/JurorLevels.tsx | 4 ++-- .../{Coherency.tsx => Coherence.tsx} | 6 +++--- .../Dashboard/JurorInfo/StakingRewards.tsx | 4 ++-- web/src/pages/Dashboard/JurorInfo/index.tsx | 4 ++-- .../Header/{Coherency.tsx => Coherence.tsx} | 15 +++++++------ .../Home/TopJurors/Header/DesktopHeader.tsx | 21 +++++++++---------- .../{Coherency.tsx => Coherence.tsx} | 6 +++--- .../Home/TopJurors/JurorCard/DesktopCard.tsx | 4 ++-- .../Home/TopJurors/JurorCard/MobileCard.tsx | 14 ++++++------- web/src/utils/userLevelCalculation.ts | 6 +++--- 11 files changed, 42 insertions(+), 44 deletions(-) rename web/src/pages/Dashboard/JurorInfo/{Coherency.tsx => Coherence.tsx} (92%) rename web/src/pages/Home/TopJurors/Header/{Coherency.tsx => Coherence.tsx} (84%) rename web/src/pages/Home/TopJurors/JurorCard/{Coherency.tsx => Coherence.tsx} (86%) diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index ee761cf82..71ca77725 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -98,7 +98,7 @@ export const Policies: React.FC = ({ disputePolicyURI, courtId, attac )} {isUndefined(courtId) ? null : ( - + Court Policy diff --git a/web/src/components/Popup/MiniGuides/JurorLevels.tsx b/web/src/components/Popup/MiniGuides/JurorLevels.tsx index 411be1f09..9e2b98c1d 100644 --- a/web/src/components/Popup/MiniGuides/JurorLevels.tsx +++ b/web/src/components/Popup/MiniGuides/JurorLevels.tsx @@ -5,7 +5,7 @@ import { Card as _Card } from "@kleros/ui-components-library"; import { landscapeStyle } from "styles/landscapeStyle"; -import Coherency from "pages/Dashboard/JurorInfo/Coherency"; +import Coherence from "pages/Dashboard/JurorInfo/Coherence"; import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; import Template from "./MainStructureTemplate"; @@ -112,7 +112,7 @@ const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { return ( - = ({ userLevelData, totalCoherentVotes, totalResolvedVotes, isMiniGuide }) => { +const Coherence: React.FC = ({ userLevelData, totalCoherentVotes, totalResolvedVotes, isMiniGuide }) => { const votesContent = (