Remove old mooc.fi logo, add new logo and new favicon (#1269)

frontend/components/NewLayout/Courses/CourseCard.tsx

@@ -15,7 +15,6 @@ import Sponsors from "./Sponsors"
 import { DifficultyTags, LanguageTags, ModuleTags } from "./Tags"
 import Tooltip from "/components/Tooltip"
 import { useTranslator } from "/hooks/useTranslator"
-import MoocLogoIcon from "/public/images/new/logos/moocfi_white.svg?icon"
 import { fontSize } from "/src/theme/util"
 import CommonTranslations from "/translations/common"
 import { useFormatDateTime } from "/util/dataFormatFunctions"
@@ -260,13 +259,6 @@ const StyledHelpIcon = styled(HelpIcon)`
   }
 `
 
-const MoocLogo = styled(MoocLogoIcon)`
-  fill: #fff;
-  opacity: 0.5;
-  width: 160%;
-  height: 160%;
-`
-
 const iconStyle = css`
   display: flex;
   width: 19px;
@@ -387,9 +379,7 @@ function CourseCardLayout({
 }: CourseCardLayoutProps) {
   return (
     <CardContainer>
-      <ModuleColor studyModule={studyModule} ended={ended}>
-        <MoocLogo viewBox="0 0 257.37 235.365" />
-      </ModuleColor>
+      <ModuleColor studyModule={studyModule} ended={ended} />
       <ContentContainer>
         <TextContainer>
           <Title variant="h3">

frontend/components/NewLayout/Header/MoocLogo.tsx

@@ -1,21 +1,18 @@
-import { Link, Typography } from "@mui/material"
+import { Link } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
-import MoocLogoFilled from "../Icons/MoocLogoFilled"
-import { fontSize } from "/src/theme/util"
+import MoocTextLogo from "../Icons/MoocTextLogo"
 
-const MoocLogoText = styled(Typography)(
-  ({ theme }) => `
-  ${fontSize(24, 24)}
-  font-weight: 700;
-  color: ${theme.palette.common.brand.nearlyBlack};
-  letter-spacing: -0.6px;
+const MoocLogoWrapper = styled("div")<{ height: number }>(
+  ({ theme, height }) => `
+  height: ${height}px;
+  display: flex;
+  align-items: center;
   ${theme.breakpoints.up("md")} {
-    ${fontSize(28, 28)}
+    height: ${height * 1.5}px;
   }
   ${theme.breakpoints.up("xl")} {
-    ${fontSize(32, 32)}
-    letter-spacing: -0.8px;
+    height: ${height * 2}px;
   }
 `,
 )
@@ -30,10 +27,12 @@ const MoocLogoLink = styled(Link)`
     cursor: pointer;
   }
 `
+
 const MoocLogo = () => (
   <MoocLogoLink href="/" aria-label="MOOC.fi homepage">
-    <MoocLogoFilled sx={{ fontSize: "3rem", marginRight: "0.5rem" }} />
-    <MoocLogoText>MOOC.fi</MoocLogoText>
+    <MoocLogoWrapper height={24}>
+      <MoocTextLogo height={24} />
+    </MoocLogoWrapper>
   </MoocLogoLink>
 )
 

frontend/components/NewLayout/Icons/MoocTextLogo.tsx

@@ -0,0 +1,13 @@
+import Image from "next/image"
+
+import MoocLogo from "/public/images/new/logos/moocfi_text.svg"
+
+type LogoProps = {
+  height?: number
+}
+
+const MoocTextLogo = ({ height }: LogoProps) => {
+  return <Image src={MoocLogo} alt="Mooc.fi logo" height={height} />
+}
+
+export default MoocTextLogo