From 148a94e4ea6d1e55d8c519279a6931fb75089e65 Mon Sep 17 00:00:00 2001
From: HeesungB <hezo25@naver.com>
Date: Sat, 17 Dec 2022 16:48:35 +0900
Subject: [PATCH] Change skeleton color

---
 components/chain-list/chain-item.tsx        |  3 +
 components/skeleton/skeleton-animation.ts   |  6 +-
 components/skeleton/skeleton-chain-list.tsx | 84 ++++++---------------
 components/skeleton/skeleton-circle.ts      |  2 +-
 4 files changed, 28 insertions(+), 67 deletions(-)

diff --git a/components/chain-list/chain-item.tsx b/components/chain-list/chain-item.tsx
index 4a7504e..3637fa6 100644
--- a/components/chain-list/chain-item.tsx
+++ b/components/chain-list/chain-item.tsx
@@ -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 {
diff --git a/components/skeleton/skeleton-animation.ts b/components/skeleton/skeleton-animation.ts
index b1f5bb9..17e3523 100644
--- a/components/skeleton/skeleton-animation.ts
+++ b/components/skeleton/skeleton-animation.ts
@@ -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;
diff --git a/components/skeleton/skeleton-chain-list.tsx b/components/skeleton/skeleton-chain-list.tsx
index 02536d5..ffc0170 100644
--- a/components/skeleton/skeleton-chain-list.tsx
+++ b/components/skeleton/skeleton-chain-list.tsx
@@ -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"]};
 `;
diff --git a/components/skeleton/skeleton-circle.ts b/components/skeleton/skeleton-circle.ts
index d2fdc4f..68240e8 100644
--- a/components/skeleton/skeleton-circle.ts
+++ b/components/skeleton/skeleton-circle.ts
@@ -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%;
 `;