From 2fb18dd05149eecc8076d7752b28c4ae243db1ae Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Tue, 23 Jul 2024 17:48:51 +0800
Subject: [PATCH] fix: to 16px (#5790)

* fix: to 16px

* fix: to 16px

* fix: to 14px
---
 .../components/calendar/toolbar/Toolbar.tsx   |  2 +-
 .../grid-calculation-cell/CalculationCell.tsx | 32 +++++++++++++++++--
 .../grid/grid-header/GridHeader.tsx           |  3 +-
 3 files changed, 32 insertions(+), 5 deletions(-)

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 f63014253a..9b8f41d398 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-base font-medium'}>{dateStr}</div>
+      <div className={'whitespace-nowrap text-sm 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/grid/grid-calculation-cell/CalculationCell.tsx b/frontend/appflowy_web_app/src/components/database/components/grid/grid-calculation-cell/CalculationCell.tsx
index 1ddb4e2d32..dc01492f2d 100644
--- a/frontend/appflowy_web_app/src/components/database/components/grid/grid-calculation-cell/CalculationCell.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/grid/grid-calculation-cell/CalculationCell.tsx
@@ -1,4 +1,8 @@
+import { YjsDatabaseKey } from '@/application/collab.type';
+import { currencyFormaterMap, FieldType, parseNumberTypeOptions, useFieldSelector } from '@/application/database-yjs';
 import { CalculationType } from '@/application/database-yjs/database.type';
+import Decimal from 'decimal.js';
+import { isNaN } from 'lodash-es';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,6 +20,16 @@ export interface CalculationCellProps {
 export function CalculationCell({ cell }: CalculationCellProps) {
   const { t } = useTranslation();
 
+  const fieldId = cell?.fieldId || '';
+  const { field } = useFieldSelector(fieldId);
+  const format = useMemo(
+    () =>
+      field && Number(field?.get(YjsDatabaseKey.type)) === FieldType.Number
+        ? parseNumberTypeOptions(field).format
+        : undefined,
+    [field]
+  );
+
   const prefix = useMemo(() => {
     if (!cell) return '';
 
@@ -39,10 +53,22 @@ export function CalculationCell({ cell }: CalculationCellProps) {
     }
   }, [cell, t]);
 
+  const num = useMemo(() => {
+    const value = cell?.value;
+
+    if (value === undefined || isNaN(value)) return '';
+
+    if (format && currencyFormaterMap[format]) {
+      return currencyFormaterMap[format](new Decimal(value).toNumber());
+    }
+
+    return parseFloat(value);
+  }, [cell?.value, format]);
+
   return (
-    <div className={'h-full w-full px-1 text-right text-xs font-medium uppercase leading-[36px] text-text-caption'}>
-      {prefix}
-      <span className={'ml-2 text-text-title'}>{cell?.value ?? ''}</span>
+    <div className={'h-full w-full px-1 text-right uppercase leading-[36px] text-text-caption'}>
+      <span className={'text-xs'}>{prefix}</span>
+      <span className={'ml-2 text-sm font-medium text-text-title'}>{num}</span>
     </div>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid/grid-header/GridHeader.tsx b/frontend/appflowy_web_app/src/components/database/components/grid/grid-header/GridHeader.tsx
index 2f269f823a..d08b060d2d 100644
--- a/frontend/appflowy_web_app/src/components/database/components/grid/grid-header/GridHeader.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/grid/grid-header/GridHeader.tsx
@@ -1,3 +1,4 @@
+import { DEFAULT_ROW_HEIGHT } from '@/application/database-yjs';
 import React, { memo, useCallback, useEffect, useRef } from 'react';
 import { areEqual, GridChildComponentProps, VariableSizeGrid } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -53,7 +54,7 @@ export const GridHeader = ({ scrollLeft, onScrollLeft, columnWidth, columns }: G
               className={'grid-sticky-header w-full text-text-title'}
               height={height}
               width={width}
-              rowHeight={() => 36}
+              rowHeight={() => DEFAULT_ROW_HEIGHT}
               rowCount={1}
               columnCount={columns.length}
               columnWidth={(index) => {