diff --git a/frontends/mit-learn/public/images/mit-learn-logo.svg b/frontends/mit-learn/public/images/mit-learn-logo.svg index 548d70485f..0069f62884 100644 --- a/frontends/mit-learn/public/images/mit-learn-logo.svg +++ b/frontends/mit-learn/public/images/mit-learn-logo.svg @@ -1,8 +1,5 @@ - - - - - - - + + diff --git a/frontends/mit-learn/public/images/mit_logo_std_cmyk_black.svg b/frontends/mit-learn/public/images/mit-logo-black.svg similarity index 100% rename from frontends/mit-learn/public/images/mit_logo_std_cmyk_black.svg rename to frontends/mit-learn/public/images/mit-logo-black.svg diff --git a/frontends/mit-learn/public/images/mit-logo-transparent.svg b/frontends/mit-learn/public/images/mit-logo-color.svg similarity index 100% rename from frontends/mit-learn/public/images/mit-logo-transparent.svg rename to frontends/mit-learn/public/images/mit-logo-color.svg diff --git a/frontends/mit-learn/public/images/mit-logo-learn-white.svg b/frontends/mit-learn/public/images/mit-logo-learn-white.svg new file mode 100644 index 0000000000..c46990cc9a --- /dev/null +++ b/frontends/mit-learn/public/images/mit-logo-learn-white.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/frontends/mit-learn/public/images/mit-logo-transparent2.svg b/frontends/mit-learn/public/images/mit-logo-transparent2.svg deleted file mode 100644 index 67da18b013..0000000000 --- a/frontends/mit-learn/public/images/mit-logo-transparent2.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - -logo2 - - - - - - - diff --git a/frontends/mit-learn/public/images/mit-logo-transparent3.svg b/frontends/mit-learn/public/images/mit-logo-transparent3.svg deleted file mode 100644 index 67da18b013..0000000000 --- a/frontends/mit-learn/public/images/mit-logo-transparent3.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - -logo2 - - - - - - - diff --git a/frontends/mit-learn/public/images/mit-logo-transparent4.svg b/frontends/mit-learn/public/images/mit-logo-transparent4.svg deleted file mode 100644 index 7fd59c879c..0000000000 --- a/frontends/mit-learn/public/images/mit-logo-transparent4.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/frontends/mit-learn/public/images/mit-logo-transparent5.jpg b/frontends/mit-learn/public/images/mit-logo-transparent5.jpg deleted file mode 100644 index fca614d62b..0000000000 Binary files a/frontends/mit-learn/public/images/mit-logo-transparent5.jpg and /dev/null differ diff --git a/frontends/mit-learn/public/images/mit-logo-transparent5.png b/frontends/mit-learn/public/images/mit-logo-transparent5.png deleted file mode 100644 index 91a9f6ab32..0000000000 Binary files a/frontends/mit-learn/public/images/mit-logo-transparent5.png and /dev/null differ diff --git a/frontends/mit-learn/public/images/mit-logo-transparent5.svg b/frontends/mit-learn/public/images/mit-logo-transparent5.svg deleted file mode 100644 index a85e39a189..0000000000 --- a/frontends/mit-learn/public/images/mit-logo-transparent5.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - -logo2 - - - - - - - diff --git a/frontends/mit-learn/public/images/mit-logo-white.svg b/frontends/mit-learn/public/images/mit-logo-white.svg new file mode 100644 index 0000000000..5b0774426b --- /dev/null +++ b/frontends/mit-learn/public/images/mit-logo-white.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/frontends/mit-learn/src/page-components/Footer/Footer.test.tsx b/frontends/mit-learn/src/page-components/Footer/Footer.test.tsx index 09f2b25324..0f9ee8d05f 100644 --- a/frontends/mit-learn/src/page-components/Footer/Footer.test.tsx +++ b/frontends/mit-learn/src/page-components/Footer/Footer.test.tsx @@ -3,18 +3,23 @@ import Footer from "./Footer" import React from "react" import { ThemeProvider } from "ol-components" import * as urls from "@/common/urls" +import { MemoryRouter } from "react-router" describe("Footer", () => { test("Renders the appropriate text and links", async () => { - render(, { - wrapper: ThemeProvider, - }) + render( + + +
+ + , + ) interface Links { [key: string]: string } const expectedLinks: Links = { // key is blank here because the link is an image - "": "https://mit.edu/", + "": "https://www.mit.edu/", Home: urls.HOME, "About Us": urls.ABOUT, Accessibility: urls.ACCESSIBILITY, diff --git a/frontends/mit-learn/src/page-components/Footer/Footer.tsx b/frontends/mit-learn/src/page-components/Footer/Footer.tsx index bcabe9704d..d399ade81a 100644 --- a/frontends/mit-learn/src/page-components/Footer/Footer.tsx +++ b/frontends/mit-learn/src/page-components/Footer/Footer.tsx @@ -1,7 +1,7 @@ import { Container, styled } from "ol-components" -import { MITLogoLink } from "ol-utilities" import * as urls from "@/common/urls" import React, { FunctionComponent } from "react" +import MITLogoLink from "../MITLogoLink/MITLogoLink" const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL const HOME_URL = `${PUBLIC_URL}/` @@ -147,10 +147,7 @@ const Footer: FunctionComponent = () => { - + Massachusetts Institute of Technology
diff --git a/frontends/mit-learn/src/page-components/Header/Header.tsx b/frontends/mit-learn/src/page-components/Header/Header.tsx index a0756c3d86..64a6d81fa5 100644 --- a/frontends/mit-learn/src/page-components/Header/Header.tsx +++ b/frontends/mit-learn/src/page-components/Header/Header.tsx @@ -3,7 +3,6 @@ import type { NavData } from "ol-components" import { styled, AppBar, - Divider, NavDrawer, Toolbar, ClickAwayListener, @@ -23,7 +22,7 @@ import { RiPriceTag3Line, RiAwardLine, } from "@remixicon/react" -import { MITLogoLink, useToggle } from "ol-utilities" +import { useToggle } from "ol-utilities" import UserMenu from "./UserMenu" import { MenuButton } from "./MenuButton" import { @@ -41,18 +40,24 @@ import { SEARCH_LEARNING_MATERIAL, } from "@/common/urls" import { useUserMe } from "api/hooks/user" +import MITLogoLink from "../MITLogoLink/MITLogoLink" const Bar = styled(AppBar)(({ theme }) => ({ - height: "60px", - padding: "0 8px", - borderBottom: `1px solid ${theme.custom.colors.lightGray2}`, - backgroundColor: theme.custom.colors.white, - color: theme.custom.colors.darkGray1, + padding: "16px 8px", + borderBottom: `4px solid ${theme.custom.colors.darkGray2}`, + backgroundColor: theme.custom.colors.navGray, display: "flex", + justifyContent: "space-between", flexDirection: "column", - boxShadow: "0 2px 10px rgba(120 169 197 / 15%)", + boxShadow: "0px 3px 35px 0px rgba(23, 30, 42, 0.50)", + ".MuiToolbar-root": { + minHeight: "auto", + }, [theme.breakpoints.down("sm")]: { + height: "60px", padding: "0", + borderBottom: `1px solid ${theme.custom.colors.darkGray2}`, + boxShadow: "0px -2px 20px 0px rgba(0, 0, 0, 0.05)", }, })) @@ -83,45 +88,54 @@ const StyledToolbar = styled(Toolbar)({ flex: 1, }) -const LogoLink = styled(MITLogoLink)(({ theme }) => ({ - display: "flex", - border: "none", +const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({ img: { - width: 109, - height: 40, + height: "24px", [theme.breakpoints.down("sm")]: { - marginLeft: "16px", + height: "16px", }, }, })) -const LeftDivider = styled(Divider)({ - margin: "0 24px", - height: "24px", - alignSelf: "auto", +const Spacer = styled.div({ + flex: "1", }) -const RightDivider = styled(Divider)(({ theme }) => ({ - margin: "0 32px", - height: "24px", - alignSelf: "auto", +const LeftSpacer = styled.div(({ theme }) => ({ + width: "24px", [theme.breakpoints.down("sm")]: { - margin: "0 16px", + width: "16px", }, })) -const Spacer = styled.div` - flex: 1; -` +const StyledSearchButton = styled(ActionButtonLink)(({ theme }) => ({ + width: "auto", + height: "auto", + padding: "4px 16px", + "&:hover": { + svg: { + opacity: 1, + }, + }, + [theme.breakpoints.down("sm")]: { + padding: "0", + }, +})) const StyledSearchIcon = styled(RiSearch2Line)(({ theme }) => ({ - color: theme.custom.colors.darkGray2, + width: "24px", + height: "24px", + color: theme.custom.colors.white, + opacity: 0.5, margin: "4px 0", + [theme.breakpoints.down("sm")]: { + opacity: 1, + }, })) const SearchButton: FunctionComponent = () => { return ( - { aria-label="Search" > - + ) } @@ -142,7 +156,6 @@ const LoggedOutView: FunctionComponent = () => { - @@ -153,7 +166,6 @@ const LoggedInView: FunctionComponent = () => { return ( - ) @@ -265,8 +277,8 @@ const Header: FunctionComponent = () => { - - + + { - + + diff --git a/frontends/mit-learn/src/page-components/Header/MenuButton.tsx b/frontends/mit-learn/src/page-components/Header/MenuButton.tsx index 99218234c8..add3d730a7 100644 --- a/frontends/mit-learn/src/page-components/Header/MenuButton.tsx +++ b/frontends/mit-learn/src/page-components/Header/MenuButton.tsx @@ -12,7 +12,6 @@ const CloseMenuIcon = styled(RiCloseLargeLine)(({ theme }) => ({ const MenuButtonText = styled.div(({ theme }) => ({ alignSelf: "center", - color: theme.custom.colors.darkGray2, paddingLeft: "16px", textTransform: "none", [theme.breakpoints.down("sm")]: { @@ -23,12 +22,11 @@ const MenuButtonText = styled.div(({ theme }) => ({ const MenuButtonInner = styled.div({ display: "flex", - padding: "8px 0", alignItems: "flex-start", }) const StyledMenuButton = styled.button(({ theme }) => ({ - padding: "0", + padding: "8px 16px", background: "transparent", "&:hover:not(:disabled)": { background: "transparent", @@ -38,10 +36,21 @@ const StyledMenuButton = styled.button(({ theme }) => ({ display: "inline-flex", justifyContent: "center", alignItems: "center", - color: theme.palette.text.primary, + color: theme.custom.colors.white, transition: `background ${theme.transitions.duration.short}ms`, cursor: "pointer", borderStyle: "none", + opacity: 0.5, + svg: { + color: theme.custom.colors.white, + }, + [theme.breakpoints.down("sm")]: { + padding: "4px 0", + opacity: 1, + }, + "&:hover": { + opacity: 1, + }, })) interface MenuButtonProps { diff --git a/frontends/mit-learn/src/page-components/Header/UserMenu.tsx b/frontends/mit-learn/src/page-components/Header/UserMenu.tsx index 22c6304fc3..21c9d30827 100644 --- a/frontends/mit-learn/src/page-components/Header/UserMenu.tsx +++ b/frontends/mit-learn/src/page-components/Header/UserMenu.tsx @@ -1,5 +1,11 @@ import React, { useState } from "react" -import { ActionButtonLink, ButtonLink, SimpleMenu, styled } from "ol-components" +import { + ActionButtonLink, + ButtonLink, + SimpleMenu, + styled, + theme, +} from "ol-components" import type { MenuOverrideProps, SimpleMenuItem } from "ol-components" import * as urls from "@/common/urls" import { @@ -9,25 +15,40 @@ import { } from "@remixicon/react" import { useUserMe, User } from "api/hooks/user" import { useLocation } from "react-router" +import MITLogoLink from "../MITLogoLink/MITLogoLink" const FlexContainer = styled.div({ display: "flex", alignItems: "center", }) -const UserMenuContainer = styled.button({ +const UserMenuContainer = styled.button(({ theme }) => ({ display: "flex", alignItems: "center", cursor: "pointer", background: "none", - color: "inherit", - border: "none", - padding: "0", + color: theme.custom.colors.white, + height: "40px", + border: `1px solid ${theme.custom.colors.silverGrayDark}`, + borderRadius: "4px", + padding: "2px 8px", + gap: "8px", font: "inherit", -}) + margin: "0 16px", + opacity: 0.75, + "&:hover": { + opacity: 1, + }, + [theme.breakpoints.down("sm")]: { + border: "none", + opacity: 1, + gap: "2px", + padding: "4px 0", + margin: "0px 24px", + }, +})) const LoginButtonContainer = styled(FlexContainer)(({ theme }) => ({ - paddingLeft: "24px", "&:hover": { textDecoration: "none", }, @@ -50,10 +71,20 @@ const LoginButtonContainer = styled(FlexContainer)(({ theme }) => ({ }, })) -const UserIcon = styled(RiAccountCircleFill)(({ theme }) => ({ +const DesktopLoginButton = styled(ButtonLink)({ + height: "40px", + padding: "18px 12px", + margin: "0 16px", +}) + +const MobileLoginButton = styled(ActionButtonLink)({ width: "24px", height: "24px", - color: theme.custom.colors.black, + margin: "0 24px", +}) + +const UserIcon = styled(RiAccountCircleFill)(({ theme }) => ({ + color: theme.custom.colors.white, })) type UserMenuItem = SimpleMenuItem & { @@ -61,8 +92,7 @@ type UserMenuItem = SimpleMenuItem & { } const UserNameContainer = styled.span(({ theme }) => ({ - color: theme.custom.colors.darkGray2, - padding: "0 12px", + color: theme.custom.colors.white, [theme.breakpoints.down("sm")]: { display: "none", }, @@ -85,11 +115,32 @@ const UserMenuChevron: React.FC<{ open: boolean }> = ({ open }) => { return open ? : } +const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({ + width: "64px", + height: "32px", + marginLeft: "16px", + [theme.breakpoints.down("sm")]: { + width: "48px", + height: "24px", + marginLeft: "0", + }, +})) + type DeviceType = "mobile" | "desktop" type UserMenuProps = { variant?: DeviceType } +const MITHomeLink: React.FC = () => { + return ( + + ) +} + const UserMenu: React.FC = ({ variant }) => { const [visible, setVisible] = useState(false) const location = useLocation() @@ -103,6 +154,12 @@ const UserMenu: React.FC = ({ variant }) => { }) const items: UserMenuItem[] = [ + { + label: "Home", + key: "home", + allow: true, + href: urls.HOME, + }, { label: "Dashboard", key: "dashboard", @@ -125,47 +182,73 @@ const UserMenu: React.FC = ({ variant }) => { ] const menuOverrideProps: MenuOverrideProps = { - anchorOrigin: { horizontal: "right", vertical: "bottom" }, - transformOrigin: { horizontal: "right", vertical: "top" }, + anchorOrigin: { horizontal: "left", vertical: "bottom" }, + transformOrigin: { horizontal: "left", vertical: "top" }, + slotProps: { + paper: { + sx: { + borderRadius: "0px 0px 5px 5px", + backgroundColor: theme.custom.colors.darkGray1, + padding: "0 16px", + ".MuiMenu-list": { + padding: "8px 0", + ".MuiMenuItem-root": { + backgroundColor: theme.custom.colors.darkGray1, + color: theme.custom.colors.white, + padding: "8px 0", + "&:hover": { + textDecoration: "underline", + }, + }, + }, + ...theme.typography.body2, + }, + }, + }, } if (user?.is_authenticated) { return ( - allow) - .map(({ allow, ...item }) => item)} - trigger={ - - - - {user?.is_authenticated ? : ""} - - } - /> + <> + allow) + .map(({ allow, ...item }) => item)} + trigger={ + + + + {user?.is_authenticated ? : ""} + + } + /> + + ) } else { return ( {variant === "desktop" ? ( - Log In - + + ) : ( "" )} {variant === "mobile" ? ( - = ({ variant }) => { aria-label="Log in" > - + + ) : ( "" diff --git a/frontends/mit-learn/src/page-components/MITLogoLink/MITLogoLink.tsx b/frontends/mit-learn/src/page-components/MITLogoLink/MITLogoLink.tsx new file mode 100644 index 0000000000..45c4e872c0 --- /dev/null +++ b/frontends/mit-learn/src/page-components/MITLogoLink/MITLogoLink.tsx @@ -0,0 +1,36 @@ +import { Link, styled } from "ol-components" +import React from "react" + +const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL +const MIT_LEARN_HOME_URL = `${PUBLIC_URL}/` + +const MIT_LOGO_URL = `${PUBLIC_URL}/static/images/mit-logo-black.svg` + +const StyledLink = styled(Link)({ + display: "flex", + alignItems: "center", + justifyContent: "center", +}) + +interface Props { + href?: string + src?: string + className?: string + target?: string +} + +const MITLogoLink: React.FC = ({ href, src, className, target }) => ( + + MIT Logo + +) + +export default MITLogoLink diff --git a/frontends/ol-components/src/components/Banner/Banner.stories.tsx b/frontends/ol-components/src/components/Banner/Banner.stories.tsx index 77521fdd20..e56690ae39 100644 --- a/frontends/ol-components/src/components/Banner/Banner.stories.tsx +++ b/frontends/ol-components/src/components/Banner/Banner.stories.tsx @@ -48,7 +48,7 @@ export const logoBanner: Story = { @@ -66,7 +66,7 @@ export const logoBannerWithExtras: Story = { diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx index 95d711dd49..1f5208bea3 100644 --- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx +++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx @@ -3,7 +3,7 @@ import styled from "@emotion/styled" import React, { ReactElement } from "react" const DrawerContent = styled.div(({ theme }) => ({ - paddingTop: "60px", + paddingTop: "72px", width: "366px", height: "100%", background: theme.custom.colors.white, diff --git a/frontends/ol-components/src/components/ThemeProvider/colors.ts b/frontends/ol-components/src/components/ThemeProvider/colors.ts index 47b876a8a3..0c0ae91037 100644 --- a/frontends/ol-components/src/components/ThemeProvider/colors.ts +++ b/frontends/ol-components/src/components/ThemeProvider/colors.ts @@ -10,6 +10,7 @@ const colors = { silverGrayLight: "#B8C2CC", lightGray2: "#DDE1E6", lightGray1: "#F3F4F8", + navGray: "#303337", darkPink: "#750062", pink: "#FF14F0", lightPink: "#FFB3FF", diff --git a/frontends/ol-components/src/types/theme.d.ts b/frontends/ol-components/src/types/theme.d.ts index e971ffe9af..21986bf478 100644 --- a/frontends/ol-components/src/types/theme.d.ts +++ b/frontends/ol-components/src/types/theme.d.ts @@ -24,6 +24,7 @@ interface CustomTheme { silverGrayLight: string lightGray2: string lightGray1: string + navGray: string darkPink: string pink: string lightPink: string diff --git a/frontends/ol-utilities/src/components/MITLogoLink.tsx b/frontends/ol-utilities/src/components/MITLogoLink.tsx deleted file mode 100644 index c232e78170..0000000000 --- a/frontends/ol-utilities/src/components/MITLogoLink.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react" - -const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL -const HOME_URL = `${PUBLIC_URL}/` - -const MIT_LOGO_URL = `${PUBLIC_URL}/static/images/mit-logo-learn.svg` - -interface Props { - href?: string - src?: string - className?: string -} - -const MITLogoLink: React.FC = ({ href, src, className }) => ( - - MIT Logo - -) - -export default MITLogoLink diff --git a/frontends/ol-utilities/src/components/index.ts b/frontends/ol-utilities/src/components/index.ts deleted file mode 100644 index 1281be3867..0000000000 --- a/frontends/ol-utilities/src/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MITLogoLink } from "./MITLogoLink" diff --git a/frontends/ol-utilities/src/index.ts b/frontends/ol-utilities/src/index.ts index a0497c81cc..c46078b796 100644 --- a/frontends/ol-utilities/src/index.ts +++ b/frontends/ol-utilities/src/index.ts @@ -1,7 +1,6 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference /// -export * from "./components" export * from "./styles" export * from "./date/format"