fix(mobile): adjust mobile ui (#8112)

close AF-1274, AF-1320, AF-1333

packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 
@@ -23,6 +24,8 @@ export const DayPicker = memo(function DayPicker(
     onChange,
     onCursorChange,
     onModeChange,
+    monthHeaderCellClassName,
+    monthBodyCellClassName,
   } = props;
 
   const matrix = useMemo(() => {
@@ -170,7 +173,13 @@ export const DayPicker = memo(function DayPicker(
         {/* weekDays */}
         <div className={styles.monthViewRow}>
           {weekDays.split(',').map(day => (
-            <div key={day} className={styles.monthViewHeaderCell}>
+            <div
+              key={day}
+              className={clsx(
+                styles.monthViewHeaderCell,
+                monthHeaderCellClassName
+              )}
+            >
               {day}
             </div>
           ))}
@@ -178,10 +187,13 @@ export const DayPicker = memo(function DayPicker(
         {/* Weeks in month */}
         {matrix.map((week, i) => {
           return (
-            <div key={i} className={styles.monthViewRow}>
+            <div key={i} className={clsx(styles.monthViewRow)}>
               {week.map((cell, j) => (
                 <div
-                  className={styles.monthViewBodyCell}
+                  className={clsx(
+                    styles.monthViewBodyCell,
+                    monthBodyCellClassName
+                  )}
                   key={j}
                   onClick={() => onChange?.(cell.date.format(format))}
                 >
@@ -197,7 +209,15 @@ export const DayPicker = memo(function DayPicker(
         })}
       </main>
     ),
-    [customDayRenderer, format, matrix, onChange, weekDays]
+    [
+      customDayRenderer,
+      format,
+      matrix,
+      monthBodyCellClassName,
+      monthHeaderCellClassName,
+      onChange,
+      weekDays,
+    ]
   );
 
   return (

packages/frontend/component/src/ui/date-picker/calendar/types.tsx

@@ -50,6 +50,10 @@ export interface DatePickerProps {
    * when date is clicked
    */
   onChange?: (value: string) => void;
+
+  // style customizations
+  monthHeaderCellClassName?: string;
+  monthBodyCellClassName?: string;
 }
 
 /**

packages/frontend/component/src/ui/menu/menu.types.ts

@@ -20,8 +20,6 @@ export interface MenuProps {
 export interface MenuItemProps
   extends Omit<MenuItemPropsPrimitive, 'asChild' | 'textValue' | 'prefix'> {
   type?: 'default' | 'warning' | 'danger';
-  // preFix?: React.ReactNode;
-  // endFix?: React.ReactNode;
   prefix?: ReactNode;
   suffix?: ReactNode;
   prefixIcon?: ReactNode;
@@ -29,6 +27,11 @@ export interface MenuItemProps
   checked?: boolean;
   selected?: boolean;
   block?: boolean;
+  /**
+   * add divider after item (if not last one)
+   * - Mobile only for now
+   */
+  divide?: boolean;
 }
 export interface MenuSubProps {
   children: ReactNode;

packages/frontend/component/src/ui/menu/mobile/item.tsx

@@ -12,7 +12,7 @@ const preventDefault = () => {
 export const MobileMenuItem = (props: MenuItemProps) => {
   const { setOpen } = useContext(MobileMenuContext);
   const { className, children, otherProps } = useMenuItem(props);
-  const { onSelect, onClick, ...restProps } = otherProps;
+  const { onSelect, onClick, divide, ...restProps } = otherProps;
 
   const onItemClick = useCallback(
     (e: any) => {
@@ -32,6 +32,7 @@ export const MobileMenuItem = (props: MenuItemProps) => {
       role="menuitem"
       onClick={onItemClick}
       className={className}
+      data-divider={divide}
       {...restProps}
     >
       {children}

packages/frontend/component/src/ui/menu/mobile/styles.css.ts

@@ -43,6 +43,7 @@ export const menuContent = style({
 export const mobileMenuItem = style({
   padding: '10px 20px',
   borderRadius: 0,
+
   ':hover': {
     vars: {
       [bgColor]: 'transparent',
@@ -66,6 +67,25 @@ export const mobileMenuItem = style({
     '&.warning:active': {
       vars: { [bgColor]: cssVar('backgroundWarningColor') },
     },
+    // divider hack
+    '&[data-divider=true]': {
+      marginBottom: 16,
+      position: 'relative',
+    },
+    '&[data-divider=true]::after': {
+      content: '""',
+      position: 'absolute',
+      bottom: -8,
+      left: 0,
+      width: '100%',
+      borderBottom: `0.5px solid ${cssVarV2('layer/insideBorder/border')}`,
+    },
+    '&[data-divider=true]:last-child': {
+      marginBottom: 0,
+    },
+    '&[data-divider=true]:last-child::after': {
+      display: 'none',
+    },
   },
 });