feat: onboarding page (#5277)

packages/frontend/component/src/ui/checkbox/checkbox.tsx

@@ -17,6 +17,10 @@ export type CheckboxProps = Omit<
   disabled?: boolean;
   indeterminate?: boolean;
   animation?: boolean;
+  name?: string;
+  label?: string;
+  inputClassName?: string;
+  labelClassName?: string;
 };
 
 export const Checkbox = ({
@@ -25,6 +29,11 @@ export const Checkbox = ({
   indeterminate: indeterminate,
   disabled,
   animation,
+  name,
+  label,
+  inputClassName,
+  labelClassName,
+  className,
   ...otherProps
 }: CheckboxProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -56,7 +65,7 @@ export const Checkbox = ({
 
   return (
     <div
-      className={clsx(styles.root, disabled && styles.disabled)}
+      className={clsx(styles.root, className, disabled && styles.disabled)}
       role="checkbox"
       {...otherProps}
     >
@@ -64,12 +73,19 @@ export const Checkbox = ({
       <input
         ref={inputRef}
         data-testid="affine-checkbox"
-        className={clsx(styles.input)}
+        className={clsx(styles.input, inputClassName)}
         type="checkbox"
         value={checked ? 'on' : 'off'}
+        id={name}
+        name={name}
         checked={checked}
         onChange={handleChange}
       />
+      {label ? (
+        <label htmlFor={name} className={clsx(labelClassName)}>
+          {label}
+        </label>
+      ) : null}
     </div>
   );
 };

packages/frontend/component/src/ui/checkbox/icons.tsx

@@ -10,7 +10,7 @@ const unchecked = (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M6 3.25C4.48122 3.25 3.25 4.48122 3.25 6V18C3.25 19.5188 4.48122 20.75 6 20.75H18C19.5188 20.75 20.75 19.5188 20.75 18V6C20.75 4.48122 19.5188 3.25 18 3.25H6ZM4.75 6C4.75 5.30964 5.30964 4.75 6 4.75H18C18.6904 4.75 19.25 5.30964 19.25 6V18C19.25 18.6904 18.6904 19.25 18 19.25H6C5.30964 19.25 4.75 18.6904 4.75 18V6Z"
-      fill="var(--affine-icon-color)"
+      fill="currentColor"
     />
   </svg>
 );
@@ -44,7 +44,7 @@ const indeterminate = (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M6 3.25C4.48122 3.25 3.25 4.48122 3.25 6V18C3.25 19.5188 4.48122 20.75 6 20.75H18C19.5188 20.75 20.75 19.5188 20.75 18V6C20.75 4.48122 19.5188 3.25 18 3.25H6ZM8.54 11.25C8.12579 11.25 7.79 11.5858 7.79 12C7.79 12.4142 8.12579 12.75 8.54 12.75H15.54C15.9542 12.75 16.29 12.4142 16.29 12C16.29 11.5858 15.9542 11.25 15.54 11.25H8.54Z"
-      fill="var(--affine-icon-color)"
+      fill="currentColor"
     />
   </svg>
 );

packages/frontend/component/src/ui/checkbox/index.css.ts

@@ -1,15 +1,17 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const root = style({
   display: 'inline-flex',
   alignItems: 'center',
   position: 'relative',
-  ':hover': {
-    opacity: 0.8,
-  },
-  ':active': {
-    opacity: 0.9,
-  },
+});
+
+globalStyle(`${root}:hover svg`, {
+  opacity: 0.8,
+});
+
+globalStyle(`${root}:active svg`, {
+  opacity: 0.9,
 });
 
 export const disabled = style({
@@ -23,6 +25,9 @@ export const input = style({
   width: '1em',
   height: '1em',
   inset: 0,
+  top: '50%',
+  transform: 'translateY(-50%)',
+
   cursor: 'pointer',
   fontSize: 'inherit',
 });

packages/frontend/component/src/ui/scrollbar/index.css.ts

@@ -35,7 +35,6 @@ globalStyle(`${scrollableViewport} > div`, {
 
 export const scrollableContainer = style({
   height: '100%',
-  marginBottom: '4px',
 });
 
 export const scrollbar = style({