diff --git a/web/package.json b/web/package.json index 46d18bd06..0d872e08f 100644 --- a/web/package.json +++ b/web/package.json @@ -81,7 +81,7 @@ "@kleros/kleros-app": "^2.0.1", "@kleros/kleros-sdk": "workspace:^", "@kleros/kleros-v2-contracts": "workspace:^", - "@kleros/ui-components-library": "^2.16.0", + "@kleros/ui-components-library": "^2.17.0", "@lifi/wallet-management": "^3.4.6", "@lifi/widget": "^3.12.3", "@sentry/react": "^7.120.0", diff --git a/web/src/components/CasesDisplay/Filters.tsx b/web/src/components/CasesDisplay/Filters.tsx index c7ae88513..cb417ac65 100644 --- a/web/src/components/CasesDisplay/Filters.tsx +++ b/web/src/components/CasesDisplay/Filters.tsx @@ -1,5 +1,7 @@ import React from "react"; -import styled, { useTheme } from "styled-components"; +import styled, { css, useTheme } from "styled-components"; + +import { hoverShortTransitionTiming } from "styles/commonStyles"; import { useNavigate, useParams } from "react-router-dom"; @@ -19,15 +21,6 @@ const Container = styled.div` width: fit-content; `; -const StyledGridIcon = styled(GridIcon)` - cursor: pointer; - transition: filter 0.2s ease; - fill: ${({ theme }) => theme.primaryBlue}; - width: 16px; - height: 16px; - overflow: hidden; -`; - const IconsContainer = styled.div` display: flex; justify-content: center; @@ -35,13 +28,25 @@ const IconsContainer = styled.div` gap: 4px; `; -const StyledListIcon = styled(ListIcon)` +const BaseIconStyles = css` + ${hoverShortTransitionTiming} cursor: pointer; - transition: filter 0.2s ease; fill: ${({ theme }) => theme.primaryBlue}; width: 16px; height: 16px; overflow: hidden; + + :hover { + fill: ${({ theme }) => theme.secondaryBlue}; + } +`; + +const StyledGridIcon = styled(GridIcon)` + ${BaseIconStyles} +`; + +const StyledListIcon = styled(ListIcon)` + ${BaseIconStyles} `; const Filters: React.FC = () => { diff --git a/web/src/components/CasesDisplay/Search.tsx b/web/src/components/CasesDisplay/Search.tsx index 6d1d265e3..2179df17f 100644 --- a/web/src/components/CasesDisplay/Search.tsx +++ b/web/src/components/CasesDisplay/Search.tsx @@ -18,14 +18,12 @@ import { responsiveSize } from "styles/responsiveSize"; const Container = styled.div` display: flex; flex-direction: column; - gap: 4px; + gap: ${responsiveSize(8, 16)}; ${landscapeStyle( - () => - css` - flex-direction: row; - gap: ${responsiveSize(4, 22)}; - ` + () => css` + flex-direction: row; + ` )} `; diff --git a/web/src/components/CasesDisplay/StatsAndFilters.tsx b/web/src/components/CasesDisplay/StatsAndFilters.tsx index 51a04d7a5..78dd78ee5 100644 --- a/web/src/components/CasesDisplay/StatsAndFilters.tsx +++ b/web/src/components/CasesDisplay/StatsAndFilters.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; + import Filters from "./Filters"; import Stats, { IStats } from "./Stats"; @@ -8,8 +10,8 @@ const Container = styled.div` display: flex; flex-wrap: wrap; gap: 8px; - margin-top: 11px; - margin-bottom: 48px; + margin-top: ${responsiveSize(4, 8)}; + margin-bottom: ${responsiveSize(16, 32)}; justify-content: space-between; `; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 7b30e7751..6a3bf8684 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/web/src/components/CasesDisplay/index.tsx @@ -17,7 +17,7 @@ const TitleContainer = styled.div` justify-content: space-between; align-items: center; flex-wrap: wrap; - margin-bottom: ${responsiveSize(32, 48)}; + margin-bottom: ${responsiveSize(12, 24)}; `; const StyledTitle = styled.h1` diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index 91adfc4ad..2eb7f5c2e 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -8,6 +8,7 @@ import { getIpfsUrl } from "utils/getIpfsUrl"; import { isUndefined } from "utils/index"; import { responsiveSize } from "styles/responsiveSize"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import { InternalLink } from "components/InternalLink"; @@ -38,12 +39,12 @@ const StyledPaperclipIcon = styled(PaperclipIcon)` `; const StyledInternalLink = styled(InternalLink)` + ${hoverShortTransitionTiming} display: flex; gap: 4px; &:hover { svg { - transition: fill 0.1s; fill: ${({ theme }) => theme.secondaryBlue}; } } diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx index 2c2e370a3..602c98f06 100644 --- a/web/src/components/DisputeView/DisputeCardView.tsx +++ b/web/src/components/DisputeView/DisputeCardView.tsx @@ -8,6 +8,7 @@ import { Card } from "@kleros/ui-components-library"; import { Periods } from "consts/periods"; import { responsiveSize } from "styles/responsiveSize"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import { StyledSkeleton } from "components/StyledSkeleton"; @@ -15,15 +16,11 @@ import DisputeInfo from "./DisputeInfo"; import PeriodBanner from "./PeriodBanner"; const StyledCard = styled(Card)` + ${hoverShortTransitionTiming} width: 100%; height: 100%; max-height: 335px; min-height: 290px; - transition: background-color 0.1s; - - &:hover { - background-color: ${({ theme }) => theme.lightGrey}BB; - } `; const CardContainer = styled.div` @@ -61,7 +58,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 cdd4e64c3..d0c1c967a 100644 --- a/web/src/components/DisputeView/DisputeListView.tsx +++ b/web/src/components/DisputeView/DisputeListView.tsx @@ -9,20 +9,17 @@ import { Card } from "@kleros/ui-components-library"; import { Periods } from "consts/periods"; import { responsiveSize } from "styles/responsiveSize"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import DisputeInfo from "./DisputeInfo"; import PeriodBanner from "./PeriodBanner"; const StyledListItem = styled(Card)` + ${hoverShortTransitionTiming} display: flex; flex-grow: 1; width: 100%; height: 82px; - transition: background-color 0.1s; - - &:hover { - background-color: ${({ theme }) => theme.lightGrey}BB; - } `; const ListContainer = styled.div` @@ -64,7 +61,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 3684b24ed..d1f5102d0 100644 --- a/web/src/components/DottedMenuButton.tsx +++ b/web/src/components/DottedMenuButton.tsx @@ -1,6 +1,8 @@ import React from "react"; import styled, { css, keyframes } from "styled-components"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; + import DottedMenu from "svgs/icons/dotted-menu.svg"; const ripple = keyframes` @@ -57,13 +59,16 @@ const Container = styled.div<{ displayRipple: boolean }>` `; const ButtonContainer = styled.div` + ${hoverShortTransitionTiming} border-radius: 50%; z-index: 1; background-color: ${({ theme }) => theme.lightBackground}; - transition: background-color 0.1s; :hover { background-color: ${({ theme }) => theme.lightGrey}; + svg { + fill: ${({ theme }) => theme.secondaryBlue}; + } } `; diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index c5954f9eb..ddd7ba62c 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -3,6 +3,7 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import Identicon from "react-identicons"; import ReactMarkdown from "react-markdown"; @@ -165,6 +166,7 @@ const MobileText = styled.span` `; const StyledInternalLink = styled(InternalLink)` + ${hoverShortTransitionTiming} display: flex; gap: ${responsiveSize(5, 6)}; > svg { @@ -173,7 +175,6 @@ const StyledInternalLink = styled(InternalLink)` } :hover svg { - transition: fill 0.1s; fill: ${({ theme }) => theme.secondaryBlue}; } `; diff --git a/web/src/components/ExtraStatsDisplay.tsx b/web/src/components/ExtraStatsDisplay.tsx index a562708a2..dd292164b 100644 --- a/web/src/components/ExtraStatsDisplay.tsx +++ b/web/src/components/ExtraStatsDisplay.tsx @@ -9,7 +9,6 @@ const Container = styled.div` display: flex; gap: 8px; align-items: center; - margin-top: 24px; `; const SVGContainer = styled.div` diff --git a/web/src/components/HowItWorks.tsx b/web/src/components/HowItWorks.tsx index 7fc2cf8d9..ad4847d60 100644 --- a/web/src/components/HowItWorks.tsx +++ b/web/src/components/HowItWorks.tsx @@ -1,9 +1,12 @@ import React from "react"; import styled from "styled-components"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; + import BookOpenIcon from "svgs/icons/book-open.svg"; const Container = styled.div` + ${hoverShortTransitionTiming} display: flex; align-items: center; font-size: 14px; @@ -11,7 +14,6 @@ const Container = styled.div` gap: 8px; cursor: pointer; color: ${({ theme }) => theme.primaryBlue}; - transition: color 0.1s; svg path { fill: ${({ theme }) => theme.primaryBlue}; @@ -20,7 +22,6 @@ const Container = styled.div` &:hover { color: ${({ theme }) => theme.secondaryBlue}; svg path { - transition: fill 0.1s; fill: ${({ theme }) => theme.secondaryBlue}; } } diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index 9f8a9d55b..34f259f35 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.tsx @@ -13,11 +13,11 @@ import { SkeletonDisputeCard } from "components/StyledSkeleton"; import { Dispute_Filter } from "../graphql/graphql"; const Container = styled.div` - margin-top: ${responsiveSize(48, 80)}; + margin-top: ${responsiveSize(28, 48)}; `; const Title = styled.h1` - margin-bottom: ${responsiveSize(16, 48)}; + margin-bottom: ${responsiveSize(12, 24)}; `; const DisputeContainer = styled.div` diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx index 9e4c579bc..86307d53a 100644 --- a/web/src/components/LightButton.tsx +++ b/web/src/components/LightButton.tsx @@ -1,10 +1,12 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import { Button } from "@kleros/ui-components-library"; const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>` + ${hoverShortTransitionTiming} background-color: transparent; padding: 8px !important; border-radius: 7px; @@ -20,7 +22,6 @@ const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>` .button-svg { fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important; } - transition: background-color 0.1s; background-color: ${({ theme }) => theme.whiteLowOpacityStrong}; } diff --git a/web/src/favicon.ico b/web/src/favicon.ico index 16a8426ee..47556b429 100644 Binary files a/web/src/favicon.ico and b/web/src/favicon.ico differ diff --git a/web/src/layout/Footer/index.tsx b/web/src/layout/Footer/index.tsx index 046dd69b7..4007b781b 100644 --- a/web/src/layout/Footer/index.tsx +++ b/web/src/layout/Footer/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg"; @@ -32,6 +33,7 @@ const Container = styled.div` `; const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)` + ${hoverShortTransitionTiming} min-height: 24px; path { @@ -40,7 +42,6 @@ const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)` :hover path { fill: ${({ theme }) => theme.white}; - transition: fill 0.1s; } `; diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx index 36dd0cf0f..5ccaabe3b 100644 --- a/web/src/layout/Header/Logo.tsx +++ b/web/src/layout/Header/Logo.tsx @@ -1,6 +1,8 @@ import React, { useMemo } from "react"; import styled, { Theme } from "styled-components"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; + import { Link } from "react-router-dom"; import { ArbitratorTypes, getArbitratorType } from "consts/index"; @@ -29,13 +31,13 @@ const BadgeText = styled.label` `; const StyledKlerosCourtLogo = styled(KlerosCourtLogo)` + ${hoverShortTransitionTiming} max-height: 40px; width: auto; &:hover { path { fill: ${({ theme }) => theme.white}BF; - transition: fill 0.1s; } } `; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx index c301e70e6..0ac19f61d 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx @@ -1,6 +1,8 @@ import React, { useMemo } from "react"; import styled from "styled-components"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; + import { useMeasure } from "react-use"; import { formatEther } from "viem"; @@ -11,8 +13,10 @@ import Gavel from "svgs/icons/gavel.svg"; import { isUndefined } from "utils/index"; const StyledCard = styled(Card)` + ${hoverShortTransitionTiming} width: 100%; padding: 24px; + &:hover { cursor: pointer; } diff --git a/web/src/pages/Cases/CaseDetails/Tabs.tsx b/web/src/pages/Cases/CaseDetails/Tabs.tsx index 7f8b07761..0ec722d98 100644 --- a/web/src/pages/Cases/CaseDetails/Tabs.tsx +++ b/web/src/pages/Cases/CaseDetails/Tabs.tsx @@ -1,6 +1,8 @@ import React, { useState, useEffect, useMemo } from "react"; import styled from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; + import { useNavigate, useLocation, useParams } from "react-router-dom"; import { Tabs as TabsComponent } from "@kleros/ui-components-library"; @@ -20,6 +22,7 @@ import { useAppealCost } from "queries/useAppealCost"; const StyledTabs = styled(TabsComponent)` width: 100%; + margin-top: ${responsiveSize(12, 24)}; > * { display: flex; flex-wrap: wrap; diff --git a/web/src/pages/Cases/CaseDetails/Timeline.tsx b/web/src/pages/Cases/CaseDetails/Timeline.tsx index be8113549..b4aa8ece4 100644 --- a/web/src/pages/Cases/CaseDetails/Timeline.tsx +++ b/web/src/pages/Cases/CaseDetails/Timeline.tsx @@ -1,6 +1,8 @@ import React, { useMemo } from "react"; import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; + import { Box, Steps } from "@kleros/ui-components-library"; import { Periods } from "consts/periods"; @@ -10,34 +12,26 @@ import { secondsToDayHourMinute } from "utils/date"; import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; - import { StyledSkeleton } from "components/StyledSkeleton"; const TimeLineContainer = styled(Box)` - display: block; width: 100%; - height: 98px; + height: auto; border-radius: 0px; - padding: ${responsiveSize(16, 48)} 8px 0px ${responsiveSize(12, 22)}; - margin-top: ${responsiveSize(16, 48)}; - margin-bottom: ${responsiveSize(12, 22)}; - background-color: ${({ theme }) => theme.whiteBackground}; - - ${landscapeStyle( - () => css` - display: block; - padding: 28px 8px 8px 8px; - ` - )} + background-color: transparent; `; const StyledSteps = styled(Steps)` display: flex; justify-content: space-between; - width: 85%; + width: 89%; margin: auto; + + ${landscapeStyle( + () => css` + width: 98%; + ` + )} `; const Timeline: React.FC<{ diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx index ec0dfdcc9..340b7ba75 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx @@ -28,12 +28,7 @@ const StyledAccordion = styled(CustomAccordion)` [class*="accordion-button"] { padding: 11.5px ${responsiveSize(8, 18)} !important; - background-color: ${({ theme }) => theme.whiteBackground} !important; - border: 1px solid ${({ theme }) => theme.stroke} !important; margin: 4px 0; - > svg { - fill: ${({ theme }) => theme.primaryText} !important; - } } [class*="Body"] { diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx index 643eb696d..cdf434b00 100644 --- a/web/src/pages/Cases/CaseDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/index.tsx @@ -33,7 +33,8 @@ const HeaderContainer = styled.div` width: 100%; display: flex; align-items: center; - margin-bottom: ${responsiveSize(32, 54)}; + margin-top: -2px; + margin-bottom: ${responsiveSize(16, 24)}; `; const Header = styled.h1` @@ -55,8 +56,8 @@ const CaseDetails: React.FC = () => {
Case #{id}
- + theme.lightBackground}; - padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; + padding: ${responsiveSize(32, 48)} ${responsiveSize(24, 136)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx index 1ea779a74..da9f89b5f 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx @@ -1,5 +1,7 @@ import React, { useState, useMemo, useEffect } from "react"; -import styled, { css } from "styled-components"; +import styled from "styled-components"; + +import { hoverShortTransitionTiming } from "styles/commonStyles"; import { useParams } from "react-router-dom"; import { useDebounce } from "react-use"; @@ -10,8 +12,6 @@ import { commify, uncommify } from "utils/commify"; import { formatPNK, roundNumberDown } from "utils/format"; import { isUndefined } from "utils/index"; -import { landscapeStyle } from "styles/landscapeStyle"; - import { NumberInputField } from "components/NumberInputField"; import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton"; @@ -29,8 +29,13 @@ const LabelArea = styled.div` `; const StyledLabel = styled.label` + ${hoverShortTransitionTiming} color: ${({ theme }) => theme.primaryBlue}; cursor: pointer; + + :hover { + color: ${({ theme }) => theme.secondaryBlue}; + } `; const InputArea = styled.div` diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index a1a71d6df..55bedfc72 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -32,14 +32,6 @@ import { StyledSkeleton } from "components/StyledSkeleton"; const StyledAccordion = styled(Accordion)` > * > button { justify-content: unset; - background-color: ${({ theme }) => theme.whiteBackground} !important; - border: 1px solid ${({ theme }) => theme.stroke} !important; - > svg { - fill: ${({ theme }) => theme.primaryText} !important; - } - > p { - color: ${({ theme }) => theme.primaryText}; - } } //adds padding to body container > * > div > div { diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index e255cb103..852ffb3dc 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled, { css } from "styled-components"; -import { useParams } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import { useToggle } from "react-use"; import { Card, Breadcrumb } from "@kleros/ui-components-library"; @@ -94,16 +94,15 @@ const CourtDetails: React.FC = () => { const { data: policy } = useCourtPolicy(id); const { data } = useCourtTree(); const [isStakingMiniGuideOpen, toggleStakingMiniGuide] = useToggle(false); + const navigate = useNavigate(); const courtPath = getCourtsPath(data?.court, id); - const items = []; - items.push( - ...(courtPath?.map((node) => ({ + const breadcrumbItems = + courtPath?.map((node) => ({ text: node.name, value: node.id, - })) ?? []) - ); + })) ?? []; return ( @@ -111,7 +110,13 @@ const CourtDetails: React.FC = () => { {policy ? policy.name : } - {items.length > 1 && items[0]?.value !== 1 ? : null} + {breadcrumbItems.length > 1 ? ( + navigate(`/courts/${courtId}`)} + /> + ) : null} {!isProductionDeployment() && } diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx index 691c849d2..dea046be9 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -12,7 +12,7 @@ import TopSearch from "./TopSearch"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; + padding: ${responsiveSize(32, 48)} ${responsiveSize(24, 136)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx index 3577acd68..7244de1dc 100644 --- a/web/src/pages/Dashboard/Courts/Header.tsx +++ b/web/src/pages/Dashboard/Courts/Header.tsx @@ -16,10 +16,10 @@ const Container = styled.div` display: flex; flex-direction: column; width: 100%; - gap: 12px; + gap: 4px; align-items: flex-start; justify-content: space-between; - margin-bottom: ${responsiveSize(32, 48)}; + margin-bottom: ${responsiveSize(16, 24)}; ${landscapeStyle( () => css` diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index 965185b80..2b99b4cb8 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -9,18 +9,19 @@ import { useReadSortitionModuleGetJurorBalance } from "hooks/contracts/generated import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery"; import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; import CourtCard from "./CourtCard"; import Header from "./Header"; const Container = styled.div` - margin-top: 64px; + margin-top: ${responsiveSize(24, 48)}; `; const CourtCardsContainer = styled.div` display: flex; flex-direction: column; - gap: 12px; + gap: 4px; z-index: 0; ${landscapeStyle( diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index 00660f3b7..907df0015 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -16,7 +16,7 @@ const Container = styled.div` display: flex; flex-direction: column; justify-content: flex-start; - margin-bottom: ${responsiveSize(32, 48)}; + margin-bottom: ${responsiveSize(16, 24)}; gap: 12px; ${landscapeStyle( diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index 5aa271d7e..37f06b6e6 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -25,16 +25,16 @@ import JurorInfo from "./JurorInfo"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; + padding: ${responsiveSize(32, 48)} ${responsiveSize(24, 136)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; const StyledCasesDisplay = styled(CasesDisplay)` - margin-top: 64px; + margin-top: ${responsiveSize(32, 48)}; .title { - margin-bottom: ${responsiveSize(16, 48)}; + margin-bottom: ${responsiveSize(12, 24)}; } `; diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx index dce7ea464..d21450262 100644 --- a/web/src/pages/GetPnk/index.tsx +++ b/web/src/pages/GetPnk/index.tsx @@ -19,7 +19,7 @@ const Wrapper = styled.div` const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)}; + padding: 16px ${responsiveSize(24, 132)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; display: flex; diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index 0c2cf8547..27af3020d 100644 --- a/web/src/pages/Home/Community/index.tsx +++ b/web/src/pages/Home/Community/index.tsx @@ -11,10 +11,10 @@ import { responsiveSize } from "styles/responsiveSize"; import { Element } from "./Element"; const Container = styled.div` - margin-top: ${responsiveSize(44, 64)}; + margin-top: ${responsiveSize(24, 48)}; h1 { - margin-bottom: ${responsiveSize(16, 48)}; + margin-bottom: ${responsiveSize(12, 24)}; } `; diff --git a/web/src/pages/Home/CourtOverview/Chart.tsx b/web/src/pages/Home/CourtOverview/Chart.tsx index 10a53d1a4..94cf8f3bb 100644 --- a/web/src/pages/Home/CourtOverview/Chart.tsx +++ b/web/src/pages/Home/CourtOverview/Chart.tsx @@ -1,6 +1,8 @@ import React, { useMemo, useState } from "react"; import styled from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; + import { Tooltip } from "chart.js"; import { formatUnits } from "viem"; @@ -8,8 +10,6 @@ import { DropdownSelect } from "@kleros/ui-components-library"; import { useHomePageContext } from "hooks/useHomePageContext"; -import { responsiveSize } from "styles/responsiveSize"; - import { StyledSkeleton } from "components/StyledSkeleton"; import CasesByCourtsChart, { CasesByCourtsChartData } from "./CasesByCourtsChart"; @@ -17,14 +17,14 @@ import StakedPNKByCourtsChart, { StakedPNKByCourtsChartData } from "./StakedPNKB import TimeSeriesChart from "./TimeSeriesChart"; const Container = styled.div` - margin-bottom: ${responsiveSize(32, 48)}; + margin-bottom: ${responsiveSize(16, 32)}; display: flex; flex-direction: column; `; const StyledDropdown = styled(DropdownSelect)` width: fit-content; - align-self: end; + align-self: start; `; const CHART_OPTIONS = [ @@ -40,7 +40,6 @@ const ChartOptionsDropdown: React.FC<{ { diff --git a/web/src/pages/Home/CourtOverview/ExtraStats.tsx b/web/src/pages/Home/CourtOverview/ExtraStats.tsx index 18112c115..9786b4f61 100644 --- a/web/src/pages/Home/CourtOverview/ExtraStats.tsx +++ b/web/src/pages/Home/CourtOverview/ExtraStats.tsx @@ -1,6 +1,8 @@ import React, { useState } from "react"; import styled from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; + import { DropdownSelect } from "@kleros/ui-components-library"; import LawBalance from "svgs/icons/law-balance.svg"; @@ -13,8 +15,9 @@ import ExtraStatsDisplay from "components/ExtraStatsDisplay"; const StyledCard = styled.div` display: flex; flex-wrap: wrap; - gap: 0 24px; + gap: 12px 24px; justify-content: center; + margin-top: ${responsiveSize(12, 16)}; `; const StyledLabel = styled.label` diff --git a/web/src/pages/Home/CourtOverview/Header.tsx b/web/src/pages/Home/CourtOverview/Header.tsx index fa54bf4a2..9c8598f71 100644 --- a/web/src/pages/Home/CourtOverview/Header.tsx +++ b/web/src/pages/Home/CourtOverview/Header.tsx @@ -3,31 +3,36 @@ import styled from "styled-components"; import { responsiveSize } from "styles/responsiveSize"; -import { Link } from "react-router-dom"; - import { Button } from "@kleros/ui-components-library"; import Bookmark from "svgs/icons/bookmark.svg"; +import { InternalLink } from "components/InternalLink"; + const StyledHeader = styled.div` display: flex; flex-wrap: wrap; justify-content: space-between; - gap: 0 12px; - margin-bottom: ${responsiveSize(16, 0)}; + gap: 8px 12px; + margin-bottom: 12px; `; const StyledH1 = styled.h1` font-size: ${responsiveSize(21, 24)}; + margin: 0; +`; + +const StyledInternalLink = styled(InternalLink)` + height: 34px; `; const Header: React.FC = () => { return ( Court Overview - +