From bad135fba4a08c60d002c05c5b5582dfc781d753 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 16 Nov 2023 00:32:00 +0100 Subject: [PATCH 1/3] feat(web): styling jurorinfo dashboard, add staking rewards popup, mobile and desktop --- web/src/assets/svgs/icons/close.svg | 3 + web/src/assets/svgs/icons/kleros.svg | 2 +- .../components/Popup/ClaimStakingRewards.tsx | 203 ++++++++++++++++++ .../Popup/Description/StakeWithdraw.tsx | 3 + web/src/layout/Header/navbar/DappList.tsx | 8 +- .../Dashboard/JurorInfo/JurorRewards.tsx | 1 + .../Dashboard/JurorInfo/StakingRewards.tsx | 44 ++-- web/src/pages/Dashboard/JurorInfo/index.tsx | 44 ++-- 8 files changed, 280 insertions(+), 28 deletions(-) create mode 100644 web/src/assets/svgs/icons/close.svg create mode 100644 web/src/components/Popup/ClaimStakingRewards.tsx diff --git a/web/src/assets/svgs/icons/close.svg b/web/src/assets/svgs/icons/close.svg new file mode 100644 index 000000000..ab7bfa063 --- /dev/null +++ b/web/src/assets/svgs/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/assets/svgs/icons/kleros.svg b/web/src/assets/svgs/icons/kleros.svg index e0dc1a0fd..a674a9235 100644 --- a/web/src/assets/svgs/icons/kleros.svg +++ b/web/src/assets/svgs/icons/kleros.svg @@ -1,3 +1,3 @@ - + diff --git a/web/src/components/Popup/ClaimStakingRewards.tsx b/web/src/components/Popup/ClaimStakingRewards.tsx new file mode 100644 index 000000000..cb0404ab0 --- /dev/null +++ b/web/src/components/Popup/ClaimStakingRewards.tsx @@ -0,0 +1,203 @@ +import React, { useRef } from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { Card as _Card } from "@kleros/ui-components-library"; +import KlerosIcon from "svgs/icons/kleros.svg"; +import { useFocusOutside } from "hooks/useFocusOutside"; +import { Overlay } from "../Overlay"; +import RightArrow from "tsx:svgs/icons/arrow.svg"; +import RewardIcon from "tsx:svgs/icons/reward.svg"; +import CloseIcon from "tsx:svgs/icons/close.svg"; + +const Container = styled.div` + display: flex; + position: relative; + width: 862px; + height: 636px; + flex-direction: column; + align-items: center; + background-color: ${({ theme }) => theme.whiteBackground}; + padding: 52px; + + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-height: 80vh; + overflow-y: auto; + z-index: 10; +`; + +const StyledKlerosIcon = styled(KlerosIcon)` + path { + fill: ${({ theme }) => theme.secondaryPurple}; + } + width: 112px; + height: 100px; +`; + +const PnkQuantityText = styled.text` + font-size: 64px; + font-weight: 600; + color: ${({ theme }) => theme.secondaryPurple}; + margin-top: 16px; +`; + +const ThanksText = styled.text` + font-size: 24px; + font-weight: 600; + color: ${({ theme }) => theme.primaryText}; + margin-top: 16px; +`; + +const ExplanationText = styled.text` + font-size: 16px; + color: ${({ theme }) => theme.primaryText}; + margin-top: 8px; +`; + +const Card = styled(_Card)` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + min-height: 112px; + height: auto; + margin-top: 35px; + padding: 32px 24px; + gap: 4px; + + ${landscapeStyle(() => css``)} +`; + +const TotalClaimed = styled.div` + display: flex; + justify-content: space-between; + width: 100%; +`; + +const Unclaimed = styled.div` + display: flex; + justify-content: space-between; + width: 100%; +`; + +const AmountText = styled.label` + display: flex; + font-size: 16px; +`; + +const TotalClaimedAmount = styled.small` + display: flex; + font-size: 16px; +`; + +const UnclaimedAmount = styled.small` + display: flex; + color: ${({ theme }) => theme.secondaryPurple}; + font-size: 16px; +`; + +const ReadMore = styled.div` + display: flex; + color: ${({ theme }) => theme.primaryBlue}; + font-size: 16px; + margin-top: 24px; + gap: 8px; + align-items: center; +`; + +const ReadMoreLink = styled.a` + display: flex; + color: ${({ theme }) => theme.primaryBlue}; + font-size: 16px; + + &:hover { + text-decoration: underline; + } +`; + +const StyledRightArrow = styled(RightArrow)` + path { + fill: ${({ theme }) => theme.primaryBlue}; + } +`; + +const StyledButton = styled.div` + display: flex; + width: 238px; + padding: 11px 0; + background-color: ${({ theme }) => theme.secondaryPurple}; + margin-top: 36px; + color: ${({ theme }) => theme.whiteBackground}; + font-size: 14px; + font-weight: 600; + justify-content: center; + align-items: center; + border-radius: 3px; + gap: 8px; + cursor: pointer; +`; + +const StyledRewardIcon = styled(RewardIcon)` + path { + fill: ${({ theme }) => theme.whiteBackground}; + } + + width: 18px; + height: 16px; +`; + +const StyledCloseIcon = styled(CloseIcon)` + position: absolute; + width: 18px; + height: 18px; +`; + +interface IClaimStakingRewards { + toggleIsOpen: () => void; +} + +const ClaimStakingRewards: React.FC = ({ toggleIsOpen }) => { + const containerRef = useRef(null); + useFocusOutside(containerRef, () => toggleIsOpen()); + + return ( + <> + + + + 1,000 PNK + 🎉 Thanks for being part of the community! 🎉 + As a Kleros Juror, you will earn PNK for staking in Court. + + + Total Rewarded PNK: + 10,000 PNK + + + Unclaimed: + 1,000 PNK + + + + + Read more about the Juror Incentive Program + + + + + + Claim Your PNK Tokens + + + + + ); +}; + +export default ClaimStakingRewards; diff --git a/web/src/components/Popup/Description/StakeWithdraw.tsx b/web/src/components/Popup/Description/StakeWithdraw.tsx index e781a462b..078353bc6 100644 --- a/web/src/components/Popup/Description/StakeWithdraw.tsx +++ b/web/src/components/Popup/Description/StakeWithdraw.tsx @@ -13,6 +13,9 @@ const Container = styled.div` `; const StyledKlerosLogo = styled(KlerosLogo)` + path { + fill: ${({ theme }) => theme.secondaryPurple}; + } width: 14px; height: 14px; `; diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx index 9aca796d5..4a361b646 100644 --- a/web/src/layout/Header/navbar/DappList.tsx +++ b/web/src/layout/Header/navbar/DappList.tsx @@ -58,6 +58,12 @@ const Container = styled.div` )} `; +const StyledCourt = styled(Court)` + path { + fill: ${({ theme }) => theme.secondaryPurple}; + } +`; + const ItemsDiv = styled.div` display: grid; overflow-y: auto; @@ -74,7 +80,7 @@ const ItemsDiv = styled.div` const ITEMS = [ { text: "Court v1", - Icon: Court, + Icon: StyledCourt, url: "https://court.kleros.io/", }, { diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx index 2c8653e5a..3df08ad89 100644 --- a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx @@ -13,6 +13,7 @@ const Container = styled.div` flex-direction: column; align-items: flex-start; width: auto; + gap: calc(8px + (32 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875); `; const tooltipMsg = diff --git a/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx b/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx index 119d1d3e0..ffaee12a2 100644 --- a/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx @@ -1,14 +1,17 @@ import React from "react"; import styled from "styled-components"; +import { useToggle } from "react-use"; import { Box as _Box, Button } from "@kleros/ui-components-library"; import TokenRewards from "./TokenRewards"; import WithHelpTooltip from "../WithHelpTooltip"; +import ClaimedStakingRewards from "components/Popup/ClaimedStakingRewards"; import { EnsureChain } from "components/EnsureChain"; const Container = styled.div` display: flex; flex-direction: column; align-items: flex-start; + gap: calc(8px + (32 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875); `; const Box = styled(_Box)` @@ -16,9 +19,13 @@ const Box = styled(_Box)` justify-content: space-between; align-items: center; padding: 8px; - width: 270px; + padding-left: 20px; + width: calc(232px + (312 - 232) * (min(max(100vw, 375px), 1250px) - 375px) / 875); height: auto; + border: 1px solid ${({ theme }) => theme.stroke}; border-radius: 3px; + background-color: ${({ theme }) => theme.lightBlue}; + gap: calc(12px + (28 - 12) * (min(max(100vw, 375px), 1250px) - 375px) / 875); `; const UnclaimedContainer = styled.div` @@ -27,25 +34,36 @@ const UnclaimedContainer = styled.div` gap: 4px; `; +const StyledSmall = styled.small` + font-size: 16px; +`; + const ClaimPNK: React.FC = () => { + const [isClaimRewardsModalOpen, toggleClaimRewardsModal] = useToggle(false); + return ( - - - - 1,000 PNK - - -