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

Change skeleton color

Browse Source
This commit is contained in:
HeesungB 2022-12-17 16:48:35 +09:00
parent d1221475a7
commit 148a94e4ea
4 changed files with 28 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,6 +61,7 @@ export const ChainItemContainer = styled.div<{
isLoading: boolean; isLoading: boolean;
checked?: boolean; checked?: boolean;
disabled?: boolean; disabled?: boolean;
isSkeleton?: boolean;
}>` }>`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -79,6 +80,8 @@ export const ChainItemContainer = styled.div<{
? color.black ? color.black
: props.checked : props.checked
? color.grey["800"] ? color.grey["800"]
: props.isSkeleton
? color.grey["800"]
: color.grey["900"]}; : color.grey["900"]};
&:hover { &:hover {

6
components/skeleton/skeleton-animation.ts
View File

@ -9,13 +9,13 @@ export const SkeletonAnimation = styled.div`
${color.grey["400"]}, ${color.grey["400"]},
transparent transparent
), ),
linear-gradient(${color.grey["500"]}, ${color.grey["500"]}), linear-gradient(${color.grey["600"]}, ${color.grey["600"]}),
radial-gradient( radial-gradient(
38px circle at 19px 19px, 38px circle at 19px 19px,
${color.grey["500"]} 50%, ${color.grey["600"]} 50%,
transparent 51% transparent 51%
), ),
linear-gradient(${color.grey["500"]}, ${color.grey["500"]}); linear-gradient(${color.grey["600"]}, ${color.grey["600"]});
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
background-position: -315px 0, 0 0, 0px 190px, 50px 195px; background-position: -315px 0, 0 0, 0px 190px, 50px 195px;

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

@ -29,7 +29,7 @@ import {
export const SkeletonChainList: FunctionComponent = () => ( export const SkeletonChainList: FunctionComponent = () => (
<ContentContainer> <ContentContainer>
<SkeletonContainer> <SkeletonContainer>
<ProfileContainer color={color.grey["700"]}> <ProfileContainer color={color.grey["800"]}>
<SkeletonCircle width="5.5rem" height="5.5rem" /> <SkeletonCircle width="5.5rem" height="5.5rem" />
<ProfileContentContainer> <ProfileContentContainer>
@ -54,66 +54,24 @@ export const SkeletonChainList: FunctionComponent = () => (
<SkeletonTitle /> <SkeletonTitle />
</ChainListTitleContainer> </ChainListTitleContainer>
<ChainContainer color={color.grey["700"]}> <ChainContainer color={color.grey["800"]}>
<ChainItemContainer isLoading={true}> {Array(10)
<ChainImageContainer width="3rem" height="3rem"> .fill("")
<SkeletonCircle width="3rem" height="3rem" /> .map((_, index) => (
</ChainImageContainer> <div key={index}>
<ChainInfoContainer> <ChainItemContainer isLoading={true} isSkeleton={true}>
<SkeletonText width="4rem" height="1rem" /> <ChainImageContainer width="3rem" height="3rem">
<SkeletonText width="12rem" height="1rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainInfoContainer> </ChainImageContainer>
</ChainItemContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer>
</ChainItemContainer>
<SkeletonDivider /> <SkeletonDivider />
</div>
<ChainItemContainer isLoading={true}> ))}
<ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer>
<ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer>
</ChainItemContainer>
<SkeletonDivider />
<ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer>
<ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer>
</ChainItemContainer>
<SkeletonDivider />
<ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer>
<ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer>
</ChainItemContainer>
<SkeletonDivider />
<ChainItemContainer isLoading={true}>
<ChainImageContainer width="3rem" height="3rem">
<SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer>
<ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" />
</ChainInfoContainer>
</ChainItemContainer>
<SkeletonDivider />
</ChainContainer> </ChainContainer>
<SkeletonButtonContainer> <SkeletonButtonContainer>
@ -132,7 +90,7 @@ const SkeletonContainer = styled.div`
const SkeletonTitle = styled.div` const SkeletonTitle = styled.div`
width: 8rem; width: 8rem;
height: 1.5rem; height: 1.5rem;
background-color: ${color.grey["700"]}; background-color: ${color.grey["800"]};
`; `;
const SkeletonButtonContainer = styled.div` const SkeletonButtonContainer = styled.div`
@ -145,11 +103,11 @@ const SkeletonButton = styled.div`
padding-top: 1.5rem; padding-top: 1.5rem;
background-color: ${color.grey["700"]}; background-color: ${color.grey["800"]};
`; `;
const SkeletonDivider = styled(SkeletonAnimation)` const SkeletonDivider = styled(SkeletonAnimation)`
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: ${color.grey["500"]}; background-color: ${color.grey["600"]};
`; `;

2
components/skeleton/skeleton-circle.ts
View File

@ -12,6 +12,6 @@ export const SkeletonCircle = styled(SkeletonAnimation)<WidthHeightProps>`
width: ${(props) => props.width}; width: ${(props) => props.width};
height: ${(props) => props.height}; height: ${(props) => props.height};
background-color: ${color.grey["500"]}; background-color: ${color.grey["600"]};
border-radius: 50%; border-radius: 50%;
`; `;