Merge pull request #952 from CAFECA-IO/fix/card-notification

Fix/card notification (Mobile switch)
CAFECA-IO · Jul 2, 2023 · 4c98eb3 · 4c98eb3
2 parents e9f41ab + c4c13cd
commit 4c98eb3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+14.4",
+  "version": "0.8.0+15.4",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/crypto_card/crypto_card.tsx b/src/components/crypto_card/crypto_card.tsx
@@ -41,7 +41,7 @@ export interface ICardProps {
   cardClickHandler?: () => void;
 }
 
-/**
+/** Info: (20230628 - Shirley)
  * @dev used when it needs the star functionality
  * @param {boolean} star blank star
  * @param {boolean} starred fill star or not
@@ -70,8 +70,8 @@ const CryptoCard = ({
   const fluctuatingRate = priceRise
     ? `▴ ${fluctuatingAbs.toLocaleString(UNIVERSAL_NUMBER_FORMAT_LOCALE, FRACTION_DIGITS)}%`
     : `▾ ${fluctuatingAbs.toLocaleString(UNIVERSAL_NUMBER_FORMAT_LOCALE, FRACTION_DIGITS)}%`;
-  // TODO: input the data and price color change as props
   const priceColor = priceRise ? `text-lightGreen5` : `text-lightRed`;
+  const strokeColor = priceRise ? [TypeOfPnLColorHex.PROFIT] : [TypeOfPnLColorHex.LOSS];
 
   const globalCtx = useGlobal();
 
@@ -229,7 +229,7 @@ const CryptoCard = ({
 
   return (
     <>
-      {/* -----Desktop (width > 500px) version (Card 200x120)----- */}
+      {/* -----Info: Desktop (width > 500px) version (Card 200x120) (20230628 - Shirley)----- */}
       <div
         className={`${desktopVersionBreakpoint} ${otherProps?.className} relative m-0 hidden h-120px w-200px rounded-2xl border-0.5px p-0 hover:cursor-pointer ${gradientColor} bg-transparent bg-gradient-to-b opacity-90 shadow-lg`}
         onClick={() => {
@@ -238,42 +238,24 @@ const CryptoCard = ({
         }}
       >
         <div className="px-2 py-1">
-          {/* token icon & chain & coin name */}
           <div className="flex items-center">
             <Image src={tokenImg} alt={currency} height={40} width={40} />
 
             <div className="ml-3 items-center">
               <p className="text-lg leading-6 text-lightWhite"> {chain}</p>
               <p className="text-sm text-lightWhite opacity-60">{currency}</p>
             </div>
-            <div
-              className=""
-              // No execution to the below function actually
-              // onClick={() => {
-              //   console.log('start clicked');
-              // }}
-            >
-              {showStar}
-            </div>
+            <div className="">{showStar}</div>
           </div>
 
-          {/* line graph & price & fluctuating rate */}
           <div className="flex flex-col justify-start">
             <div className="pointer-events-none absolute top-4 h-96 bg-transparent">
               {lineGraph({
                 dataArray: lineGraphProps?.dataArray || sampleArray,
-                strokeColor: lineGraphProps?.strokeColor || thisRandomColor,
+                strokeColor: strokeColor || lineGraphProps?.strokeColor || thisRandomColor,
                 lineGraphWidth: lineGraphProps?.lineGraphWidth || '170',
               })}
-              {/* <LineGraph
-                sampleArray={sampleArray}
-                strokeColor={thisRandomColor}
-                lineGraphWidth="170"
-              /> */}
-
-              {/* <div className="absolute top-0 left-0 h-2 w-2/3 rounded bg-blue-200"></div> */}
             </div>
-            {/**@note no default text color, otherwise it will make actual text color not work */}
             <div className="absolute bottom-0 flex w-200px justify-between">
               <span
                 className={`flex items-center justify-between text-sm ${priceColor} mt-3 align-middle`}
@@ -288,7 +270,7 @@ const CryptoCard = ({
         </div>
       </div>
 
-      {/* -----Mobile (width < 500px) version (Card 134x81)----- */}
+      {/* -----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-black bg-gradient-to-b opacity-90 shadow-lg`}
         onClick={() => {
@@ -297,7 +279,6 @@ const CryptoCard = ({
         }}
       >
         <div className="px-2 py-1">
-          {/* token icon & chain & coin name */}
           <div className="mb-1 flex items-center">
             <Image src={tokenImg} alt={currency} width={28} height={28} />
 
@@ -308,22 +289,14 @@ const CryptoCard = ({
             <div className="">{showStarMobile}</div>
           </div>
 
-          {/* line graph & price & fluctuating rate */}
           <div className="flex flex-col justify-start">
             <div className="pointer-events-none absolute right-0 top-1 bg-transparent">
-              {/* <div className="absolute top-0 left-0 h-2 w-2/3 rounded bg-blue-200"></div> */}
               {lineGraph({
                 dataArray: lineGraphProps?.dataArray || sampleArray,
-                strokeColor: lineGraphProps?.strokeColor || thisRandomColor,
+                strokeColor: strokeColor || lineGraphProps?.strokeColor || thisRandomColor,
                 lineGraphWidth: lineGraphProps?.lineGraphWidthMobile || '140',
               })}
-              {/* <LineGraph
-                sampleArray={sampleArray}
-                strokeColor={thisRandomColor}
-                lineGraphWidth="140"
-              /> */}
             </div>
-            {/**@note no default text color, otherwise it will make actual text color not work */}
             <div className="absolute bottom-0 flex w-134px justify-between">
               <span
                 className={`flex items-center justify-between text-xs ${priceColor} mt-3 align-middle`}

diff --git a/src/components/cta/cta.tsx b/src/components/cta/cta.tsx
@@ -15,7 +15,7 @@ const Cta = () => {
 
   return (
     <>
-      {/* Desktop version (width >= 1024 px) */}
+      {/* Info: Desktop version (width >= 1024 px) (20230628 - Shirley) */}
       <section className="relative hidden w-screen pl-50px lg:flex">
         <Image
           width={2409}
@@ -64,8 +64,8 @@ const Cta = () => {
         </div>
       </section>
 
-      {/* Mobile version (width < 1024 px) */}
-      <div className="w-full">
+      {/* Info: Mobile version (width < 1024 px) (20230628 - Shirley) */}
+      <div className="w-full lg:hidden">
         <div className="mb-10 flex justify-center">
           <Image src="/elements/nav_logo.svg" height={50} width={150} alt="TideBit_logo" />
         </div>

diff --git a/src/components/nav_bar/nav_bar.tsx b/src/components/nav_bar/nav_bar.tsx
@@ -60,7 +60,7 @@ const NavBar = () => {
   return (
     <>
       <div className="w-full text-center lg:text-start">
-        <nav className="container fixed inset-x-0 z-40 mx-auto max-w-full bg-black/100 pb-1 text-white">
+        <nav className="container fixed inset-x-0 z-90 mx-auto max-w-full bg-black/100 pb-1 text-white">
           <div className="mx-auto max-w-full px-5">
             <div className="flex h-16 items-center justify-between bg-black">
               <div className="flex items-center">

diff --git a/src/components/trading_chart_switch_mobile/trading_chart_switch_mobile.tsx b/src/components/trading_chart_switch_mobile/trading_chart_switch_mobile.tsx
@@ -79,44 +79,45 @@ const TradingChartSwitchMobile = ({
   const fiveMinButtonClickHandler = () => {
     setActiveButton('5m');
     getTradingViewInterval('5m');
-    selectTimeSpanHandler(TimeSpanUnion._10s);
+    selectTimeSpanHandler(TimeSpanUnion._5m);
   };
 
   const fifteenMinButtonClickHandler = () => {
     setActiveButton('15m');
     getTradingViewInterval('15m');
-    selectTimeSpanHandler(TimeSpanUnion._30s);
+    selectTimeSpanHandler(TimeSpanUnion._15m);
   };
 
   const thirtyMinButtonClickHandler = () => {
     setActiveButton('30m');
     getTradingViewInterval('30m');
-    selectTimeSpanHandler(TimeSpanUnion._1m);
+    selectTimeSpanHandler(TimeSpanUnion._30m);
   };
 
   const oneHrButtonClickHandler = () => {
     setActiveButton('1h');
     getTradingViewInterval('1h');
-    selectTimeSpanHandler(TimeSpanUnion._2m);
+    selectTimeSpanHandler(TimeSpanUnion._1h);
   };
 
   const fourHrButtonClickHandler = () => {
     setActiveButton('4h');
     getTradingViewInterval('4h');
-    selectTimeSpanHandler(TimeSpanUnion._8m);
+    selectTimeSpanHandler(TimeSpanUnion._4h);
   };
 
   const twelveHrButtonClickHandler = () => {
     setActiveButton('12h');
     getTradingViewInterval('12h');
-    selectTimeSpanHandler(TimeSpanUnion._24m);
+    selectTimeSpanHandler(TimeSpanUnion._12h);
   };
 
   const oneDayButtonClickHandler = () => {
     setActiveButton('1d');
     getTradingViewInterval('1d');
-    selectTimeSpanHandler(TimeSpanUnion._48m);
+    selectTimeSpanHandler(TimeSpanUnion._1d);
   };
+
   const stickSwitchButton = (
     <div>
       <button
@@ -189,10 +190,7 @@ const TradingChartSwitchMobile = ({
   return (
     <>
       <div className="flex w-full items-center justify-between space-x-1 md:space-x-5">
-        {/* Switch chart types */}
         <div className="flex space-x-2">{stickSwitchButton}</div>
-
-        {/* Diplaying position info toggle */}
         <div className="hidden items-center space-x-5 md:flex">
           <p className="text-lightGray">Positions</p>
           <div className="pt-1">
@@ -203,8 +201,6 @@ const TradingChartSwitchMobile = ({
             />
           </div>
         </div>
-
-        {/* Switch time interval */}
         <div className="flex w-full justify-between whitespace-nowrap rounded-sm bg-darkGray6 py-2 px-2">
           <button type="button" className={`${liveButtonStyle}`} onClick={liveButtonClickHandler}>
             Live