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): add app icon and api icon (#830)

Browse source
This commit is contained in:
Xiao Yijun 2022-05-16 21:23:20 +08:00 committed by GitHub
parent f8b0a41b53
commit 373d349db7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 166 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
packages/console/src/assets/images/api-resource.svg Normal file
View file

@ -0,0 +1,53 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#FFEAFE"/>
<mask id="path-2-inside-1_1555_8784" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7808 6C18.3219 6 17.9219 6.3123 17.8106 6.75746L17 10L20 11L23 10L22.1894 6.75746C22.0781 6.3123 21.6781 6 21.2192 6H18.7808ZM18.7808 34C18.3219 34 17.9219 33.6877 17.8106 33.2425L17 30L20 29L23 30L22.1894 33.2425C22.0781 33.6877 21.6781 34 21.2192 34H18.7808Z"/>
</mask>
<path d="M17.8106 6.75746L16.8405 6.51493H16.8405L17.8106 6.75746ZM17 10L16.0299 9.75746L15.8053 10.6558L16.6838 10.9487L17 10ZM20 11L19.6838 11.9487L20 12.0541L20.3162 11.9487L20 11ZM23 10L23.3162 10.9487L24.1947 10.6558L23.9701 9.75746L23 10ZM22.1894 6.75746L21.2192 7L21.2192 7L22.1894 6.75746ZM17.8106 33.2425L16.8405 33.4851H16.8405L17.8106 33.2425ZM17 30L16.6838 29.0513L15.8053 29.3442L16.0299 30.2425L17 30ZM20 29L20.3162 28.0513L20 27.9459L19.6838 28.0513L20 29ZM23 30L23.9701 30.2425L24.1947 29.3442L23.3162 29.0513L23 30ZM18.7808 7L18.7808 7V5C17.863 5 17.0631 5.62459 16.8405 6.51493L18.7808 7ZM17.9701 10.2425L18.7808 7L16.8405 6.51493L16.0299 9.75746L17.9701 10.2425ZM20.3162 10.0513L17.3162 9.05132L16.6838 10.9487L19.6838 11.9487L20.3162 10.0513ZM22.6838 9.05132L19.6838 10.0513L20.3162 11.9487L23.3162 10.9487L22.6838 9.05132ZM21.2192 7L22.0299 10.2425L23.9701 9.75746L23.1595 6.51493L21.2192 7ZM21.2192 7L21.2192 7L23.1595 6.51493C22.9369 5.62459 22.137 5 21.2192 5V7ZM18.7808 7H21.2192V5H18.7808V7ZM16.8405 33.4851C17.0631 34.3754 17.863 35 18.7808 35V33L16.8405 33.4851ZM16.0299 30.2425L16.8405 33.4851L18.7808 33L17.9701 29.7575L16.0299 30.2425ZM19.6838 28.0513L16.6838 29.0513L17.3162 30.9487L20.3162 29.9487L19.6838 28.0513ZM23.3162 29.0513L20.3162 28.0513L19.6838 29.9487L22.6838 30.9487L23.3162 29.0513ZM23.1595 33.4851L23.9701 30.2425L22.0299 29.7575L21.2192 33L23.1595 33.4851ZM21.2192 35C22.137 35 22.9369 34.3754 23.1595 33.4851L21.2192 33V35ZM18.7808 35H21.2192V33H18.7808V35Z" fill="#F07EFF" mask="url(#path-2-inside-1_1555_8784)"/>
<mask id="path-4-inside-2_1555_8784" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.23771 10.9626C8.91325 11.2871 8.85124 11.7907 9.08733 12.1842L10.8069 15.0502L13.9994 14L15.0496 10.8076L12.1836 9.08797C11.7901 8.85189 11.2864 8.91389 10.962 9.23836L9.23771 10.9626ZM29.0367 30.7616C28.7122 31.0861 28.2086 31.1481 27.8151 30.912L24.9491 29.1924L25.9994 26L29.1917 24.9497L30.9113 27.8157C31.1474 28.2092 31.0854 28.7129 30.7609 29.0373L29.0367 30.7616Z"/>
</mask>
<path d="M9.08733 12.1842L8.22984 12.6987L8.22984 12.6987L9.08733 12.1842ZM10.8069 15.0502L9.94945 15.5647L10.3605 16.2498L11.1194 16.0001L10.8069 15.0502ZM13.9994 14L14.3119 14.9499L14.7915 14.7921L14.9493 14.3125L13.9994 14ZM15.0496 10.8076L15.9995 11.1201L16.2492 10.3611L15.5641 9.9501L15.0496 10.8076ZM12.1836 9.08797L11.6691 9.94547L11.6691 9.94547L12.1836 9.08797ZM27.8151 30.912L27.3006 31.7695L27.3006 31.7695L27.8151 30.912ZM24.9491 29.1924L23.9992 28.8798L23.7495 29.6388L24.4346 30.0499L24.9491 29.1924ZM25.9994 26L25.6869 25.0501L25.2073 25.2079L25.0495 25.6875L25.9994 26ZM29.1917 24.9497L30.0492 24.4352L29.6381 23.7501L28.8792 23.9998L29.1917 24.9497ZM9.94482 11.6697L9.94482 11.6697L8.53061 10.2555C7.88167 10.9044 7.75766 11.9117 8.22984 12.6987L9.94482 11.6697ZM11.6644 14.5357L9.94482 11.6697L8.22984 12.6987L9.94945 15.5647L11.6644 14.5357ZM13.6869 13.0501L10.4944 14.1003L11.1194 16.0001L14.3119 14.9499L13.6869 13.0501ZM14.0997 10.4951L13.0495 13.6875L14.9493 14.3125L15.9995 11.1201L14.0997 10.4951ZM11.6691 9.94547L14.5351 11.6651L15.5641 9.9501L12.6981 8.23048L11.6691 9.94547ZM11.6691 9.94547L11.6691 9.94547L12.6981 8.23048C11.9111 7.75831 10.9038 7.88232 10.2549 8.53125L11.6691 9.94547ZM9.94482 11.6697L11.6691 9.94547L10.2549 8.53125L8.53061 10.2555L9.94482 11.6697ZM27.3006 31.7695C28.0876 32.2416 29.0949 32.1176 29.7438 31.4687L28.3296 30.0545L27.3006 31.7695ZM24.4346 30.0499L27.3006 31.7695L28.3296 30.0545L25.4636 28.3349L24.4346 30.0499ZM25.0495 25.6875L23.9992 28.8798L25.899 29.5049L26.9493 26.3126L25.0495 25.6875ZM28.8792 23.9998L25.6869 25.0501L26.312 26.9499L29.5043 25.8996L28.8792 23.9998ZM31.7688 27.3013L30.0492 24.4352L28.3342 25.4642L30.0538 28.3302L31.7688 27.3013ZM31.4681 29.7445C32.117 29.0955 32.241 28.0882 31.7688 27.3013L30.0538 28.3302L31.4681 29.7445ZM29.7438 31.4687L31.4681 29.7445L30.0538 28.3302L28.3296 30.0545L29.7438 31.4687Z" fill="#F07EFF" mask="url(#path-4-inside-2_1555_8784)"/>
<mask id="path-6-inside-3_1555_8784" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.7623 10.9626C31.0868 11.2871 31.1488 11.7907 30.9127 12.1842L29.1931 15.0502L26.0007 14L24.9504 10.8076L27.8164 9.08797C28.2099 8.85189 28.7136 8.91389 29.038 9.23836L30.7623 10.9626ZM10.9633 30.7616C11.2878 31.0861 11.7914 31.1481 12.1849 30.912L15.0509 29.1924L14.0007 26L10.8083 24.9497L9.08867 27.8157C8.85258 28.2092 8.91458 28.7129 9.23905 29.0373L10.9633 30.7616Z"/>
</mask>
<path d="M30.9127 12.1842L31.7702 12.6987L31.7702 12.6987L30.9127 12.1842ZM29.1931 15.0502L30.0506 15.5647L29.6395 16.2498L28.8805 16.0001L29.1931 15.0502ZM26.0007 14L25.6882 14.9499L25.2086 14.7921L25.0508 14.3125L26.0007 14ZM24.9504 10.8076L24.0005 11.1201L23.7508 10.3612L24.4359 9.9501L24.9504 10.8076ZM27.8164 9.08797L28.3309 9.94547L28.3309 9.94547L27.8164 9.08797ZM12.1849 30.912L12.6994 31.7695L12.6994 31.7695L12.1849 30.912ZM15.0509 29.1924L16.0008 28.8799L16.2505 29.6388L15.5654 30.0499L15.0509 29.1924ZM14.0007 26L14.3132 25.0501L14.7928 25.2079L14.9506 25.6875L14.0007 26ZM10.8083 24.9497L9.95079 24.4352L10.3619 23.7501L11.1208 23.9998L10.8083 24.9497ZM9.08867 27.8157L9.94616 28.3302L9.08867 27.8157ZM30.0552 11.6697L30.0552 11.6697L31.4694 10.2555C32.1183 10.9044 32.2423 11.9117 31.7702 12.6987L30.0552 11.6697ZM28.3356 14.5357L30.0552 11.6697L31.7702 12.6987L30.0506 15.5647L28.3356 14.5357ZM26.3132 13.0501L29.5056 14.1003L28.8805 16.0001L25.6882 14.9499L26.3132 13.0501ZM25.9003 10.4951L26.9506 13.6875L25.0508 14.3125L24.0005 11.1201L25.9003 10.4951ZM28.3309 9.94547L25.4649 11.6651L24.4359 9.9501L27.3019 8.23048L28.3309 9.94547ZM28.3309 9.94547L28.3309 9.94547L27.3019 8.23048C28.0889 7.75831 29.0962 7.88232 29.7451 8.53125L28.3309 9.94547ZM30.0552 11.6697L28.3309 9.94547L29.7451 8.53125L31.4694 10.2555L30.0552 11.6697ZM12.6994 31.7695C11.9124 32.2416 10.9051 32.1176 10.2562 31.4687L11.6704 30.0545L12.6994 31.7695ZM15.5654 30.0499L12.6994 31.7695L11.6704 30.0545L14.5364 28.3349L15.5654 30.0499ZM14.9506 25.6875L16.0008 28.8799L14.101 29.5049L13.0508 26.3125L14.9506 25.6875ZM11.1208 23.9998L14.3132 25.0501L13.6882 26.9499L10.4958 25.8996L11.1208 23.9998ZM8.23117 27.3013L9.95079 24.4352L11.6658 25.4642L9.94616 28.3302L8.23117 27.3013ZM8.53195 29.7445C7.88301 29.0955 7.759 28.0882 8.23117 27.3013L9.94616 28.3302L8.53195 29.7445ZM10.2562 31.4687L8.53195 29.7445L9.94616 28.3302L11.6704 30.0545L10.2562 31.4687Z" fill="#F07EFF" mask="url(#path-6-inside-3_1555_8784)"/>
<mask id="path-8-inside-4_1555_8784" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 21.2192C6 21.6781 6.3123 22.0781 6.75746 22.1894L10 23L11 20L10 17L6.75746 17.8106C6.3123 17.9219 6 18.3219 6 18.7808V21.2192ZM34 21.2192C34 21.6781 33.6877 22.0781 33.2425 22.1894L30 23L29 20L30 17L33.2425 17.8106C33.6877 17.9219 34 18.3219 34 18.7808V21.2192Z"/>
</mask>
<path d="M6.75746 22.1894L6.51493 23.1595V23.1595L6.75746 22.1894ZM10 23L9.75746 23.9701L10.6558 24.1947L10.9487 23.3162L10 23ZM11 20L11.9487 20.3162L12.0541 20L11.9487 19.6838L11 20ZM10 17L10.9487 16.6838L10.6558 15.8053L9.75746 16.0299L10 17ZM6.75746 17.8106L7 18.7808L7 18.7808L6.75746 17.8106ZM33.2425 22.1894L33.4851 23.1595V23.1595L33.2425 22.1894ZM30 23L29.0513 23.3162L29.3442 24.1947L30.2425 23.9701L30 23ZM29 20L28.0513 19.6838L27.9459 20L28.0513 20.3162L29 20ZM30 17L30.2425 16.0299L29.3442 15.8053L29.0513 16.6838L30 17ZM7 21.2192L7 21.2192H5C5 22.137 5.62459 22.9369 6.51493 23.1595L7 21.2192ZM10.2425 22.0299L7 21.2192L6.51493 23.1595L9.75746 23.9701L10.2425 22.0299ZM10.0513 19.6838L9.05132 22.6838L10.9487 23.3162L11.9487 20.3162L10.0513 19.6838ZM9.05132 17.3162L10.0513 20.3162L11.9487 19.6838L10.9487 16.6838L9.05132 17.3162ZM7 18.7808L10.2425 17.9701L9.75746 16.0299L6.51493 16.8405L7 18.7808ZM7 18.7808L7 18.7808L6.51493 16.8405C5.62459 17.0631 5 17.863 5 18.7808H7ZM7 21.2192V18.7808H5V21.2192H7ZM33.4851 23.1595C34.3754 22.9369 35 22.137 35 21.2192H33L33.4851 23.1595ZM30.2425 23.9701L33.4851 23.1595L33 21.2192L29.7575 22.0299L30.2425 23.9701ZM28.0513 20.3162L29.0513 23.3162L30.9487 22.6838L29.9487 19.6838L28.0513 20.3162ZM29.0513 16.6838L28.0513 19.6838L29.9487 20.3162L30.9487 17.3162L29.0513 16.6838ZM33.4851 16.8405L30.2425 16.0299L29.7575 17.9701L33 18.7808L33.4851 16.8405ZM35 18.7808C35 17.863 34.3754 17.0631 33.4851 16.8405L33 18.7808H35ZM35 21.2192V18.7808H33V21.2192H35Z" fill="#F07EFF" mask="url(#path-8-inside-4_1555_8784)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 31C26.0751 31 31 26.0751 31 20C31 13.9249 26.0751 9 20 9C13.9249 9 9 13.9249 9 20C9 26.0751 13.9249 31 20 31ZM20 27C23.866 27 27 23.866 27 20C27 16.134 23.866 13 20 13C16.134 13 13 16.134 13 20C13 23.866 16.134 27 20 27Z" fill="url(#paint0_linear_1555_8784)"/>
<rect x="15" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="14" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="14" y="19" width="1" height="1" fill="#1B1B22"/>
<rect x="14" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="15" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="16" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="14" y="21" width="1" height="1" fill="#1B1B22"/>
<rect x="16" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="17" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="19" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="20" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="21" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="22" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="22" y="19" width="1" height="1" fill="#1B1B22"/>
<rect x="24" y="19" width="1" height="1" fill="#1B1B22"/>
<rect x="24" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="24" y="21" width="1" height="1" fill="#1B1B22"/>
<rect x="24" y="18" width="1" height="1" fill="#1B1B22"/>
<rect x="22" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="21" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="20" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="19" y="21" width="1" height="1" fill="#1B1B22"/>
<rect x="19" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="19" y="19" width="1" height="1" fill="#1B1B22"/>
<rect x="17" y="19" width="1" height="1" fill="#1B1B22"/>
<rect x="17" y="20" width="1" height="1" fill="#1B1B22"/>
<rect x="17" y="21" width="1" height="1" fill="#1B1B22"/>
<defs>
<linearGradient id="paint0_linear_1555_8784" x1="7.19286" y1="21.6042" x2="32.5865" y2="9.0886" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

16
packages/console/src/assets/images/native-app.svg Normal file
View file

@ -0,0 +1,16 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#F3EFFA"/>
<rect x="12" y="5" width="16" height="30" rx="4" fill="url(#paint0_linear_1436_37873)"/>
<circle cx="20" cy="31" r="1.5" stroke="#F5EEFF"/>
<path d="M16 5H24V7C24 7.55228 23.5523 8 23 8H17C16.4477 8 16 7.55228 16 7V5Z" fill="#4300DA"/>
<path d="M28.3509 4C28.6075 3.55555 29.249 3.55556 29.5056 4L35.2791 14C35.5357 14.4444 35.2149 15 34.7017 15H23.1547C22.6415 15 22.3208 14.4444 22.5774 14L28.3509 4Z" fill="#F4E560"/>
<g style="mix-blend-mode:multiply">
<circle cx="10" cy="26" r="6" fill="#F07EFF"/>
</g>
<defs>
<linearGradient id="paint0_linear_1436_37873" x1="10.6857" y1="22.1875" x2="29.3932" y2="18.5036" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 991 B

26
packages/console/src/assets/images/single-page-app.svg Normal file
View file

@ -0,0 +1,26 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#F3EFFA"/>
<path d="M28.5 12C28.5 14.1483 28.0635 16.0686 27.3812 17.4332C26.6839 18.8278 25.8132 19.5 25 19.5C24.1868 19.5 23.3161 18.8278 22.6188 17.4332C21.9365 16.0686 21.5 14.1483 21.5 12C21.5 9.85165 21.9365 7.93141 22.6188 6.56675C23.3161 5.17219 24.1868 4.5 25 4.5C25.8132 4.5 26.6839 5.17219 27.3812 6.56675C28.0635 7.93141 28.5 9.85165 28.5 12Z" stroke="#7958FF" stroke-miterlimit="16" stroke-linecap="round"/>
<path d="M26.7505 8.96892C28.611 10.0431 30.0557 11.3812 30.8964 12.6544C31.7555 13.9556 31.9022 15.0458 31.4957 15.75C31.0891 16.4542 30.0716 16.8722 28.5152 16.7788C26.9922 16.6874 25.111 16.1053 23.2505 15.0311C21.3899 13.9569 19.9452 12.6188 19.1045 11.3456C18.2454 10.0444 18.0987 8.95422 18.5053 8.25001C18.9119 7.5458 19.9294 7.12778 21.4857 7.22119C23.0087 7.31261 24.8899 7.89475 26.7505 8.96892Z" stroke="#7958FF" stroke-miterlimit="16" stroke-linecap="round"/>
<path d="M23.2515 8.96892C21.391 10.0431 19.9462 11.3812 19.1055 12.6544C18.2465 13.9556 18.0997 15.0458 18.5063 15.75C18.9129 16.4542 19.9304 16.8722 21.4868 16.7788C23.0098 16.6874 24.891 16.1053 26.7515 15.0311C28.612 13.9569 30.0568 12.6188 30.8974 11.3456C31.7565 10.0444 31.9033 8.95422 31.4967 8.25001C31.0901 7.5458 30.0726 7.12778 28.5162 7.22119C26.9932 7.31261 25.112 7.89475 23.2515 8.96892Z" stroke="#7958FF" stroke-miterlimit="16" stroke-linecap="round"/>
<circle cx="25" cy="12" r="1" fill="#F07EFF"/>
<path d="M4.77773 17.7408L9.68377 16.1054C9.88904 16.037 10.111 16.037 10.3162 16.1054L15.2223 17.7408C15.6745 17.8915 15.9574 18.3405 15.8983 18.8135L15.0732 25.4146C15.028 25.7758 14.7902 26.0839 14.4523 26.2191L10.3714 27.8514C10.133 27.9468 9.86702 27.9468 9.62861 27.8514L5.54772 26.2191C5.20978 26.0839 4.97198 25.7758 4.92683 25.4146L4.10168 18.8135C4.04256 18.3405 4.32551 17.8915 4.77773 17.7408Z" fill="url(#paint0_linear_1436_37927)"/>
<path d="M11.5817 25H13L10.782 19H9.21355L7 25H8.36966L8.85567 23.5447H11.0957L11.5817 25ZM9.96024 20.1476H9.99116L10.8085 22.605H9.14286L9.96024 20.1476Z" fill="#F5EEFF"/>
<path d="M18.4952 22.7704L26.5794 35.3457C26.7762 35.6519 27.2238 35.6519 27.4206 35.3457L35.5048 22.7704C35.7187 22.4376 35.4797 22 35.0842 22H29.2676C29.1004 22 28.9443 22.0836 28.8516 22.2226L27 25L25.1484 22.2226C25.0557 22.0836 24.8996 22 24.7324 22H18.9158C18.5202 22 18.2813 22.4376 18.4952 22.7704Z" fill="url(#paint1_linear_1436_37927)"/>
<mask id="mask0_1436_37927" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="18" y="22" width="18" height="14">
<path opacity="0.7" d="M18.4952 22.7704L26.5794 35.3457C26.7762 35.6519 27.2238 35.6519 27.4206 35.3457L35.5048 22.7704C35.7187 22.4376 35.4797 22 35.0842 22H29.2676C29.1004 22 28.9443 22.0836 28.8516 22.2226L27 25L25.1484 22.2226C25.0557 22.0836 24.8996 22 24.7324 22H18.9158C18.5202 22 18.2813 22.4376 18.4952 22.7704Z" fill="#7958FF"/>
</mask>
<g mask="url(#mask0_1436_37927)">
<path d="M22 22L26.576 29.3216C26.7718 29.6349 27.2282 29.6349 27.424 29.3216L32 22H22Z" fill="#4300DA"/>
</g>
<defs>
<linearGradient id="paint0_linear_1436_37927" x1="1" y1="24" x2="16.9429" y2="21.125" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFF06A"/>
<stop offset="1" stop-color="#EC78FF"/>
</linearGradient>
<linearGradient id="paint1_linear_1436_37927" x1="16.5214" y1="30.0208" x2="34.3627" y2="21.5511" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

37
packages/console/src/assets/images/traditional-web-app.svg Normal file
View file

@ -0,0 +1,37 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#F3EFFA"/>
<rect x="17" y="5" width="18" height="14" rx="2" fill="url(#paint0_linear_1436_37890)"/>
<rect x="17" y="9" width="18" height="1" fill="#D361E7"/>
<rect x="27" y="7" width="6" height="1" rx="0.5" fill="#B545CA"/>
<rect x="19" y="7" width="1" height="1" rx="0.5" fill="#F4E560"/>
<rect x="21" y="7" width="1" height="1" rx="0.5" fill="#7958FF"/>
<rect x="23" y="7" width="1" height="1" rx="0.5" fill="#F4E560"/>
<rect x="27" y="12" width="6" height="1" rx="0.5" fill="#B545CA"/>
<rect x="19" y="12" width="1" height="1" rx="0.5" fill="#F4E560"/>
<rect x="21" y="12" width="1" height="1" rx="0.5" fill="#F4E560"/>
<rect x="27" y="17" width="6" height="1" rx="0.5" fill="#B545CA"/>
<rect x="19" y="17" width="1" height="1" rx="0.5" fill="#F4E560"/>
<rect x="21" y="17" width="1" height="1" rx="0.5" fill="#F4E560"/>
<rect x="23" y="17" width="1" height="1" rx="0.5" fill="#7958FF"/>
<rect x="17" y="14" width="18" height="1" fill="#D361E7"/>
<rect x="5" y="21" width="18" height="14" rx="2" fill="url(#paint1_linear_1436_37890)"/>
<path d="M5 24H23V23C23 21.8954 22.1046 21 21 21H7C5.89543 21 5 21.8954 5 23V24Z" fill="#5D34F2"/>
<rect x="7" y="26" width="6" height="1" rx="0.5" fill="#CABEFF"/>
<rect x="7" y="29" width="12" height="1" rx="0.5" fill="#CABEFF"/>
<g style="mix-blend-mode:multiply">
<path d="M20 28C24.4183 28 28 24.4183 28 20" stroke="#C4C7C7" stroke-width="2"/>
</g>
<g style="mix-blend-mode:multiply">
<path d="M12 20C12 15.5817 15.5817 12 20 12" stroke="#C4C7C7" stroke-width="2"/>
</g>
<defs>
<linearGradient id="paint0_linear_1436_37890" x1="12.5" y1="14.3333" x2="36.4143" y2="10.9792" gradientUnits="userSpaceOnUse">
<stop stop-color="#E4A3FB"/>
<stop offset="1" stop-color="#EC78FF"/>
</linearGradient>
<linearGradient id="paint1_linear_1436_37890" x1="3.52143" y1="29.0208" x2="21.3627" y2="20.5511" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

7
packages/console/src/components/ItemPreview/index.tsx
View file

@ -15,7 +15,12 @@ type Props = {
const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) => { const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) => {
return ( return (
<div className={classNames(styles.item, styles[size])}> <div className={classNames(styles.item, styles[size])}>
{icon && <div className={styles.icon}>{icon}</div>} {icon &&
(typeof icon === 'string' ? (
<img className={styles.icon} src={icon} />
) : (
<div className={styles.icon}>{icon}</div>
))}
<div className={styles.content}> <div className={styles.content}>
{to && ( {to && (
<Link <Link

11
packages/console/src/consts/icons.ts Normal file
View file

@ -0,0 +1,11 @@
import { ApplicationType } from '@logto/schemas';
import nativeAppIcon from '@/assets/images/native-app.svg';
import singlePageAppIcon from '@/assets/images/single-page-app.svg';
import traditionalWebAppIcon from '@/assets/images/traditional-web-app.svg';
export const ApplicationIcon = {
[ApplicationType.Native]: nativeAppIcon,
[ApplicationType.SPA]: singlePageAppIcon,
[ApplicationType.Traditional]: traditionalWebAppIcon,
};

1
packages/console/src/consts/index.ts
View file

@ -1,4 +1,5 @@
export * from './applications'; export * from './applications';
export * from './api'; export * from './api';
export * from './icons';
export const themeStorageKey = 'adminConsoleTheme'; export const themeStorageKey = 'adminConsoleTheme';

5
packages/console/src/pages/ApiResourceDetails/index.module.scss
View file

@ -12,8 +12,11 @@
.info { .info {
display: flex; display: flex;
.imagePlaceholder { .icon {
margin-left: _.unit(2); margin-left: _.unit(2);
width: 60px;
height: 60px;
object-fit: cover;
} }
.meta { .meta {

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

@ -8,6 +8,7 @@ import Modal from 'react-modal';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import useSWR from 'swr'; import useSWR from 'swr';
import apiResourceIcon from '@/assets/images/api-resource.svg';
import ActionMenu, { ActionMenuItem } from '@/components/ActionMenu'; import ActionMenu, { ActionMenuItem } from '@/components/ActionMenu';
import Button from '@/components/Button'; import Button from '@/components/Button';
import Card from '@/components/Card'; import Card from '@/components/Card';
@ -15,7 +16,6 @@ import CopyToClipboard from '@/components/CopyToClipboard';
import DetailsSkeleton from '@/components/DetailsSkeleton'; import DetailsSkeleton from '@/components/DetailsSkeleton';
import Drawer from '@/components/Drawer'; import Drawer from '@/components/Drawer';
import FormField from '@/components/FormField'; import FormField from '@/components/FormField';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import LinkButton from '@/components/LinkButton'; import LinkButton from '@/components/LinkButton';
import TabNav, { TabNavItem } from '@/components/TabNav'; import TabNav, { TabNavItem } from '@/components/TabNav';
import TextInput from '@/components/TextInput'; import TextInput from '@/components/TextInput';
@ -89,9 +89,7 @@ const ApiResourceDetails = () => {
<> <>
<Card className={styles.header}> <Card className={styles.header}>
<div className={styles.info}> <div className={styles.info}>
<div className={styles.imagePlaceholder}> <img className={styles.icon} src={apiResourceIcon} />
<ImagePlaceholder size={60} borderRadius={16} />
</div>
<div className={styles.meta}> <div className={styles.meta}>
<div className={styles.name}>{data.name}</div> <div className={styles.name}>{data.name}</div>
<CopyToClipboard value={data.indicator} className={styles.copy} /> <CopyToClipboard value={data.indicator} className={styles.copy} />

4
packages/console/src/pages/ApiResources/index.tsx
View file

@ -7,11 +7,11 @@ import Modal from 'react-modal';
import { useNavigate, useSearchParams } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import useSWR from 'swr'; import useSWR from 'swr';
import apiResourceIcon from '@/assets/images/api-resource.svg';
import Button from '@/components/Button'; import Button from '@/components/Button';
import Card from '@/components/Card'; import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle'; import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard'; import CopyToClipboard from '@/components/CopyToClipboard';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview'; import ItemPreview from '@/components/ItemPreview';
import Pagination from '@/components/Pagination'; import Pagination from '@/components/Pagination';
import TableEmpty from '@/components/Table/TableEmpty'; import TableEmpty from '@/components/Table/TableEmpty';
@ -113,7 +113,7 @@ const ApiResources = () => {
}} }}
> >
<td> <td>
<ItemPreview title={name} icon={<ImagePlaceholder />} to={buildDetailsLink(id)} /> <ItemPreview title={name} icon={apiResourceIcon} to={buildDetailsLink(id)} />
</td> </td>
<td> <td>
<CopyToClipboard value={indicator} variant="text" /> <CopyToClipboard value={indicator} variant="text" />

5
packages/console/src/pages/ApplicationDetails/index.module.scss
View file

@ -30,8 +30,11 @@
justify-content: space-between; justify-content: space-between;
padding: _.unit(6); padding: _.unit(6);
.imagePlaceholder { .icon {
margin-left: _.unit(2); margin-left: _.unit(2);
width: 60px;
height: 60px;
object-fit: cover;
} }
> *:not(:first-child) { > *:not(:first-child) {

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

@ -14,9 +14,9 @@ import Card from '@/components/Card';
import CopyToClipboard from '@/components/CopyToClipboard'; import CopyToClipboard from '@/components/CopyToClipboard';
import DetailsSkeleton from '@/components/DetailsSkeleton'; import DetailsSkeleton from '@/components/DetailsSkeleton';
import Drawer from '@/components/Drawer'; import Drawer from '@/components/Drawer';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import LinkButton from '@/components/LinkButton'; import LinkButton from '@/components/LinkButton';
import TabNav, { TabNavItem } from '@/components/TabNav'; import TabNav, { TabNavItem } from '@/components/TabNav';
import { ApplicationIcon } from '@/consts';
import useApi, { RequestError } from '@/hooks/use-api'; import useApi, { RequestError } from '@/hooks/use-api';
import Back from '@/icons/Back'; import Back from '@/icons/Back';
import Delete from '@/icons/Delete'; import Delete from '@/icons/Delete';
@ -107,9 +107,7 @@ const ApplicationDetails = () => {
{data && oidcConfig && ( {data && oidcConfig && (
<> <>
<Card className={styles.header}> <Card className={styles.header}>
<div className={styles.imagePlaceholder}> <img className={styles.icon} src={ApplicationIcon[data.type]} />
<ImagePlaceholder size={60} borderRadius={16} />
</div>
<div className={styles.metadata}> <div className={styles.metadata}>
<div className={styles.name}>{data.name}</div> <div className={styles.name}>{data.name}</div>
<div className={styles.details}> <div className={styles.details}>

4
packages/console/src/pages/Applications/index.tsx
View file

@ -11,12 +11,12 @@ import Button from '@/components/Button';
import Card from '@/components/Card'; import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle'; import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard'; import CopyToClipboard from '@/components/CopyToClipboard';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview'; import ItemPreview from '@/components/ItemPreview';
import Pagination from '@/components/Pagination'; import Pagination from '@/components/Pagination';
import TableEmpty from '@/components/Table/TableEmpty'; import TableEmpty from '@/components/Table/TableEmpty';
import TableError from '@/components/Table/TableError'; import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading'; import TableLoading from '@/components/Table/TableLoading';
import { ApplicationIcon } from '@/consts';
import { RequestError } from '@/hooks/use-api'; import { RequestError } from '@/hooks/use-api';
import Plus from '@/icons/Plus'; import Plus from '@/icons/Plus';
import * as modalStyles from '@/scss/modal.module.scss'; import * as modalStyles from '@/scss/modal.module.scss';
@ -113,7 +113,7 @@ const Applications = () => {
<ItemPreview <ItemPreview
title={name} title={name}
subtitle={t(`${applicationTypeI18nKey[type]}.title`)} subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
icon={<ImagePlaceholder />} icon={ApplicationIcon[type]}
to={`/applications/${id}`} to={`/applications/${id}`}
/> />
</td> </td>