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

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

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',
+    },
   },
 });