From 6334255e15f56f71fcbf1a5bea033a54cea99536 Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Tue, 23 Jul 2024 10:21:50 +0800
Subject: [PATCH] fix: some style issues (#5783)

---
 .../application/services/js-services/cache/index.ts  |  3 +--
 .../appflowy_web_app/src/components/app/AppTheme.tsx |  2 +-
 .../src/components/database/board/Board.tsx          |  1 -
 .../src/components/database/calendar/Calendar.tsx    |  2 +-
 .../src/components/database/calendar/calendar.scss   |  5 +++++
 .../database/components/board/column/Column.tsx      |  3 ++-
 .../database/components/calendar/toolbar/NoDate.tsx  | 11 ++++++++---
 .../database/components/calendar/toolbar/Toolbar.tsx |  2 +-
 .../components/cell/checkbox/CheckboxCell.tsx        |  2 +-
 .../database/components/grid/grid-cell/GridCell.tsx  |  2 +-
 .../components/grid/grid-column/GridColumn.tsx       |  4 ++--
 .../components/grid/grid-table/GridTable.tsx         |  2 +-
 .../components/database/components/tabs/ViewTabs.tsx |  2 +-
 .../editor/components/leaf/mention/MentionPage.tsx   |  9 ++++-----
 .../appflowy_web_app/src/pages/AfterPaymentPage.tsx  | 12 +++++++++---
 frontend/resources/translations/en.json              |  2 +-
 16 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts b/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts
index 712e903c6b..83d8226603 100644
--- a/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts
+++ b/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts
@@ -258,10 +258,9 @@ export async function revalidatePublishView<
       //   rowMapDoc.getMap().set(subdoc.guid, subdoc);
       // });
     }
-
-    console.log('rows', rows);
   }
 
+  console.log('====', rows);
   const state = new Uint8Array(data);
 
   applyYDoc(collab, state);
