From f596dc14a0e0d980dd28b95fdd6d763c06c634b2 Mon Sep 17 00:00:00 2001
From: Sarthak Sethi <sarthakluv@gmail.com>
Date: Sun, 6 Jul 2025 21:56:28 -0700
Subject: [PATCH] proper dark mode

---
 frontend/src/components/BentoCard.jsx        |  6 +++---
 frontend/src/components/BentoTile.jsx        | 10 +++++-----
 frontend/src/components/ChartComponent.jsx   |  4 ++--
 frontend/src/components/ChartModal.jsx       |  2 +-
 frontend/src/components/ExchangeRateCard.jsx |  6 +++---
 frontend/src/components/ExpandableModal.jsx  | 16 ++++++++--------
 frontend/src/components/NewsCard.jsx         |  2 +-
 frontend/src/components/NewsFeed.jsx         |  4 ++--
 frontend/src/components/RefreshButton.jsx    |  2 +-
 frontend/src/pages/NewsPage.jsx              |  4 ++--
 frontend/src/pages/Settings.jsx              | 20 ++++++++++----------
 11 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/BentoCard.jsx b/frontend/src/components/BentoCard.jsx
index bc51945..b01915b 100644
--- a/frontend/src/components/BentoCard.jsx
+++ b/frontend/src/components/BentoCard.jsx
@@ -47,9 +47,9 @@ const BentoCard = ({
   // Get change color
   const getChangeColor = () => {
     if (typeof change === "number") {
-      return change > 0 ? "text-green-600" : change < 0 ? "text-red-600" : "text-gray-600";
+      return change > 0 ? "text-green-600" : change < 0 ? "text-red-600" : "text-gray-600 dark:text-gray-400";
     }
-    return "text-gray-600";
+    return "text-gray-600 dark:text-gray-400";
   };
 
   // Get change icon
@@ -128,7 +128,7 @@ const BentoCard = ({
                 <h3 className="font-semibold text-gray-900 dark:text-white text-sm line-clamp-2 mb-2">
                   {title}
                 </h3>
-                <div className="text-xs text-gray-500">
+                <div className="text-xs text-gray-500 dark:text-gray-400">
                   {new Date().toLocaleTimeString()}
                 </div>
               </div>
diff --git a/frontend/src/components/BentoTile.jsx b/frontend/src/components/BentoTile.jsx
index 0fd9fdc..3edf9e7 100644
--- a/frontend/src/components/BentoTile.jsx
+++ b/frontend/src/components/BentoTile.jsx
@@ -49,9 +49,9 @@ const BentoTile = ({
   // Determine color based on price movement
   const getChangeColor = () => {
     if (typeof change === "number") {
-      return change > 0 ? "text-green-600" : change < 0 ? "text-red-600" : "text-gray-600";
+      return change > 0 ? "text-green-600" : change < 0 ? "text-red-600" : "text-gray-600 dark:text-gray-400";
     }
-    return "text-gray-600";
+    return "text-gray-600 dark:text-gray-400";
   };
 
   // Get change icon
@@ -98,7 +98,7 @@ const BentoTile = ({
               <h3 className="font-semibold text-gray-900 dark:text-white text-sm">
                 {title}
               </h3>
-              <p className="text-xs text-gray-500">{symbol}</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">{symbol}</p>
             </div>
             <Chip 
               size="sm" 
@@ -123,10 +123,10 @@ const BentoTile = ({
           {/* Additional info for larger tiles */}
           {size === "lg" && (
             <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
-              <div className="text-xs text-gray-500">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
                 Market Cap: $1.2T
               </div>
-              <div className="text-xs text-gray-500">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
                 Volume: 24.5M
               </div>
             </div>
diff --git a/frontend/src/components/ChartComponent.jsx b/frontend/src/components/ChartComponent.jsx
index 9ea6b8d..0522152 100644
--- a/frontend/src/components/ChartComponent.jsx
+++ b/frontend/src/components/ChartComponent.jsx
@@ -107,7 +107,7 @@ const ChartComponent = ({ symbol = "BTC", initialPeriod = "1h" }) => {
       <CardHeader className="flex justify-between items-center">
         <div>
           <h3 className="text-lg font-semibold">{symbol} Price History</h3>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
             {period === "1h" ? "Last hour" : period === "24h" ? "Last 24 hours" : "Last 7 days"}
           </p>
         </div>
@@ -127,7 +127,7 @@ const ChartComponent = ({ symbol = "BTC", initialPeriod = "1h" }) => {
       <CardBody>
         {loading ? (
           <div className="h-64 flex items-center justify-center">
-            <div className="text-gray-500">Loading chart...</div>
+            <div className="text-gray-500 dark:text-gray-400">Loading chart...</div>
           </div>
         ) : (
           <ResponsiveContainer width="100%" height={300}>
diff --git a/frontend/src/components/ChartModal.jsx b/frontend/src/components/ChartModal.jsx
index 226d2df..5475cf2 100644
--- a/frontend/src/components/ChartModal.jsx
+++ b/frontend/src/components/ChartModal.jsx
@@ -118,7 +118,7 @@ const ChartModal = ({ isOpen, onClose, symbol, type }) => {
   };
 
   const getChangeColor = (change) => {
-    if (change === null || change === undefined) return "text-gray-500";
+    if (change === null || change === undefined) return "text-gray-500 dark:text-gray-400";
     return change >= 0 ? "text-green-600" : "text-red-600";
   };
 
diff --git a/frontend/src/components/ExchangeRateCard.jsx b/frontend/src/components/ExchangeRateCard.jsx
index 3940f04..d0a6cb4 100644
--- a/frontend/src/components/ExchangeRateCard.jsx
+++ b/frontend/src/components/ExchangeRateCard.jsx
@@ -14,9 +14,9 @@ const ExchangeRateCard = ({
 
   const getChangeColor = (change) => {
     if (typeof change === "number") {
-      return change > 0 ? "text-green-600" : change < 0 ? "text-red-600" : "text-gray-600";
+      return change > 0 ? "text-green-600" : change < 0 ? "text-red-600" : "text-gray-600 dark:text-gray-400";
     }
-    return "text-gray-600";
+    return "text-gray-600 dark:text-gray-400";
   };
 
   const getChangeIcon = (change) => {
@@ -106,7 +106,7 @@ const ExchangeRateCard = ({
 
             {/* Mini chart placeholder */}
             <div className="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
-              <div className="flex items-center justify-between text-xs text-gray-500">
+              <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                 <span>24h Change</span>
                 <span className="text-green-600">+0.15%</span>
               </div>
diff --git a/frontend/src/components/ExpandableModal.jsx b/frontend/src/components/ExpandableModal.jsx
index 8b32e16..99c6277 100644
--- a/frontend/src/components/ExpandableModal.jsx
+++ b/frontend/src/components/ExpandableModal.jsx
@@ -152,7 +152,7 @@ const ExpandableModal = ({
               <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
                 {data?.title} ({data?.symbol})
               </h2>
-              <p className="text-sm text-gray-500">
+              <p className="text-sm text-gray-500 dark:text-gray-400">
                 {data?.type === "crypto" ? "Cryptocurrency" : "Stock"} Price Chart
               </p>
             </div>
@@ -199,7 +199,7 @@ const ExpandableModal = ({
                 {isLoadingChart ? (
                   <div className="flex items-center justify-center h-full">
                     <Spinner size="lg" />
-                    <span className="ml-3 text-gray-500">Loading chart...</span>
+                    <span className="ml-3 text-gray-500 dark:text-gray-400">Loading chart...</span>
                   </div>
                 ) : chartError ? (
                   <div className="flex items-center justify-center h-full">
@@ -248,7 +248,7 @@ const ExpandableModal = ({
                   </ResponsiveContainer>
                 ) : (
                   <div className="flex items-center justify-center h-full">
-                    <p className="text-gray-500">No chart data available</p>
+                    <p className="text-gray-500 dark:text-gray-400">No chart data available</p>
                   </div>
                 )}
               </div>
@@ -257,25 +257,25 @@ const ExpandableModal = ({
               {data && (
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                   <div className="text-center">
-                    <p className="text-xs text-gray-500">Current Price</p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">Current Price</p>
                     <p className="text-lg font-semibold text-gray-900 dark:text-white">
                       {data.price ? formatPrice(data.price) : "N/A"}
                     </p>
                   </div>
                   <div className="text-center">
-                    <p className="text-xs text-gray-500">24h Change</p>
-                    <p className={`text-lg font-semibold ${data.change > 0 ? 'text-green-600' : data.change < 0 ? 'text-red-600' : 'text-gray-600'}`}>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">24h Change</p>
+                    <p className={`text-lg font-semibold ${data.change > 0 ? 'text-green-600' : data.change < 0 ? 'text-red-600' : 'text-gray-600 dark:text-gray-400'}`}>
                       {data.change ? `${data.change > 0 ? '+' : ''}${data.change.toFixed(2)}%` : "N/A"}
                     </p>
                   </div>
                   <div className="text-center">
-                    <p className="text-xs text-gray-500">Market Cap</p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">Market Cap</p>
                     <p className="text-lg font-semibold text-gray-900 dark:text-white">
                       $1.2T
                     </p>
                   </div>
                   <div className="text-center">
-                    <p className="text-xs text-gray-500">Volume</p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">Volume</p>
                     <p className="text-lg font-semibold text-gray-900 dark:text-white">
                       24.5M
                     </p>
diff --git a/frontend/src/components/NewsCard.jsx b/frontend/src/components/NewsCard.jsx
index 216b7c6..ec84b02 100644
--- a/frontend/src/components/NewsCard.jsx
+++ b/frontend/src/components/NewsCard.jsx
@@ -80,7 +80,7 @@ const NewsCard = ({
               <h4 className="font-medium text-gray-900 dark:text-white text-sm line-clamp-2 mb-2">
                 {title}
               </h4>
-              <div className="text-xs text-gray-500">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
                 {formatTime(publishedAt)}
               </div>
             </div>
diff --git a/frontend/src/components/NewsFeed.jsx b/frontend/src/components/NewsFeed.jsx
index 33c0a6a..7070069 100644
--- a/frontend/src/components/NewsFeed.jsx
+++ b/frontend/src/components/NewsFeed.jsx
@@ -109,7 +109,7 @@ const NewsFeed = () => {
     <div className="w-full">
       <div className="mb-4">
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Latest News</h3>
-        <p className="text-sm text-gray-500">Top headlines from around the world</p>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Top headlines from around the world</p>
       </div>
 
       {loading ? (
@@ -134,7 +134,7 @@ const NewsFeed = () => {
                 <h4 className="font-medium text-gray-900 dark:text-white text-sm line-clamp-2">
                   {item.title}
                 </h4>
-                <div className="flex items-center justify-between text-xs text-gray-500">
+                <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                   <span className="font-medium">{item.source}</span>
                   <span>{formatTime(item.publishedAt)}</span>
                 </div>
diff --git a/frontend/src/components/RefreshButton.jsx b/frontend/src/components/RefreshButton.jsx
index a821ace..4a5e448 100644
--- a/frontend/src/components/RefreshButton.jsx
+++ b/frontend/src/components/RefreshButton.jsx
@@ -221,7 +221,7 @@ const RefreshButton = ({ onRefresh, className = "" }) => {
     <div className={`flex items-center gap-2 ${className}`}>
       {/* Auto-refresh toggle */}
       <div className="flex items-center gap-1">
-        <span className="text-xs text-gray-500">Auto</span>
+        <span className="text-xs text-gray-500 dark:text-gray-400">Auto</span>
         <Switch
           size="sm"
           isSelected={autoRefresh}
diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx
index 9a44d6e..c603058 100644
--- a/frontend/src/pages/NewsPage.jsx
+++ b/frontend/src/pages/NewsPage.jsx
@@ -125,7 +125,7 @@ const NewsPage = () => {
           <div className="text-center py-20">
             <Spinner size="lg" />
             <p className="mt-4 text-gray-600 dark:text-gray-400">Loading latest news...</p>
-            <p className="text-sm text-gray-500">API URL: {API_BASE_URL}</p>
+            <p className="text-sm text-gray-500 dark:text-gray-400">API URL: {API_BASE_URL}</p>
           </div>
         </div>
       </div>
@@ -145,7 +145,7 @@ const NewsPage = () => {
           <p className="text-lg text-gray-600 dark:text-gray-400">
             Top stories from the last 24 hours across all categories
           </p>
-          <p className="text-sm text-gray-500">API URL: {API_BASE_URL}</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400">API URL: {API_BASE_URL}</p>
           
           {/* API Rate Limit Notice */}
           {Object.values(newsData).every(articles => articles.length === 0) && (
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index fce9a7a..876f410 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -213,7 +213,7 @@ const Settings = () => {
                   className="w-full"
                   aria-label="Stock symbols separated by commas"
                 />
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                   Enter stock symbols separated by commas (max 8 symbols)
                 </p>
               </div>
@@ -234,7 +234,7 @@ const Settings = () => {
                   className="w-full"
                   aria-label="Stock refresh interval in seconds"
                 />
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                   Current: {localSettings.stocks.refreshInterval} seconds
                 </p>
               </div>
@@ -257,10 +257,10 @@ const Settings = () => {
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Temperature Unit
                   </label>
-                  <p className="text-xs text-gray-500">Choose between Celsius and Fahrenheit</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">Choose between Celsius and Fahrenheit</p>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className={`text-sm ${localSettings.weather.unit === 'C' ? 'text-blue-600 font-medium' : 'text-gray-500'}`}>
+                  <span className={`text-sm ${localSettings.weather.unit === 'C' ? 'text-blue-600 font-medium' : 'text-gray-500 dark:text-gray-400'}`}>
                     °C
                   </span>
                   <Switch
@@ -275,7 +275,7 @@ const Settings = () => {
                       thumb: "group-data-[selected=true]:bg-white"
                     }}
                   />
-                  <span className={`text-sm ${localSettings.weather.unit === 'F' ? 'text-blue-600 font-medium' : 'text-gray-500'}`}>
+                  <span className={`text-sm ${localSettings.weather.unit === 'F' ? 'text-blue-600 font-medium' : 'text-gray-500 dark:text-gray-400'}`}>
                     °F
                   </span>
                 </div>
@@ -303,7 +303,7 @@ const Settings = () => {
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Use Current Location
                   </label>
-                  <p className="text-xs text-gray-500">Automatically detect your location</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">Automatically detect your location</p>
                 </div>
                 <Switch
                   isSelected={localSettings.weather.autoLocation}
@@ -442,7 +442,7 @@ const Settings = () => {
                   className="w-full"
                   aria-label="Country codes separated by commas"
                 />
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                   Enter ISO country codes (e.g., us, gb, ca, au, de, fr)
                 </p>
               </div>
@@ -463,7 +463,7 @@ const Settings = () => {
                   className="w-full"
                   aria-label="Maximum news articles to display"
                 />
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                   Show {localSettings.news.maxArticles} article{localSettings.news.maxArticles !== 1 ? 's' : ''}
                 </p>
               </div>
@@ -494,7 +494,7 @@ const Settings = () => {
                   className="w-full"
                   aria-label="Cryptocurrency symbols separated by commas"
                 />
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                   Enter cryptocurrency symbols separated by commas (max 6 symbols)
                 </p>
               </div>
@@ -515,7 +515,7 @@ const Settings = () => {
                   className="w-full"
                   aria-label="Cryptocurrency refresh interval in seconds"
                 />
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                   Current: {localSettings.crypto.refreshInterval} seconds
                 </p>
               </div>