Skip to content

Fixed Dark Mode #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
1300Sarthak merged 1 commit into from
Jul 7, 2025
Merged

Fixed Dark Mode #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/components/BentoCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/BentoTile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ChartComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ChartModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
};

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/ExchangeRateCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/components/ExpandableModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NewsCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/NewsFeed.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/RefreshButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/NewsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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) && (
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/pages/Settings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading