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

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

@ -9,13 +9,13 @@ export const SkeletonAnimation = styled.div`
${color.grey["400"]},
transparent
),
linear-gradient(${color.grey["500"]}, ${color.grey["500"]}),
linear-gradient(${color.grey["600"]}, ${color.grey["600"]}),
radial-gradient(
38px circle at 19px 19px,
${color.grey["500"]} 50%,
${color.grey["600"]} 50%,
transparent 51%
),
linear-gradient(${color.grey["500"]}, ${color.grey["500"]});
linear-gradient(${color.grey["600"]}, ${color.grey["600"]});
background-repeat: no-repeat;
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
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 = () => (
<ContentContainer>
<SkeletonContainer>
<ProfileContainer color={color.grey["700"]}>
<ProfileContainer color={color.grey["800"]}>
<SkeletonCircle width="5.5rem" height="5.5rem" />
<ProfileContentContainer>
@ -54,66 +54,24 @@ export const SkeletonChainList: FunctionComponent = () => (
<SkeletonTitle />
</ChainListTitleContainer>
<ChainContainer color={color.grey["700"]}>
<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>
<ChainContainer color={color.grey["800"]}>
{Array(10)
.fill("")
.map((_, index) => (
<div key={index}>
<ChainItemContainer isLoading={true} isSkeleton={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 />
<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 />
<SkeletonDivider />
</div>
))}
</ChainContainer>
<SkeletonButtonContainer>
@ -132,7 +90,7 @@ const SkeletonContainer = styled.div`
const SkeletonTitle = styled.div`
width: 8rem;
height: 1.5rem;
background-color: ${color.grey["700"]};
background-color: ${color.grey["800"]};
`;
const SkeletonButtonContainer = styled.div`
@ -145,11 +103,11 @@ const SkeletonButton = styled.div`
padding-top: 1.5rem;
background-color: ${color.grey["700"]};
background-color: ${color.grey["800"]};
`;
const SkeletonDivider = styled(SkeletonAnimation)`
width: 100%;
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};
height: ${(props) => props.height};
background-color: ${color.grey["500"]};
background-color: ${color.grey["600"]};
border-radius: 50%;
`;