From 28a44a9195f70caff1a3eb812b679f2291739b3d Mon Sep 17 00:00:00 2001 From: Thunnini Date: Sun, 18 Dec 2022 22:47:24 +0900 Subject: [PATCH] Redesign `FinalCheckModal` component --- components/final-check-modal/index.tsx | 291 +++++++++++++++++-------- components/secondary-button/index.tsx | 10 +- public/images/icons/keplr-small.png | Bin 0 -> 2081 bytes public/images/icons/twitter-small.png | Bin 0 -> 912 bytes 4 files changed, 200 insertions(+), 101 deletions(-) create mode 100644 public/images/icons/keplr-small.png create mode 100644 public/images/icons/twitter-small.png diff --git a/components/final-check-modal/index.tsx b/components/final-check-modal/index.tsx index ee31793..b102d5d 100644 --- a/components/final-check-modal/index.tsx +++ b/components/final-check-modal/index.tsx @@ -8,6 +8,7 @@ import { PrimaryButton } from "../primary-button"; import { SecondaryButton } from "../secondary-button"; import { MINIMUM_OSMO_FEE } from "../../constants/wallet"; import { useRouter } from "next/router"; +import { Bech32Address } from "@keplr-wallet/cosmos"; interface Props { twitterUserName: string | undefined; @@ -53,43 +54,85 @@ export const FinalCheckModal: FunctionComponent = (props) => { > Final Checks - You are claiming the ICNS name - - {twitterUserName} - - twitter icon - - - on - {walletInfo?.name} - ({walletInfo?.bech32Address}) - - - ☑️ ICNS name can only be claimed once per Twitter account. -
- ☑️ ICNS name can’t be transferred at this time. -
- ☑️ Please make sure you’ve selected the right account on your wallet. - + {`You are claiming the ICNS name ${twitterUserName} on main keplr account`} - - {MINIMUM_OSMO_FEE} will be spent as a - spam-prevention fee. - + + } + title="Your Twitter ID" + content={`@${twitterUserName}`} + /> +
+ + + +
+ + } + title="Main Keplr Account" + content={Bech32Address.shortenAddress( + walletInfo?.bech32Address || "", + 28, + )} + /> + + + + ☑️ ICNS name can only be claimed once per Twitter account. +
+ ☑️ ICNS name can’t be transferred at this time. +
+ ☑️ Please make sure you’ve selected the right account on your + wallet. + +
+ + {MINIMUM_OSMO_FEE} will be spent as a + spam-prevention fee. + + - { - await router.push("/"); - }} - > - Use a different account - = (props) => { Register + + { + await router.push("/"); + }} + > + Use a different account + + @@ -107,55 +159,42 @@ export const FinalCheckModal: FunctionComponent = (props) => { const ModalContainer = styled.div` display: flex; flex-direction: column; - gap: 0.625rem; - width: 50rem; + max-width: 43.5rem; - padding: 1.75rem 2rem; + padding: 2rem 2.25rem; + + font-family: "Inter", serif; + font-style: normal; `; const ModalTitle = styled.div` - font-family: "Inter", serif; - font-style: normal; - font-weight: 700; - font-size: 1.5rem; - line-height: 1.8rem; - - margin-bottom: 1rem; - - color: ${color.white}; -`; - -const ICNSNameContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - - gap: 0.5rem; -`; - -const TwitterImageContainer = styled.div` - width: 2rem; - height: 2rem; - - margin-top: 0.4rem; - - position: relative; -`; - -const MainText = styled.div` - font-family: "Inter", serif; - font-style: normal; font-weight: 600; - font-size: 1rem; - line-height: 1.2rem; + font-size: 1.625rem; + line-height: 1.94rem; color: ${color.white}; + + margin-bottom: 1.75rem; +`; + +const ModalDescription = styled.div` + font-weight: 500; + font-size: 1rem; + line-height: 1.18rem; + + color: ${color.grey["100"]}; +`; + +const SubTextsContainer = styled.div` + margin-top: 1.75rem; + + padding: 2rem 1.5rem; + + background-color: ${color.grey["700"]}; `; const SubText = styled.div` - font-family: "Inter", serif; - font-style: normal; font-weight: 500; font-size: 1rem; line-height: 1.5rem; @@ -167,35 +206,95 @@ const SubBoldText = styled.span` color: ${color.grey["100"]}; `; -const BoldText = styled.div` - font-family: "Inter", serif; - font-style: normal; - font-weight: 600; - font-size: 2rem; - line-height: 2.5rem; - - color: ${color.orange["50"]}; -`; - -const Divider = styled.div` - width: 100%; - - margin: 1.625rem 0; - - border: 0.5px solid ${color.grey["500"]}; -`; - const ButtonContainer = styled.div` display: flex; - flex-direction: row; - height: 3.5rem; + flex-direction: column; - margin-top: 2.5rem; - padding: 0 4.25rem; + align-items: center; - gap: 3.5rem; + margin-top: 1.75rem; `; const RegisterButton = styled.div` - width: 10rem; + width: 60%; + height: 4.125rem; +`; + +const CancelButton = styled.div` + width: 80%; + height: 3.8rem; +`; + +const NameBox: FunctionComponent<{ + title: string; + content: string; + + icon?: React.ReactElement; + + marginTop: string; +}> = ({ icon, title, content, marginTop }) => { + return ( + + + {icon ? {icon} : null} + {title} + + {content} + + ); +}; + +const NameBoxContainer = styled.div` + position: relative; + + display: flex; + flex-direction: column; + + font-family: "Inter", serif; + font-style: normal; +`; + +const NameBoxTitleContainer = styled.div` + position: absolute; + top: -1.9rem; + + display: flex; + flex-direction: row; + align-items: center; +`; + +const NameBoxIconContainer = styled.div` + display: flex; + align-items: center; + + height: 1px; +`; + +const NameBoxTitle = styled.div` + font-weight: 700; + font-size: 1rem; + line-height: 1.18rem; + + color: ${color.grey["400"]}; +`; + +const NameBoxContentContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + + padding: 2.125rem 0; + + background-color ${color.grey["700"]}; + border: 1px solid ${color.grey["300"]}; + + font-weight: 600; + font-size: 1.5rem; + line-height: 1.81rem; + + color: ${color.white} `; diff --git a/components/secondary-button/index.tsx b/components/secondary-button/index.tsx index 3190f37..ca15e2e 100644 --- a/components/secondary-button/index.tsx +++ b/components/secondary-button/index.tsx @@ -11,14 +11,14 @@ export const SecondaryButton = styled.button` font-family: "Inter", serif; font-style: normal; - font-weight: 600; - font-size: 1.25rem; - line-height: 1.25rem; + font-weight: 400; + font-size: 1rem; + line-height: 1.025rem; letter-spacing: 0.07em; text-transform: uppercase; - color: ${color.white}; - background-color: ${color.grey["300"]}; + color: ${color.grey["200"]}; + background-color: transparent; cursor: pointer; `; diff --git a/public/images/icons/keplr-small.png b/public/images/icons/keplr-small.png new file mode 100644 index 0000000000000000000000000000000000000000..66d6d9e4022506b21ccdb0c5ced6f5ab738d578e GIT binary patch literal 2081 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 mwT1y_drnSHPEJnFbKx)DcSU#=2b87&0000