refactor: all coings page styles

Author: sujatagunale

app/coins/page.tsx

@@ -29,44 +29,40 @@ const Coins = async ({
   const columns = [
     {
       header: 'Rank',
-      cellClassName: 'coins-rank',
+      cellClassName: 'rank-cell',
       cell: (coin: CoinMarketData) => (
         <>
           #{coin.market_cap_rank}
-          <Link
-            href={`/coins/${coin.id}`}
-            className='absolute inset-0 z-10'
-            aria-label='View coin'
-          />
+          <Link href={`/coins/${coin.id}`} aria-label='View coin' />
         </>
       ),
     },
     {
       header: 'Token',
-      cellClassName: 'coins-token',
+      cellClassName: 'token-cell',
       cell: (coin: CoinMarketData) => (
-        <div className='coins-token-info'>
+        <div className='token-info'>
           <Image src={coin.image} alt={coin.name} width={36} height={36} />
-          <p className='max-w-full truncate'>
+          <p>
             {coin.name} ({coin.symbol.toUpperCase()})
           </p>
         </div>
       ),
     },
     {
       header: 'Price',
-      cellClassName: 'coins-price',
+      cellClassName: 'price-cell',
       cell: (coin: CoinMarketData) => formatPrice(coin.current_price),
     },
     {
       header: '24h Change',
-      cellClassName: 'font-medium',
+      cellClassName: 'change-cell',
       cell: (coin: CoinMarketData) => {
         const isTrendingUp = coin.price_change_percentage_24h > 0;
 
         return (
           <span
-            className={cn('coins-change', {
+            className={cn('change-value', {
               'text-green-600': isTrendingUp,
               'text-red-500': !isTrendingUp,
             })}
@@ -79,23 +75,24 @@ const Coins = async ({
     },
     {
       header: 'Market Cap',
-      cellClassName: 'coins-market-cap',
+      cellClassName: 'market-cap-cell',
       cell: (coin: CoinMarketData) => formatPrice(coin.market_cap),
     },
   ];
 
   return (
-    <main className='coins-main'>
-      <div className='flex flex-col w-full space-y-5'>
-        <h4 className='text-2xl'>All Coins</h4>
-        <div className='custom-scrollbar coins-container'>
-          <DataTable
-            columns={columns}
-            data={coinsData}
-            rowKey={(coin) => coin.id}
-            headerClassName='coins-header'
-          />
-        </div>
+    <main id='coins-page'>
+      <div className='content'>
+        <h4>All Coins</h4>
+
+        <DataTable
+          tableClassName='coins-table'
+          columns={columns}
+          data={coinsData}
+          rowKey={(coin) => coin.id}
+          headerCellClassName='py-4! bg-dark-400 text-purple-100'
+          bodyCellClassName='py-4! '
+        />
 
         <CoinsPagination
           currentPage={currentPage}

app/globals.css

@@ -469,62 +469,62 @@
   }
 
   /* Coins Page Utilities */
-  .coins-main {
+  #coins-page {
     @apply py-12 px-4 sm:px-6 mx-auto max-w-[1440px] size-full items-center gap-10 justify-center;
-  }
 
-  .coins-container {
-    @apply bg-dark-500 rounded-xl max-h-fit overflow-hidden;
-  }
+    .content {
+      @apply flex flex-col w-full space-y-5;
+    }
 
-  .coins-header {
-    @apply bg-dark-400 text-purple-100;
-  }
+    h4 {
+      @apply text-2xl;
+    }
 
-  .coins-header-row {
-    @apply hover:bg-transparent;
-  }
+    .coins-table {
+      @apply bg-dark-500 rounded-xl max-h-fit overflow-hidden;
 
-  .coins-header-left {
-    @apply pl-5 py-4 text-purple-100;
-  }
+      .rank-cell {
+        @apply pl-5 max-w-[80px]! py-5 font-medium text-purple-100;
 
-  .coins-header-right {
-    @apply pr-8 text-purple-100;
-  }
+        a {
+          @apply absolute inset-0 z-10;
+        }
+      }
 
-  .coins-row {
-    @apply text-lg hover:!bg-dark-400/30 cursor-pointer;
-  }
+      .token-cell {
+        @apply py-3 font-semibold;
 
-  .coins-rank {
-    @apply pl-5 !max-w-[80px] py-5 font-medium text-purple-100;
-  }
+        .token-info {
+          @apply flex items-center gap-3;
 
-  .coins-token {
-    @apply py-3 font-semibold;
-  }
+          p {
+            @apply max-w-full truncate;
+          }
+        }
+      }
 
-  .coins-token-info {
-    @apply flex items-center gap-3;
-  }
+      .price-cell {
+        @apply py-4 font-medium;
+      }
 
-  .coins-price {
-    @apply py-4 font-medium;
-  }
+      .change-cell {
+        @apply font-medium;
+      }
 
-  .coins-change {
-    @apply flex gap-1 items-center font-medium;
-  }
+      .change-value {
+        @apply flex gap-1 items-center font-medium;
+      }
 
-  .coins-market-cap {
-    @apply pr-5 font-medium;
+      .market-cap-cell {
+        @apply pr-5 font-medium;
+      }
+    }
   }
 
   /* SearchModal Component Utilities */
   #search-modal {
     .trigger {
-      @apply px-6 hover:!bg-transparent font-medium transition-all h-full cursor-pointer text-base text-purple-100 flex items-center gap-2;
+      @apply px-6 hover:bg-transparent! font-medium transition-all h-full cursor-pointer text-base text-purple-100 flex items-center gap-2;
     }
 
     .kbd {