chore(mobile): adjust search back button and title style (#9125)

close AF-1827, AF-1826

packages/frontend/core/src/mobile/components/navigation-back/index.tsx

@@ -19,6 +19,7 @@ export interface NavigationBackButtonProps extends IconButtonProps {
 export const NavigationBackButton = ({
   icon,
   backAction,
+  children,
   style: propsStyle,
   ...otherProps
 }: NavigationBackButtonProps) => {
@@ -42,6 +43,8 @@ export const NavigationBackButton = ({
 
   const style = useMemo(() => ({ padding: 10, ...propsStyle }), [propsStyle]);
 
+  if (children) return children;
+
   return (
     <IconButton
       size={24}

packages/frontend/core/src/mobile/pages/workspace/search.tsx

@@ -1,4 +1,5 @@
 import {
+  Button,
   SafeArea,
   startScopedViewTransition,
   useThemeColorV2,
@@ -9,6 +10,7 @@ import {
   QuickSearchTagIcon,
 } from '@affine/core/modules/quicksearch';
 import { TagService } from '@affine/core/modules/tag';
+import { useI18n } from '@affine/i18n';
 import { sleep } from '@blocksuite/affine/global/utils';
 import { ViewLayersIcon } from '@blocksuite/icons/rc';
 import {
@@ -17,6 +19,7 @@ import {
   useService,
   useServices,
 } from '@toeverything/infra';
+import { bodyEmphasized } from '@toeverything/theme/typography';
 import { useCallback, useMemo } from 'react';
 
 import {
@@ -123,6 +126,7 @@ const WithQueryList = () => {
 };
 
 export const Component = () => {
+  const t = useI18n();
   useThemeColorV2('layer/background/mobile/primary');
   const searchInput = useLiveData(searchInput$);
   const searchService = useService(MobileSearchService);
@@ -154,7 +158,6 @@ export const Component = () => {
     <>
       <SafeArea top>
         <div className={styles.searchHeader} data-testid="search-header">
-          <NavigationBackButton backAction={transitionBack} />
           <SearchInput
             className={styles.searchInput}
             debounce={300}
@@ -163,6 +166,15 @@ export const Component = () => {
             onInput={onSearch}
             placeholder="Search Docs, Collections"
           />
+          <NavigationBackButton>
+            <Button
+              variant="plain"
+              className={styles.searchCancel}
+              onClick={transitionBack}
+            >
+              <span className={bodyEmphasized}>{t['Cancel']()}</span>
+            </Button>
+          </NavigationBackButton>
         </div>
       </SafeArea>
       {searchInput ? <WithQueryList /> : <RecentList />}

packages/frontend/core/src/mobile/views/search/style.css.ts

@@ -1,13 +1,21 @@
-import { footnoteRegular, title3Regular } from '@toeverything/theme/typography';
+import {
+  bodyEmphasized,
+  footnoteRegular,
+  title3Regular,
+} from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const searchHeader = style({
   padding: 16,
-  paddingLeft: 8,
   display: 'flex',
   alignItems: 'center',
-  gap: 4,
+  gap: 12,
+});
+export const searchCancel = style({
+  height: 44,
+  padding: '0px 4px',
+  color: cssVarV2.button.primary,
 });
 export const searchInput = style({
   width: 0,
@@ -33,7 +41,7 @@ export const resBlock = style({
   },
 });
 export const resBlockTitle = style([
-  title3Regular,
+  bodyEmphasized,
   {
     padding: '0 16px',
     color: cssVarV2('text/primary'),