cerc-io/icns-frontend
16
0
Fork 0
forked from LaconicNetwork/icns-frontend
Code Pull Requests Actions Activity

[WIP] design QA

Browse Source
This commit is contained in:
HeesungB 2022-12-16 15:55:31 +09:00
parent 0dd50d218b
commit 4cc4213f8c
6 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/chain-list/chain-item.tsx
View File

@ -126,4 +126,6 @@ export const WalletAddress = styled.div`
export const ChainCheckBox = styled.input.attrs({ type: "checkbox" })` export const ChainCheckBox = styled.input.attrs({ type: "checkbox" })`
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
accent-color: ${color.orange["200"]};
`; `;

4
components/connect-wallet-modal/modal.tsx
View File

@ -19,7 +19,7 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
onRequestClose={onCloseModal} onRequestClose={onCloseModal}
ariaHideApp={false} ariaHideApp={false}
style={{ style={{
overlay: { background: "#181818b3" }, overlay: { background: "#121212cc" },
content: { content: {
top: "50%", top: "50%",
left: "50%", left: "50%",
@ -52,6 +52,8 @@ const ModalContainer = styled.div`
flex-direction: column; flex-direction: column;
gap: 0.9rem; gap: 0.9rem;
padding: 2.2rem; padding: 2.2rem;
min-width: 28rem;
`; `;
const ModalTitle = styled.div` const ModalTitle = styled.div`

6
components/primary-button/index.ts
View File

@ -12,8 +12,10 @@ export const PrimaryButton = styled.button`
font-family: "Inter", serif; font-family: "Inter", serif;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 1.5rem; font-size: 1.25rem;
line-height: 20px; line-height: 1.25rem;
letter-spacing: 0.07em;
text-transform: uppercase;
color: ${color.orange["50"]}; color: ${color.orange["50"]};
background-color: ${color.orange["100"]}; background-color: ${color.orange["100"]};

14
components/skeleton/skeleton-chain-list.tsx
View File

@ -115,9 +115,11 @@ export const SkeletonChainList: FunctionComponent = () => (
<SkeletonDivider /> <SkeletonDivider />
</ChainContainer> </ChainContainer>
<ButtonContainer> <SkeletonButtonContainer>
<SkeletonButton /> <ButtonContainer>
</ButtonContainer> <SkeletonButton />
</ButtonContainer>
</SkeletonButtonContainer>
</ContentContainer> </ContentContainer>
</SkeletonContainer> </SkeletonContainer>
); );
@ -132,10 +134,16 @@ const SkeletonTitle = styled.div`
background-color: ${color.grey["700"]}; background-color: ${color.grey["700"]};
`; `;
const SkeletonButtonContainer = styled.div`
margin-top: 1.5rem;
`;
const SkeletonButton = styled.div` const SkeletonButton = styled.div`
width: 12rem; width: 12rem;
height: 4rem; height: 4rem;
padding-top: 1.5rem;
background-color: ${color.grey["700"]}; background-color: ${color.grey["700"]};
`; `;

5
components/twitter-profile/index.tsx
View File

@ -130,5 +130,10 @@ export const ProfileDescriptionContainer = styled.div`
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1rem; line-height: 1rem;
max-width: 27.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: ${color.grey["100"]}; color: ${color.grey["100"]};
`; `;

6
pages/verification/index.tsx
View File

@ -439,8 +439,8 @@ export const ContentContainer = styled.div`
`; `;
export const ButtonContainer = styled.div<{ disabled?: boolean }>` export const ButtonContainer = styled.div<{ disabled?: boolean }>`
width: 12rem; width: 11rem;
height: 4rem; height: 3.5rem;
background-color: ${(props) => background-color: ${(props) =>
props.disabled ? color.orange["300"] : color.orange["100"]}; props.disabled ? color.orange["300"] : color.orange["100"]};
@ -490,4 +490,6 @@ const AgreeContainer = styled.div`
const AgreeCheckBox = styled.input.attrs({ type: "checkbox" })` const AgreeCheckBox = styled.input.attrs({ type: "checkbox" })`
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
accent-color: ${color.orange["200"]};
`; `;