diff --git a/web/src/components/AllCasesButton.tsx b/web/src/components/AllCasesButton.tsx new file mode 100644 index 000000000..137e2dae5 --- /dev/null +++ b/web/src/components/AllCasesButton.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +import styled from "styled-components"; + +import DocIcon from "svgs/icons/doc.svg"; + +import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer"; +import { InternalLink } from "./InternalLink"; + +const StyledDocIcon = styled(DocIcon)` + width: 16px; + height: 16px; +`; + +const AllCasesButton: React.FC = () => { + return ( + + + + + + + ); +}; + +export default AllCasesButton; diff --git a/web/src/components/BlueIconTextButtonContainer.tsx b/web/src/components/BlueIconTextButtonContainer.tsx index 31b0f0901..9976cee62 100644 --- a/web/src/components/BlueIconTextButtonContainer.tsx +++ b/web/src/components/BlueIconTextButtonContainer.tsx @@ -9,16 +9,23 @@ export const BlueIconTextButtonContainer = styled.div` font-weight: 400; gap: 8px; cursor: pointer; - color: ${({ theme }) => theme.primaryBlue}; svg path { fill: ${({ theme }) => theme.primaryBlue}; } + label { + margin-top: 1px; + color: ${({ theme }) => theme.primaryBlue}; + } + &:hover { - color: ${({ theme }) => theme.secondaryBlue}; svg path { fill: ${({ theme }) => theme.secondaryBlue}; } + label { + cursor: pointer; + color: ${({ theme }) => theme.secondaryBlue}; + } } `; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 385a0beab..e0b40b6f6 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/web/src/components/CasesDisplay/index.tsx @@ -55,8 +55,8 @@ const CasesDisplay: React.FC = ({ totalPages, }) => { const location = useLocation(); - const { isConnected, address } = useAccount(); - const profileLink = isConnected && address ? `/profile/1/desc/all?address=${address}` : null; + const { isConnected } = useAccount(); + const profileLink = isConnected ? `/profile/1/desc/all` : null; return (
diff --git a/web/src/components/HowItWorks.tsx b/web/src/components/HowItWorks.tsx index 28e3f1707..4b5bafdc3 100644 --- a/web/src/components/HowItWorks.tsx +++ b/web/src/components/HowItWorks.tsx @@ -15,7 +15,7 @@ const HowItWorks: React.FC = ({ isMiniGuideOpen, toggleMiniGuide, M <> - How it works + {isMiniGuideOpen && } diff --git a/web/src/components/JurorsLeaderboardButton.tsx b/web/src/components/JurorsLeaderboardButton.tsx index fc1f434c5..1b84480c4 100644 --- a/web/src/components/JurorsLeaderboardButton.tsx +++ b/web/src/components/JurorsLeaderboardButton.tsx @@ -10,7 +10,7 @@ const JurorsLeaderboardButton: React.FC = () => { - Jurors Leaderboard + ); diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index 1ebb7a4b0..0f9b85eb5 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.tsx @@ -11,6 +11,7 @@ import DisputeView from "components/DisputeView"; import { SkeletonDisputeCard } from "components/StyledSkeleton"; import { Dispute_Filter } from "../graphql/graphql"; +import AllCasesButton from "./AllCasesButton"; const Container = styled.div` margin-top: ${responsiveSize(28, 48)}; @@ -29,6 +30,12 @@ const DisputeContainer = styled.div` gap: var(--gap); `; +const ButtonContainer = styled.div` + display: flex; + margin-top: 16px; + justify-content: center; +`; + const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => { const { data } = useCasesQuery(0, 3, filters); const disputes: DisputeDetailsFragment[] = useMemo(() => data?.disputes as DisputeDetailsFragment[], [data]); @@ -41,6 +48,9 @@ const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => { ? Array.from({ length: 3 }).map((_, index) => ) : disputes.map((dispute) => )} + + + ) : null; }; diff --git a/web/src/pages/Profile/JurorInfo/Header.tsx b/web/src/pages/Profile/JurorInfo/Header.tsx index 8e90df5b6..59051816b 100644 --- a/web/src/pages/Profile/JurorInfo/Header.tsx +++ b/web/src/pages/Profile/JurorInfo/Header.tsx @@ -46,17 +46,23 @@ const StyledXIcon = styled(XIcon)` fill: ${({ theme }) => theme.primaryBlue}; `; -const StyledLink = styled(ExternalLink)` - display: flex; - gap: 8px; -`; - -const StyledExternalLink = styled(ExternalLink)` +const StyledJurorExternalLink = styled(ExternalLink)` font-size: ${responsiveSize(18, 22)}; margin-left: ${responsiveSize(4, 8)}; font-weight: 600; `; +const StyledShareExternalLink = styled(ExternalLink)` + display: flex; + gap: 6px; +`; + +const StyledShareLabel = styled.label` + margin-top: 1px; + color: ${({ theme }) => theme.primaryBlue}; + cursor: pointer; +`; + interface IHeader { levelTitle: string; levelNumber: number; @@ -90,9 +96,9 @@ const Header: React.FC = ({ Juror Profile - - + {shortenAddress(addressToQuery)} - + @@ -103,9 +109,10 @@ const Header: React.FC = ({ MiniGuideComponent={JurorLevels} /> {totalResolvedVotes > 0 && !searchParamAddress ? ( - - Share your juror score - + + + Share your juror score + ) : null}