Skip to content

fix: light mode wrong coloring for icons and some badge components #654

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
merged 2 commits into from
Nov 27, 2025
Merged

fix: light mode wrong coloring for icons and some badge components #654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d540c1a
fix: light mode wrong coloring for icons and some badge components
uveysaydemir Nov 24, 2025
08c2ba5
Merge branch 'frontend/development' into uveys-aydemir/frontend/fix-c…
uveysaydemir Nov 27, 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
1 change: 0 additions & 1 deletion app/frontend/src/assets/key_for_register.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion app/frontend/src/assets/lock.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion app/frontend/src/assets/mail.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion app/frontend/src/assets/phone.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion app/frontend/src/assets/user.svg
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion app/frontend/src/pages/DetermineDeadlineStep.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ const DetermineDeadlineStep = () => {
if (isSelected)
return {
backgroundColor: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
fontWeight: "bold",
};
return {};
Expand Down
18 changes: 3 additions & 15 deletions app/frontend/src/pages/ForgotPassword.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import useAuth from "../features/authentication/hooks/useAuth";
import logoImage from "../assets/logo.png";
import mailIcon from "../assets/mail.svg";
import { useTheme } from "../hooks/useTheme";
import EmailIcon from "@mui/icons-material/Email";

const ForgotPassword = () => {
const { colors, theme, setTheme } = useTheme();
Expand Down Expand Up @@ -148,19 +148,7 @@ const ForgotPassword = () => {
<form onSubmit={handleSubmit} noValidate className="w-full">
<div className="relative mt-2 mb-2">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<img
src={mailIcon}
alt=""
aria-hidden="true"
width="16"
height="16"
style={{
filter:
theme === "light"
? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
: "brightness(0) invert(1)",
}}
/>
<EmailIcon style={{ fontSize: 16 }} />
</div>
<label
htmlFor="email"
Expand Down Expand Up @@ -210,7 +198,7 @@ const ForgotPassword = () => {
backgroundColor: loading
? colors.interactive.disabled
: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
}}
onMouseOver={(e) =>
!loading &&
Expand Down
63 changes: 15 additions & 48 deletions app/frontend/src/pages/LoginPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,11 @@ import { useState, useEffect } from "react";
import { Link as RouterLink, useNavigate, useLocation } from "react-router-dom";
import useAuth from "../features/authentication/hooks/useAuth";
import logoImage from "../assets/logo.png";
import lockIcon from "../assets/lock.svg";
import mailIcon from "../assets/mail.svg";
import { useTheme } from "../hooks/useTheme";

// Eye icons for password visibility (you may need to replace these with actual SVG icons or use different icons)
const EyeIcon = () => (
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
<path
fillRule="evenodd"
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
clipRule="evenodd"
/>
</svg>
);

const EyeOffIcon = () => (
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
clipRule="evenodd"
/>
<path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
</svg>
);
import EmailIcon from "@mui/icons-material/Email";
import LockIcon from "@mui/icons-material/Lock";
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";

const LoginPage = () => {
const { colors, theme, setTheme } = useTheme();
Expand Down Expand Up @@ -132,7 +111,7 @@ const LoginPage = () => {
className="px-8 py-2 no-underline transition-colors"
style={{
backgroundColor: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
}}
onMouseOver={(e) =>
(e.currentTarget.style.backgroundColor =
Expand Down Expand Up @@ -219,17 +198,9 @@ const LoginPage = () => {
<div className="mb-4">
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<img
src={mailIcon}
alt=""
aria-hidden="true"
width="16"
height="16"
<EmailIcon
style={{
filter:
theme === "light"
? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
: "brightness(0) invert(1)",
fontSize: 16,
}}
/>
</div>
Expand Down Expand Up @@ -278,17 +249,9 @@ const LoginPage = () => {
<div className="mb-2">
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<img
src={lockIcon}
alt=""
aria-hidden="true"
width="16"
height="16"
<LockIcon
style={{
filter:
theme === "light"
? "brightness(0) saturate(100%) invert(0.3) sepia(100%) hue-rotate(0deg)"
: "brightness(0) invert(1)",
fontSize: 16,
}}
/>
</div>
Expand Down Expand Up @@ -346,7 +309,11 @@ const LoginPage = () => {
(e.currentTarget.style.color = colors.text.tertiary)
}
>
{showPassword ? <EyeOffIcon /> : <EyeIcon />}
{showPassword ? (
<VisibilityOffIcon style={{ fontSize: 16 }} />
) : (
<VisibilityIcon style={{ fontSize: 16 }} />
)}
</button>
</div>
</div>
Expand Down Expand Up @@ -381,7 +348,7 @@ const LoginPage = () => {
backgroundColor: loading
? colors.interactive.disabled
: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
}}
onMouseOver={(e) =>
!loading &&
Expand Down
14 changes: 7 additions & 7 deletions app/frontend/src/pages/ProfilePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,7 @@ const ProfilePage = () => {
sx={{
mt: 2,
backgroundColor: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
"&:hover": {
backgroundColor: colors.brand.secondary,
},
Expand Down Expand Up @@ -647,7 +647,7 @@ const ProfilePage = () => {
onClick={() => setRatingCategoriesOpen(true)}
sx={{
backgroundColor: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
"& .MuiChip-label": { px: 2 },
cursor: "pointer",
"&:hover": {
Expand Down Expand Up @@ -729,7 +729,7 @@ const ProfilePage = () => {
ml: 4,
"& .MuiBadge-badge": {
backgroundColor: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
},
}}
aria-label={`Earned badges: ${earnedBadges.length}`}
Expand Down Expand Up @@ -920,7 +920,7 @@ const ProfilePage = () => {
px: 3,
py: 1,
backgroundColor: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
"&:hover": {
backgroundColor: colors.brand.secondary,
},
Expand Down Expand Up @@ -951,7 +951,7 @@ const ProfilePage = () => {
px: 3,
py: 1,
backgroundColor: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
"&:hover": {
backgroundColor: colors.brand.secondary,
},
Expand Down Expand Up @@ -1011,7 +1011,7 @@ const ProfilePage = () => {
size="small"
sx={{
backgroundColor: colors.brand.primary,
color: colors.text.inverted,
color: colors.text.inverse,
"& .MuiChip-label": { px: 1 },
}}
/>
Expand Down Expand Up @@ -1043,7 +1043,7 @@ const ProfilePage = () => {
},
"& .Mui-selected": {
backgroundColor: `${colors.brand.primary} !important`,
color: `${colors.text.inverted} !important`,
color: `${colors.text.inverse} !important`,
"&:hover": {
backgroundColor: `${colors.brand.secondary} !important`,
},
Expand Down
Loading