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/CasesDisplay/CasesGrid.tsx b/web/src/components/CasesDisplay/CasesGrid.tsx index a61051dd5..e482f0020 100644 --- a/web/src/components/CasesDisplay/CasesGrid.tsx +++ b/web/src/components/CasesDisplay/CasesGrid.tsx @@ -17,10 +17,10 @@ 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)); - align-items: center; + grid-template-columns: repeat(auto-fill, minmax(min(100%, max(312px, (100% - var(--gap) * 2)/3)), 1fr)); + align-items: stretch; gap: var(--gap); `; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 5fdf19a3b..088bafa14 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/web/src/components/CasesDisplay/index.tsx @@ -1,17 +1,16 @@ import React from "react"; import styled from "styled-components"; -import { Link, useLocation } from "react-router-dom"; +import { useLocation } from "react-router-dom"; 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/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 f30bce9ef..71ca77725 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; @@ -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}; @@ -64,9 +58,16 @@ 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}; + } + } `; type Attachment = { @@ -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 1027b0436..2c2e370a3 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}BB; + } `; 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..cdd4e64c3 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}BB; + } `; + 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/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/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index 75eb614d8..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%; @@ -54,7 +56,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,53 +83,79 @@ 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.primaryBlue}; + 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 StyledInternalLink = styled(InternalLink)` + 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 = () => ( @@ -175,20 +203,24 @@ const EvidenceCard: React.FC = ({ )} - - - -

{shortenAddress(sender)}

- - - - {formatDate(Number(timestamp), true)} - + + + + +
{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 94cc74f9e..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,8 +58,7 @@ 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; `; @@ -100,14 +99,14 @@ const Field: React.FC = ({ {(!displayAsList || isOverview || isJurorBalance) && } {link ? ( - { event.stopPropagation(); }} > {value} - + ) : ( diff --git a/web/src/components/HowItWorks.tsx b/web/src/components/HowItWorks.tsx index 1e6651e5d..7fc2cf8d9 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}; } &:hover { - text-decoration: underline; - } - - svg { - path { - fill: ${({ theme }) => theme.primaryBlue}; + color: ${({ theme }) => theme.secondaryBlue}; + svg path { + transition: fill 0.1s; + 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/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/LatestCases.tsx b/web/src/components/LatestCases.tsx index a85396f39..9f8a9d55b 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.tsx @@ -21,10 +21,10 @@ 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)); - align-items: center; + grid-template-columns: repeat(auto-fill, minmax(min(100%, max(312px, (100% - var(--gap) * 2)/3)), 1fr)); + align-items: stretch; gap: var(--gap); `; diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx index 273d48352..610c75e72 100644 --- a/web/src/components/LightButton.tsx +++ b/web/src/components/LightButton.tsx @@ -1,23 +1,37 @@ 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 !important; + border-radius: 7px; .button-text { color: ${({ theme }) => theme.primaryText}; font-weight: 400; } .button-svg { - fill: ${({ theme }) => theme.secondaryPurple}; + 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..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"; @@ -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, }, @@ -112,7 +112,7 @@ const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { return ( - theme.secondaryPurple}; + } + label { color: ${({ theme }) => theme.secondaryPurple}; } 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/components/StyledArrowLink.tsx b/web/src/components/StyledArrowLink.tsx new file mode 100644 index 000000000..5a69e4b7d --- /dev/null +++ b/web/src/components/StyledArrowLink.tsx @@ -0,0 +1,27 @@ +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 { + color: ${({ theme }) => theme.secondaryBlue}; + svg path { + transition: fill 0.1s; + 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/consts/community-elements.tsx b/web/src/consts/community-elements.ts similarity index 55% rename from web/src/consts/community-elements.tsx rename to web/src/consts/community-elements.ts index e5918fd46..1189e8d70 100644 --- a/web/src/consts/community-elements.tsx +++ b/web/src/consts/community-elements.ts @@ -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/consts/socialmedia.tsx b/web/src/consts/socialmedia.ts similarity index 79% rename from web/src/consts/socialmedia.tsx rename to web/src/consts/socialmedia.ts index 2318054d1..9f1500cc2 100644 --- a/web/src/consts/socialmedia.tsx +++ b/web/src/consts/socialmedia.ts @@ -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..046dd69b7 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/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/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/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..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,20 +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) translateZ(0); - transition: 200ms; - transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1); - backface-visibility: hidden; - } + 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/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 ec866320e..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,17 +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: 350ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + 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}; `; @@ -27,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` @@ -46,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/Header.tsx b/web/src/pages/Cases/AttachmentDisplay/Header.tsx index 98faa738b..325a368a6 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}; + } } `; @@ -65,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/AttachmentDisplay/index.tsx b/web/src/pages/Cases/AttachmentDisplay/index.tsx index e844294db..5259c14f2 100644 --- a/web/src/pages/Cases/AttachmentDisplay/index.tsx +++ b/web/src/pages/Cases/AttachmentDisplay/index.tsx @@ -7,29 +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; + align-self: flex-end; + gap: 8px; `; const StyledNewTabIcon = styled(NewTabIcon)` @@ -47,9 +48,9 @@ const AttachmentDisplay: React.FC = () => {
{url ? ( <> - + Open in new tab - + 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/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/Description.tsx b/web/src/pages/Courts/CourtDetails/Description.tsx index 5d30f358e..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 ( { {policy?.requiredSkills}

} /> - } /> + 0 ? filteredTabs[0].path : ""} replace />} /> 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..7d1db45bc 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(156px, 1fr)); padding-top: ${responsiveSize(28, 32)}; padding-bottom: ${responsiveSize(20, 0)}; @@ -141,6 +142,17 @@ const stats: IStat[] = [ color: "purple", icon: VoteStake, }, + { + title: "Reward per 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", 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/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/Dashboard/JurorInfo/Coherency.tsx b/web/src/pages/Dashboard/JurorInfo/Coherence.tsx similarity index 92% rename from web/src/pages/Dashboard/JurorInfo/Coherency.tsx rename to web/src/pages/Dashboard/JurorInfo/Coherence.tsx index ae164a75d..712884d22 100644 --- a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Coherence.tsx @@ -25,7 +25,7 @@ const tooltipMsg = " (after all the appeal instances). If the juror vote is the same as " + " the majority of jurors it's considered a Coherent Vote."; -interface ICoherency { +interface ICoherence { userLevelData: { level: number; title: string; @@ -35,7 +35,7 @@ interface ICoherency { isMiniGuide: boolean; } -const Coherency: React.FC = ({ userLevelData, totalCoherentVotes, totalResolvedVotes, isMiniGuide }) => { +const Coherence: React.FC = ({ userLevelData, totalCoherentVotes, totalResolvedVotes, isMiniGuide }) => { const votesContent = (