Skip to content

fix: miscellaneous ui fixes #827

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
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

fix: miscellaneous ui fixes #827

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
511e1c9
fix: change mode
amhsirak Oct 13, 2025
9dfa2f6
feat: no hover on mode toggle
amhsirak Oct 13, 2025
73ee83a
feat: disable hover styles for icon button
amhsirak Oct 13, 2025
a091df4
feat: disable hover styles for icon button
amhsirak Oct 13, 2025
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
5 changes: 1 addition & 4 deletions src/components/dashboard/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,11 @@ export const NavBar: React.FC<NavBarProps> = ({
};

const renderThemeToggle = () => (
<Tooltip title="Toggle Mode">
<Tooltip title="Change Mode">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Internationalize the tooltip text for consistency.

The tooltip text "Change Mode" is hardcoded, but the rest of the navbar uses the t() function for internationalization. This creates an inconsistency.

Apply this diff to internationalize the tooltip:

-    <Tooltip title="Change Mode">
+    <Tooltip title={t('navbar.theme_toggle.tooltip')}>

Then add the corresponding translation key to your locale files (e.g., en.json):

{
  "navbar": {
    "theme_toggle": {
      "tooltip": "Change Mode"
    }
  }
}

And similarly for other locales (Spanish, Japanese, Chinese, German, Turkish).

🤖 Prompt for AI Agents 
In src/components/dashboard/NavBar.tsx around line 161, the Tooltip title is
hardcoded as "Change Mode"; replace it with the i18n lookup (e.g.,
t('navbar.theme_toggle.tooltip')) to match the rest of the navbar, and add the
key navbar.theme_toggle.tooltip with value "Change Mode" to your en.json and
equivalent translations in other locale files (es, ja, zh, de, tr).

<IconButton
onClick={toggleTheme}
sx={{
color: darkMode ? '#ffffff' : '#0000008A',
'&:hover': {
background: 'inherit'
}
}}
>
{darkMode ? <LightMode /> : <DarkMode />}
Expand Down
12 changes: 6 additions & 6 deletions src/context/theme-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,14 +155,14 @@ const darkTheme = createTheme({
styleOverrides: {
root: {
color: '#ffffff',
"&:hover": {
backgroundColor: 'rgba(255, 0, 195, 0.08)',
},
// "&:hover": {
// backgroundColor: 'rgba(255, 0, 195, 0.08)',
// },
Comment on lines +158 to +160
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Remove commented code or document the intention.

Commented-out code should typically be removed rather than left in the codebase. If this is intentional for easy rollback or experimentation, add a comment explaining why it's being kept.

Apply this diff to remove the commented code:

       root: {
         color: '#ffffff',
-        // "&:hover": {
-        //   backgroundColor: 'rgba(255, 0, 195, 0.08)',
-        // },
         '&.MuiIconButton-colorError': {

Alternatively, if you need to keep it temporarily, add a comment explaining why:

       root: {
         color: '#ffffff',
+        // Temporarily disabled to test default MUI hover behavior - remove after UI review
         // "&:hover": {
         //   backgroundColor: 'rgba(255, 0, 195, 0.08)',
         // },
📝 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.

Suggested change
// "&:hover": {
// backgroundColor: 'rgba(255, 0, 195, 0.08)',
// },
root: {
color: '#ffffff',
'&.MuiIconButton-colorError': {
🤖 Prompt for AI Agents 
In src/context/theme-provider.tsx around lines 158 to 160, there is
commented-out hover styling that should be removed or documented; delete the
three commented lines to clean up the codebase, or if you intentionally keep
them for temporary experimentation, replace them with a single-line comment
explaining why they remain (e.g., "temporary: preserved hover style for A/B
testing — remove before merge") so the intent is clear.

'&.MuiIconButton-colorError': {
color: '#f44336',
"&:hover": {
backgroundColor: 'rgba(244, 67, 54, 0.08)',
},
// "&:hover": {
// backgroundColor: 'rgba(244, 67, 54, 0.08)',
// },
Comment on lines +163 to +165
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Remove commented code or document the intention.

Same as above - commented-out code should be removed or explained.

Apply this diff to remove the commented code:

         '&.MuiIconButton-colorError': {
           color: '#f44336',
-          // "&:hover": {
-          //   backgroundColor: 'rgba(244, 67, 54, 0.08)',
-          // },
         },
📝 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.

Suggested change
// "&:hover": {
// backgroundColor: 'rgba(244, 67, 54, 0.08)',
// },
'&.MuiIconButton-colorError': {
color: '#f44336',
},
🤖 Prompt for AI Agents 
In src/context/theme-provider.tsx around lines 163 to 165, there is
commented-out CSS block for a hover backgroundColor; remove the commented code
or replace it with a short comment explaining why it was left commented (e.g.,
"kept for future hover behavior" or a ticket reference). Ensure the file no
longer contains dead commented code — either delete those three commented lines
or add a concise explanatory comment in their place.

},
},
},
Expand Down