feat(web): claimed staking rewards popup, modularized

Author: kemuru

web/src/components/Popup/ClaimStakingRewards.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledText = styled.text`
+  font-size: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+  margin-top: 16px;
+`;
+
+const ClaimedText: React.FC = () => {
+  return <StyledText>🎉 Claimed! 🎉</StyledText>;
+};
+export default ClaimedText;

web/src/components/Popup/ClaimedStakingRewards/ClaimedText.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "styled-components";
+import Icon from "tsx:svgs/icons/close.svg";
+
+const StyledIcon = styled(Icon)`
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  align-self: flex-end;
+  cursor: pointer;
+
+  path {
+    fill: ${({ theme }) => theme.stroke};
+  }
+`;
+
+interface IClose {
+  togglePopup: () => void;
+}
+
+const Close: React.FC<IClose> = ({ togglePopup }) => {
+  return <StyledIcon onClick={togglePopup}>CloseIcon</StyledIcon>;
+};
+export default Close;

web/src/components/Popup/ClaimedStakingRewards/Close.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledHr = styled.hr`
+  display: flex;
+  border: none;
+  height: 0.5px;
+  background-color: ${({ theme }) => theme.stroke};
+  margin: calc(8px + (18 - 8) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 0px;
+  width: 100%;
+`;
+
+const Divider: React.FC = () => {
+  return <StyledHr />;
+};
+export default Divider;

web/src/components/Popup/ClaimedStakingRewards/Divider.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styled from "styled-components";
+import Icon from "svgs/icons/kleros.svg";
+
+const StyledIcon = styled(Icon)`
+  path {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+  width: calc(120px + (160 - 120) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  height: calc(132px + (140 - 132) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+const KlerosIcon: React.FC = () => {
+  return <StyledIcon />;
+};
+export default KlerosIcon;

web/src/components/Popup/ClaimedStakingRewards/KlerosIcon.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledText = styled.text`
+  font-size: calc(40px + (64 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  font-weight: 600;
+  color: ${({ theme }) => theme.secondaryPurple};
+  margin-top: 16px;
+`;
+
+const QuantityClaimed: React.FC = () => {
+  return <StyledText>1,000 PNK</StyledText>;
+};
+export default QuantityClaimed;

web/src/components/Popup/ClaimedStakingRewards/QuantityClaimed.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import RightArrow from "tsx:svgs/icons/arrow.svg";
+
+const StyledLink = styled.a`
+  display: flex;
+  color: ${({ theme }) => theme.primaryBlue};
+  font-size: 16px;
+  margin-top: 8px;
+  align-items: center;
+  gap: 8px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const StyledRightArrow = styled(RightArrow)`
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const ReadMore: React.FC = () => {
+  return (
+    <StyledLink
+      href="https://blog.kleros.io/the-launch-of-the-kleros-juror-incentive-program/"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <text>Read more about the Juror Incentive Program</text>
+      <StyledRightArrow />
+    </StyledLink>
+  );
+};
+export default ReadMore;

web/src/components/Popup/ClaimedStakingRewards/ReadMore.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledText = styled.text`
+  font-size: 16px;
+  color: ${({ theme }) => theme.primaryText};
+  margin-top: 16px;
+`;
+
+const ThanksText: React.FC = () => {
+  return <StyledText>Thank you for being part of the Kleros community.</StyledText>;
+};
+export default ThanksText;