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

chore(console): update email service usage UI (#4136)

Browse source
This commit is contained in:
Darcy Ye 2023-07-10 13:52:24 +08:00 committed by GitHub
parent a2e01bd698
commit 16925b3df7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/console/src/assets/icons/email-sent-dark.svg Normal file
View file

@ -0,0 +1,12 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4394 3.23011L9.60078 10.0687L2.762 3.22992C2.9052 3.21032 3.05142 3.2002 3.2 3.2002H16C16.1491 3.2002 16.2957 3.21039 16.4394 3.23011ZM9.60078 11.9586C9.38278 11.9696 9.16115 11.8918 8.99466 11.7253L1.18416 3.91483C0.461676 4.50154 0 5.39695 0 6.4002V16.0002C0 17.7675 1.43269 19.2002 3.2 19.2002H16C17.7673 19.2002 19.2 17.7675 19.2 16.0002V6.4002C19.2 5.39735 18.7387 4.50225 18.0167 3.91553L10.2069 11.7253C10.0404 11.8918 9.81878 11.9696 9.60078 11.9586Z" fill="url(#paint0_linear_8601_113491)"/>
<circle cx="18.4" cy="14.3998" r="5.6" fill="#68BE6C"/>
<rect width="1.60256" height="4.80767" rx="0.801278" transform="matrix(0.708021 -0.706191 0.708021 0.706191 14.5728 14.0117)" fill="white"/>
<rect width="6.41023" height="1.60256" rx="0.801278" transform="matrix(0.708021 -0.706191 0.708021 0.706191 16.842 16.2744)" fill="white"/>
<defs>
<linearGradient id="paint0_linear_8601_113491" x1="13.6" y1="3.2002" x2="-1.2" y2="19.2002" gradientUnits="userSpaceOnUse">
<stop stop-color="#D361E7"/>
<stop offset="1" stop-color="#7D5FF4"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
packages/console/src/pages/ConnectorDetails/EmailUsage/index.module.scss
View file

@ -5,6 +5,7 @@
align-items: center;
font: var(--font-label-2);
gap: _.unit(2);
padding-right: _.unit(5);
> svg {
flex-shrink: 0;

9
packages/console/src/pages/ConnectorDetails/EmailUsage/index.tsx
View file

@ -1,8 +1,12 @@
import EmailSentIcon from '@/assets/icons/email-sent.svg';
import { Theme } from '@logto/schemas';
import EmailSentIconDark from '@/assets/icons/email-sent-dark.svg';
import EmailSentIconLight from '@/assets/icons/email-sent.svg';
import Tip from '@/assets/icons/tip.svg';
import DynamicT from '@/ds-components/DynamicT';
import IconButton from '@/ds-components/IconButton';
import { ToggleTip } from '@/ds-components/Tip';
import useTheme from '@/hooks/use-theme';
import * as styles from './index.module.scss';
@ -10,9 +14,10 @@ type Props = {
usage: number;
};
function EmailUsage({ usage }: Props) {
const theme = useTheme();
return (
<div className={styles.container}>
<EmailSentIcon />
{theme === Theme.Light ? <EmailSentIconLight /> : <EmailSentIconDark />}
<DynamicT
forKey="connector_details.logto_email.total_email_sent"
interpolation={{ value: usage }}