fix(mobile): adjust mobile UI (#8719)

- fix(mobile): add close button for login, close AF-1581
- fix(mobile): adjust explorer title font, close AF-1575
- fix(mobile): disable user-select globally, close AF-1626
- fix(mobile): usage loading ui in setting, close AF-1422
- fix(mobile): adjust header height, close AF-1574

packages/frontend/component/src/ui/modal/confirm-modal.css.ts

@@ -1,3 +1,4 @@
+import { bodyEmphasized, bodyRegular } from '@toeverything/theme/typography';
 import { style } from '@vanilla-extract/css';
 
 // desktop
@@ -41,28 +42,25 @@ export const mobileStyles = {
     padding: '12px 0 !important',
     borderRadius: 22,
   }),
-  description: style({
+  description: style([
-    padding: '11px 22px',
+    bodyRegular,
-    fontSize: 17,
+    {
-    fontWeight: 400,
+      padding: '11px 22px',
-    letterSpacing: -0.43,
+    },
-    lineHeight: '22px',
+  ]),
-  }),
+  header: style([
-  header: style({
+    bodyEmphasized,
-    padding: '10px 16px',
+    {
-    marginBottom: '0px !important',
+      padding: '10px 16px',
-    fontSize: 17,
+      marginBottom: '0px !important',
-    fontWeight: 600,
+    },
-    letterSpacing: -0.43,
+  ]),
-    lineHeight: '22px',
+  content: style([
-  }),
+    bodyRegular,
-  content: style({
+    {
-    padding: '11px 22px',
+      padding: '11px 22px',
-    fontSize: 17,
+    },
-    fontWeight: 400,
+  ]),
-    letterSpacing: -0.43,
-    lineHeight: '22px',
-  }),
   footer: style({
     padding: '8px 16px',
     display: 'flex',
@@ -74,13 +72,14 @@ export const mobileStyles = {
       },
     },
   }),
-  action: style({
+  action: style([
-    width: '100%',
+    bodyRegular,
-    height: 44,
+    {
-    borderRadius: 8,
+      width: '100%',
-    fontSize: 17,
+      height: 44,
-    fontWeight: 400,
+      borderRadius: 8,
-    letterSpacing: -0.43,
+      fontSize: 17,
-    lineHeight: '22px',
+      fontWeight: 400,
-  }),
+    },
+  ]),
 };

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -40,6 +40,7 @@ export const ConfirmModal = ({
   autoFocusConfirm = true,
   headerClassName,
   descriptionClassName,
+  contentOptions,
   ...props
 }: ConfirmModalProps) => {
   const onConfirmClick = useCallback(() => {
@@ -50,7 +51,8 @@ export const ConfirmModal = ({
   return (
     <Modal
       contentOptions={{
-        className: styles.container,
+        ...contentOptions,
+        className: clsx(styles.container, contentOptions?.className),
         onPointerDownOutside: e => {
           e.stopPropagation();
           onCancel?.();

packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts

@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { title3Regular } from '@toeverything/theme/typography';
+import { headlineRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -21,7 +21,7 @@ export const triggerRoot = style({
   borderRadius: 4,
 });
 export const triggerLabel = style([
-  title3Regular,
+  headlineRegular,
   {
     flexGrow: '0',
     display: 'flex',

packages/frontend/core/src/mobile/dialogs/setting/user-usage/index.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@affine/component';
 import {
   AuthService,
   ServerConfigService,
@@ -7,7 +8,7 @@ import {
 import { useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { useEffect } from 'react';
+import { type ReactNode, useEffect } from 'react';
 
 import { SettingGroup } from '../group';
 import * as styles from './style.css';
@@ -28,11 +29,13 @@ const Progress = ({
   percent,
   desc,
   color,
+  children,
 }: {
-  name: string;
+  name: ReactNode;
-  percent: number;
+  desc: ReactNode;
-  desc: string;
+  percent?: number;
-  color: string | null;
+  color?: string | null;
+  children?: React.ReactNode;
 }) => {
   return (
     <div className={styles.progressRoot}>
@@ -40,19 +43,33 @@ const Progress = ({
         <span className={styles.progressName}>{name}</span>
         <span className={styles.progressDesc}>{desc}</span>
       </div>
-      <div className={styles.progressTrack}>
+      {children ?? (
-        <div
+        <div className={styles.progressTrack}>
-          className={styles.progressBar}
+          <div
-          style={{
+            className={styles.progressBar}
-            width: `${percent}%`,
+            style={{
-            backgroundColor: color ?? cssVarV2('button/primary'),
+              width: `${percent}%`,
-          }}
+              backgroundColor: color ?? cssVarV2('button/primary'),
-        />
+            }}
-      </div>
+          />
+        </div>
+      )}
     </div>
   );
 };
 
+const skeletonProps = { style: { margin: 0 }, animation: 'wave' } as const;
+const Loading = () => {
+  return (
+    <Progress
+      name={<Skeleton height={22} width="60" {...skeletonProps} />}
+      desc={<Skeleton height={16} width="80" {...skeletonProps} />}
+    >
+      <Skeleton height={10} {...skeletonProps} />
+    </Progress>
+  );
+};
+
 const UsagePanel = () => {
   const serverConfigService = useService(ServerConfigService);
   const serverFeatures = useLiveData(
@@ -82,7 +99,7 @@ const CloudUsage = () => {
 
   const loading = percent === null;
 
-  if (loading) return null;
+  if (loading) return <Loading />;
 
   return (
     <Progress
@@ -110,7 +127,7 @@ const AiUsage = () => {
   }, [copilotQuotaService]);
 
   if (loading || loadError) {
-    return null;
+    return <Loading />;
   }
 
   if (copilotActionLimit === 'unlimited') {

packages/frontend/core/src/mobile/styles/mobile.css.ts

@@ -9,6 +9,7 @@ globalStyle(':root', {
   vars: {
     [globalVars.appTabHeight]: BUILD_CONFIG.isIOS ? '49px' : '62px',
   },
+  userSelect: 'none',
 });
 
 globalStyle('body', {

packages/frontend/core/src/mobile/views/all-docs/style.css.ts

@@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css';
 
 const basicHeader = style({
   width: '100%',
-  height: 56,
+  height: 44,
 });
 export const header = style({
   width: '100%',
@@ -25,7 +25,7 @@ export const headerContent = style([
 ]);
 
 export const tabs = style({
-  height: 56,
+  height: 44,
   gap: 16,
   display: 'flex',
   alignItems: 'center',

packages/frontend/core/src/mobile/views/sign-in/modal.tsx

@@ -1,5 +1,6 @@
-import { Modal } from '@affine/component';
+import { IconButton, Modal, SafeArea } from '@affine/component';
 import { authAtom } from '@affine/core/components/atoms';
+import { CloseIcon } from '@blocksuite/icons/rc';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { useAtom } from 'jotai';
 import { useCallback } from 'react';
@@ -35,6 +36,19 @@ export const MobileSignInModal = () => {
       withoutCloseButton
     >
       <MobileSignIn onSkip={closeModal} />
+      <SafeArea
+        top
+        style={{ position: 'absolute', top: 0, right: 0, paddingRight: 16 }}
+        topOffset={8}
+      >
+        <IconButton
+          size="24"
+          variant="solid"
+          icon={<CloseIcon />}
+          style={{ borderRadius: 8, padding: 4 }}
+          onClick={closeModal}
+        />
+      </SafeArea>
     </Modal>
   );
 };