Skip to content

Restyle NotificationsPanel to glass terminal theme #493

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

Open
Olajcodes wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Restyle NotificationsPanel to glass terminal theme #493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c2ad009
Restyle NotificationsPanel to glass terminal theme
Aug 26, 2026
19a4e4e
Merge remote-tracking branch 'upstream/main' into feat/notifications-…
Aug 26, 2026
e292266
Fix react-hooks/set-state-in-effect lint errors
Aug 26, 2026
ee2ae40
Update NotificationsPanel test to match glass terminal theme
Aug 26, 2026
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 src/components/NotificationsPanel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,12 +445,12 @@ describe('NotificationsPanel', () => {
});

describe('dark mode support', () => {
it('includes dark mode classes', () => {
it('includes glass terminal dark theme classes', () => {
render(<NotificationsPanel {...defaultProps} />);

const panel = screen.getByRole('dialog');
expect(panel).toHaveClass('bg-white', 'dark:bg-gray-900');
expect(panel).toHaveClass('border-gray-200', 'dark:border-gray-800');
expect(panel).toHaveClass('glass-card');
expect(panel).toHaveClass('rounded-2xl', 'text-white', 'shadow-2xl');
});
});

Expand Down
20 changes: 10 additions & 10 deletions src/components/NotificationsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ const NotificationsPanel: React.FC<{ id: string; onClose: () => void }> = ({
aria-labelledby={titleId}
aria-describedby={descriptionId}
tabIndex={-1}
className="absolute right-0 mt-2 w-96 max-w-[calc(100vw-2rem)] bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-lg z-50"
className="glass-card absolute right-0 mt-2 w-96 max-w-[calc(100vw-2rem)] rounded-2xl text-white shadow-2xl z-50"
>
<div className="p-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between gap-2 flex-wrap">
<h2 id={titleId} className="text-lg font-medium text-gray-900 dark:text-gray-100">
<div className="p-4 border-b border-[#BEC7FE]/10 flex items-center justify-between gap-2 flex-wrap">
<h2 id={titleId} className="text-lg font-medium text-gray-100">
Notifications
</h2>
<div className="flex items-center gap-2">
Expand All @@ -56,7 +56,7 @@ const NotificationsPanel: React.FC<{ id: string; onClose: () => void }> = ({
type="button"
aria-label="Mark all notifications as read"
onClick={() => void markAllAsRead()}
className="shrink-0 rounded-lg px-3 py-1.5 text-sm font-medium text-[#2C4BFD] dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2C4BFD] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 transition-colors"
className="shrink-0 rounded-lg px-3 py-1.5 text-sm font-medium text-[#2C4BFD] hover:bg-[#2C4BFD]/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2C4BFD] focus-visible:ring-offset-2 focus-visible:ring-offset-[#111827] transition-colors"
>
Mark all as read
</button>
Expand All @@ -66,7 +66,7 @@ const NotificationsPanel: React.FC<{ id: string; onClose: () => void }> = ({
ref={closeButtonRef}
onClick={onClose}
aria-label="Close notifications"
className="shrink-0 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2C4BFD] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900"
className="shrink-0 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-300 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2C4BFD] focus-visible:ring-offset-2 focus-visible:ring-offset-[#111827]"
>
Close
</button>
Expand Down Expand Up @@ -102,12 +102,12 @@ const NotificationsPanel: React.FC<{ id: string; onClose: () => void }> = ({
{list.map((n) => (
<div
key={n.id}
className={`p-4 border-b border-gray-100 dark:border-gray-800 flex items-start justify-between gap-3 ${n.read ? 'opacity-60' : ''}`}
className={`p-4 border-b border-[#BEC7FE]/10 flex items-start justify-between gap-3 ${n.read ? 'opacity-60' : ''}`}
>
<div className="min-w-0">
<div className="font-medium text-gray-900 dark:text-gray-100">{n.title}</div>
<div className="text-sm text-gray-600 dark:text-gray-400">{n.message}</div>
<div className="text-xs text-gray-500 dark:text-gray-500 mt-1">
<div className="font-medium text-gray-100">{n.title}</div>
<div className="text-sm text-gray-400">{n.message}</div>
<div className="text-xs text-gray-500 mt-1">
{new Date(n.createdAt).toLocaleString()}
</div>
</div>
Expand All @@ -116,7 +116,7 @@ const NotificationsPanel: React.FC<{ id: string; onClose: () => void }> = ({
type="button"
aria-label={`Mark notification "${n.title}" as read`}
onClick={() => markAsRead(n.id)}
className="shrink-0 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2C4BFD] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900"
className="shrink-0 p-2 rounded-lg hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2C4BFD] focus-visible:ring-offset-2 focus-visible:ring-offset-[#111827]"
>
<Check className="w-4 h-4" aria-hidden />
</button>
Expand Down
1 change: 1 addition & 0 deletions src/components/PredictionHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export default function PredictionHistory({ userId, optimisticPrediction }: Pred
}, [history, userId]);

useEffect(() => {
// eslint-disable-next-line react-hooks/set-state-in-effect
void loadHistory();
}, [loadHistory]);

Expand Down
3 changes: 2 additions & 1 deletion src/components/PriceChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,6 +487,7 @@ const PriceChart = ({ height = 300, asset = "XLM", entryPrice, onPriceUpdate }:

// Reload data when asset changes — reset and load mock/API data
useEffect(() => {
/* eslint-disable react-hooks/set-state-in-effect */
setData([]);
setIsLoading(true);
setLoadError(null);
Expand All @@ -499,8 +500,8 @@ const PriceChart = ({ height = 300, asset = "XLM", entryPrice, onPriceUpdate }:
setIsLoading(false);
}

// Also attempt to fetch live data from API
void loadInitialPrices();
/* eslint-enable react-hooks/set-state-in-effect */
}, [asset]); // eslint-disable-line react-hooks/exhaustive-deps

// Update chart line color when asset changes
Expand Down
6 changes: 6 additions & 0 deletions src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,9 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);

// Clear the entry marker whenever the active round changes.
useEffect(() => {
/* eslint-disable react-hooks/set-state-in-effect */
setEntryPrice(null);
/* eslint-enable react-hooks/set-state-in-effect */
}, [activeRoundId]);

const [stats, setStats] = useState<UserStats | null>(null);
Expand Down Expand Up @@ -283,8 +285,10 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
}, [isWalletConnected, publicKey]);

useEffect(() => {
/* eslint-disable react-hooks/set-state-in-effect */
void fetchStats();
void fetchActivities();
/* eslint-enable react-hooks/set-state-in-effect */
}, [fetchStats, fetchActivities]);

const refreshInspector = useCallback(async () => {
Expand All @@ -309,7 +313,9 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
}, [isWalletConnected, publicKey]);

useEffect(() => {
/* eslint-disable react-hooks/set-state-in-effect */
void refreshInspector();
/* eslint-enable react-hooks/set-state-in-effect */
}, [refreshInspector]);

const handleRoundSoundToggle = (enabled: boolean) => {
Expand Down
2 changes: 2 additions & 0 deletions src/pages/Learn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ const LearnPage = () => {
}, []);

useEffect(() => {
/* eslint-disable react-hooks/set-state-in-effect */
fetchData();
/* eslint-enable react-hooks/set-state-in-effect */
}, [fetchData]);

if (loading) {
Expand Down
Loading