Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-04-14 23:11:31 -05:00
Code Issues Activity

feat(console): contact us icon and texts (#836)

Browse source
This commit is contained in:
Wang Sijie 2022-05-16 13:01:03 +08:00 • committed by GitHub
parent 5880d1965a
commit c3785d86cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 31 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/assets/images/discord.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 12C0 5.37258 5.37258 0 12 0H36C42.6274 0 48 5.37258 48 12V36C48 42.6274 42.6274 48 36 48H12C5.37258 48 0 42.6274 0 36V12Z" fill="#EFF1F1"/>
<path d="M35.0894 14.0219C33.0498 13.086 30.8626 12.3966 28.5759 12.0017C28.5342 11.994 28.4926 12.0131 28.4712 12.0512C28.1899 12.5515 27.8783 13.2041 27.6601 13.7171C25.2005 13.3489 22.7536 13.3489 20.3444 13.7171C20.1262 13.1927 19.8033 12.5515 19.5208 12.0512C19.4993 12.0144 19.4577 11.9953 19.4161 12.0017C17.1305 12.3953 14.9434 13.0848 12.9026 14.0219C12.8849 14.0295 12.8698 14.0422 12.8597 14.0587C8.71119 20.2565 7.57473 26.302 8.13224 32.2725C8.13476 32.3017 8.15116 32.3297 8.17386 32.3474C10.9109 34.3575 13.5623 35.5778 16.1644 36.3866C16.206 36.3993 16.2501 36.3841 16.2766 36.3498C16.8922 35.5092 17.4409 34.6229 17.9113 33.6908C17.9391 33.6363 17.9126 33.5715 17.8558 33.5499C16.9855 33.2198 16.1568 32.8172 15.3596 32.3601C15.2966 32.3233 15.2915 32.2331 15.3495 32.19C15.5173 32.0643 15.6851 31.9335 15.8453 31.8014C15.8743 31.7773 15.9146 31.7722 15.9487 31.7874C21.1857 34.1785 26.8554 34.1785 32.0306 31.7874C32.0647 31.7709 32.1051 31.776 32.1353 31.8001C32.2955 31.9322 32.4633 32.0643 32.6323 32.19C32.6903 32.2331 32.6865 32.3233 32.6235 32.3601C31.8263 32.8261 30.9976 33.2198 30.126 33.5486C30.0693 33.5702 30.044 33.6363 30.0718 33.6908C30.5523 34.6216 31.101 35.5079 31.7052 36.3485C31.7304 36.3841 31.7758 36.3993 31.8175 36.3866C34.4322 35.5778 37.0835 34.3575 39.8206 32.3474C39.8446 32.3297 39.8597 32.303 39.8622 32.2738C40.5294 25.3712 38.7447 19.3753 35.131 14.06C35.1221 14.0422 35.107 14.0295 35.0894 14.0219ZM18.6934 28.6371C17.1167 28.6371 15.8175 27.1896 15.8175 25.4119C15.8175 23.6341 17.0915 22.1866 18.6934 22.1866C20.3078 22.1866 21.5944 23.6469 21.5692 25.4119C21.5692 27.1896 20.2952 28.6371 18.6934 28.6371ZM29.3263 28.6371C27.7497 28.6371 26.4505 27.1896 26.4505 25.4119C26.4505 23.6341 27.7244 22.1866 29.3263 22.1866C30.9408 22.1866 32.2274 23.6469 32.2022 25.4119C32.2022 27.1896 30.9408 28.6371 29.3263 28.6371Z" fill="#5865F2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

4
packages/console/src/assets/images/email.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 16C0 7.16344 7.16344 0 16 0H32C40.8366 0 48 7.16344 48 16V32C48 40.8366 40.8366 48 32 48H16C7.16344 48 0 40.8366 0 32V16Z" fill="#F7F8F8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40ZM30 16C30.4747 16 30.9301 16.0827 31.3526 16.2345L24.001 23.5861L16.6488 16.234C17.0709 16.0825 17.5258 16 18 16H30ZM24.7586 25.6569C24.5505 25.865 24.2735 25.9622 24.001 25.9485C23.7285 25.9622 23.4514 25.865 23.2433 25.6569L14.9723 17.3859C14.3665 18.087 14 19.0007 14 20V28C14 30.2091 15.7909 32 18 32H30C32.2091 32 34 30.2091 34 28V20C34 19.0012 33.6339 18.0879 33.0286 17.3869L24.7586 25.6569Z" fill="#4EA254"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 834 B

4
packages/console/src/assets/images/github.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 16C0 7.16344 7.16344 0 16 0H32C40.8366 0 48 7.16344 48 16V32C48 40.8366 40.8366 48 32 48H16C7.16344 48 0 40.8366 0 32V16Z" fill="#F7F8F8"/>
<path d="M23.9999 8C20.2007 8.00016 16.5255 9.38638 13.6319 11.9106C10.7384 14.4349 8.81524 17.9324 8.20666 21.7774C7.59807 25.6225 8.34375 29.5641 10.3103 32.897C12.2768 36.2299 15.3358 38.7366 18.94 39.9686C19.74 40.1122 20.04 39.62 20.04 39.1894C20.04 38.7998 20.02 37.5079 20.02 36.134C16 36.8927 14.96 35.1293 14.64 34.2065C14.2849 33.3091 13.722 32.5138 13 31.8893C12.44 31.5817 11.64 30.823 12.98 30.8025C13.4916 30.8595 13.9824 31.042 14.4106 31.3347C14.8388 31.6274 15.1919 32.0216 15.44 32.484C15.6588 32.887 15.9531 33.2419 16.3059 33.5281C16.6587 33.8144 17.0631 34.0264 17.496 34.1522C17.9289 34.2779 18.3817 34.3148 18.8286 34.2608C19.2754 34.2068 19.7074 34.0629 20.0999 33.8373C20.1692 33.0034 20.5317 32.2236 21.12 31.6433C17.56 31.2332 13.84 29.8182 13.84 23.5435C13.8175 21.9131 14.4043 20.3357 15.48 19.1347C14.9908 17.7177 15.0481 16.1627 15.64 14.7875C15.64 14.7875 16.9799 14.3568 20.04 16.469C22.658 15.7307 25.4219 15.7307 28.0399 16.469C31.0998 14.3364 32.4399 14.7875 32.4399 14.7875C33.0319 16.1626 33.0891 17.7177 32.5999 19.1347C33.6788 20.3336 34.2661 21.9124 34.2399 23.5435C34.2399 29.8387 30.4999 31.2332 26.9399 31.6433C27.3217 32.0401 27.6158 32.5165 27.8022 33.0402C27.9885 33.5638 28.0628 34.1225 28.0199 34.6782C28.0199 36.8723 27.9999 38.6357 27.9999 39.1894C27.9999 39.6201 28.2999 40.1327 29.0999 39.9687C32.6977 38.7266 35.748 36.214 37.7061 32.8794C39.6642 29.5448 40.4028 25.6052 39.79 21.7639C39.1772 17.9226 37.2529 14.4296 34.3606 11.9084C31.4683 9.38726 27.7962 8.00203 23.9999 8Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

18
packages/console/src/assets/images/slack.svg
View file

@ -1,18 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" width="48" height="48" rx="16" fill="#E0E3E3"/>
<g clip-path="url(#clip0_2372_51885)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4243 17.6484H12.843C11.2728 17.6484 10 18.9212 10 20.4914C10 22.0616 11.2728 23.3344 12.843 23.3344H20.4243C21.9944 23.3344 23.2672 22.0616 23.2672 20.4914C23.2672 18.9212 21.9944 17.6484 20.4243 17.6484Z" fill="#36C5F0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.85 20.4946V12.9133C30.85 11.3431 29.5772 10.0703 28.007 10.0703C26.4369 10.0703 25.1641 11.3431 25.1641 12.9133V20.4946C25.1641 22.0647 26.4369 23.3376 28.007 23.3376C29.5772 23.3376 30.85 22.0647 30.85 20.4946Z" fill="#2EB67D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.007 30.9203H35.5883C37.1585 30.9203 38.4313 29.6475 38.4313 28.0774C38.4313 26.5072 37.1585 25.2344 35.5883 25.2344H28.007C26.4369 25.2344 25.1641 26.5072 25.1641 28.0774C25.1641 29.6475 26.4369 30.9203 28.007 30.9203Z" fill="#ECB22E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.582 28.0774V35.6586C17.582 37.2288 18.8548 38.5016 20.425 38.5016C21.9952 38.5016 23.268 37.2288 23.268 35.6586V28.0774C23.268 26.507 21.9952 25.2344 20.425 25.2344C18.8548 25.2344 17.582 26.5072 17.582 28.0774Z" fill="#E01E5A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.425 10.0703C18.8548 10.0703 17.582 11.3431 17.582 12.9133C17.582 14.4835 18.8548 15.7563 20.425 15.7563H23.268V12.9133C23.268 11.3431 21.9952 10.0703 20.425 10.0703Z" fill="#36C5F0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4321 20.4914C38.4321 18.9212 37.1592 17.6484 35.5891 17.6484C34.0189 17.6484 32.7461 18.9212 32.7461 20.4914V23.3344H35.5891C37.1592 23.3344 38.4321 22.0616 38.4321 20.4914Z" fill="#2EB67D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.007 38.4985C29.5772 38.4985 30.85 37.2256 30.85 35.6555C30.85 34.0853 29.5772 32.8125 28.007 32.8125H25.1641V35.6555C25.1641 37.2256 26.4369 38.4985 28.007 38.4985Z" fill="#ECB22E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 28.0774C10 29.6475 11.2728 30.9203 12.843 30.9203C14.4131 30.9203 15.686 29.6475 15.686 28.0774V25.2344H12.843C11.2728 25.2344 10 26.5072 10 28.0774Z" fill="#E01E5A"/>
</g>
<defs>
<clipPath id="clip0_2372_51885">
<rect width="28.5" height="28.5" fill="white" transform="translate(10 10)"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.4 KiB

20
packages/console/src/components/AppContent/components/Sidebar/components/Contact/const.tsx
View file

@ -1,31 +1,37 @@
import { I18nKey } from '@logto/phrases';
import slack from '@/assets/images/slack.svg';
import discord from '@/assets/images/discord.svg';
import email from '@/assets/images/email.svg';
import github from '@/assets/images/github.svg';
type ContactItem = {
icon: string;
title: I18nKey;
description: I18nKey;
label: I18nKey;
link: string;
};
export const contacts: ContactItem[] = [
{
title: 'admin_console.contact.slack.title',
icon: slack,
description: 'admin_console.contact.slack.description',
label: 'admin_console.contact.slack.button',
title: 'admin_console.contact.discord.title',
icon: discord,
description: 'admin_console.contact.discord.description',
label: 'admin_console.contact.discord.button',
link: 'https://discord.gg/UEPaF3j5e6',
},
{
title: 'admin_console.contact.github.title',
icon: slack,
icon: github,
description: 'admin_console.contact.github.description',
label: 'admin_console.contact.github.button',
link: 'https://github.com/logto-io/logto',
},
{
title: 'admin_console.contact.email.title',
icon: slack,
icon: email,
description: 'admin_console.contact.email.description',
label: 'admin_console.contact.email.button',
link: 'mailto:feedback@logto.io',
},
];

4
packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
View file

@ -25,8 +25,8 @@ const Contact = ({ isOpen, onCancel }: Props) => {
>
<ModalLayout title="contact.title" subtitle="contact.description" onClose={onCancel}>
<div className={styles.main}>
{contacts.map(({ title, icon, description, label }) => (
<div key={title} className={styles.row}>
{contacts.map(({ title, icon, description, label, link }) => (
<div key={title} className={styles.row} onClick={() => window.open(link)}>
<div className={styles.icon}>
<img src={icon} alt={title} />
</div>

4
packages/phrases/src/locales/en.ts
View file

@ -362,8 +362,8 @@ const translation = {
contact: {
title: 'Contact us',
description: 'You can contact us for help and support.',
slack: {
title: 'Slack channel',
discord: {
title: 'Discord Channel',
description: 'Join our public channel to chat with developers.',
button: 'Join',
},

4
packages/phrases/src/locales/zh-cn.ts
View file

@ -358,8 +358,8 @@ const translation = {
contact: {
title: 'Contact us',
description: 'You can contact us for help and support.',
slack: {
title: 'Slack channel',
discord: {
title: 'Discord Channel',
description: 'Join our public channel to chat with developers.',
button: 'Join',
},