new layout dropdown menu etc. (#1228)

frontend/components/NewLayout/Header/Header.tsx

@@ -40,7 +40,7 @@ const GroupToolbar = styled(Toolbar)`
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
-  overflow: hidden;
+  padding: 0 8px;
 `
 
 const HyLogo = styled(HyLogoIcon)(
@@ -107,12 +107,27 @@ const HyLogoContainer = styled("div")(
 `,
 )
 
+const BrandingContainer = styled("div")(
+  ({ theme }) => `
+    display: flex;
+    align-items: center;
+    padding: 0px 0;
+    ${theme.breakpoints.up("xl")} {
+      padding: 12px 0;
+    }
+  `,
+)
+
+const HeaderAppBar = styled(AppBar)`
+  /**/
+` as typeof AppBar
+
 function Header() {
   const t = useTranslator(CommonTranslations)
 
   return (
     <HideOnScroll>
-      <AppBar position="sticky" aria-label="toolbar" elevation={0}>
+      <HeaderAppBar position="sticky" aria-label="toolbar" elevation={0}>
         <HyToolbar>
           <HyLogoContainer>
             <HyLogo />
@@ -121,11 +136,13 @@ function Header() {
           <LanguageSwitch />
         </HyToolbar>
         <GroupToolbar>
-          <MoocLogo />
+          <BrandingContainer>
+            <MoocLogo />
+          </BrandingContainer>
           <DesktopNavigationMenu />
           <MobileNavigationMenu />
         </GroupToolbar>
-      </AppBar>
+      </HeaderAppBar>
     </HideOnScroll>
   )
 }

frontend/components/NewLayout/Header/MoocLogo.tsx

@@ -1,9 +1,7 @@
-import Image from "next/image"
-
-import { Avatar, Link, Typography } from "@mui/material"
+import { Link, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
-import moocLogo from "/public/images/new/logos/moocfi.svg"
+import MoocLogoFilled from "../Icons/MoocLogoFilled"
 
 const MoocLogoText = styled(Typography)(
   ({ theme }) => `
@@ -19,27 +17,19 @@ const MoocLogoText = styled(Typography)(
 `,
 )
 
-const MoocLogoAvatar = styled(Avatar)`
-  height: 3rem;
-  width: 3rem;
-  margin-right: 0.5em;
-`
-
 const MoocLogoLink = styled(Link)`
   color: black;
   text-decoration: none;
   display: flex;
   flex-direction: row;
-  margin-right: 1.5em;
+  align-items: center;
   &:hover {
     cursor: pointer;
   }
 `
 const MoocLogo = () => (
   <MoocLogoLink href="/_new" aria-label="MOOC.fi homepage">
-    <MoocLogoAvatar>
-      <Image src={moocLogo} alt="MOOC.fi logo" priority fill />
-    </MoocLogoAvatar>
+    <MoocLogoFilled sx={{ fontSize: "3rem", marginRight: "0.5rem" }} />
     <MoocLogoText>MOOC.fi</MoocLogoText>
   </MoocLogoLink>
 )

frontend/components/NewLayout/Icons/ArrowRight.tsx

@@ -0,0 +1,15 @@
+import { createSvgIcon } from "@mui/material/utils"
+
+const ArrowRightIcon = createSvgIcon(
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={30}
+    height={29}
+    viewBox="0 0 30 29"
+  >
+    <polygon points="29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594" />
+  </svg>,
+  "ArrowRight",
+)
+
+export default ArrowRightIcon

frontend/components/NewLayout/Icons/CaretRight.tsx

@@ -0,0 +1,10 @@
+import { createSvgIcon } from "@mui/material/utils"
+
+const CaretRightIcon = createSvgIcon(
+  <svg viewBox="0 0 1000 1000">
+    <path d="M291,35L181,158l394,345L181,842l110,123l532-462L291,35z" />
+  </svg>,
+  "CaretRight",
+)
+
+export default CaretRightIcon

frontend/components/NewLayout/Icons/Heart.tsx

@@ -0,0 +1,10 @@
+import { createSvgIcon } from "@mui/material/utils"
+
+const HeartIcon = createSvgIcon(
+  <svg viewBox="0 0 1000 1000">
+    <path d="M968 326q0-110-48-179-36-53-98-78-44-17-87-17-59 0-114 31-41 24-78 65-16 18-43 55l-31-38q-11-14-22-25-14-14-27-26-16-13-32-24-18-12-37-21t-41-13-45-4q-43 0-87 17-62 25-98 78-48 69-48 179 0 131 79 264 61 105 166 204 74 69 152 122l6 7q25 14 30 19l7 4q9 4 15 6h19q20-7 15-5 8-3 9-5t11-8 17-11l7-7q80-54 156-124 106-100 168-204 79-133 79-262z" />
+  </svg>,
+  "Heart",
+)
+
+export default HeartIcon

frontend/components/NewLayout/Icons/MoocLogoFilled.tsx

@@ -0,0 +1,14 @@
+import { createSvgIcon } from "@mui/material/utils"
+
+const MoocLogoFilled = createSvgIcon(
+  <svg viewBox="0 0 257.37 235.365">
+    <ellipse cx="128.684" cy="117.683" rx="128.685" ry="117.682" fill="#fff" />
+    <path
+      d="M108.966 216.8c-51.353-9.153-87.703-44.319-93.098-90.064-2.443-20.71 3.563-43.808 16.144-62.093 12.346-17.945 34.145-33.88 56.534-41.325 15.037-5 23.485-6.362 39.92-6.431 26.63-.113 48.95 6.465 70 20.628 14.581 9.81 32.5 30.94 32.5 38.323 0 6.541-8.2 11.274-16.323 9.42-4.822-1.1-6.56-2.695-13.097-12.017-13.05-18.613-32.679-31.721-57.147-38.163-7.727-2.035-11.16-2.343-25.433-2.28-14.44.063-17.701.394-26.119 2.65-35.356 9.479-60.376 33.59-68.02 65.551-2.944 12.306-2.291 29.285 1.564 40.71 10.052 29.784 33.4 50.593 67.05 59.758 6.864 1.869 10.63 2.185 26.025 2.185 15.628 0 19.12-.302 26.5-2.293 22.947-6.19 44.723-21.153 55.87-38.392 9.334-14.435 8.668-13.758 13.556-13.758 8.465 0 15.574 4.769 15.574 10.447 0 7.094-18.18 28.152-32.53 37.68-13.26 8.804-27.494 14.879-43.146 18.413-9.51 2.148-36.708 2.766-46.324 1.052zm-5.5-23.691c-15.665-1.636-32.92-8.598-44.993-18.154-18.76-14.848-29.814-38.581-28.136-60.406 1.356-17.64 8.171-31.903 21.664-45.34 43.768-43.588 123.115-27.062 141.636 29.5 3.338 10.193 3.815 27.259 1.046 37.387-10.141 37.097-49.051 61.417-91.217 57.013zm26.339-14.883c23.604-6.67 41.205-23.442 47.765-45.517 2.594-8.729 2.431-23.007-.364-32-7.737-24.896-32.671-44.011-60.405-46.31-41.642-3.45-76.043 22.458-78.486 59.11-1.166 17.495 4.925 33.037 18.12 46.233 11.033 11.035 23.647 17.446 40.362 20.512 7.433 1.364 24.774.299 33.008-2.028zm-42.05-10.511c-20.963-5.294-37.654-22.381-40.741-41.71-1.284-8.033.021-19.052 2.932-24.758 3.976-7.792 11.527-10.19 18.122-5.753 4.021 2.705 6.433 7.338 7.4 14.215l.703 5 3.401-9c4.76-12.594 5.57-13.955 8.511-14.301 3.843-.452 4.976 1.827 5.713 11.499l.67 8.802 3.858-9.298c3.994-9.625 6.898-12.89 10.461-11.76 4.534 1.44 5.166 3.525 6.246 20.62.568 9.003 1.215 16.55 1.436 16.771.22.221 1.87-2.576 3.665-6.216 3.424-6.943 5.416-8.447 8.796-6.638 2.969 1.589 2.581 3.591-2.826 14.61-6.728 13.708-10.483 16.597-15.721 12.091-2.336-2.01-2.904-3.495-3.547-9.286-.42-3.792-.788-11.147-.816-16.344-.03-5.45-.422-9.048-.926-8.5-.48.522-2.972 7.925-5.536 16.45-4.947 16.44-6.44 19.212-9.359 17.379-1.756-1.103-1.993-2.493-3.981-23.38l-.81-8.5-3.256 10.5c-5.576 17.976-6.587 20.454-8.49 20.82-3.986.769-4.694-1.419-4.694-14.499 0-13.807-1.24-20.676-4.351-24.112-2.784-3.074-5.615-2.448-8.098 1.792-.327.59-2.05 5.222-2.05 13.5 0 8.783 1.202 12.199 2.708 15.78 3.481 7.43 12.281 16.636 19.662 20.57 24.75 13.192 55.583 4.255 67.278-19.5 2.083-3.914 4.23-7.436 4.187-16.83-.04-8.652-1.994-12.123-3.564-15.74-4.557-9.892-15.38-19.736-26.476-24.081-15.52-6.078-34.868-3.17-47.683 7.165-2.138 1.725-4.469 3.136-5.179 3.136-1.558 0-4.434-2.727-4.434-4.204 0-1.974 6.693-7.388 13.614-11.011 10.498-5.497 17.348-7.195 28.886-7.158 8.467.027 11.31.489 18.544 3.012 20.703 7.222 35.024 22.848 38.133 41.61 3.814 23.013-11.928 47.104-36.454 55.789-8.058 2.854-27.329 3.64-35.934 1.468z"
+      fill="#ffad14"
+    />{" "}
+  </svg>,
+  "MoocLogoFilled",
+)
+
+export default MoocLogoFilled

frontend/components/NewLayout/Navigation/DesktopNavigationMenu.tsx

@@ -20,14 +20,6 @@ import { useTranslator } from "/hooks/useTranslator"
 import { signOut } from "/lib/authentication"
 import CommonTranslations from "/translations/common"
 
-const NavigationLinksContainer = styled("div")(
-  ({ theme }) => `
-  ${theme.breakpoints.down("sm")} {
-    display: none;
-  }
-`,
-)
-
 const NavigationRightContainer = styled("div")`
   display: inline-grid;
   gap: 4px;
@@ -135,9 +127,7 @@ const UserOptionsMenu = () => {
 const DesktopNavigationMenu = () => {
   return (
     <>
-      <NavigationLinksContainer>
-        <NavigationLinks />
-      </NavigationLinksContainer>
+      <NavigationLinks />
       <NavigationRightContainer>
         <UserOptionsMenu />
       </NavigationRightContainer>