From f86a6ebab9bde6082105aa467655b7db9b1a937d Mon Sep 17 00:00:00 2001 From: Mathias Skogen Raa Date: Sat, 22 Feb 2025 19:05:22 +0100 Subject: [PATCH] Update logo and watermark with Janus-themed design --- frontend/public/janus_new.svg | 54 +++++++++++++++++++ frontend/src/app/components/Layout/Footer.tsx | 19 +++---- frontend/src/app/components/Layout/Logo.tsx | 29 ++++++++-- frontend/src/components/Logo.tsx | 31 ++++++++--- frontend/src/components/LogoFull.tsx | 51 ++++++++++++++++++ frontend/src/layouts/footer/Footer.tsx | 11 ++-- 6 files changed, 170 insertions(+), 25 deletions(-) create mode 100644 frontend/public/janus_new.svg create mode 100644 frontend/src/components/LogoFull.tsx diff --git a/frontend/public/janus_new.svg b/frontend/public/janus_new.svg new file mode 100644 index 0000000000..eb427cc713 --- /dev/null +++ b/frontend/public/janus_new.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/components/Layout/Footer.tsx b/frontend/src/app/components/Layout/Footer.tsx index 3b7c504e6c..710194f32a 100644 --- a/frontend/src/app/components/Layout/Footer.tsx +++ b/frontend/src/app/components/Layout/Footer.tsx @@ -5,25 +5,26 @@ import { styled } from "@mui/material/styles"; import Image from "next/image"; import { useState } from "react"; -import { HallOfFame } from "@/layouts/footer/HallOfFame"; -import dayjs from "@/lib/date"; -import rubberdokLogo from "~/public/img/rubberdok_logo_black.svg"; - import { Link, LinkProps } from "../Link"; -import { Logo } from "./Logo"; import { Vercel } from "./Vercel"; +import { LogoFull } from "@/components/LogoFull"; +import { HallOfFame } from "@/layouts/footer/HallOfFame"; +import dayjs from "@/lib/date"; +import rubberdokLogo from "~/public/img/rubberdok_logo_black.svg"; + // https://nextjs.org/docs/advanced-features/dynamic-import const Watermark = styled("div")(({ theme }) => ({ - background: "url('/nth.svg')", - backgroundSize: 500, + background: "url('/janus_new.svg')", + backgroundSize: 320, backgroundPosition: "right center", backgroundRepeat: "no-repeat", opacity: 0.1, [theme.getColorSchemeSelector("dark")]: { - opacity: 0.3, + opacity: 0.1, + filter: "invert(1)", }, position: "absolute", width: "600px", @@ -49,7 +50,7 @@ export const Footer: React.FC = () => { - + Janus Linjeforening, NTNU Kolbjørn Hejes vei 1E, 7034 Trondheim Org.nr. 994 778 463 diff --git a/frontend/src/app/components/Layout/Logo.tsx b/frontend/src/app/components/Layout/Logo.tsx index f51dad3b14..9970699c37 100644 --- a/frontend/src/app/components/Layout/Logo.tsx +++ b/frontend/src/app/components/Layout/Logo.tsx @@ -1,4 +1,4 @@ -import { Box, SxProps, Typography } from "@mui/material"; +import { Box, SxProps } from "@mui/material"; import { Link } from "../Link"; @@ -10,21 +10,40 @@ type Props = { sx?: SxProps }; * The display name cannot be resolved if we wrap an arrow function in memo() directly, * hence this is wrapping a named function. */ +const LOGO_WIDTH = 95; export const Logo: React.FC = ({ sx }) => { return ( - - INDØK - + ({ + fill: "black", + [theme.getColorSchemeSelector("dark")]: { + fill: "white", + }, + })} + viewBox="0 0 647 174" + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + + ); diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx index 6002301757..c9b6668e00 100644 --- a/frontend/src/components/Logo.tsx +++ b/frontend/src/components/Logo.tsx @@ -1,6 +1,6 @@ -import { Box, SxProps, Typography } from "@mui/material"; +import { Box, SxProps } from "@mui/material"; -import Link from "./Link"; +import { Link } from "@/components"; type Props = { sx?: SxProps }; @@ -10,21 +10,40 @@ type Props = { sx?: SxProps }; * The display name cannot be resolved if we wrap an arrow function in memo() directly, * hence this is wrapping a named function. */ +const LOGO_WIDTH = 95; export const Logo: React.FC = ({ sx }) => { return ( - - INDØK - + ({ + fill: "black", + [theme.getColorSchemeSelector("dark")]: { + fill: "white", + }, + })} + viewBox="0 0 647 174" + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + + ); diff --git a/frontend/src/components/LogoFull.tsx b/frontend/src/components/LogoFull.tsx new file mode 100644 index 0000000000..d50c7f0723 --- /dev/null +++ b/frontend/src/components/LogoFull.tsx @@ -0,0 +1,51 @@ +import { Box, SxProps } from "@mui/material"; + +import { Link } from "../app/components/Link"; + +type Props = { sx?: SxProps }; + +/** + * The Indøk logo + * + * The display name cannot be resolved if we wrap an arrow function in memo() directly, + * hence this is wrapping a named function. + */ +const LOGO_WIDTH = 200; +export const LogoFull: React.FC = ({ sx }) => { + return ( + + + ({ + fill: "black", + [theme.getColorSchemeSelector("dark")]: { + fill: "white", + }, + })} + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + + + + + + ); +}; diff --git a/frontend/src/layouts/footer/Footer.tsx b/frontend/src/layouts/footer/Footer.tsx index be2a360db2..297ff6998b 100644 --- a/frontend/src/layouts/footer/Footer.tsx +++ b/frontend/src/layouts/footer/Footer.tsx @@ -5,7 +5,7 @@ import Image from "next/image"; import { useState } from "react"; import { Link, LinkProps } from "@/components"; -import { Logo } from "@/components/Logo"; +import { LogoFull } from "@/components/LogoFull"; import { Vercel } from "@/components/Vercel"; import dayjs from "@/lib/date"; import rubberdokLogo from "~/public/img/rubberdok_logo_black.svg"; @@ -14,13 +14,14 @@ import rubberdokLogo from "~/public/img/rubberdok_logo_black.svg"; const HallOfFame = dynamic(() => import("./HallOfFame").then((mod) => mod.HallOfFame)); const Watermark = styled("div")(({ theme }) => ({ - background: "url('/nth.svg')", - backgroundSize: 500, + background: "url('/janus_new.svg')", + backgroundSize: 320, backgroundPosition: "right center", backgroundRepeat: "no-repeat", opacity: 0.1, [theme.getColorSchemeSelector("dark")]: { - opacity: 0.3, + opacity: 0.1, + filter: "invert(1)", }, position: "absolute", width: "600px", @@ -45,7 +46,7 @@ export const Footer: React.FC = () => { - + Janus Linjeforening, NTNU Kolbjørn Hejes vei 1E, 7034 Trondheim Org.nr. 994 778 463