Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

feat(console): update task complete icon (#1395)

Browse source
This commit is contained in:
Xiao Yijun 2022-07-04 12:36:03 +08:00 committed by GitHub
parent de2610e5fd
commit 06f190b2c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/assets/images/circle-tick.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 575 B

31
packages/console/src/assets/images/task-complete.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

7
packages/console/src/pages/GetStarted/index.module.scss
View file

@ -44,13 +44,6 @@
margin-right: _.unit(6); margin-right: _.unit(6);
} }
.completeIndicator {
position: absolute;
top: 53px;
left: 70px;
color: var(--color-layer-1);
}
.wrapper { .wrapper {
flex: 1; flex: 1;
display: flex; display: flex;

6
packages/console/src/pages/GetStarted/index.tsx
View file

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom'; 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 Button from '@/components/Button';
import Card from '@/components/Card'; import Card from '@/components/Card';
import ConfirmModal from '@/components/ConfirmModal'; import ConfirmModal from '@/components/ConfirmModal';
@ -52,8 +52,8 @@ const GetStarted = () => {
({ id, title, subtitle, icon: CardIcon, isComplete, isHidden, buttonText, onClick }) => ({ id, title, subtitle, icon: CardIcon, isComplete, isHidden, buttonText, onClick }) =>
!isHidden && ( !isHidden && (
<Card key={id} className={styles.card}> <Card key={id} className={styles.card}>
<CardIcon className={styles.icon} /> {!isComplete && <CardIcon className={styles.icon} />}
{isComplete && <CompleteIndicator className={styles.completeIndicator} />} {isComplete && <CompleteIndicator className={styles.icon} />}
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.title}>{t(title)}</div> <div className={styles.title}>{t(title)}</div>
<div className={styles.subtitle}>{t(subtitle)}</div> <div className={styles.subtitle}>{t(subtitle)}</div>