Skip to content

Commit

Permalink
Update theming (#86)
Browse files Browse the repository at this point in the history 
* Update theming

* Fix neutral
  • Loading branch information
@carolynzhang18
carolynzhang18 authored Dec 8, 2024
1 parent 79f5ffa commit 5f48afe
Show file tree
Hide file tree
Showing 14 changed files with 365 additions and 503 deletions.
2 changes: 1 addition & 1 deletion frontend/.eslintrc.js
View file
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
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
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
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
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
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
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

0 comments on commit 5f48afe

Please sign in to comment.