fix: to 16px (#5790)

* fix: to 16px

* fix: to 16px

* fix: to 14px

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 />

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'}>
+    <div className={'h-full w-full px-1 text-right uppercase leading-[36px] text-text-caption'}>
-      {prefix}
+      <span className={'text-xs'}>{prefix}</span>
-      <span className={'ml-2 text-text-title'}>{cell?.value ?? ''}</span>
+      <span className={'ml-2 text-sm font-medium text-text-title'}>{num}</span>
     </div>
   );
 }

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) => {