refactor: candlerstickchart styles

Author: sujatagunale

app/globals.css

@@ -160,32 +160,28 @@
   }
 
   /* CandlestickChart Styles */
-  .candlestick-container {
+  #candlestick-chart {
     @apply p-3 mt-5 rounded-lg bg-dark-500;
-  }
-
-  .candlestick-header {
-    @apply flex flex-col gap-3 xl:flex-row xl:items-center mb-4 font-semibold text-[#e6eef8] text-[20px];
-  }
 
-  .candlestick-button-group {
-    @apply flex gap-1 xl:gap-2 items-center;
-  }
+    .chart-header {
+      @apply flex flex-col gap-3 xl:flex-row xl:items-center mb-4 font-semibold text-[#e6eef8] text-[20px];
+    }
 
-  .candlestick-interval {
-    @apply rounded-sm px-3 py-1.5 border-0 text-sm bg-dark-500 text-white/60;
-  }
+    .button-group {
+      @apply flex gap-1 xl:gap-2 items-center;
+    }
 
-  .candlestick-period-button {
-    @apply rounded-sm border-0 cursor-pointer px-2 xl:px-3 py-1.5 text-xs xl:text-sm text-purple-100 hover:bg-dark-400 hover:text-white transition-colors duration-200;
-  }
+    .period-button {
+      @apply rounded-sm border-0 cursor-pointer px-2 xl:px-3 py-1.5 text-xs xl:text-sm text-purple-100 hover:bg-dark-400 hover:text-white transition-colors duration-200;
+    }
 
-  .candlestick-period-button-active {
-    @apply rounded-sm px-3 py-1.5 border-0 cursor-pointer text-sm text-gray-900 bg-green-500;
-  }
+    .period-button-active {
+      @apply rounded-sm px-3 py-1.5 border-0 cursor-pointer text-sm text-gray-900 bg-green-500;
+    }
 
-  .candlestick-chart-container {
-    @apply w-full min-h-[200px];
+    .chart {
+      @apply w-full min-h-[200px];
+    }
   }
 
   /* Home Page Utilities */

components/CandlestickChart.tsx

@@ -148,17 +148,16 @@ export default function CandlestickChart({
   }, [ohlcData, liveOhlcv, period, mode]);
 
   return (
-    <div className='candlestick-container'>
-      <div className='candlestick-header'>
+    <div id='candlestick-chart'>
+      <div className='chart-header'>
         <div className='flex-1'>{children}</div>
-        <div className='candlestick-button-group'>
+
+        <div className='button-group'>
           {PERIOD_BUTTONS.map(({ value, label }) => (
             <button
               key={value}
               className={
-                period === value
-                  ? 'candlestick-period-button-active'
-                  : 'candlestick-period-button'
+                period === value ? 'period-button-active' : 'period-button'
               }
               onClick={() => handlePeriodChange(value)}
               disabled={loading}
@@ -168,11 +167,8 @@ export default function CandlestickChart({
           ))}
         </div>
       </div>
-      <div
-        ref={chartContainerRef}
-        className='candlestick-chart-container'
-        style={{ height }}
-      />
+
+      <div ref={chartContainerRef} className='chart' style={{ height }} />
     </div>
   );
 }