Merge pull request #1336 from ciegler/changeable_logo

Make editor logo changeable
opencast · Jul 1, 2024 · b7c7430 · b7c7430
2 parents 4d485d6 + 6a7cd34
commit b7c7430
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/img/opencast-editor.svg → public/opencast-editor.svg b/src/img/opencast-editor.svg → public/opencast-editor.svg
diff --git a/src/main/Header.tsx b/src/main/Header.tsx
@@ -12,7 +12,6 @@ import { LuKeyboard } from "react-icons/lu";
 import { MainMenuStateNames } from "../types";
 import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL } from "../cssStyles";
 
-import LogoSvg from "../img/opencast-editor.svg?react";
 import { selectIsEnd } from "../redux/endSlice";
 import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, useColorScheme, WithHeaderMenu } from "@opencast/appkit";
 import { IconType } from "react-icons";
@@ -92,6 +91,23 @@ function Header() {
   );
 }
 
+const LogoPicture: React.FC = () => {
+  const path = (filename:string) => import.meta.env.BASE_URL + filename;
+  return (
+    <div>
+      <picture css={{
+        height: "100%",
+        "> *": {
+          height: "calc(100% - 0.5px)",
+        },
+      }}>
+        <source srcSet={path("opencast-editor.svg")}></source>
+        <img src={path("opencast-editor.svg")} alt="Opencast Editor Logo"/>
+      </picture>
+    </div>
+  );
+};
+
 const Logo: React.FC = () => {
 
   const { t } = useTranslation();
@@ -100,11 +116,12 @@ const Logo: React.FC = () => {
   const logo = css({
     paddingLeft: "8px",
     opacity: scheme === "dark" ? "0.8" : "1",
-
+    display: "flex",
     height: "100%",
     "> *": {
       height: "calc(100% - 12px)",
     },
+    alignItems: "center",
 
     // Unset a bunch of CSS to keep the logo clean
     outline: "unset",
@@ -118,7 +135,7 @@ const Logo: React.FC = () => {
 
   return (
     <MainMenuButton
-      Icon={LogoSvg}
+      Icon={LogoPicture}
       stateName={MainMenuStateNames.cutting}
       bottomText={""}
       ariaLabelText={t("mainMenu.cutting-button")}