Logo and button link to dashboard

frontends/main/src/components/MITLogoLink/MITLogoLink.tsx

@@ -7,7 +7,7 @@ import learnLogo from "@/public/images/mit-learn-logo.svg"
 import { styled } from "ol-components"
 
 interface Props {
-  logo: "mit_white" | "mit_black" | "learn"
+  logo: "mit_white" | "mit_black" | "learn" | "learn_authenticated"
   className?: string
 }
 
@@ -27,6 +27,10 @@ const linkProps = {
     href: "/",
     title: "MIT Learn Homepage",
   },
+  learn_authenticated: {
+    href: "/dashboard",
+    title: "Your MIT Learning Journey",
+  },
   mit_black: {
     href: "https://mit.edu/",
     title: "MIT Homepage",
@@ -42,6 +46,9 @@ const imageProps = {
   learn: {
     src: learnLogo,
   },
+  learn_authenticated: {
+    src: learnLogo,
+  },
   mit_black: {
     src: mitLogoBlack,
   },

frontends/main/src/page-components/Header/Header.test.tsx

@@ -12,11 +12,28 @@ import * as urlConstants from "@/common/urls"
 import { setMockResponse, urls } from "api/test-utils"
 
 describe("Header", () => {
-  it("Includes a link to the Homepage", async () => {
+  it("Includes a link to the Homepage for anonymous user", async () => {
+    setMockResponse.get(urls.userMe.get(), { is_authenticated: false })
+    renderWithProviders(<Header />)
+    const header = screen.getByRole("banner")
+    const links = within(header).getAllByRole("link", {
+      name: "MIT Learn Homepage",
+    })
+    links.forEach((link) => {
+      expect(link).toHaveAttribute("href", "/")
+    })
+  })
+
+  it("Includes a link to the Dashboard for authenticated user", async () => {
     setMockResponse.get(urls.userMe.get(), { is_authenticated: true })
     renderWithProviders(<Header />)
     const header = screen.getByRole("banner")
-    within(header).getAllByTitle("MIT Learn Homepage")
+    const links = await within(header).findAllByRole("link", {
+      name: "Your MIT Learning Journey",
+    })
+    links.forEach((link) => {
+      expect(link).toHaveAttribute("href", "/dashboard")
+    })
   })
 })
 

frontends/main/src/page-components/Header/Header.tsx

@@ -51,7 +51,7 @@ const Bar = styled(AppBar)(({ theme }) => ({
     minHeight: "auto",
   },
   height: theme.custom.dimensions.headerHeight,
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     height: theme.custom.dimensions.headerHeightSm,
     padding: "0",
   },
@@ -63,19 +63,19 @@ const FlexContainer = styled.div({
 })
 
 const DesktopOnly = styled(FlexContainer)(({ theme }) => ({
-  [theme.breakpoints.up("sm")]: {
+  [theme.breakpoints.up("md")]: {
     display: "flex",
   },
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     display: "none",
   },
 }))
 
 const MobileOnly = styled(FlexContainer)(({ theme }) => ({
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     display: "flex",
   },
-  [theme.breakpoints.up("sm")]: {
+  [theme.breakpoints.up("md")]: {
     display: "none",
   },
 }))
@@ -88,7 +88,7 @@ const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({
   img: {
     height: "24px",
     width: "auto",
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       height: "16px",
     },
   },
@@ -100,7 +100,7 @@ const Spacer = styled.div({
 
 const LeftSpacer = styled.div(({ theme }) => ({
   width: "24px",
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     width: "16px",
   },
 }))
@@ -114,7 +114,7 @@ const StyledSearchButton = styled(ActionButtonLink)(({ theme }) => ({
       opacity: 1,
     },
   },
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     padding: "0",
   },
   alignItems: "center",
@@ -128,7 +128,7 @@ const StyledSearchIcon = styled(RiSearch2Line)(({ theme }) => ({
   color: theme.custom.colors.white,
   opacity: 0.5,
   margin: "4px 0",
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     opacity: 1,
   },
 }))
@@ -275,6 +275,7 @@ const Header: FunctionComponent = () => {
   const [drawerOpen, toggleDrawer] = useToggle(false)
   const desktopTrigger = React.useRef<HTMLButtonElement>(null)
   const mobileTrigger = React.useRef<HTMLButtonElement>(null)
+  const { data: user } = useUserMe()
   const drawerToggleEvent = drawerOpen
     ? PostHogEvents.ClosedNavDrawer
     : PostHogEvents.OpenedNavDrawer
@@ -293,7 +294,9 @@ const Header: FunctionComponent = () => {
       <Bar position="fixed">
         <StyledToolbar variant="dense">
           <DesktopOnly>
-            <StyledMITLogoLink logo="learn" />
+            <StyledMITLogoLink
+              logo={user?.is_authenticated ? "learn_authenticated" : "learn"}
+            />
             <LeftSpacer />
             <MenuButton
               ref={desktopTrigger}
@@ -304,7 +307,9 @@ const Header: FunctionComponent = () => {
           <MobileOnly>
             <MenuButton ref={mobileTrigger} onClick={menuClick} />
             <LeftSpacer />
-            <StyledMITLogoLink logo="learn" />
+            <StyledMITLogoLink
+              logo={user?.is_authenticated ? "learn_authenticated" : "learn"}
+            />
           </MobileOnly>
           <Spacer />
           <UserView />

frontends/main/src/page-components/Header/MenuButton.tsx

@@ -12,7 +12,7 @@ const MenuButtonText = styled.div(({ theme }) => ({
   alignSelf: "center",
   paddingLeft: "16px",
   textTransform: "none",
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     display: "none",
   },
   ...theme.typography.subtitle2,
@@ -41,7 +41,7 @@ const StyledMenuButton = styled.button(({ theme }) => ({
   svg: {
     color: theme.custom.colors.white,
   },
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     padding: "4px 0",
   },
 }))

frontends/main/src/page-components/Header/UserMenu.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import React, { useState } from "react"
+import { usePathname } from "next/navigation"
 import { SimpleMenu, styled, theme } from "ol-components"
 import type { MenuOverrideProps, SimpleMenuItem } from "ol-components"
 import { ActionButtonLink, ButtonLink } from "@mitodl/smoot-design"
@@ -35,7 +36,7 @@ const UserMenuContainer = styled.button(({ theme }) => ({
   "&:hover": {
     opacity: 1,
   },
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     border: "none",
     opacity: 1,
     gap: "2px",
@@ -48,7 +49,7 @@ const LoginButtonContainer = styled(FlexContainer)(({ theme }) => ({
   "&:hover": {
     textDecoration: "none",
   },
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     padding: "0",
     ".login-button-desktop": {
       display: "none",
@@ -57,7 +58,7 @@ const LoginButtonContainer = styled(FlexContainer)(({ theme }) => ({
       display: "flex",
     },
   },
-  [theme.breakpoints.up("sm")]: {
+  [theme.breakpoints.up("md")]: {
     ".login-button-desktop": {
       display: "flex",
     },
@@ -89,7 +90,7 @@ type UserMenuItem = SimpleMenuItem & {
 
 const UserNameContainer = styled.span(({ theme }) => ({
   color: theme.custom.colors.white,
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     display: "none",
   },
   ...theme.typography.body2,
@@ -108,21 +109,30 @@ const StyledMITLogoLink = styled(MITLogoLink)(({ theme }) => ({
     width: "64px",
     height: "32px",
     marginLeft: "16px",
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       width: "48px",
       height: "24px",
       marginLeft: "0",
     },
   },
 }))
 
+const DashboardLink = styled(ButtonLink)(({ theme }) => ({
+  fontSize: theme.typography.body3.fontSize,
+  marginRight: "24px",
+  [theme.breakpoints.down("md")]: {
+    display: "none",
+  },
+}))
+
 type DeviceType = "mobile" | "desktop"
 type UserMenuProps = {
   variant?: DeviceType
 }
 
 const UserMenu: React.FC<UserMenuProps> = ({ variant }) => {
   const [visible, setVisible] = useState(false)
+  const pathname = usePathname()
   const loginUrl = urls.auth({
     next: {
       pathname: urls.DASHBOARD_HOME,
@@ -200,6 +210,11 @@ const UserMenu: React.FC<UserMenuProps> = ({ variant }) => {
             </UserMenuContainer>
           }
         />
+        {!pathname.startsWith("/dashboard") ? (
+          <DashboardLink variant="tertiary" href={"/dashboard"}>
+            Dashboard
+          </DashboardLink>
+        ) : null}
         <StyledMITLogoLink logo="mit_white" />
       </>
     )