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

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

packages/frontend/mobile/src/components/app-tabs/home-icon.tsx

@@ -1,21 +0,0 @@
-/**
- * TODO(@CatsJuice): replace with `@blocksuite/icons/rc` when ready
- */
-export const HomeIcon = () => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 31 30"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M24.5957 24.375V13.0977C24.5957 12.9048 24.5067 12.7228 24.3544 12.6044L15.6044 5.7988C15.3787 5.62326 15.0627 5.62326 14.837 5.7988L6.08699 12.6044C5.93475 12.7228 5.8457 12.9048 5.8457 13.0977V24.375C5.8457 24.7202 6.12553 25 6.4707 25H23.9707C24.3159 25 24.5957 24.7202 24.5957 24.375ZM4.93585 11.1243C4.32689 11.598 3.9707 12.3262 3.9707 13.0977V24.375C3.9707 25.7557 5.08999 26.875 6.4707 26.875H23.9707C25.3514 26.875 26.4707 25.7557 26.4707 24.375V13.0977C26.4707 12.3262 26.1145 11.598 25.5056 11.1243L16.7556 4.31876C15.8528 3.61661 14.5886 3.6166 13.6859 4.31876L4.93585 11.1243Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};

packages/frontend/mobile/src/components/app-tabs/index.tsx

@@ -2,11 +2,10 @@ import {
   WorkbenchLink,
   WorkbenchService,
 } from '@affine/core/modules/workbench';
-import { AllDocsIcon, SearchIcon } from '@blocksuite/icons/rc';
+import { AllDocsIcon, MobileHomeIcon, SearchIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import type { Location } from 'react-router-dom';
 
-import { HomeIcon } from './home-icon';
 import * as styles from './styles.css';
 
 interface Route {
@@ -19,7 +18,7 @@ interface Route {
 const routes: Route[] = [
   {
     to: '/home',
-    Icon: HomeIcon,
+    Icon: MobileHomeIcon,
   },
   {
     to: '/all',

packages/frontend/mobile/src/components/app-tabs/styles.css.ts

@@ -12,12 +12,13 @@ export const appTabs = style({
   borderTop: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
 
   width: '100dvw',
-  height: globalVars.appTabHeight,
+  height: `calc(${globalVars.appTabHeight} + 2px)`,
   padding: 16,
   gap: 15.5,
 
   position: 'fixed',
-  bottom: 0,
+  paddingBottom: 18,
+  bottom: -2,
   zIndex: 1,
 });
 export const tabItem = style({
@@ -30,6 +31,7 @@ export const tabItem = style({
   padding: 3,
   fontSize: 30,
   color: cssVarV2('icon/primary'),
+  lineHeight: 0,
 
   selectors: {
     '&[data-active="true"]': {

packages/frontend/mobile/src/components/workspace-selector/menu.tsx

@@ -117,6 +117,7 @@ export const SelectorMenu = ({ onClose }: { onClose?: () => void }) => {
           title="Cloud Sync"
           list={cloudWorkspaces}
         />
+        <div className={styles.divider} />
         <WorkspaceList
           onClose={onClose}
           title="Local Storage"

packages/frontend/mobile/src/views/settings/dropdown-select.tsx

@@ -50,6 +50,7 @@ export const SettingDropdownSelect = <
     <MobileMenu
       items={options.map(opt => (
         <MobileMenuItem
+          divide
           key={opt.value}
           selected={value === opt.value}
           data-testid={opt.testId}