Skip to content
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

Update theming #86

Merged
merged 2 commits into from
Dec 8, 2024
Merged

Update theming #86

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
a55931d
Update theming
carolynzhang18 Dec 8, 2024
c351c0d
Fix neutral
carolynzhang18 Dec 8, 2024
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
2 changes: 1 addition & 1 deletion frontend/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,5 @@ module.exports = {
"jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/no-static-element-interactions": "off",
},
ignorePatterns: ["build/*", ".eslintrc.js"],
ignorePatterns: ["build/*", ".eslintrc.js", "src/theme/themeAugmentation.d.ts"],
};
19 changes: 10 additions & 9 deletions frontend/src/components/auth/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Box, Container, Link, Typography, useTheme } from "@mui/material";
import { HOME_PAGE } from "../../constants/Routes";
import AuthContext from "../../contexts/AuthContext";
import { Role } from "../../types/AuthTypes";
import { PaletteRole } from "../../theme/theme";
import LoginForm from "./LoginForm";

interface LoginProps {
Expand Down Expand Up @@ -43,12 +42,18 @@ const Login: React.FC<LoginProps> = ({
return (
<Box>
<Box>
<Typography variant="headlineLarge" style={{ color: "#390C00" }}>
<Typography
variant="headlineMedium"
sx={{ color: theme.palette.Administrator.Pressed }}
>
{title}
</Typography>
</Box>
<Box marginTop="12px">
<Typography variant="bodyMedium" style={{ color: "#390C00" }}>
<Typography
variant="bodyMedium"
sx={{ color: theme.palette.Administrator.Pressed }}
>
{description}
</Typography>
</Box>
Expand Down Expand Up @@ -88,9 +93,7 @@ const Login: React.FC<LoginProps> = ({
<Typography
variant="labelSmall"
style={{
color:
theme.palette[userRole.toLowerCase() as PaletteRole]
?.main || "primary",
color: theme.palette[userRole].Default,
textTransform: "uppercase",
}}
>
Expand All @@ -104,9 +107,7 @@ const Login: React.FC<LoginProps> = ({
<Typography
variant="labelSmall"
style={{
color:
theme.palette[userRole.toLowerCase() as PaletteRole]
?.main || "primary",
color: theme.palette[userRole].Default,
}}
onClick={() => setShowDrawerLogin(false)}
sx={{ cursor: "pointer" }}
Expand Down
11 changes: 3 additions & 8 deletions frontend/src/components/auth/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ import { FORGOT_PASSWORD_PAGE } from "../../constants/Routes";
import authAPIClient from "../../APIClients/AuthAPIClient";
import AuthContext from "../../contexts/AuthContext";
import { authErrors } from "../../errors/AuthErrors";
import { PaletteRole } from "../../theme/theme";
import { capitalizeFirstLetter } from "../../utils/StringUtils";
import { neutral } from "../../theme/palette";

function isDrawerLogin(userRole: Role) {
return userRole !== "Learner";
Expand Down Expand Up @@ -67,7 +65,7 @@ const LoginForm = ({ userRole }: LoginFormProps) => {
<Typography
variant="headlineLarge"
sx={{
color: neutral[700],
color: theme.palette.Neutral[700],
display: "flex",
justifyContent: isDrawerLogin(userRole) ? "center" : "left",
}}
Expand Down Expand Up @@ -159,8 +157,7 @@ const LoginForm = ({ userRole }: LoginFormProps) => {
<Typography
variant="bodySmall"
style={{
color:
theme.palette[userRole.toLowerCase() as PaletteRole].main,
color: theme.palette[userRole].Default,
}}
>
Forgot Password
Expand All @@ -180,9 +177,7 @@ const LoginForm = ({ userRole }: LoginFormProps) => {
justifyContent: "center",
alignItems: "center",
borderRadius: "4px",
backgroundColor:
theme.palette[userRole.toLowerCase() as PaletteRole]?.main ||
"primary",
backgroundColor: theme.palette[userRole].Default,
boxShadow: "none",
}}
>
Expand Down
109 changes: 51 additions & 58 deletions frontend/src/components/auth/forgot_password/ForgotPasswordConfirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import React, { useEffect, useState } from "react";
import { Container, Typography, useTheme, Snackbar, Box } from "@mui/material";
import {
Container,
Typography,
useTheme,
Snackbar,
Box,
Button,
} from "@mui/material";
import SendIcon from "@mui/icons-material/Send";
import authAPIClient from "../../../APIClients/AuthAPIClient";

Expand Down Expand Up @@ -77,67 +84,57 @@ const ForgotPasswordConfirmation: React.FC<ForgotPasswordConfirmationProps> = ({
}}
>
<Typography
variant="h4"
variant="headlineLarge"
gutterBottom
sx={{ marginBottom: 0 }}
>
Email sent
</Typography>
<Typography variant="bodyMedium">
Check your email ({email}) and open the link we sent to continue.
</Typography>
</Container>
<Button variant="text" sx={{ padding: 0 }}>
<Typography
variant="labelSmall"
onClick={onBackToEmail}
sx={{
color: "#000",
fontSize: "28px",
fontWeight: 600,
lineHeight: "120%",
marginBottom: 0,
color: theme.palette.Learner.Default,
padding: 0,
}}
>
Email sent
NOT YOUR EMAIL? Go back to change your email
</Typography>
</Button>
{canResend ? (
<Button variant="text" sx={{ padding: 0 }}>
<Typography
variant="labelSmall"
onClick={handleResendEmail}
sx={{
color: canResend
? theme.palette.Learner.Default
: theme.palette.text?.disabled,
padding: 0,
}}
>
Didn’t get the email? Send it again now.
</Typography>
</Button>
) : (
<Typography
variant="body1"
variant="labelSmall"
onClick={handleResendEmail}
sx={{
color: "#000",
fontSize: "16px",
fontWeight: 400,
lineHeight: "140%",
letterSpacing: "0.2px",
color: canResend
? theme.palette.Learner.Default
: theme.palette.text?.disabled,
padding: 0,
}}
>
Check your email ({email}) and open the link we sent to continue.
Didn’t get the email? You can request a new one in {seconds}s.
</Typography>
</Container>
<Typography
variant="bodySmall"
onClick={onBackToEmail}
sx={{
color: theme.palette.learner?.main,
fontSize: "12.5px",
fontWeight: 300,
lineHeight: "120%",
letterSpacing: "0.625px",
textTransform: "uppercase",
cursor: "pointer",
padding: 0,
}}
>
NOT YOUR EMAIL? Go back to change your email
</Typography>
<Typography
variant="bodySmall"
onClick={handleResendEmail}
sx={{
color: canResend
? theme.palette.learner?.main
: theme.palette.text?.disabled,
fontSize: theme.typography.bodySmall,
fontWeight: 300,
lineHeight: "120%",
letterSpacing: "0.625px",
textTransform: "uppercase",
cursor: canResend ? "pointer" : "default",
padding: 0,
}}
>
{canResend
? "Didn’t get the email? Send it again now."
: `Didn’t get the email? You can request a new one in ${seconds}s.`}
</Typography>
)}
</Container>
<Snackbar
open={showSnackbar}
Expand Down Expand Up @@ -179,15 +176,11 @@ const ForgotPasswordConfirmation: React.FC<ForgotPasswordConfirmationProps> = ({
>
<SendIcon
sx={{
color: "#6C7517",
color: theme.palette.Success.Default,
marginRight: "16px",
}}
/>
<Typography
sx={{
color: "#6C7517",
}}
>
<Typography sx={{ color: theme.palette.Success.Default }}>
{`A new reset email has been sent.
Please check your inbox (and spam folder).`}
</Typography>
Expand Down
65 changes: 20 additions & 45 deletions frontend/src/components/auth/forgot_password/ForgotPasswordPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,25 +87,10 @@ const ForgotPasswordPage = (): React.ReactElement => {
marginLeft: -3,
}}
>
<Typography
variant="headlineLarge"
gutterBottom
sx={{
fontSize: theme.typography.headlineMedium?.fontSize,
fontWeight: theme.typography.headlineLarge?.fontWeight,
lineHeight: theme.typography.headlineLarge?.lineHeight,
color: "#000",
}}
>
<Typography variant="headlineLarge" gutterBottom>
Forgot your password?
</Typography>
<Typography
variant="bodyMedium"
sx={{
fontSize: theme.typography.bodyLarge?.fontSize,
color: "#000",
}}
>
<Typography variant="bodyMedium">
Enter your email, and we&apos;ll send you a link to reset your
password
</Typography>
Expand All @@ -131,12 +116,12 @@ const ForgotPasswordPage = (): React.ReactElement => {
fontWeight: theme.typography.bodyLarge?.fontWeight,
lineHeight: theme.typography.bodyLarge?.lineHeight,
letterSpacing: 0.2,
color: theme.palette.neutral.dark,
color: theme.palette.Neutral[500],
},
}}
InputLabelProps={{
sx: {
color: theme.palette.neutral.main,
color: theme.palette.Neutral[500],
fontWeight: theme.typography.bodyLarge?.fontWeight,
lineHeight: theme.typography.bodyLarge?.lineHeight,
letterSpacing: 0.32,
Expand All @@ -153,7 +138,7 @@ const ForgotPasswordPage = (): React.ReactElement => {
>
<Button
variant="contained"
color="learner"
color="Learner"
onClick={handleResetPassword}
sx={{
padding: "20px 24px",
Expand All @@ -162,40 +147,30 @@ const ForgotPasswordPage = (): React.ReactElement => {
gap: 1,
borderRadius: 1,
width: 500,
backgroundColor: theme.palette.learner.main,
color: theme.palette.neutral.light,
fontSize: theme.typography.bodyLarge?.fontSize,
fontWeight: theme.typography.titleSmall?.fontWeight,
lineHeight: theme.typography.bodyLarge?.lineHeight,
letterSpacing: 0.08,
textTransform: "none",
backgroundColor: theme.palette.Learner.Default,
color: theme.palette.Neutral[300],
marginTop: 4,
"&:hover": {
backgroundColor: "#002A32",
},
"&:active": {
backgroundColor: theme.palette.learner.dark,
backgroundColor: theme.palette.Learner.Pressed,
},
}}
>
Send reset link to email
<Typography variant="labelLargeProminent">
Send reset link to email
</Typography>
</Button>
<Button variant="text" sx={{ padding: 0 }}>
<Typography
variant="labelSmall"
sx={{ color: theme.palette.Learner.Default }}
onClick={handleBackToLogin}
>
Remember your password? Back to Login
</Typography>
</Button>
<Typography
variant="bodySmall"
sx={{
color: theme.palette.learner.main,
textAlign: "center",
fontSize: theme.typography.bodySmall?.fontSize,
fontWeight: theme.typography.bodySmall?.fontWeight,
lineHeight: theme.typography.bodySmall?.lineHeight,
letterSpacing: 0.625,
textTransform: "uppercase",
cursor: "pointer",
}}
onClick={handleBackToLogin}
>
Remember your password? Back to Login
</Typography>
</Container>
</form>
</Container>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/common/navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export default function Navbar() {

return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<AppBar position="static" sx={{ bgcolor: `${user.role}.Default` }}>
<Toolbar>
<Typography
variant="h6"
Expand Down
12 changes: 8 additions & 4 deletions frontend/src/components/courses/UnitSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
} from "@mui/material";
import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import { CourseUnit } from "../../types/CourseTypes";
import { neutral } from "../../theme/palette";

interface UnitSideBarProps {
courseUnits: CourseUnit[];
Expand Down Expand Up @@ -47,7 +46,7 @@ export default function UnitSidebar(props: UnitSideBarProps) {
anchor="left"
open={open}
>
<Box height="100%" sx={{ backgroundColor: theme.palette.neutral.light }}>
<Box height="100%" sx={{ backgroundColor: theme.palette.Learner.Light }}>
<Box
height="59px"
display="flex"
Expand All @@ -64,7 +63,7 @@ export default function UnitSidebar(props: UnitSideBarProps) {
sx={{
p: "8px",
fontSize: "12px",
color: theme.palette.neutral.main,
color: theme.palette.Neutral[700],
lineHeight: "1.5",
}}
endIcon={<MenuOpenIcon />}
Expand Down Expand Up @@ -93,7 +92,12 @@ export default function UnitSidebar(props: UnitSideBarProps) {
py: "15px",
px: "32px",
backgroundColor:
selectedIndex === index ? neutral[90] : "transparent",
selectedIndex === index
? theme.palette.Learner.Hover
: "transparent",
"&:hover": {
backgroundColor: theme.palette.Learner.Hover,
},
}}
onClick={(event) => handleListItemClick(event, index)}
>
Expand Down
Loading