Add dark mode toggle to admin panels (#3894) - #3953
Conversation
Adds a ThemeContext for global dark/light mode management, a DarkModeToggle component in the admin header, and updates admin components to use the existing CSS custom properties for dark mode support. Closes riteshbonthalakoti#3894
|
Someone is attempting to deploy a commit to the ritesh Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds a persisted global dark-mode context and toggle, then applies theme-aware styling across the admin shell, shared components, analytics, profile, settings, tickets, and user directory interfaces. ChangesAdmin dark mode
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant AdminApp
participant ThemeProvider
participant AdminHeader
participant DarkModeToggle
participant AdminPages
participant BrowserStorage
participant DocumentRoot
AdminApp->>ThemeProvider: render admin routes
ThemeProvider->>BrowserStorage: load helpdesk-theme
ThemeProvider->>DocumentRoot: set dark class
ThemeProvider->>AdminHeader: provide isDark and toggleTheme
AdminHeader->>DarkModeToggle: render current theme control
DarkModeToggle->>ThemeProvider: toggleTheme()
ThemeProvider->>BrowserStorage: save updated theme
ThemeProvider->>DocumentRoot: update dark class
ThemeProvider->>AdminPages: provide updated isDark
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
Frontend/src/index.cssParsing error: Unexpected character '@' Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
Frontend/src/admin/pages/AdminSettings.jsx (1)
66-92: 🎯 Functional Correctness | 🔴 Critical | ⚡ Quick winComplete the ThemeContext hook integration. These pages reference the dark-mode state without resolving it, causing their routes to fail at render time.
Frontend/src/admin/pages/AdminSettings.jsx#L66-L92: importuseThemeand declareconst { isDark } = useTheme()inAdminSettings.Frontend/src/admin/pages/AdminTickets.jsx#L226-L233: importuseThemeand declareconst { isDark } = useTheme()inAdminTickets.Frontend/src/admin/pages/AdminUsers.jsx#L19-L19: importuseThemefrom../../contexts/ThemeContext.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@Frontend/src/admin/pages/AdminSettings.jsx` around lines 66 - 92, Complete ThemeContext integration across the affected pages: in Frontend/src/admin/pages/AdminSettings.jsx lines 66-92 and Frontend/src/admin/pages/AdminTickets.jsx lines 226-233, import useTheme and initialize isDark with useTheme inside AdminSettings and AdminTickets; in Frontend/src/admin/pages/AdminUsers.jsx line 19, import useTheme from ../../contexts/ThemeContext.Source: Linters/SAST tools
Frontend/src/admin/components/AdminSidebar.jsx (1)
99-108: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winMove active and hover colors out of inline styles.
The inline
styleobjects setbackgroundandcolor, which take precedence over the newhover:bg-*andhover:text-*classes. Consequently, dark hover states do not apply, active links remain light green in dark mode, and Logout remains gray on hover. Move these palette properties into classes or compute them directly fromisDark.Also applies to: 131-140, 146-156
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@Frontend/src/admin/components/AdminSidebar.jsx` around lines 99 - 108, The AdminSidebar navigation link styles around the active-link blocks must stop setting palette properties inline: remove the inline background and color assignments from the style callbacks near the affected links, then express active, hover, and dark-mode colors through conditional class names (including Logout) so hover classes can override correctly while preserving the existing layout and typography styles.
🧹 Nitpick comments (1)
Frontend/src/components/shared/DarkModeToggle.jsx (1)
9-14: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExpose the toggle state to assistive technology.
Add
aria-labelandaria-pressed={isDark}to this icon-only button instead of relying solely ontitle.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@Frontend/src/components/shared/DarkModeToggle.jsx` around lines 9 - 14, Update the icon-only button in DarkModeToggle, which uses toggleTheme and isDark, to add an aria-label describing the current theme action and aria-pressed={isDark}; retain the existing title and visual toggle behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@Frontend/src/admin/components/AdminHeader.jsx`:
- Line 56: Update AdminHeader.jsx to add dark-mode variants for the Admin label,
control hover states, notification divider, and Logout action. Also update
AdminSidebar.jsx at the logo section and collapse button to theme its border and
colors for dark mode; both sites require direct changes.
In `@Frontend/src/admin/components/StatCard.jsx`:
- Line 27: Replace the dark-mode secondary text color with the validated lighter
token `#cbd5e1` for the metric label and subtitle in
Frontend/src/admin/components/StatCard.jsx at lines 27-27 and 41-41, and for the
table-header text in Frontend/src/admin/components/TicketTable.jsx at line
65-65. Preserve the light-theme colors and verify contrast in both themes.
- Line 14: Update the red entry in the StatCard color palette so both light and
dark theme branches use red background and text values, ensuring color="red"
never renders blue or slate colors while preserving the other semantic palettes.
In `@Frontend/src/admin/pages/AdminAnalytics.jsx`:
- Line 180: Update the dark-mode secondary text styling in AdminAnalytics,
including the loading text and the other referenced subtitle and chart-axis
elements, replacing slate-600/#64748b with a lighter accessible value such as
slate-300/#cbd5e1 or slate-400/#94a3b8 while preserving the existing light-mode
styles.
- Line 379: Update the row separator styling in the analytics activity row div
to use a visible dark-mode border color such as the card border color `#334155`
instead of `#1e293b`; keep the existing light-mode color and other styles
unchanged.
- Line 254: Update all four Recharts tooltips in the relevant analytics
component, including the Pie, Category, AI, and Volume tooltips, to provide
explicit readable labelStyle and itemStyle colors when isDark is true. Preserve
the existing green item color where intended while ensuring dark backgrounds use
light text and light backgrounds retain appropriate readable colors.
In `@Frontend/src/contexts/ThemeContext.jsx`:
- Around line 15-27: Update the theme class application in the ThemeContext
effect tied to isDark to run before browser paint, using the appropriate
pre-paint React hook or equivalent initialization before mount. Preserve the
existing dark/light class behavior and localStorage persistence while preventing
a light-theme flash during dark-mode restoration.
---
Outside diff comments:
In `@Frontend/src/admin/components/AdminSidebar.jsx`:
- Around line 99-108: The AdminSidebar navigation link styles around the
active-link blocks must stop setting palette properties inline: remove the
inline background and color assignments from the style callbacks near the
affected links, then express active, hover, and dark-mode colors through
conditional class names (including Logout) so hover classes can override
correctly while preserving the existing layout and typography styles.
In `@Frontend/src/admin/pages/AdminSettings.jsx`:
- Around line 66-92: Complete ThemeContext integration across the affected
pages: in Frontend/src/admin/pages/AdminSettings.jsx lines 66-92 and
Frontend/src/admin/pages/AdminTickets.jsx lines 226-233, import useTheme and
initialize isDark with useTheme inside AdminSettings and AdminTickets; in
Frontend/src/admin/pages/AdminUsers.jsx line 19, import useTheme from
../../contexts/ThemeContext.
---
Nitpick comments:
In `@Frontend/src/components/shared/DarkModeToggle.jsx`:
- Around line 9-14: Update the icon-only button in DarkModeToggle, which uses
toggleTheme and isDark, to add an aria-label describing the current theme action
and aria-pressed={isDark}; retain the existing title and visual toggle behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4c75d896-eeb0-49b1-903e-2b4dacd8c4b8
📒 Files selected for processing (14)
Frontend/src/App.jsxFrontend/src/admin/components/AdminHeader.jsxFrontend/src/admin/components/AdminSidebar.jsxFrontend/src/admin/components/StatCard.jsxFrontend/src/admin/components/TicketTable.jsxFrontend/src/admin/layout/AdminLayout.jsxFrontend/src/admin/pages/AdminAnalytics.jsxFrontend/src/admin/pages/AdminProfile.jsxFrontend/src/admin/pages/AdminSettings.jsxFrontend/src/admin/pages/AdminTickets.jsxFrontend/src/admin/pages/AdminUsers.jsxFrontend/src/components/shared/DarkModeToggle.jsxFrontend/src/contexts/ThemeContext.jsxFrontend/src/index.css
|
|
||
| return ( | ||
| <header className="h-16 bg-white border-b border-slate-200 sticky top-0 z-30 px-6 md:px-10 flex items-center justify-between"> | ||
| <header className="h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700 sticky top-0 z-30 px-6 md:px-10 flex items-center justify-between"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Complete dark styling for all admin-shell descendants.
The parent containers now switch to dark backgrounds, but light-only child colors remain in both components.
Frontend/src/admin/components/AdminHeader.jsx#L56-L56: add dark variants for the Admin label, control hover states, notification divider, and Logout action.Frontend/src/admin/components/AdminSidebar.jsx#L43-L45: theme the logo-section border and collapse-button colors.
📍 Affects 2 files
Frontend/src/admin/components/AdminHeader.jsx#L56-L56(this comment)Frontend/src/admin/components/AdminSidebar.jsx#L43-L45
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/admin/components/AdminHeader.jsx` at line 56, Update
AdminHeader.jsx to add dark-mode variants for the Admin label, control hover
states, notification divider, and Logout action. Also update AdminSidebar.jsx at
the logo section and collapse button to theme its border and colors for dark
mode; both sites require direct changes.
| indigo: { bg: isDark ? '#1e1b4b' : '#EEF2FF', text: '#6366f1' }, | ||
| amber: { bg: isDark ? '#451a03' : '#FFF7ED', text: '#f97316' }, | ||
| emerald: { bg: isDark ? '#022c22' : '#F0FDF4', text: '#16a34a' }, | ||
| red: { bg: isDark ? '#1e293b' : '#EFF6FF', text: '#3b82f6' }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the red semantic palette red in both themes.
color="red" currently renders a blue icon: the light branch uses #EFF6FF/#3b82f6, while the dark branch still uses a slate background and blue text.
Proposed fix
- red: { bg: isDark ? '`#1e293b`' : '`#EFF6FF`', text: '`#3b82f6`' }
+ red: { bg: isDark ? '`#450a0a`' : '`#FEF2F2`', text: isDark ? '`#f87171`' : '`#DC2626`' }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| red: { bg: isDark ? '#1e293b' : '#EFF6FF', text: '#3b82f6' }, | |
| red: { bg: isDark ? '`#450a0a`' : '`#FEF2F2`', text: isDark ? '`#f87171`' : '`#DC2626`' } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/admin/components/StatCard.jsx` at line 14, Update the red entry
in the StatCard color palette so both light and dark theme branches use red
background and text values, ensuring color="red" never renders blue or slate
colors while preserving the other semantic palettes.
| <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}> | ||
| <div> | ||
| <p style={{ fontSize: '11px', color: '#9ca3af', letterSpacing: '0.1em', fontWeight: 600, textTransform: 'uppercase', marginBottom: '8px' }}> | ||
| <p style={{ fontSize: '11px', color: isDark ? '#64748b' : '#9ca3af', letterSpacing: '0.1em', fontWeight: 600, textTransform: 'uppercase', marginBottom: '8px' }}> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Use a more readable secondary-text token in dark mode.
#64748b is too muted for small labels, subtitles, and table headers on the dark backgrounds. Use a lighter validated token such as #cbd5e1, and verify contrast in both themes.
Frontend/src/admin/components/StatCard.jsx#L27-L27: update the metric label color.Frontend/src/admin/components/StatCard.jsx#L41-L41: update the subtitle color.Frontend/src/admin/components/TicketTable.jsx#L65-L65: update the table-header text color.
📍 Affects 2 files
Frontend/src/admin/components/StatCard.jsx#L27-L27(this comment)Frontend/src/admin/components/StatCard.jsx#L41-L41Frontend/src/admin/components/TicketTable.jsx#L65-L65
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/admin/components/StatCard.jsx` at line 27, Replace the dark-mode
secondary text color with the validated lighter token `#cbd5e1` for the metric
label and subtitle in Frontend/src/admin/components/StatCard.jsx at lines 27-27
and 41-41, and for the table-header text in
Frontend/src/admin/components/TicketTable.jsx at line 65-65. Preserve the
light-theme colors and verify contrast in both themes.
| <div className="flex flex-col items-center justify-center min-h-[400px]"> | ||
| <Loader2 className="w-10 h-10 text-indigo-600 animate-spin mb-4" /> | ||
| <p className="text-slate-400 font-black uppercase tracking-widest italic text-center">Analyzing ticket data...</p> | ||
| <p className={`font-black uppercase tracking-widest italic text-center ${isDark ? 'text-slate-600' : 'text-slate-400'}`}>Analyzing ticket data...</p> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Increase contrast for dark-mode secondary text.
text-slate-600 and #64748b are too dim against the dark backgrounds, especially for the 10–11px loading, subtitle, and chart-axis text. Use a lighter value such as text-slate-300/#cbd5e1 or #94a3b8.
Also applies to: 192-192, 252-253, 309-310, 336-336
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/admin/pages/AdminAnalytics.jsx` at line 180, Update the
dark-mode secondary text styling in AdminAnalytics, including the loading text
and the other referenced subtitle and chart-axis elements, replacing
slate-600/#64748b with a lighter accessible value such as slate-300/#cbd5e1 or
slate-400/#94a3b8 while preserving the existing light-mode styles.
| <CartesianGrid strokeDasharray="3 3" vertical={false} stroke={isDark ? '#334155' : '#f1f5f9'} /> | ||
| <XAxis dataKey="date" fontSize={10} axisLine={false} tickLine={false} tick={{ fill: isDark ? '#64748b' : '#9ca3af', fontWeight: 600 }} dy={10} /> | ||
| <YAxis fontSize={10} axisLine={false} tickLine={false} tick={{ fill: isDark ? '#64748b' : '#9ca3af', fontWeight: 600 }} /> | ||
| <Tooltip contentStyle={{ backgroundColor: isDark ? '#1e293b' : '#fff', borderRadius: '12px', border: `1px solid ${isDark ? '#334155' : '#f0fdf4'}`, boxShadow: isDark ? '0 4px 12px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.05)' }} itemStyle={{ color: '#16a34a', fontWeight: 700 }} /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
fd -t f -i 'tooltip' . | sort
rg -n -U 'DefaultTooltipContent|defaultLabelStyle|defaultItemStyle|labelStyle|itemStyle' . \
--glob '*.js' --glob '*.jsx' --glob '*.ts' --glob '*.tsx'Repository: riteshbonthalakoti/HELPDESK.AI
Length of output: 1339
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== package versions =="
for f in package.json Frontend/package.json pnpm-lock.yaml package-lock.json yarn.lock bun.lockb; do
[ -f "$f" ] && echo "--- $f ---" && (sed -n '1,220p' "$f" | rg -n '"recharts"|"`@recharts`|recharts@|recharts:' || true)
done
echo
echo "== AdminAnalytics tooltip area =="
wc -l Frontend/src/admin/pages/AdminAnalytics.jsx
sed -n '230,355p' Frontend/src/admin/pages/AdminAnalytics.jsx | cat -n | sed -n '1,140p'
echo
echo "== local recharts source if installed =="
fd -d 3 -i 'DefaultTooltipContent|\.d\.ts' node_modules . 2>/dev/null | rg 'recharts|DefaultTooltipContent' | head -50 || true
rg -n "DefaultTooltipContent|defaultLabelStyle|defaultItemStyle|const RechartsCSS|rechartsCSS" node_modules/.pnpm/node_modules recharts 2>/dev/null | head -80 || true
echo
echo "== node_modules presence =="
[ -d Frontend/node_modules ] && echo "Frontend/node_modules exists" || echo "Frontend/node_modules missing"
[ -d node_modules ] && echo "root node_modules exists" || echo "root node_modules missing"Repository: riteshbonthalakoti/HELPDESK.AI
Length of output: 13660
🌐 Web query:
Recharts 3.7.0 DefaultTooltipContent defaultLabelStyle defaultItemStyle source
💡 Result:
In Recharts 3.7.0, DefaultTooltipContent is an internal component rendered by the Tooltip component [1][2]. It does not utilize properties named "defaultLabelStyle" or "defaultItemStyle" in its public API or internal implementation [1][3][2]. The styling for the tooltip content is controlled through the following props provided by the Tooltip component [2]: - contentStyle: Defines the CSS styles for the tooltip wrapper [2]. - itemStyle: Defines the CSS styles for the individual items within the tooltip [2]. - labelStyle: Defines the CSS styles for the label portion of the tooltip [2]. These props allow for customization of the tooltip's appearance, but they are applied as object properties on the Tooltip component itself, not via internal "default" style identifiers [2]. If you are looking for the source code for DefaultTooltipContent, it is located in the Recharts GitHub repository at src/component/DefaultTooltipContent.tsx [1][3].
Citations:
- 1: https://github.com/recharts/recharts/blob/fc962394/src/component/DefaultTooltipContent.tsx
- 2: https://recharts.github.io/en-US/api/DefaultTooltipContent/
- 3: https://github.com/recharts/recharts/blob/master/src/component/DefaultTooltipContent.tsx
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Frontend/package-lock if present =="
[ -f Frontend/package-lock.json ] && (rg -n '"recharts"|recharts:|package-lock.json' Frontend/package-lock.json | head -40 || true)
echo
echo "== installed recharts DefaultTooltipContent/source and deps =="
node - <<'JS'
const fs = require('fs');
const path = require('path');
let pkgRoot = path.resolve('node_modules/.pnpm', fs.readdirSync('node_modules/.pnpm').sort().find(s => s.startsWith('recharts@3')) || 'recharts@3.7.0+node_recharts@3.7.0_react-dom@18');
try {
if (!fs.existsSync(path.join(pkgRoot, 'node_modules', 'recharts', 'package.json'))) {
pkgRoot = 'node_modules';
}
} catch (e) { pkgRoot = 'node_modules'; }
console.log('pkgRoot:', pkgRoot);
const files = [
'node_modules/.pnpm/node_modules/recharts/lib/component/DefaultTooltipContent.js',
'node_modules/recharts/lib/component/DefaultTooltipContent.js',
'node_modules/.pnpm/node_modules/recharts/esm/component/DefaultTooltipContent.js',
'node_modules/recharts/esm/component/DefaultTooltipContent.js',
].filter(p => fs.existsSync(p));
console.log('matches:', files);
for (const f of files) {
const txt = fs.readFileSync(f, 'utf8');
console.log(`--- ${f} ---`);
for (const needle of ['default=', 'itemStyle=', 'labelStyle=', 'prefixCls']) {
const idxs = [...txt].map((c,i)=>i).filter(i => txt.slice(i, i+needle.length) === needle);
for (const idx of idxs.slice(0, 8)) {
const start = Math.max(0, idx - 120);
const end = Math.min(txt.length, idx + 220);
console.log(txt.slice(start, end).replace(/\n/g, '|||\n'));
}
}
}
const package = JSON.parse(fs.readFileSync(path.join(pkgRoot.endsWith('node_modules/recharts') ? pkgRoot.split('/node_modules/')[0] : pkgRoot, 'node_modules/recharts/package.json'), 'utf8'));
console.log('recharts package version:', package.version);
JS
echo
echo "== fetch DefaultTooltipContent from canonical Recharts repo source if available =="
python3 - <<'PY'
import urllib.request
urls = [
"https://raw.githubusercontent.com/recharts/recharts/main/src/component/DefaultTooltipContent.tsx",
"https://raw.githubusercontent.com/recharts/recharts/v3.7.0/src/component/DefaultTooltipContent.tsx",
]
for url in urls:
print(f"--- {url} ---")
try:
data = urllib.request.urlopen(url, timeout=20).read().decode()
for i, line in enumerate(data.splitlines(), 1):
if "style=" in line or "default" in line.lower() or "prefix" in line:
print(f"{i}: {line}")
except Exception as e:
print("ERROR", e)
PYRepository: riteshbonthalakoti/HELPDESK.AI
Length of output: 1046
🌐 Web query:
github recharts v3.7.0 src component DefaultTooltipContent.tsx labelStyle itemStyle
💡 Result:
In Recharts v3.7.0, DefaultTooltipContent is an internal component typically rendered by the Tooltip component [1][2]. Both labelStyle and itemStyle are optional properties of the Props interface defined for DefaultTooltipContent [1]. 1. itemStyle: This property accepts a React.CSSProperties object to style individual data items displayed within the tooltip [1][2]. In v3.7.0, the default value for itemStyle is defined as: { display: 'block', paddingTop: 4, paddingBottom: 4, color: '#000' } [3][1]. 2. labelStyle: This property accepts a React.CSSProperties object to style the tooltip title (header), which renders at the top of the tooltip to display the categorical axis value [1][4]. In v3.7.0, the default value for labelStyle is an empty object: {} [3][1][2]. While these props can be passed to the DefaultTooltipContent component when customizing content, they are also exposed via the main Tooltip component API, which is the standard way to configure them in a Recharts implementation [2][4]. Note that the documentation distinguishes these tooltips items from Legend labels, which serve a different purpose [4].
Citations:
- 1: https://app.unpkg.com/recharts@3.7.0/files/types/component/DefaultTooltipContent.d.ts
- 2: https://recharts.github.io/en-US/api/DefaultTooltipContent/
- 3: https://github.com/recharts/recharts/blob/fc962394/src/component/DefaultTooltipContent.tsx
- 4: https://recharts.github.io/en-US/api/Tooltip/
Set explicit readable text colors on dark tooltips.
Four tooltips now use dark backgrounds, but only the Volume tooltip sets itemStyle; the Pie, Category, and AI tooltips also omit labelStyle/itemStyle, and default Recharts tooltip text is black. Add explicit light label/item colors for dark mode on all four tooltips, preserving the existing green item color where intended.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/admin/pages/AdminAnalytics.jsx` at line 254, Update all four
Recharts tooltips in the relevant analytics component, including the Pie,
Category, AI, and Volume tooltips, to provide explicit readable labelStyle and
itemStyle colors when isDark is true. Preserve the existing green item color
where intended while ensuring dark backgrounds use light text and light
backgrounds retain appropriate readable colors.
|
|
||
| return ( | ||
| <div key={idx} style={{ padding: '12px 20px', borderBottom: '1px solid #f9fafb', display: 'flex', gap: '16px' }} className="group"> | ||
| <div key={idx} style={{ padding: '12px 20px', borderBottom: `1px solid ${isDark ? '#1e293b' : '#f9fafb'}`, display: 'flex', gap: '16px' }} className="group"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Use a visible separator color in dark mode.
The dark border is #1e293b, which matches the Live Activity container background from Line 353, so row separators disappear. Use the card border color, such as #334155.
Proposed fix
- borderBottom: `1px solid ${isDark ? '`#1e293b`' : '`#f9fafb`'}`
+ borderBottom: `1px solid ${isDark ? '`#334155`' : '`#f9fafb`'}`📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div key={idx} style={{ padding: '12px 20px', borderBottom: `1px solid ${isDark ? '#1e293b' : '#f9fafb'}`, display: 'flex', gap: '16px' }} className="group"> | |
| <div key={idx} style={{ padding: '12px 20px', borderBottom: `1px solid ${isDark ? '`#334155`' : '`#f9fafb`'}`, display: 'flex', gap: '16px' }} className="group"> |
🧰 Tools
🪛 ast-grep (0.44.1)
[warning] 379-384: A list component should have a key to prevent re-rendering
Context:
{event.type === 'create' ? : event.type === 'resolve' ? : }
{idx !== stats.liveFeed.length - 1 && }
Note: [CWE-710] Improper Adherence to Coding Standards. Security best practice.
(list-component-needs-key)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/admin/pages/AdminAnalytics.jsx` at line 379, Update the row
separator styling in the analytics activity row div to use a visible dark-mode
border color such as the card border color `#334155` instead of `#1e293b`; keep the
existing light-mode color and other styles unchanged.
| useEffect(() => { | ||
| const root = document.documentElement; | ||
| if (isDark) { | ||
| root.classList.add('dark'); | ||
| } else { | ||
| root.classList.remove('dark'); | ||
| } | ||
| try { | ||
| localStorage.setItem('helpdesk-theme', isDark ? 'dark' : 'light'); | ||
| } catch { | ||
| // localStorage unavailable | ||
| } | ||
| }, [isDark]); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Prevent a light-theme flash when restoring dark mode.
The persisted state is read during initialization, but the dark class is applied only in useEffect, so reloads with helpdesk-theme=dark can paint light styles first. Apply the class in a pre-paint effect or before React mounts.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/contexts/ThemeContext.jsx` around lines 15 - 27, Update the
theme class application in the ThemeContext effect tied to isDark to run before
browser paint, using the appropriate pre-paint React hook or equivalent
initialization before mount. Preserve the existing dark/light class behavior and
localStorage persistence while preventing a light-theme flash during dark-mode
restoration.
1 participant
Changes
Files Modified
Closes #3894
Summary by CodeRabbit