fix: ui issues (#3738)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/ui/button/radio.tsx

@@ -8,27 +8,22 @@ import { type CSSProperties, forwardRef } from 'react';
 
 import * as styles from './styles.css';
 
-export const RadioButton = forwardRef<
-  HTMLButtonElement,
-  RadioGroupItemProps & { bold?: boolean }
->(({ children, bold, className, ...props }, ref) => {
-  return (
-    <RadioGroup.Item
-      ref={ref}
-      {...props}
-      className={clsx(styles.radioButton, className)}
-    >
-      <span className={clsx(styles.radioUncheckedButton, { bold })}>
-        {children}
-      </span>
-      <RadioGroup.Indicator
-        className={clsx(styles.radioButtonContent, { bold })}
+export const RadioButton = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <RadioGroup.Item
+        ref={ref}
+        {...props}
+        className={clsx(styles.radioButton, className)}
       >
-        {children}
-      </RadioGroup.Indicator>
-    </RadioGroup.Item>
-  );
-});
+        <span className={styles.radioUncheckedButton}>{children}</span>
+        <RadioGroup.Indicator className={styles.radioButtonContent}>
+          {children}
+        </RadioGroup.Indicator>
+      </RadioGroup.Item>
+    );
+  }
+);
 RadioButton.displayName = 'RadioButton';
 
 export const RadioButtonGroup = forwardRef<

packages/component/src/ui/button/styles.css.ts

@@ -55,6 +55,11 @@ export const dropdownIcon = style({
 
 export const radioButton = style({
   flexGrow: 1,
+  selectors: {
+    '&:not(:last-of-type)': {
+      marginRight: '4px',
+    },
+  },
 });
 export const radioButtonContent = style({
   fontSize: 'var(--affine-font-xs)',
@@ -66,6 +71,8 @@ export const radioButtonContent = style({
   filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))',
   whiteSpace: 'nowrap',
   userSelect: 'none',
+  fontWeight: 600,
+
   selectors: {
     '&:hover': {
       background: 'var(--affine-hover-color)',
@@ -73,9 +80,6 @@ export const radioButtonContent = style({
     '&[data-state="checked"]': {
       background: 'var(--affine-white)',
     },
-    '&.bold': {
-      fontWeight: 600,
-    },
   },
 });
 

packages/component/src/ui/menu/menu-trigger.tsx

@@ -6,7 +6,7 @@ export const MenuTrigger = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, ...props }, ref) => {
     return (
       <Button
-        type="plain"
+        // type="plain"
         ref={ref}
         icon={<ArrowDownSmallIcon />}
         iconPosition="end"

packages/component/src/ui/menu/styles.ts

@@ -13,6 +13,7 @@ export const StyledMenuWrapper = styled(StyledPopperContainer, {
   return {
     width,
     height,
+    minWidth: '200px',
     background: 'var(--affine-white)',
     padding: '8px 4px',
     fontSize: '14px',
@@ -63,7 +64,7 @@ export const StyledMenuItem = styled('button')<{
     width: '100%',
     borderRadius: '5px',
     padding: '0 14px',
-    fontSize: 'var(--affine-font-base)',
+    fontSize: 'var(--affine-font-sm)',
     height: '32px',
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',

packages/component/src/ui/popper/interface.ts

@@ -60,4 +60,5 @@ export type PopperProps = {
   popperHandlerRef?: Ref<PopperHandler>;
 
   onClickAway?: () => void;
+  triggerContainerStyle?: CSSProperties;
 } & Omit<PopperUnstyledProps, 'open' | 'content'>;

packages/component/src/ui/popper/popper.tsx

@@ -36,6 +36,7 @@ export const Popper = ({
   onClickAway,
   onPointerEnter,
   onPointerLeave,
+  triggerContainerStyle = {},
   ...popperProps
 }: PopperProps) => {
   const [anchorEl, setAnchorEl] = useState<VirtualElement>();
@@ -111,7 +112,7 @@ export const Popper = ({
         }
       }}
     >
-      <Container>
+      <Container style={triggerContainerStyle}>
         {cloneElement(children, {
           ref: (dom: HTMLDivElement) => setAnchorEl(dom),
           onClick: (e: MouseEvent) => {

packages/component/src/ui/switch/index.css.ts

@@ -14,7 +14,7 @@ export const switchStyle = style({
   position: 'relative',
   width: '46px',
   height: '26px',
-  background: 'var(--affine-toggle-disable-background-color)',
+  background: 'var(--affine-icon-color)',
   borderRadius: '37px',
   transition: '200ms all',
   border: '1px solid var(--affine-black-10)',