diff --git a/frontend/appflowy_web_app/src/components/app/AppTheme.tsx b/frontend/appflowy_web_app/src/components/app/AppTheme.tsx
index 329617b8ce..5b81148b0b 100644
--- a/frontend/appflowy_web_app/src/components/app/AppTheme.tsx
+++ b/frontend/appflowy_web_app/src/components/app/AppTheme.tsx
@@ -15,7 +15,7 @@ function AppTheme({ children }: { children: React.ReactNode }) {
       createTheme({
         typography: {
           fontFamily: ['inherit'].join(','),
-          fontSize: 12,
+          fontSize: 14,
           button: {
             textTransform: 'none',
           },
diff --git a/frontend/appflowy_web_app/src/components/database/board/Board.tsx b/frontend/appflowy_web_app/src/components/database/board/Board.tsx
index a92ae8c705..73c0f95398 100644
--- a/frontend/appflowy_web_app/src/components/database/board/Board.tsx
+++ b/frontend/appflowy_web_app/src/components/database/board/Board.tsx
@@ -7,7 +7,6 @@ export function Board() {
   const database = useDatabase();
   const groups = useGroupsSelector();
 
-  console.log('groups', database);
   if (!database) {
     return (
       <div className={'flex w-full flex-1 flex-col items-center justify-center'}>
diff --git a/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx b/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx
index 6a710ab655..96e8238c6b 100644
--- a/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx
+++ b/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx
@@ -8,7 +8,7 @@ export function Calendar() {
   const { dayPropGetter, localizer, formats, events, emptyEvents } = useCalendarSetup();
 
   return (
-    <div className={'database-calendar h-full max-h-[960px] pb-6 pt-4 '}>
+    <div className={'database-calendar h-full max-h-[960px] pb-4 pt-4 text-sm'}>
       <BigCalendar
         components={{
           toolbar: (props) => <Toolbar {...props} emptyEvents={emptyEvents} />,
diff --git a/frontend/appflowy_web_app/src/components/database/calendar/calendar.scss b/frontend/appflowy_web_app/src/components/database/calendar/calendar.scss
index bbba46f82e..eacc97482a 100644
--- a/frontend/appflowy_web_app/src/components/database/calendar/calendar.scss
+++ b/frontend/appflowy_web_app/src/components/database/calendar/calendar.scss
@@ -15,6 +15,7 @@ $today-highlight-bg: transparent;
 
 .rbc-date-cell, .rbc-header {
   min-width: 97px;
+  font-size: 14px;
 }
 
 .rbc-date-cell.rbc-now {
@@ -78,6 +79,10 @@ $today-highlight-bg: transparent;
   height: fit-content;
   table-layout: fixed;
   width: 100%;
+
+  &:last-child {
+    margin-bottom: 150px;
+  }
 }
 
 .event-properties {
diff --git a/frontend/appflowy_web_app/src/components/database/components/board/column/Column.tsx b/frontend/appflowy_web_app/src/components/database/components/board/column/Column.tsx
index 831aa24f34..bedf5088d0 100644
--- a/frontend/appflowy_web_app/src/components/database/components/board/column/Column.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/board/column/Column.tsx
@@ -71,7 +71,7 @@ export const Column = memo(
 
     return (
       <div key={id} className='column flex w-[230px] flex-col gap-4'>
-        <div className='column-header flex h-[24px] items-center text-xs font-medium'>{header}</div>
+        <div className='column-header flex h-[24px] items-center text-sm font-medium'>{header}</div>
 
         <div className={'w-full flex-1 overflow-hidden'}>
           <AutoSizer>
@@ -79,6 +79,7 @@ export const Column = memo(
               return (
                 <VariableSizeList
                   ref={ref}
+                  className={'pb-[150px]'}
                   height={height}
                   itemCount={rowCount}
                   itemSize={getItemSize}
diff --git a/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/NoDate.tsx b/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/NoDate.tsx
index 79fb0092ea..b1f2ad406e 100644
--- a/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/NoDate.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/NoDate.tsx
@@ -1,6 +1,7 @@
 import { CalendarEvent } from '@/application/database-yjs';
 import { RichTooltip } from '@/components/_shared/popover';
 import NoDateRow from '@/components/database/components/calendar/toolbar/NoDateRow';
+import { Button } from '@mui/material';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -29,12 +30,16 @@ function NoDate({ emptyEvents }: { emptyEvents: CalendarEvent[] }) {
         setOpen(false);
       }}
     >
-      <span
-        className={' whitespace-nowrap rounded-md border border-line-divider border-line-divider p-1 px-2'}
+      <Button
+        size={'small'}
+        variant={'outlined'}
+        disabled
+        className={'rounded-md border-line-divider'}
+        color={'inherit'}
         // onClick={() => setOpen(true)}
       >
         {`${t('calendar.settings.noDateTitle')} (${emptyEvents.length})`}
-      </span>
+      </Button>
     </RichTooltip>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/Toolbar.tsx b/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/Toolbar.tsx
index 9b8f41d398..f63014253a 100644
--- a/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/Toolbar.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/Toolbar.tsx
@@ -23,7 +23,7 @@ export function Toolbar({
 
   return (
     <div className={'flex items-center justify-between overflow-x-auto overflow-y-hidden'}>
-      <div className={'whitespace-nowrap text-sm font-medium'}>{dateStr}</div>
+      <div className={'whitespace-nowrap text-base font-medium'}>{dateStr}</div>
       <div className={'flex items-center justify-end gap-2'}>
         <IconButton size={'small'} onClick={() => onNavigate('PREV')}>
           <LeftArrow />
diff --git a/frontend/appflowy_web_app/src/components/database/components/cell/checkbox/CheckboxCell.tsx b/frontend/appflowy_web_app/src/components/database/components/cell/checkbox/CheckboxCell.tsx
index 9ffe88ee3f..e3bf897953 100644
--- a/frontend/appflowy_web_app/src/components/database/components/cell/checkbox/CheckboxCell.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/cell/checkbox/CheckboxCell.tsx
@@ -10,7 +10,7 @@ export function CheckboxCell({ cell, style }: CellProps<CheckboxCellType>) {
 
   return (
     <div style={style} className='relative flex w-full items-center text-lg text-fill-default'>
-      {checked ? <CheckboxCheckSvg className={'h-4 w-4'} /> : <CheckboxUncheckSvg className={'h-4 w-4'} />}
+      {checked ? <CheckboxCheckSvg className={'h-5 w-5'} /> : <CheckboxUncheckSvg className={'h-5 w-5'} />}
     </div>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid/grid-cell/GridCell.tsx b/frontend/appflowy_web_app/src/components/database/components/grid/grid-cell/GridCell.tsx
index 5840109be7..0090f1361c 100644
--- a/frontend/appflowy_web_app/src/components/database/components/grid/grid-cell/GridCell.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/grid/grid-cell/GridCell.tsx
@@ -53,7 +53,7 @@ export function GridCell({ onResize, rowId, fieldId, columnIndex, rowIndex }: Gr
   if (!field) return null;
 
   return (
-    <div ref={ref} className={'grid-cell flex min-h-full w-full cursor-text items-center overflow-hidden text-xs'}>
+    <div ref={ref} className={'grid-cell flex min-h-full w-full cursor-text items-center overflow-hidden text-sm'}>
       <Component cell={cell} rowId={rowId} fieldId={fieldId} />
     </div>
   );
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid/grid-column/GridColumn.tsx b/frontend/appflowy_web_app/src/components/database/components/grid/grid-column/GridColumn.tsx
index 7f022aa34a..f4d01f61db 100644
--- a/frontend/appflowy_web_app/src/components/database/components/grid/grid-column/GridColumn.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/grid/grid-column/GridColumn.tsx
@@ -26,11 +26,11 @@ export function GridColumn({ column, index }: { column: Column; index: number })
           borderLeftWidth: index === 0 ? 0 : 1,
         }}
         className={
-          'flex h-full w-full items-center overflow-hidden whitespace-nowrap border-t border-b border-l border-line-divider px-1.5 text-xs font-medium hover:bg-fill-list-active'
+          'flex h-full w-full items-center gap-1 overflow-hidden whitespace-nowrap border-t border-b border-l border-line-divider px-2 text-sm font-medium hover:bg-fill-list-active'
         }
       >
         <div className={'w-5'}>
-          <FieldTypeIcon type={type} className={'mr-1 h-4 w-4'} />
+          <FieldTypeIcon type={type} className={'mr-1 h-5 w-5'} />
         </div>
         <div className={'flex-1'}>{name}</div>
         {isAIField && <AIIndicatorSvg className={'text-xl'} />}
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid/grid-table/GridTable.tsx b/frontend/appflowy_web_app/src/components/database/components/grid/grid-table/GridTable.tsx
index d439681b21..8cd294d234 100644
--- a/frontend/appflowy_web_app/src/components/database/components/grid/grid-table/GridTable.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/grid/grid-table/GridTable.tsx
@@ -126,7 +126,7 @@ export const GridTable = ({ scrollLeft, columnWidth, columns, onScrollLeft }: Gr
           columnCount={columns.length}
           columnWidth={(index) => columnWidth(index, width)}
           rowHeight={rowHeight}
-          className={'grid-table pb-6'}
+          className={'grid-table pb-[150px]'}
           overscanRowCount={5}
           overscanColumnCount={5}
           style={{
diff --git a/frontend/appflowy_web_app/src/components/database/components/tabs/ViewTabs.tsx b/frontend/appflowy_web_app/src/components/database/components/tabs/ViewTabs.tsx
index a9c58e42c7..64faab7949 100644
--- a/frontend/appflowy_web_app/src/components/database/components/tabs/ViewTabs.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/tabs/ViewTabs.tsx
@@ -12,7 +12,7 @@ export const ViewTabs = styled((props: TabsProps) => <Tabs {...props} />)({
 export const ViewTab = styled((props: TabProps) => <Tab disableRipple {...props} />)({
   padding: '0 12px',
   minHeight: '24px',
-  fontSize: '12px',
+  fontSize: '14px',
   minWidth: 'unset',
   margin: '4px 0',
   borderRadius: 0,
diff --git a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionPage.tsx b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionPage.tsx
index cdf4f46f62..f839e6f9bb 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionPage.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionPage.tsx
@@ -7,17 +7,16 @@ import { useTranslation } from 'react-i18next';
 
 function MentionPage({ pageId }: { pageId: string }) {
   const context = useEditorContext();
-  const { navigateToView, loadViewMeta, loadView } = context;
+  const { navigateToView, loadViewMeta } = context;
   const [unPublished, setUnPublished] = useState(false);
   const [meta, setMeta] = useState<ViewMeta | null>(null);
 
   useEffect(() => {
     void (async () => {
-      if (loadViewMeta && loadView) {
+      if (loadViewMeta) {
         setUnPublished(false);
         try {
-          await loadView(pageId);
-          const meta = await loadViewMeta(pageId);
+          const meta = await loadViewMeta(pageId, setMeta);
 
           setMeta(meta);
         } catch (e) {
@@ -25,7 +24,7 @@ function MentionPage({ pageId }: { pageId: string }) {
         }
       }
     })();
-  }, [loadViewMeta, pageId, loadView]);
+  }, [loadViewMeta, pageId]);
 
   const icon = useMemo(() => {
     return meta?.icon;
diff --git a/frontend/appflowy_web_app/src/pages/AfterPaymentPage.tsx b/frontend/appflowy_web_app/src/pages/AfterPaymentPage.tsx
index 7395045088..beece2661c 100644
--- a/frontend/appflowy_web_app/src/pages/AfterPaymentPage.tsx
+++ b/frontend/appflowy_web_app/src/pages/AfterPaymentPage.tsx
@@ -1,10 +1,16 @@
-import { openOrDownload } from '@/components/publish/header/utils';
 import { Button, Typography } from '@mui/material';
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { ReactComponent as Logo } from '@/assets/logo.svg';
 import { ReactComponent as AppflowyLogo } from '@/assets/appflowy.svg';
 
 function AfterPaymentPage() {
+  const openAppFlowy = useCallback(() => {
+    window.open(`appflowy-flutter://payment-success/${window.location.search || ''}`, '_self');
+  }, []);
+
+  useEffect(() => {
+    openAppFlowy();
+  }, [openAppFlowy]);
   return (
     <div className={'m-0 flex h-screen w-screen items-center justify-center bg-bg-body p-6'}>
       <div className={'flex max-w-[560px] flex-col items-center gap-1 text-center'}>
@@ -24,7 +30,7 @@ function AfterPaymentPage() {
           </div>
         </div>
         <Button
-          onClick={openOrDownload}
+          onClick={openAppFlowy}
           variant='contained'
           color='primary'
           className={
diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json
index 09a20d3628..ab34a07158 100644
--- a/frontend/resources/translations/en.json
+++ b/frontend/resources/translations/en.json
@@ -2132,7 +2132,7 @@
       "many": "Publish {} selected views",
       "other":"Publish {} selected views"
     },
-    "mustSelectPrimaryDatabase": "The primary database must be selected",
+    "mustSelectPrimaryDatabase": "The primary view must be selected",
     "noDatabaseSelected": "No database selected, please select at least one database.",
     "unableToDeselectPrimaryDatabase": "Unable to deselect primary database"
   },