fix: 🐛 tickerSelectorBox tab, CryptoCard UI #1120 #1148 #1149

CAFECA-IO · Aug 23, 2023 · 8943c06 · 8943c06
1 parent 8e197c5
commit 8943c06
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -328,6 +328,7 @@ module.exports = {
         '3/5': '60%',
       },
       borderRadius: {
+        '10px': '10px',
         '12px': '12px',
       },
       rotate: {