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

fix(console): checkbox style (#1327)

Browse source
This commit is contained in:
Xiao Yijun 2022-07-01 13:08:17 +08:00 • committed by GitHub
parent 3aac771f35
commit 2f3c9ae4fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 193 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,73 +1,31 @@
import { AppearanceMode } from '@logto/schemas';
import React from 'react';
import { useTheme } from '@/hooks/use-theme';
import CheckBoxSelected from '@/icons/CheckBoxSelected';
import CheckBoxSelectedDisabled from '@/icons/CheckBoxSelectedDisabled';
import CheckBoxSelectedDisabledDark from '@/icons/CheckBoxSelectedDisabledDark';
import CheckBoxUnselected from '@/icons/CheckBoxUnselected';
import CheckBoxUnselectedDark from '@/icons/CheckBoxUnselectedDark';
import CheckBoxUnselectedDisabled from '@/icons/CheckBoxUnselectedDisabled';
import CheckBoxUnselectedDisabledDark from '@/icons/CheckBoxUnselectedDisabledDark';
type Props = {
className?: string;
};
const Icon = ({ className }: Props) => (
<span className={className}>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<rect x="1" y="1" width="18" height="18" rx="4" fill="currentColor" />
<path
fillRule="evenodd"
clipRule="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>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="2" />
</svg>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<rect x="1" y="1" width="18" height="18" rx="4" fill="currentColor" />
<path
fillRule="evenodd"
clipRule="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>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<rect
x="2"
y="2"
width="16"
height="16"
rx="3"
fill="#EFF1F1"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
</span>
);
const Icon = ({ className }: Props) => {
const theme = useTheme();
const isLightMode = theme === AppearanceMode.LightMode;
return (
<span className={className}>
<CheckBoxSelected />
{isLightMode ? <CheckBoxUnselected /> : <CheckBoxUnselectedDark />}
{isLightMode ? <CheckBoxSelectedDisabled /> : <CheckBoxSelectedDisabledDark />}
{isLightMode ? <CheckBoxUnselectedDisabled /> : <CheckBoxUnselectedDisabledDark />}
</span>
);
};
export default Icon;

2
packages/console/src/components/Checkbox/index.module.scss
View file

@ -2,7 +2,7 @@
.checkbox {
position: relative;
display: inline-flex;
display: flex;
align-items: center;
.icon {

22
packages/console/src/icons/CheckBoxSelected.tsx Normal file
View file

@ -0,0 +1,22 @@
import React, { SVGProps } from 'react';
const CheckBoxSelected = (props: SVGProps<SVGSVGElement>) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect x="1.66602" y="1.66663" width="16.6667" height="16.6667" rx="4" fill="#5D34F2" />
<path
fillRule="evenodd"
clipRule="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>
);
export default CheckBoxSelected;

22
packages/console/src/icons/CheckBoxSelectedDisabled.tsx Normal file
View file

@ -0,0 +1,22 @@
import React, { SVGProps } from 'react';
const CheckBoxSelectedDisabled = (props: SVGProps<SVGSVGElement>) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect x="1.66602" y="1.66663" width="16.6667" height="16.6667" rx="4" fill="#C4C7C7" />
<path
fillRule="evenodd"
clipRule="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>
);
export default CheckBoxSelectedDisabled;

22
packages/console/src/icons/CheckBoxSelectedDisabledDark.tsx Normal file
View file

@ -0,0 +1,22 @@
import React, { SVGProps } from 'react';
const CheckBoxSelectedDisabledDark = (props: SVGProps<SVGSVGElement>) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect x="1.66602" y="1.66663" width="16.6667" height="16.6667" rx="4" fill="#5C5F60" />
<path
fillRule="evenodd"
clipRule="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>
);
export default CheckBoxSelectedDisabledDark;

21
packages/console/src/icons/CheckBoxUnselected.tsx Normal file
View file

@ -0,0 +1,21 @@
import React, { SVGProps } from 'react';
const CheckBoxUnselected = (props: SVGProps<SVGSVGElement>) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<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"
/>
</svg>
);
export default CheckBoxUnselected;

21
packages/console/src/icons/CheckBoxUnselectedDark.tsx Normal file
View file

@ -0,0 +1,21 @@
import React, { SVGProps } from 'react';
const CheckBoxUnselectedDark = (props: SVGProps<SVGSVGElement>) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<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"
/>
</svg>
);
export default CheckBoxUnselectedDark;

25
packages/console/src/icons/CheckBoxUnselectedDisabled.tsx Normal file
View file

@ -0,0 +1,25 @@
import React, { SVGProps } from 'react';
const CheckBoxUnselectedDisabled = (props: SVGProps<SVGSVGElement>) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<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"
/>
</svg>
);
export default CheckBoxUnselectedDisabled;

35
packages/console/src/icons/CheckBoxUnselectedDisabledDark.tsx Normal file
View file

@ -0,0 +1,35 @@
import React, { SVGProps } from 'react';
const CheckBoxUnselectedDisabledDark = (props: SVGProps<SVGSVGElement>) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<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"
/>
</svg>
);
export default CheckBoxUnselectedDisabledDark;

2
packages/console/src/pages/SignInExperience/components/index.module.scss
View file

@ -15,7 +15,7 @@
}
.method {
margin-top: _.unit(2);
margin-top: _.unit(3);
}
.primarySocial {