Merge pull request #1035 from lkiesow/header

Make Studio and Editor look alike
opencast · Apr 20, 2023 · ca997e8 · ca997e8
2 parents 9888bb0 + 2b21801
commit ca997e8
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 3 deletions.
diff --git a/public/opencast-editor.svg b/public/opencast-editor.svg
diff --git 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 (
     <div className="App" css={theme}>
       <GlobalStyle />
+      <Header />
       <Body />
     </div>
   );

diff --git 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
@@ -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 (
+    <div css={header}>
+      <img src="opencast-editor.svg" css={logo} alt="Opencast Editor" />
+    </div>
+  );
+}
+
+export default Header;
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
@@ -42,7 +42,7 @@ const Timeline: React.FC<{
   setCurrentlyAt: ActionCreatorWithPayload<number, string>,
   setIsPlaying: ActionCreatorWithPayload<boolean, string>,
 }> = ({
-  timelineHeight = 250,
+  timelineHeight = 200,
   styleByActiveSegment = true,
   selectCurrentlyAt,
   selectIsPlaying,