diff --git a/public/opencast-editor.svg b/public/opencast-editor.svg
new file mode 100644
index 000000000..339c59ce5
--- /dev/null
+++ b/public/opencast-editor.svg
@@ -0,0 +1,95 @@
+
+
+
+
diff --git a/src/App.tsx b/src/App.tsx
index dd598e36e..ad371acd2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,17 @@
import React from 'react';
import Body from './main/Body';
+import Header from './main/Header';
import { GlobalStyle } from './cssStyles';
import { useSelector } from 'react-redux';
import { selectThemeState } from './redux/themeSlice';
function App() {
const theme = useSelector(selectThemeState);
-
+
return (
+
);
diff --git a/src/main/Body.tsx b/src/main/Body.tsx
index 3d69bfe5e..b4eb2ab65 100644
--- a/src/main/Body.tsx
+++ b/src/main/Body.tsx
@@ -47,7 +47,7 @@ const Body: React.FC<{}> = () => {
const bodyStyle = css({
display: 'flex',
flexDirection: 'row',
- height: '100%',
+ height: 'calc(100% - 48px)',
});
return (
diff --git a/src/main/Header.tsx b/src/main/Header.tsx
new file mode 100644
index 000000000..95d8bcc4b
--- /dev/null
+++ b/src/main/Header.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useSelector } from "react-redux"
+import { selectThemeState } from "../redux/themeSlice"
+import { css } from '@emotion/react'
+
+function Header() {
+ const themeState = useSelector(selectThemeState);
+
+ const header = themeState.startsWith('high-contrast-')
+ ? css({
+ height: '46px',
+ backgroundColor: '#000',
+ borderBottom: '2px solid white'
+ })
+ : css({
+ height: '48px',
+ backgroundColor: '#333333',
+ })
+
+ const logo = css({
+ height: '48px',
+ })
+
+ return (
+
+
+