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({
-    padding: '11px 22px',
-    fontSize: 17,
-    fontWeight: 400,
-    letterSpacing: -0.43,
-    lineHeight: '22px',
-  }),
-  header: style({
-    padding: '10px 16px',
-    marginBottom: '0px !important',
-    fontSize: 17,
-    fontWeight: 600,
-    letterSpacing: -0.43,
-    lineHeight: '22px',
-  }),
-  content: style({
-    padding: '11px 22px',
-    fontSize: 17,
-    fontWeight: 400,
-    letterSpacing: -0.43,
-    lineHeight: '22px',
-  }),
+  description: style([
+    bodyRegular,
+    {
+      padding: '11px 22px',
+    },
+  ]),
+  header: style([
+    bodyEmphasized,
+    {
+      padding: '10px 16px',
+      marginBottom: '0px !important',
+    },
+  ]),
+  content: style([
+    bodyRegular,
+    {
+      padding: '11px 22px',
+    },
+  ]),
   footer: style({
     padding: '8px 16px',
     display: 'flex',
@@ -74,13 +72,14 @@ export const mobileStyles = {
       },
     },
   }),
-  action: style({
-    width: '100%',
-    height: 44,
-    borderRadius: 8,
-    fontSize: 17,
-    fontWeight: 400,
-    letterSpacing: -0.43,
-    lineHeight: '22px',
-  }),
+  action: style([
+    bodyRegular,
+    {
+      width: '100%',
+      height: 44,
+      borderRadius: 8,
+      fontSize: 17,
+      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?.();