refactor: categories styles

Author: sujatagunale

app/globals.css

@@ -197,12 +197,48 @@
     @apply gap-4 mt-2 md:gap-5 sm:grid-cols-2 lg:grid-cols-1 grid;
   }
 
+  #categories {
+    @apply pt-8 mt-5 w-full bg-dark-500 rounded-xl overflow-hidden;
+
+    h4 {
+      @apply text-xl md:text-2xl font-semibold mb-2 pl-5;
+    }
+
+    .category-cell {
+      @apply pl-5 font-bold;
+    }
+
+    .top-gainers-cell {
+      @apply flex gap-1 mr-5;
+
+      img {
+        @apply rounded-full py-2;
+      }
+    }
+
+    .change-header-cell {
+      @apply font-medium;
+    }
+
+    .change-cell {
+      @apply flex flex-1 gap-1 items-center pl-2 text-center font-medium;
+    }
+
+    .market-cap-cell {
+      @apply font-medium;
+    }
+
+    .volume-cell {
+      @apply font-medium;
+    }
+  }
+
   .table-header-cell {
     @apply text-purple-100;
   }
 
   .table-row-hover {
-    @apply overflow-hidden border-none hover:!bg-dark-400 rounded-lg;
+    @apply overflow-hidden border-none hover:bg-dark-400! rounded-lg;
   }
 
   .coin-link {

components/DataTable.tsx

@@ -50,8 +50,9 @@ export const DataTable = <T,>({
               <TableCell
                 key={columnIndex}
                 className={cn(
-                  column.cellClassName
-                  // columnIndex === 0 && 'pl-5'
+                  column.cellClassName,
+                  columnIndex === 0 && 'pl-5',
+                  columnIndex === columns.length - 1 && 'pr-5'
                 )}
               >
                 {column.cell(row, rowIndex)}

components/home/Categories.tsx

@@ -1,20 +1,21 @@
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import Image from 'next/image';
+
 import { DataTable } from '@/components/DataTable';
 import { getCategories } from '@/lib/coingecko.actions';
 import { cn, formatPercentage, formatPrice } from '@/lib/utils';
-import { TrendingDown, TrendingUp } from 'lucide-react';
-import Image from 'next/image';
 
 export const Categories = async () => {
   const categories = (await getCategories()) as Category[];
   const columns = [
     {
       header: 'Category',
-      cellClassName: 'pl-5 font-bold',
+      cellClassName: 'category-cell',
       cell: (category: Category) => category.name,
     },
     {
       header: 'Top Gainers',
-      cellClassName: 'flex gap-1 mr-5',
+      cellClassName: 'top-gainers-cell',
       cell: (category: Category) =>
         category.top_3_coins.map((coin: string) => (
           <Image
@@ -23,25 +24,21 @@ export const Categories = async () => {
             alt='Coin image'
             width={28}
             height={28}
-            className='rounded-full py-2'
           />
         )),
     },
     {
       header: '24h Change',
-      cellClassName: 'font-medium',
+      cellClassName: 'change-header-cell',
       cell: (category: Category) => {
         const isTrendingUp = category.market_cap_change_24h > 0;
 
         return (
           <div
-            className={cn(
-              'flex flex-1 gap-1 items-end pl-5 text-base font-medium',
-              {
-                'text-green-500': category.market_cap_change_24h > 0,
-                'text-red-500': category.market_cap_change_24h < 0,
-              }
-            )}
+            className={cn('change-cell', {
+              'text-green-500': category.market_cap_change_24h > 0,
+              'text-red-500': category.market_cap_change_24h < 0,
+            })}
           >
             <p>{formatPercentage(category.market_cap_change_24h)}</p>
             {isTrendingUp ? (
@@ -55,19 +52,19 @@ export const Categories = async () => {
     },
     {
       header: 'Market Cap',
-      cellClassName: 'font-medium',
+      cellClassName: 'market-cap-cell',
       cell: (category: Category) => formatPrice(category.market_cap),
     },
     {
       header: '24h Volume',
-      cellClassName: 'font-medium',
+      cellClassName: 'volume-cell',
       cell: (category: Category) => formatPrice(category.volume_24h),
     },
   ];
 
   return (
-    <div className='custom-scrollbar pt-8 mt-5 w-full bg-dark-500 rounded-xl overflow-hidden'>
-      <h4 className='section-title pl-5'>Top Categories</h4>
+    <div id='categories' className='custom-scrollbar'>
+      <h4>Top Categories</h4>
       <DataTable
         columns={columns}
         data={categories}