From 6d7ecd10fa9c3a50f9b6f07ecab54cfa145cfd99 Mon Sep 17 00:00:00 2001
From: Julian <julian890701@gmail.com>
Date: Fri, 13 Oct 2023 17:22:43 +0800
Subject: [PATCH 1/2] add close spread

---
 .../history_position_modal.tsx                |  2 +-
 src/components/notification/notification.tsx  | 44 -------------------
 .../position_closed_modal.tsx                 |  8 +++-
 .../update_form_modal/update_form_modal.tsx   |  2 +-
 tailwind.config.js                            |  1 -
 5 files changed, 8 insertions(+), 49 deletions(-)

diff --git a/src/components/history_position_modal/history_position_modal.tsx b/src/components/history_position_modal/history_position_modal.tsx
index d526e37be..2802417d6 100644
--- a/src/components/history_position_modal/history_position_modal.tsx
+++ b/src/components/history_position_modal/history_position_modal.tsx
@@ -178,7 +178,7 @@ const HistoryPositionModal = ({
             {/* Info: (20231003 - Julian) Spot Price */}
             {numberFormatted(closedCfdDetails.openSpotPrice)}
             {/* Info: (20231003 - Julian) Spread */}
-            <span className="ml-1 whitespace-nowrap text-3xs text-lightGray">
+            <span className="ml-1 whitespace-nowrap text-xs text-lightGray">
               {openSpreadSymbol}
               {numberFormatted(closedCfdDetails.openSpreadFee)}
             </span>
diff --git a/src/components/notification/notification.tsx b/src/components/notification/notification.tsx
index cee1bfaa3..3788d366c 100644
--- a/src/components/notification/notification.tsx
+++ b/src/components/notification/notification.tsx
@@ -1,6 +1,5 @@
 import {useContext, useState, useEffect} from 'react';
 import NotificationItem from '../notification_item/notification_item';
-import {UserContext} from '../../contexts/user_context';
 import {useGlobal} from '../../contexts/global_context';
 import {NotificationContext} from '../../contexts/notification_context';
 import {NotificationLevel} from '../../constants/notification_level';
@@ -21,7 +20,6 @@ export default function Notification({
   const {t}: {t: TranslateFunction} = useTranslation('common');
   const notificationCtx = useContext(NotificationContext);
   const globalCtx = useGlobal();
-  const {enableServiceTerm} = useContext(UserContext);
 
   const [readAllanim, setReadAllanim] = useState('translate-x-0 opacity-100');
 
@@ -42,20 +40,6 @@ export default function Notification({
     });
   }, []);
 
-  /* Deprecated: Use the title in NavBarMobile instead (20230620 - Shirley) 
-  const hamburgerStyles =
-    'block bg-lightWhite h-3px opacity-100 rounded-12px opacity-100 ease-in duration-300';
-
-  /* Info: (20230327 - Julian) Hamburger Animation */
-  // const displayedMobileNavBarLine1 = !componentVisible
-  //   ? 'translate-y-0 rotate-0'
-  //   : 'translate-y-1.5 origin-left w-3/4 -rotate-35';
-  // const displayedMobileNavBarLine2 = !componentVisible ? 'translate-y-1.5 w-full' : 'w-0';
-  // const displayedMobileNavBarLine3 = !componentVisible
-  //   ? 'translate-y-3 rotate-0'
-  //   : 'translate-y-0 origin-left w-3/4 rotate-35';
-  //   */
-
   let timer: NodeJS.Timeout;
 
   const readAllHandler = () => {
@@ -150,38 +134,10 @@ export default function Notification({
     </>
   ) : null;
 
-  /* Deprecated: Use the title in NavBarMobile instead (20230620 - Shirley) 
-  /* Info: (20230420 - Julian) Cover for Mobile notification drawer
-   * 如果用戶為登入狀態， cover width 改為 7/10 讓頭貼可以被看到 */
-  // const isDisplayedNotificationSidebarMobileCover = (
-  //   <div
-  //     className={`sm:hidden ${enableServiceTerm ? 'w-7/10' : 'w-screen'} ${
-  //       componentVisible ? 'visible opacity-100' : 'invisible opacity-0'
-  //     } fixed z-80 flex h-14 items-center justify-center overflow-x-hidden overflow-y-hidden bg-black/100 px-5 pt-1 outline-none transition-all delay-150 duration-300 hover:cursor-pointer focus:outline-none`}
-  //   >
-  //     <div className="flex basis-full items-end">
-  //       <div className="flex border-r border-lightGray1 lg:hidden">
-  //         <button className="z-50 inline-flex items-center justify-center rounded-md p-2">
-  //           <div className="relative h-20px w-30px cursor-pointer">
-  //             <span className={`${hamburgerStyles} ${displayedMobileNavBarLine1}`}></span>
-  //             <span className={`${hamburgerStyles} ${displayedMobileNavBarLine2}`}></span>
-  //             <span className={`${hamburgerStyles} ${displayedMobileNavBarLine3}`}></span>
-  //           </div>
-  //         </button>
-  //       </div>
-
-  //       <p className="self-center pl-5">{t('NAV_BAR.NOTIFICATION_TITLE')}</p>
-  //     </div>
-  //   </div>
-  // );
-  // */
-
   return (
     <div>
       {/* Info: (20230420 - Julian) Notification Sidebar */}
       {isDisplayedNotificationSidebarCover}
-      {/* Deprecated: Use the title in NavBarMobile instead (20230620 - Shirley) 
-      {isDisplayedNotificationSidebarMobileCover}*/}
       {isDisplayedNotificationSidebarSection}
     </div>
   );
diff --git a/src/components/position_closed_modal/position_closed_modal.tsx b/src/components/position_closed_modal/position_closed_modal.tsx
index d2e74bc08..7f74e24a6 100644
--- a/src/components/position_closed_modal/position_closed_modal.tsx
+++ b/src/components/position_closed_modal/position_closed_modal.tsx
@@ -191,6 +191,8 @@ const PositionClosedModal = ({
     // TODO: replace `twoDecimal` with `toLocaleString` (20230325 - Shirley)
     const openPrice = cfd.openPrice;
     const closePrice = quotation.price;
+    const closeSpotPrice = quotation.spotPrice;
+    const closeSpreadFee = quotation.spreadFee;
     const leverage = marketCtx.tickerStatic?.leverage ?? DEFAULT_LEVERAGE;
 
     const openValue = roundToDecimalPlaces(+SafeMath.mult(openPrice, cfd.amount), 2, true);
@@ -227,6 +229,8 @@ const PositionClosedModal = ({
 
       closeTimestamp: quotation.deadline,
       closePrice: closePrice,
+      closeSpotPrice: closeSpotPrice,
+      closeSpreadFee: closeSpreadFee,
       closedType: CFDClosedType.BY_USER,
       state: OrderState.CLOSED,
     };
@@ -533,7 +537,7 @@ const PositionClosedModal = ({
             {/* Info: (20231003 - Julian) Spot Price */}
             {numberFormatted(openCfdDetails?.openSpotPrice)}
             {/* Info: (20231003 - Julian) Spread */}
-            <span className="ml-1 whitespace-nowrap text-3xs text-lightGray">
+            <span className="ml-1 whitespace-nowrap text-xs text-lightGray">
               {openSpreadSymbol}
               {numberFormatted(openCfdDetails.openSpreadFee)}
             </span>
@@ -562,7 +566,7 @@ const PositionClosedModal = ({
             {/* Info: (20231003 - Julian) Spot Price */}
             {numberFormatted(gQuotationRef.current.spotPrice)}
             {/* Info: (20231003 - Julian) Spread */}
-            <span className="ml-1 whitespace-nowrap text-3xs text-lightGray">
+            <span className="ml-1 whitespace-nowrap text-xs text-lightGray">
               {closeSpreadSymbol}
               {numberFormatted(gQuotationRef.current.spreadFee)}
             </span>
diff --git a/src/components/update_form_modal/update_form_modal.tsx b/src/components/update_form_modal/update_form_modal.tsx
index ac42ce2f1..7944f4005 100644
--- a/src/components/update_form_modal/update_form_modal.tsx
+++ b/src/components/update_form_modal/update_form_modal.tsx
@@ -845,7 +845,7 @@ const UpdateFormModal = ({
             {/* Info: (20231003 - Julian) Spot Price */}
             {numberFormatted(openCfdDetails?.openSpotPrice)}
             {/* Info: (20231003 - Julian) Spread */}
-            <span className="ml-1 whitespace-nowrap text-3xs text-lightGray">
+            <span className="ml-1 whitespace-nowrap text-xs text-lightGray">
               {spreadSymbol}
               {numberFormatted(openCfdDetails?.openSpreadFee)}
             </span>
diff --git a/tailwind.config.js b/tailwind.config.js
index 081db2f2f..995090191 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,6 @@ module.exports = {
       "''": '',
     },
     fontSize: {
-      '3xs': ['8px', '12px'],
       xxs: ['10px', '12px'],
       xs: ['12px', '16px'],
       sm: ['14px', '20px'],

From cb31dcaab566eec47fefd2bd075ca5b8f2c060de Mon Sep 17 00:00:00 2001
From: Julian <julian890701@gmail.com>
Date: Fri, 13 Oct 2023 17:23:30 +0800
Subject: [PATCH 2/2] fix layout

---
 src/components/nav_bar/nav_bar.tsx            | 19 +++----------------
 .../nav_bar_mobile/nav_bar_mobile.tsx         |  3 ++-
 src/components/user/user.tsx                  | 14 +++-----------
 .../user_overview/user_overview.tsx           |  2 +-
 4 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/components/nav_bar/nav_bar.tsx b/src/components/nav_bar/nav_bar.tsx
index 588298803..957c70e33 100644
--- a/src/components/nav_bar/nav_bar.tsx
+++ b/src/components/nav_bar/nav_bar.tsx
@@ -34,9 +34,7 @@ const NavBar = () => {
     setComponentVisible: setNotifyVisible,
   } = useOuterClick<HTMLDivElement>(false);
 
-  const sidebarOpenHandler = () => {
-    setNotifyVisible(!notifyVisible);
-  };
+  const sidebarOpenHandler = () => setNotifyVisible(!notifyVisible);
 
   const isDisplayedUserOverview = userCtx.enableServiceTerm ? (
     <UserOverview
@@ -56,7 +54,7 @@ const NavBar = () => {
   const isDisplayedUnreadNumber =
     notificationCtx.unreadNotifications.length > 0 ? (
       <span className="absolute bottom-4 left-3 z-20 inline-flex h-4 w-4 items-center justify-center rounded-xl bg-tidebitTheme">
-        <p className="text-center text-3xs">{notificationCtx.unreadNotifications.length}</p>
+        <p className="text-center text-xs">{notificationCtx.unreadNotifications.length}</p>
       </span>
     ) : null;
 
@@ -80,17 +78,13 @@ const NavBar = () => {
     if (langIsOpen) {
       setLangIsOpen(false);
     } else if (sidebarOpenRef.current) {
-      // setComponentVisible(false);
       setSidebarOpen(!sidebarOpen);
     } else {
       setNavOpen(!navOpen);
     }
   };
 
-  const sidebarOpenHandlerMobile = () => {
-    setSidebarOpen(!sidebarOpen);
-    // setComponentVisible(!componentVisible);
-  };
+  const sidebarOpenHandlerMobile = () => setSidebarOpen(!sidebarOpen);
 
   const hamburgerStyles = 'opacity-100 block bg-lightWhite h-3px rounded-12px ease-in duration-300';
 
@@ -133,13 +127,6 @@ const NavBar = () => {
     <WalletConnectButton className="px-3 py-2 text-sm" />
   );
 
-  // const isDisplayedUnreadnumber =
-  //   notificationCtx.unreadNotifications.length > 0 ? (
-  //     <span className="absolute right-0 top-0 z-20 inline-flex h-3 w-3 items-center justify-center rounded-xl bg-tidebitTheme">
-  //       <p className="text-center text-3xs">{notificationCtx.unreadNotifications.length}</p>
-  //     </span>
-  //   ) : null;
-
   const desktopLayout = (
     <>
       <div className="w-full text-center lg:text-start">
diff --git a/src/components/nav_bar_mobile/nav_bar_mobile.tsx b/src/components/nav_bar_mobile/nav_bar_mobile.tsx
index 50052eaec..a720e52af 100644
--- a/src/components/nav_bar_mobile/nav_bar_mobile.tsx
+++ b/src/components/nav_bar_mobile/nav_bar_mobile.tsx
@@ -16,6 +16,7 @@ import {useRouter} from 'next/router';
 
 type TranslateFunction = (s: string) => string;
 
+// ToDo: (20231013 - Julian) 修完 Layout Error 再刪掉
 const NavBarMobile = () => {
   const userCtx = useContext(UserContext);
   const notificationCtx = useContext(NotificationContext);
@@ -97,7 +98,7 @@ const NavBarMobile = () => {
   const isDisplayedUnreadnumber =
     notificationCtx.unreadNotifications.length > 0 ? (
       <span className="absolute right-0 top-0 z-20 inline-flex h-3 w-3 items-center justify-center rounded-xl bg-tidebitTheme">
-        <p className="text-center text-3xs">{notificationCtx.unreadNotifications.length}</p>
+        <p className="text-3xs text-center">{notificationCtx.unreadNotifications.length}</p>
       </span>
     ) : null;
 
diff --git a/src/components/user/user.tsx b/src/components/user/user.tsx
index 5489150ca..453170ea2 100644
--- a/src/components/user/user.tsx
+++ b/src/components/user/user.tsx
@@ -32,19 +32,11 @@ const User = () => {
 
   const username = userCtx.user?.address?.slice(-1).toUpperCase();
 
-  const avatarClickHandler = () => {
-    setUserVisible(!userVisible);
-  };
-
+  const avatarClickHandler = () => setUserVisible(!userVisible);
   const avatarMobileClickHandler = () => setAvatarMenuVisible(!avatarMenuVisible);
 
-  const depositClickHandler = () => {
-    globalCtx.visibleDepositModalHandler();
-  };
-
-  const withdrawClickHandler = () => {
-    globalCtx.visibleWithdrawalModalHandler();
-  };
+  const depositClickHandler = () => globalCtx.visibleDepositModalHandler();
+  const withdrawClickHandler = () => globalCtx.visibleWithdrawalModalHandler();
 
   const isDisplayedAvatarMenu = userCtx.user?.address ? (
     <div
diff --git a/src/components/user_overview/user_overview.tsx b/src/components/user_overview/user_overview.tsx
index 7bd885d98..77815beb5 100644
--- a/src/components/user_overview/user_overview.tsx
+++ b/src/components/user_overview/user_overview.tsx
@@ -20,7 +20,7 @@ const UserOverview = ({depositAvailable, marginLocked, profitOrLossAmount}: IUse
 
   return (
     <>
-      <div className="flex space-x-5 lg:space-x-20">
+      <div className="flex space-x-5">
         <div className="flex flex-col items-center lg:items-start">
           <div className="whitespace-nowrap text-sm text-lightGray4">
             {t('USER.OVERVIEW_AVAILABLE')}