From a892a231fe433d3a9722d3ef4c5ded035fcf469d Mon Sep 17 00:00:00 2001
From: arealclimber <luffulgence@gmail.com>
Date: Tue, 22 Aug 2023 15:55:53 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=F0=9F=90=9B=20pnl=20approximately-e?=
 =?UTF-8?q?qual-to=20symbol=20#1146=20rm=20input=20radius?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #1143 #1146
---
 package.json                                      |  2 +-
 .../open_position_item/open_position_item.tsx     |  4 +++-
 .../position_closed_modal.tsx                     | 15 +++++++++------
 src/components/trading_input/trading_input.tsx    |  5 +----
 .../update_form_modal/update_form_modal.tsx       |  2 ++
 src/lib/common.ts                                 | 11 +++++++----
 6 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index cf0533191..074cf7fd1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+39.3",
+  "version": "0.8.0+41.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/open_position_item/open_position_item.tsx b/src/components/open_position_item/open_position_item.tsx
index 3ee92369d..2a8231abc 100644
--- a/src/components/open_position_item/open_position_item.tsx
+++ b/src/components/open_position_item/open_position_item.tsx
@@ -247,12 +247,14 @@ const OpenPositionItem = ({openCfdDetails}: IOpenPositionItemProps) => {
   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
index f2034a12e..3be6992cb 100644
--- 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/trading_input/trading_input.tsx b/src/components/trading_input/trading_input.tsx
index ddd955c2a..c78cb6788 100644
--- 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
index 6f7855bd5..61ef21df3 100644
--- 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
diff --git a/src/lib/common.ts b/src/lib/common.ts
index 7ae6a6b17..dbccd92e8 100644
--- a/src/lib/common.ts
+++ b/src/lib/common.ts
@@ -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 => {

From f5f3edf7e54637f56e41d0950d18aff9c4a1fb91 Mon Sep 17 00:00:00 2001
From: arealclimber <luffulgence@gmail.com>
Date: Tue, 22 Aug 2023 16:00:37 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=F0=9F=90=9B=20version=20number=20on?=
 =?UTF-8?q?=20home=20page=20#1144?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json               | 2 +-
 src/components/cta/cta.tsx | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 074cf7fd1..30e989f09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+41.1",
+  "version": "0.8.0+41.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/cta/cta.tsx b/src/components/cta/cta.tsx
index 6c6e23b56..9e609dacc 100644
--- 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">

From a60872eeab2180ec19a31e2f970a260cce6a7299 Mon Sep 17 00:00:00 2001
From: arealclimber <luffulgence@gmail.com>
Date: Wed, 23 Aug 2023 10:39:28 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=F0=9F=90=9B=20font=20&=20bar=20colo?=
 =?UTF-8?q?r=20of=20circle=20bar=20on=20UpdateFormModal=20#1142?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                             | 2 +-
 src/components/open_position_item/open_position_item.tsx | 5 ++++-
 src/components/update_form_modal/update_form_modal.tsx   | 8 +++++---
 src/constants/display.ts                                 | 1 +
 src/lib/common.ts                                        | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 30e989f09..8d50eb108 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+41.2",
+  "version": "0.8.0+41.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/open_position_item/open_position_item.tsx b/src/components/open_position_item/open_position_item.tsx
index 2a8231abc..2ae1c3ccf 100644
--- a/src/components/open_position_item/open_position_item.tsx
+++ b/src/components/open_position_item/open_position_item.tsx
@@ -243,7 +243,10 @@ 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';
 
diff --git a/src/components/update_form_modal/update_form_modal.tsx b/src/components/update_form_modal/update_form_modal.tsx
index 61ef21df3..465f1101f 100644
--- a/src/components/update_form_modal/update_form_modal.tsx
+++ b/src/components/update_form_modal/update_form_modal.tsx
@@ -234,7 +234,7 @@ const UpdateFormModal = ({
       : openCfdDetails?.pnl?.value < 0
       ? TypeOfBorderColor.LOSS
       : TypeOfBorderColor.EQUAL
-    : TypeOfPnLColor.EQUAL;
+    : TypeOfBorderColor.EQUAL;
 
   const displayedColorHex = !!openCfdDetails?.pnl?.value
     ? openCfdDetails?.pnl?.value > 0
@@ -242,12 +242,14 @@ const UpdateFormModal = ({
       : 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
index e1d56bd12..757f8574f 100644
--- 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
index dbccd92e8..069aabc92 100644
--- 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) {

From 8e197c50b0ce8a4031266f8d919dab7a549a05de Mon Sep 17 00:00:00 2001
From: arealclimber <luffulgence@gmail.com>
Date: Wed, 23 Aug 2023 12:40:48 +0800
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=F0=9F=90=9B=20news=20page=20mobile?=
 =?UTF-8?q?=20layout=20#1130?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/components/footer/footer.tsx              |  4 ++--
 .../hero_description/hero_description.tsx     |  5 -----
 src/components/news_article/news_article.tsx  | 19 +++++++++++--------
 src/components/news_item/news_item.tsx        |  2 +-
 src/components/news_section/news_section.tsx  | 11 +----------
 src/pages/index.tsx                           |  3 +++
 src/pages/news/[newsId].tsx                   | 10 +++++++---
 tailwind.config.js                            |  3 +++
 9 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 8d50eb108..e517ef86f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+41.3",
+  "version": "0.8.0+41.4",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 3d96155c5..3bd34c8d9 100644
--- 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
index 365f5e801..b0a22cb21 100644
--- 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
index c63315a5b..a429d6014 100644
--- a/src/components/news_article/news_article.tsx
+++ b/src/components/news_article/news_article.tsx
@@ -57,7 +57,7 @@ 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} />
@@ -65,17 +65,20 @@ const NewsArticle = ({shareId, img, post, recommendations}: INewsArticle) => {
       </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
index 6d12bc660..899e48c72 100644
--- 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
index 212b90853..a783f8161 100644
--- 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/pages/index.tsx b/src/pages/index.tsx
index fe089bc64..a0427a03c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -8,6 +8,7 @@ import {AppContext} from '../contexts/app_context';
 import {ILocale} from '../interfaces/tidebit_defi_background/locale';
 import {TIDEBIT_FAVICON} from '../constants/display';
 import {LayoutAssertion} from '../constants/layout_assertion';
+import Footer from '../components/footer/footer';
 
 const Home = () => {
   const {layoutAssertion} = useGlobal();
@@ -32,6 +33,8 @@ const Home = () => {
       <main>
         <HeroDescription />
       </main>
+
+      <Footer />
     </>
   ) : (
     <div>Loading...</div>
diff --git a/src/pages/news/[newsId].tsx b/src/pages/news/[newsId].tsx
index 585295839..1f0a1a32b 100644
--- a/src/pages/news/[newsId].tsx
+++ b/src/pages/news/[newsId].tsx
@@ -82,8 +82,8 @@ const NewsPage = (props: IPageProps) => {
       {appCtx.isInit ? (
         <>
           <nav className="">{displayedNavBar}</nav>
-          <main className="">
-            <div>
+          <main className="w-full">
+            <div className="w-full">
               <NewsArticle
                 post={props.newsData}
                 shareId={props.newsId}
@@ -91,8 +91,12 @@ const NewsPage = (props: IPageProps) => {
                 recommendations={props.brief}
               />
             </div>
-            <Footer />
           </main>
+
+          <div className="w-full mx-0">
+            {' '}
+            <Footer />
+          </div>
         </>
       ) : (
         <div>Loading...</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 982cb2d15..2401ed173 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -230,6 +230,7 @@ module.exports = {
         '700px': '700px',
         '726px': '726px',
         '768px': '768px',
+        '900px': '900px',
         '1000px': '1000px',
         '1200px': '1200px',
         '1500px': '1500px',
@@ -281,6 +282,8 @@ module.exports = {
         '80vw': '80vw',
         '85vw': '85vw',
         '90vw': '90vw',
+        '95vw': '95vw',
+        '100vw': '100vw',
       },
       margin: {
         '8px': '8px',

From 8943c06060194f9d561a49f7bf219b9e32b078e7 Mon Sep 17 00:00:00 2001
From: arealclimber <luffulgence@gmail.com>
Date: Wed, 23 Aug 2023 13:08:18 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=F0=9F=90=9B=20tickerSelectorBox=20t?=
 =?UTF-8?q?ab,=20CryptoCard=20UI=20#1120=20#1148=20#1149?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/components/crypto_card/crypto_card.tsx    |  2 +-
 .../ticker_selector_box.tsx                   | 60 ++++++++++++++++++-
 tailwind.config.js                            |  1 +
 4 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e517ef86f..5fb2da88d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+41.4",
+  "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
index a26550cfb..c7daf468b 100644
--- 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/ticker_selector_box/ticker_selector_box.tsx b/src/components/ticker_selector_box/ticker_selector_box.tsx
index 569c94657..107515e8b 100644
--- 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/tailwind.config.js b/tailwind.config.js
index 2401ed173..12a9ec9de 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -328,6 +328,7 @@ module.exports = {
         '3/5': '60%',
       },
       borderRadius: {
+        '10px': '10px',
         '12px': '12px',
       },
       rotate: {