Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

Merge pull request #2190 from logto-io/charles-log-4411-fix-check-box-style

Browse source 
fix(console): checkbox styles
This commit is contained in:
Charles Zhao 2022-10-18 21:38:56 +08:00 • committed by GitHub
commit 76ec74ace8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 14 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/assets/images/check-box-selected-dark.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.66602" y="1.66663" width="16.6667" height="16.6667" rx="4" fill="#7958FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 571 B

4
packages/console/src/assets/images/check-box-unselected-dark.svg
View file

@ -1,5 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd"
d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z"
fill="#A9ACAC" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z" fill="#A9ACAC"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 662 B

After

Width:  |  Height:  |  Size: 653 B

16
packages/console/src/assets/images/check-box-unselected-disabled-dark.svg
View file

@ -1,14 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z"
fill="#191C1D" />
<path
d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z"
fill="#C4C7C7" fillOpacity="0.02" />
<path
d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z"
fill="#CABEFF" fillOpacity="0.14" />
<path fillRule="evenodd" clipRule="evenodd"
d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z"
fill="#5C5F60" />
<path d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z" fill="#191C1D"/>
<path d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z" fill="#C4C7C7" fill-opacity="0.02"/>
<path d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z" fill="#CABEFF" fill-opacity="0.14"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z" fill="#5C5F60"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

8
packages/console/src/assets/images/check-box-unselected-disabled.svg
View file

@ -1,8 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z"
fill="#EFF1F1" />
<path fillRule="evenodd" clipRule="evenodd"
d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z"
fill="#C4C7C7" />
<path d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z" fill="#EFF1F1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z" fill="#C4C7C7"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 942 B

After

Width:  |  Height:  |  Size: 922 B

4
packages/console/src/assets/images/check-box-unselected.svg
View file

@ -1,5 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd"
d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z"
fill="#747778" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z" fill="#747778"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 662 B

After

Width:  |  Height:  |  Size: 653 B

3
packages/console/src/components/Checkbox/Icon.tsx
View file

@ -1,5 +1,6 @@
import { AppearanceMode } from '@logto/schemas';
import CheckBoxSelectedDark from '@/assets/images/check-box-selected-dark.svg';
import CheckBoxSelectedDisabledDark from '@/assets/images/check-box-selected-disabled-dark.svg';
import CheckBoxSelectedDisabled from '@/assets/images/check-box-selected-disabled.svg';
import CheckBoxSelected from '@/assets/images/check-box-selected.svg';
@ -19,7 +20,7 @@ const Icon = ({ className }: Props) => {
return (
<span className={className}>
<CheckBoxSelected />
{isLightMode ? <CheckBoxSelected /> : <CheckBoxSelectedDark />}
{isLightMode ? <CheckBoxUnselected /> : <CheckBoxUnselectedDark />}
{isLightMode ? <CheckBoxSelectedDisabled /> : <CheckBoxSelectedDisabledDark />}
{isLightMode ? <CheckBoxUnselectedDisabled /> : <CheckBoxUnselectedDisabledDark />}