diff --git a/components/chain-list/chain-item.tsx b/components/chain-list/chain-item.tsx index f69311e..4a7504e 100644 --- a/components/chain-list/chain-item.tsx +++ b/components/chain-list/chain-item.tsx @@ -126,4 +126,6 @@ export const WalletAddress = styled.div` export const ChainCheckBox = styled.input.attrs({ type: "checkbox" })` width: 1.5rem; height: 1.5rem; + + accent-color: ${color.orange["200"]}; `; diff --git a/components/connect-wallet-modal/modal.tsx b/components/connect-wallet-modal/modal.tsx index e346d65..aca7628 100644 --- a/components/connect-wallet-modal/modal.tsx +++ b/components/connect-wallet-modal/modal.tsx @@ -19,7 +19,7 @@ export const ConnectWalletModal: FunctionComponent = (props) => { onRequestClose={onCloseModal} ariaHideApp={false} style={{ - overlay: { background: "#181818b3" }, + overlay: { background: "#121212cc" }, content: { top: "50%", left: "50%", @@ -52,6 +52,8 @@ const ModalContainer = styled.div` flex-direction: column; gap: 0.9rem; padding: 2.2rem; + + min-width: 28rem; `; const ModalTitle = styled.div` diff --git a/components/primary-button/index.ts b/components/primary-button/index.ts index ef81430..a563ba4 100644 --- a/components/primary-button/index.ts +++ b/components/primary-button/index.ts @@ -12,8 +12,10 @@ export const PrimaryButton = styled.button` font-family: "Inter", serif; font-style: normal; font-weight: 600; - font-size: 1.5rem; - line-height: 20px; + font-size: 1.25rem; + line-height: 1.25rem; + letter-spacing: 0.07em; + text-transform: uppercase; color: ${color.orange["50"]}; background-color: ${color.orange["100"]}; diff --git a/components/skeleton/skeleton-chain-list.tsx b/components/skeleton/skeleton-chain-list.tsx index 61fa32c..f83ab5f 100644 --- a/components/skeleton/skeleton-chain-list.tsx +++ b/components/skeleton/skeleton-chain-list.tsx @@ -115,9 +115,11 @@ export const SkeletonChainList: FunctionComponent = () => ( - - - + + + + + ); @@ -132,10 +134,16 @@ const SkeletonTitle = styled.div` background-color: ${color.grey["700"]}; `; +const SkeletonButtonContainer = styled.div` + margin-top: 1.5rem; +`; + const SkeletonButton = styled.div` width: 12rem; height: 4rem; + padding-top: 1.5rem; + background-color: ${color.grey["700"]}; `; diff --git a/components/twitter-profile/index.tsx b/components/twitter-profile/index.tsx index f2375c1..72a8598 100644 --- a/components/twitter-profile/index.tsx +++ b/components/twitter-profile/index.tsx @@ -130,5 +130,10 @@ export const ProfileDescriptionContainer = styled.div` font-size: 0.8rem; line-height: 1rem; + max-width: 27.5rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: ${color.grey["100"]}; `; diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index f48548e..d49992d 100644 --- a/pages/verification/index.tsx +++ b/pages/verification/index.tsx @@ -439,8 +439,8 @@ export const ContentContainer = styled.div` `; export const ButtonContainer = styled.div<{ disabled?: boolean }>` - width: 12rem; - height: 4rem; + width: 11rem; + height: 3.5rem; background-color: ${(props) => props.disabled ? color.orange["300"] : color.orange["100"]}; @@ -490,4 +490,6 @@ const AgreeContainer = styled.div` const AgreeCheckBox = styled.input.attrs({ type: "checkbox" })` width: 1.2rem; height: 1.2rem; + + accent-color: ${color.orange["200"]}; `;