Merge pull request #1147 from CAFECA-IO/fix/layout-0822

Fix/layout 0822
CAFECA-IO · Aug 31, 2023 · c6b94d0 · c6b94d0
2 parents 5da7577 + aebd0e2
commit c6b94d0
Show file tree

Hide file tree

Showing 18 changed files with 123 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+40.1",
+  "version": "0.8.0+41.5",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/crypto_card/crypto_card.tsx b/src/components/crypto_card/crypto_card.tsx
@@ -279,7 +279,7 @@ const CryptoCard = ({
 
       {/* -----Info: Mobile (width < 500px) version (Card 134x81) (20230628 - Shirley)----- */}
       <div
-        className={`${mobileVersionBreakpoint} ${otherProps?.className} relative m-0 h-81px w-134px rounded-2xl border-0.5px p-0 ${gradientColor} bg-transparent bg-gradient-to-b opacity-90 shadow-lg`}
+        className={`${mobileVersionBreakpoint} ${otherProps?.className} relative m-0 h-81px w-134px rounded-10px border-0.5px p-0 ${gradientColor} bg-transparent bg-gradient-to-b opacity-90 shadow-lg`}
         onClick={() => {
           onTheSamePage && marketCtx.selectTickerHandler(instId);
           cardClickHandler && cardClickHandler();

diff --git a/src/components/cta/cta.tsx b/src/components/cta/cta.tsx
@@ -66,12 +66,10 @@ const Cta = () => {
 
       {/* Info: Mobile version (width < 1024 px) (20230628 - Shirley) */}
       <div className="w-full lg:hidden">
-        <div className="mb-10 flex justify-center">
+        <div className="mb-20 flex flex-col justify-center items-center">
           <Image src="/elements/nav_logo.svg" height={50} width={150} alt="TideBit_logo" />
+          <p className="-mt-2 ml-90px text-center text-xs text-lightGray">v {version}</p>
         </div>
-        <p className="-mt-20 mb-20 flex justify-end pr-1/11 text-end text-xs text-lightGray">
-          v {version}
-        </p>
       </div>
 
       <section className="mb-1/10 flex flex-col items-center justify-center lg:hidden">

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -176,8 +176,8 @@ const Footer = () => {
       </div>
 
       {/* Info: (20230328 - Julian) Mobile */}
-      <div className={`${mobileVersionBreakpoint}`}>
-        <footer className="mx-auto w-screen justify-center bg-darkGray text-base">
+      <div className={`${mobileVersionBreakpoint} w-full`}>
+        <footer className="mx-0 lg:mx-auto w-full justify-center bg-darkGray text-base">
           <div className="flex flex-col flex-wrap px-1/10 pb-10 pt-10 md:flex-row md:flex-nowrap md:items-center lg:items-start">
             {/* Info: (20230328 - Julian) LOGO & Social media */}
             <div className="mx-auto w-full shrink-0 text-center">

diff --git a/src/components/hero_description/hero_description.tsx b/src/components/hero_description/hero_description.tsx
@@ -120,11 +120,6 @@ export default function HeroDescription() {
           <AppDowloadContainer />
         </div>
       </div>
-
-      {/* Footer */}
-      <div className="">
-        <Footer />
-      </div>
     </div>
   );
 }
diff --git a/src/components/news_article/news_article.tsx b/src/components/news_article/news_article.tsx
@@ -57,25 +57,28 @@ const NewsArticle = ({shareId, img, post, recommendations}: INewsArticle) => {
     );
 
   return (
-    <div className="bg-gradient-to-r from-darkGray1/80 via-black to-black pb-20">
+    <div className="w-full flex flex-col bg-gradient-to-r from-darkGray1/80 via-black to-black pb-20">
       <div className="ml-5 h-10 w-6 pt-24 pb-14 transition-all duration-200 hover:opacity-70 lg:hidden">
         <Link href="/news">
           <BiArrowBack size={25} />
         </Link>{' '}
       </div>
 
       <div className="flex w-full justify-center lg:pt-36">
-        <div className="hidden h-10 w-6 transition-all duration-200 hover:opacity-70 lg:-ml-10 lg:mr-20 lg:flex">
+        <div className="hidden h-10 w-6 transition-all duration-200 hover:opacity-70 -ml-0 mr-0 lg:-ml-10 lg:mr-20 lg:flex">
           <Link href="/news">
             <BiArrowBack size={25} />
           </Link>
         </div>
-        <div className="w-full px-5 md:w-90vw lg:w-80vw xl:w-70vw">
+
+        <div className="px-1 w-90vw md:w-80vw lg:w-70vw">
           <Image
             src={img}
-            style={{objectFit: 'cover'}}
-            width={NEWS_IMG_WIDTH}
-            height={NEWS_IMG_HEIGHT}
+            // fill={true}
+            style={{width: '100%', height: 'auto'}}
+            sizes="80vw"
+            width={0}
+            height={0}
             alt="image"
           />
           <div className="my-8 flex justify-between">
@@ -84,7 +87,7 @@ const NewsArticle = ({shareId, img, post, recommendations}: INewsArticle) => {
             <p className="mt-2 text-xs text-lightGray lg:text-sm">{displayedDate}</p>
           </div>
 
-          <div className="prose mt-5 max-w-none leading-10 tracking-normal">
+          <div className="prose mt-5 leading-10 tracking-normal text-ellipsis overflow-hidden">
             <article dangerouslySetInnerHTML={{__html: parsedBody}} />
           </div>
 
@@ -108,7 +111,7 @@ const NewsArticle = ({shareId, img, post, recommendations}: INewsArticle) => {
       </div>
       {recommendations && recommendations?.length > 0 ? (
         <>
-          <div className="mx-10 border-b border-dashed border-white/50"></div>
+          <div className="lg:mx-10 border-b border-dashed border-white/50"></div>
 
           <div className="md:mx-20">
             <div className="mx-5 my-10 text-base text-lightGray md:mx-0">

diff --git a/src/components/news_item/news_item.tsx b/src/components/news_item/news_item.tsx
@@ -13,7 +13,7 @@ const NewsItem = ({
   img,
   ...otherProps
 }: IRecommendedNews) => {
-  const overallWidth = 'mx-20';
+  const overallWidth = 'mx-10 lg:mx-20';
 
   const displayedHeading = <div className="">{title}</div>;
 

diff --git a/src/components/news_section/news_section.tsx b/src/components/news_section/news_section.tsx
@@ -1,15 +1,6 @@
 import React, {useContext} from 'react';
-import CryptoNewsItem from '../crypto_news_item/crypto_news_item';
-import {MarketContext} from '../../contexts/market_context';
-import {dummyTickerStatic} from '../../interfaces/tidebit_defi_background/ticker_static';
 import NewsItem from '../news_item/news_item';
-import Link from 'next/link';
-import Pagination from '../pagination/pagination';
-import {
-  IRecommendedNews,
-  getDummyRecommendationNews,
-} from '../../interfaces/tidebit_defi_background/news';
-import {Currency} from '../../constants/currency';
+import {IRecommendedNews} from '../../interfaces/tidebit_defi_background/news';
 import {ITEMS_PER_PAGE} from '../../constants/display';
 
 const NewsSection = ({

diff --git a/src/components/open_position_item/open_position_item.tsx b/src/components/open_position_item/open_position_item.tsx
@@ -243,16 +243,21 @@ const OpenPositionItem = ({openCfdDetails}: IOpenPositionItemProps) => {
   const displayedCrossColor =
     pnl?.value > 0
       ? 'hover:before:bg-lightGreen5 hover:after:bg-lightGreen5'
-      : 'hover:before:bg-lightRed hover:after:bg-lightRed';
+      : pnl?.value < 0
+      ? 'hover:before:bg-lightRed hover:after:bg-lightRed'
+      : 'hover:before:bg-lightWhite hover:after:bg-lightWhite';
+
   const displayedCrossStyle =
     'before:absolute before:left-1 before:top-10px before:z-40 before:block before:h-1 before:w-5 before:rotate-45 before:rounded-md after:absolute after:left-1 after:top-10px after:z-40 after:block after:h-1 after:w-5 after:-rotate-45 after:rounded-md';
 
-  const displayedPnLSymbol = !!!marketCtx.selectedTicker?.price
+  const displayedPnLSymbol = !marketCtx.selectedTicker?.price
     ? ''
     : pnl?.value > 0
     ? '+'
     : pnl?.value < 0
     ? '-'
+    : openPrice !== closePrice && Math.abs(pnl?.value ?? 0) === 0
+    ? '≈'
     : '';
 
   const displayedPnLValue = !!!marketCtx.selectedTicker?.price

diff --git a/src/components/position_closed_modal/position_closed_modal.tsx b/src/components/position_closed_modal/position_closed_modal.tsx
@@ -55,6 +55,7 @@ import {ToastTypeAndText} from '../../constants/toast_type';
 import {ToastId} from '../../constants/toast_id';
 import {CustomError, isCustomError} from '../../lib/custom_error';
 import SafeMath from '../../lib/safe_math';
+import {open} from 'fs/promises';
 
 type TranslateFunction = (s: string) => string;
 interface IPositionClosedModal {
@@ -103,12 +104,17 @@ const PositionClosedModal = ({
 
   const displayedGuaranteedStopSetting = !!openCfdDetails?.guaranteedStop ? 'Yes' : 'No';
 
-  const displayedPnLSymbol = !!openCfdDetails.pnl
-    ? openCfdDetails?.pnl?.value > 0
+  const displayedPnLSymbol = !!openCfdDetails.pnl?.value
+    ? (openCfdDetails.pnl as IPnL).value > 0
       ? '+'
-      : openCfdDetails?.pnl?.value < 0
+      : (openCfdDetails.pnl as IPnL).value < 0
       ? '-'
       : ''
+    : openCfdDetails.pnl !== undefined && Math.abs((openCfdDetails.pnl as IPnL).value) === 0
+    ? openCfdDetails.openPrice !== openCfdDetails.closePrice ||
+      openCfdDetails.openPrice !== gQuotationRef.current.price
+      ? '≈'
+      : ''
     : '';
 
   const displayedPnLValue = !!marketCtx.selectedTicker?.price
@@ -346,9 +352,6 @@ const PositionClosedModal = ({
         await wait(DELAYED_HIDDEN_SECONDS);
         globalCtx.eliminateAllModals();
 
-        // Deprecated: (20230802 - Shirley)
-        // eslint-disable-next-line no-console
-        console.log('history right after closing', historyData);
         globalCtx.dataHistoryPositionModalHandler(historyData);
         globalCtx.visibleHistoryPositionModalHandler();
       } else if (

diff --git a/src/components/ticker_selector_box/ticker_selector_box.tsx b/src/components/ticker_selector_box/ticker_selector_box.tsx
@@ -88,6 +88,7 @@ const TickerSelectorBox = ({
   const [filteredCards, setFilteredCards] = useState<ICryptoCardData[]>([]);
 
   const [availableTickers, setAvailableTickers] = useState(marketCtx.listAvailableTickers());
+  const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
     setAvailableTickers(marketCtx.listAvailableTickers());
@@ -225,6 +226,13 @@ const TickerSelectorBox = ({
 
   const displayedCryptoCards = activeTab === 'All' ? displayedAllCryptoCards : displayedFavorites;
 
+  const dropdownMenuClickHandler = () => setMenuOpen(!menuOpen);
+
+  const dropdownMenuText =
+    activeTab === 'All'
+      ? t('TRADE_PAGE.TICKER_SELECTOR_TAB_ALL')
+      : t('TRADE_PAGE.TICKER_SELECTOR_TAB_FAVORITE');
+
   const tabPart = (
     <>
       <div className="z-10 hidden w-90vw max-w-1200px flex-wrap border-gray-200 text-center text-sm font-medium text-gray-400 lg:flex">
@@ -256,6 +264,52 @@ const TickerSelectorBox = ({
     </>
   );
 
+  const tabPartMobile = (
+    <>
+      <div
+        onClick={dropdownMenuClickHandler}
+        className="mt-10 flex h-48px flex-col rounded-lg bg-darkGray8 text-base font-medium text-lightWhite"
+      >
+        <button className="flex w-full items-center justify-between px-5 py-3 text-left">
+          {dropdownMenuText}
+
+          <div
+            className={`h-10px w-10px border-b-2 border-r-2 border-lightWhite transition-all duration-200 ${
+              menuOpen ? '-rotate-45' : 'rotate-45'
+            }`}
+          ></div>
+        </button>
+
+        <div
+          className={`z-60 flex w-full flex-col bg-darkGray8 shadow-lg shadow-black/30 transition-all duration-200 ${
+            menuOpen ? 'overflow-visible opacity-100' : 'overflow-hidden opacity-0'
+          }`}
+        >
+          <button
+            type="button"
+            className={`inline-block px-5 py-3 text-left hover:cursor-pointer`}
+            onClick={allTabClickHandler}
+          >
+            {t('TRADE_PAGE.TICKER_SELECTOR_TAB_ALL')}
+          </button>
+
+          {userCtx.enableServiceTerm ? (
+            <button
+              type="button"
+              onClick={favoriteTabClickHandler}
+              className={`inline-block px-5 py-3 text-left hover:cursor-pointer`}
+            >
+              {t('TRADE_PAGE.TICKER_SELECTOR_TAB_FAVORITE')}
+            </button>
+          ) : (
+            <></>
+          )}
+          {/* Info: (20230427 - Julian) Other tabs */}
+        </div>
+      </div>
+    </>
+  );
+
   const isDisplayedTickerSelectorBox = tickerSelectorBoxVisible ? (
     <>
       <div className="fixed inset-0 z-80 hidden items-center justify-center overflow-x-auto overflow-y-auto outline-none backdrop-blur-sm focus:outline-none lg:flex">
@@ -335,7 +389,7 @@ const TickerSelectorBox = ({
             {/* Info: (20230427 - Julian) ----- body ----- */}
 
             {/* Info: (20230427 - Julian) tab section */}
-            <div className="w-full">{tabPart}</div>
+            <div className="w-full">{tabPartMobile}</div>
 
             <div className="relative mt-10 flex w-full">
               <input
@@ -355,8 +409,8 @@ const TickerSelectorBox = ({
             </div>
 
             {/* Info: (20230427 - Julian) Card section */}
-            <div className="mt-10 flex h-7/10 flex-auto flex-col items-center justify-start sm:h-3/4">
-              <div className="mb-5 mr-4 grid h-full auto-rows-min grid-cols-2 space-y-4 space-x-4 overflow-y-auto overflow-x-hidden md:grid-cols-3">
+            <div className="mt-10 flex h-7/10 flex-auto flex-col items-center justify-center md:justify-start sm:h-3/4">
+              <div className="mb-5 mr-2 grid h-full auto-rows-min grid-cols-2 space-y-4 space-x-2 md:space-x-4 overflow-y-auto overflow-x-hidden md:grid-cols-3">
                 {displayedCryptoCards}
               </div>
             </div>

diff --git a/src/components/trading_input/trading_input.tsx b/src/components/trading_input/trading_input.tsx
@@ -207,9 +207,7 @@ const TradingInput = ({
   return (
     <>
       {' '}
-      {/* ---margin input area--- */}
       <div className="flex items-center justify-center">
-        {/* '-.svg' symbol */}
         <button type="button" onClick={decrementClickHandler}>
           <svg
             id="Group_15147"
@@ -241,7 +239,7 @@ const TradingInput = ({
         <div className="">
           <input
             type="number"
-            className={`${inputSize} bg-darkGray8 text-center text-lightWhite outline-none ring-transparent`}
+            className={`${inputSize} rounded-none bg-darkGray8 text-center text-lightWhite outline-none ring-transparent`}
             disabled={
               disabledStateRef.current ||
               (Number(inputValueRef.current) === upperLimit &&
@@ -256,7 +254,6 @@ const TradingInput = ({
           />
         </div>
 
-        {/* '+.svg' symbol */}
         <button type="button" onClick={incrementClickHandler} className="">
           <svg
             id="Group_15149"

diff --git a/src/components/update_form_modal/update_form_modal.tsx b/src/components/update_form_modal/update_form_modal.tsx
@@ -200,6 +200,8 @@ const UpdateFormModal = ({
       ? '+'
       : !!openCfdDetails?.pnl?.value && openCfdDetails?.pnl?.value < 0
       ? '-'
+      : openCfdDetails?.pnl?.value !== undefined && Math.abs(openCfdDetails?.pnl?.value) === 0
+      ? '≈'
       : '';
 
   const displayedPnLValue = !!marketCtx.selectedTicker?.price
@@ -232,20 +234,22 @@ const UpdateFormModal = ({
       : openCfdDetails?.pnl?.value < 0
       ? TypeOfBorderColor.LOSS
       : TypeOfBorderColor.EQUAL
-    : TypeOfPnLColor.EQUAL;
+    : TypeOfBorderColor.EQUAL;
 
   const displayedColorHex = !!openCfdDetails?.pnl?.value
     ? openCfdDetails?.pnl?.value > 0
       ? TypeOfPnLColorHex.PROFIT
       : openCfdDetails?.pnl?.value < 0
       ? TypeOfPnLColorHex.LOSS
       : TypeOfPnLColorHex.EQUAL
-    : TypeOfPnLColor.EQUAL;
+    : TypeOfPnLColorHex.EQUAL;
 
   const displayedCrossColor =
     !!openCfdDetails?.pnl && openCfdDetails?.pnl?.value > 0
       ? 'hover:before:bg-lightGreen5 hover:after:bg-lightGreen5'
-      : 'hover:before:bg-lightRed hover:after:bg-lightRed';
+      : !!openCfdDetails?.pnl && openCfdDetails?.pnl?.value < 0
+      ? 'hover:before:bg-lightRed hover:after:bg-lightRed'
+      : 'hover:before:bg-lightWhite hover:after:bg-lightWhite';
 
   const displayedCrossStyle =
     'before:absolute before:top-12px before:z-40 before:block before:h-1 before:w-7 before:rotate-45 before:rounded-md after:absolute after:top-12px after:z-40 after:block after:h-1 after:w-7 after:-rotate-45 after:rounded-md';

diff --git a/src/constants/display.ts b/src/constants/display.ts
@@ -204,6 +204,7 @@ export const TypeOfPnLColorHex = {
 export const TypeOfPnLColor = {
   PROFIT: 'text-lightGreen5',
   LOSS: 'text-lightRed',
+  // EQUAL: 'text-lightGreen5',
   EQUAL: 'text-lightWhite',
 };
 

diff --git a/src/lib/common.ts b/src/lib/common.ts
@@ -40,7 +40,7 @@ interface IValidateInput {
 }
 
 export const roundToDecimalPlaces = (number: number, decimal: number): number => {
-  return Math.ceil((number + Number.EPSILON) * Math.pow(10, decimal)) / Math.pow(10, decimal);
+  return Math.floor((number + Number.EPSILON) * Math.pow(10, decimal)) / Math.pow(10, decimal);
 };
 
 export function randomIntFromInterval(min: number, max: number) {
@@ -624,10 +624,13 @@ export const getEstimatedPnL = (
 };
 
 export const swapKeysAndValues = (obj: Record<string, string>): Record<string, string> => {
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    acc[value] = key;
-    return acc;
-  }, {} as Record<string, string>);
+  return Object.entries(obj).reduce(
+    (acc, [key, value]) => {
+      acc[value] = key;
+      return acc;
+    },
+    {} as Record<string, string>
+  );
 };
 
 export const findCodeByReason = (reason: string): ICode | undefined => {