From 06f190b2c48acfc853c9f675bf918c43c17f800a Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 4 Jul 2022 12:36:03 +0800
Subject: [PATCH] feat(console): update task complete icon (#1395)

---
 .../console/src/assets/images/circle-tick.svg |  4 ---
 .../src/assets/images/task-complete.svg       | 31 +++++++++++++++++++
 .../src/pages/GetStarted/index.module.scss    |  7 -----
 .../console/src/pages/GetStarted/index.tsx    |  6 ++--
 4 files changed, 34 insertions(+), 14 deletions(-)
 delete mode 100644 packages/console/src/assets/images/circle-tick.svg
 create mode 100644 packages/console/src/assets/images/task-complete.svg

diff --git a/packages/console/src/assets/images/circle-tick.svg b/packages/console/src/assets/images/circle-tick.svg
deleted file mode 100644
index c01249568..000000000
--- a/packages/console/src/assets/images/circle-tick.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="10" cy="10" r="9" fill="#4EA254" stroke="currentColor" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.75789 8.99992C5.36736 9.39045 5.36736 10.0236 5.75789 10.4141L8.58632 13.2426C8.97684 13.6331 9.61 13.6331 10.0005 13.2426L14.2432 8.99992C14.6337 8.6094 14.6337 7.97624 14.2432 7.58571C13.8526 7.19519 13.2195 7.19519 12.829 7.58571L9.29342 11.1212L7.1721 8.99992C6.78158 8.6094 6.14841 8.6094 5.75789 8.99992Z" fill="currentColor"/>
-</svg>
diff --git a/packages/console/src/assets/images/task-complete.svg b/packages/console/src/assets/images/task-complete.svg
new file mode 100644
index 000000000..edfaa6fcf
--- /dev/null
+++ b/packages/console/src/assets/images/task-complete.svg
@@ -0,0 +1,31 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="16" fill="url(#paint0_linear_6663_137717)"/>
+<g filter="url(#filter0_d_6663_137717)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5158 21.9998C14.7347 22.7809 14.7347 24.0472 15.5158 24.8283L21.1726 30.4851C21.9537 31.2662 23.22 31.2662 24.0011 30.4851L32.4863 21.9998C33.2674 21.2188 33.2674 19.9525 32.4863 19.1714C31.7053 18.3904 30.439 18.3904 29.6579 19.1714L22.5868 26.2425L18.3442 21.9998C17.5632 21.2188 16.2968 21.2188 15.5158 21.9998Z" fill="url(#paint1_linear_6663_137717)"/>
+</g>
+<path opacity="0.3" d="M16 25.5L19.9289 23.5856L22.6 26.2L19.5858 28.8993L16 25.5Z" fill="url(#paint2_linear_6663_137717)"/>
+<defs>
+<filter id="filter0_d_6663_137717" x="11.9297" y="16.5859" width="24.1406" height="18.4854" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.209219 0 0 0 0 0.4875 0 0 0 0 0.221061 0 0 0 0.32 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6663_137717"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6663_137717" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_6663_137717" x1="27" y1="8" x2="18" y2="39" gradientUnits="userSpaceOnUse">
+<stop stop-color="#80E670"/>
+<stop offset="1" stop-color="#50AC56"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6663_137717" x1="28.5011" y1="16.5" x2="20.0011" y2="30.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#E9F2E9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_6663_137717" x1="22.5" y1="26" x2="19.5" y2="26" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5CB65A"/>
+<stop offset="1" stop-color="#CDF8CC" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/console/src/pages/GetStarted/index.module.scss b/packages/console/src/pages/GetStarted/index.module.scss
index 710b0e497..6b63344ad 100644
--- a/packages/console/src/pages/GetStarted/index.module.scss
+++ b/packages/console/src/pages/GetStarted/index.module.scss
@@ -44,13 +44,6 @@
     margin-right: _.unit(6);
   }
 
-  .completeIndicator {
-    position: absolute;
-    top: 53px;
-    left: 70px;
-    color: var(--color-layer-1);
-  }
-
   .wrapper {
     flex: 1;
     display: flex;
diff --git a/packages/console/src/pages/GetStarted/index.tsx b/packages/console/src/pages/GetStarted/index.tsx
index 282e017b4..ba66d1670 100644
--- a/packages/console/src/pages/GetStarted/index.tsx
+++ b/packages/console/src/pages/GetStarted/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import CompleteIndicator from '@/assets/images/circle-tick.svg';
+import CompleteIndicator from '@/assets/images/task-complete.svg';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import ConfirmModal from '@/components/ConfirmModal';
@@ -52,8 +52,8 @@ const GetStarted = () => {
           ({ id, title, subtitle, icon: CardIcon, isComplete, isHidden, buttonText, onClick }) =>
             !isHidden && (
               <Card key={id} className={styles.card}>
-                <CardIcon className={styles.icon} />
-                {isComplete && <CompleteIndicator className={styles.completeIndicator} />}
+                {!isComplete && <CardIcon className={styles.icon} />}
+                {isComplete && <CompleteIndicator className={styles.icon} />}
                 <div className={styles.wrapper}>
                   <div className={styles.title}>{t(title)}</div>
                   <div className={styles.subtitle}>{t(subtitle)}</div>