High contrast mode for subtitle editor

src/cssStyles.tsx

@@ -7,6 +7,7 @@ import emotionNormalize from 'emotion-normalize';
 import { checkFlexGapSupport } from './util/utilityFunctions';
 import { useSelector } from 'react-redux';
 import { selectTheme, Theme } from './redux/themeSlice';
+import { createTheme } from '@mui/material/styles';
 
 /**
  * An emotion component that inserts styles globally
@@ -268,3 +269,156 @@ export function selectFieldStyle(theme: Theme) {
     }),
   }
 }
+
+export const calendarStyle = (theme: Theme) => createTheme({
+
+  components: {
+
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          /* Modal */
+          outline: `${theme.dropdown_border} !important`,
+          background: `${theme.background}`,
+          color: `${theme.text}`,
+
+          /* Calendar-modal */
+          '.MuiYearPicker-root': {
+            '.PrivatePickersYear-yearButton:hover, .Mui-selected:hover': {
+              background: `${theme.focused}`,
+              color: `${theme.focus_text}`,
+            },
+            '.Mui-selected': {
+              background: `${theme.selected}`,
+              color: `${theme.selected_text}`,
+            }
+          },
+
+          /* Clock-modal */
+          '& .MuiClock-clock': { // round clock
+            background: `${theme.clock_bg}`,
+            outline: `${theme.clock_border}`,
+            '-webkitTextFillColor': `${theme.text}`, // Digits on the clock
+            textShadow: `${theme.text_shadow}`
+          },
+          /* selected digit (hour/minute) */
+          '& .MuiClockPicker-root .Mui-selected': {
+            '-webkitTextFillColor': `${theme.digit_selected}`,
+            fontWeight: 'bold',
+            textShadow: 'none',
+          },
+          /* clock hands */
+          '& .MuiClock-pin, .MuiClockPointer-root': {
+            background: `${theme.clock_hands}`
+          },
+          '& .MuiClockPointer-thumb': {
+            background: `${theme.clock_hands}`,
+            border: `16px solid ${theme.clock_hands}`,
+          }
+        },
+
+      }
+    },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: {
+          /* Calendar- and Clock-modal -> arrows, icon, days  */
+          color: `${theme.icon_color} !important`,
+          '&.MuiPickersDay-root': {
+            background: 'transparent !important',
+            color: `${theme.text} !important`,
+          },
+          '&:hover, &.Mui-selected:hover': {
+            background: `${theme.focused} !important`,
+            color: `${theme.focus_text} !important`,
+          },
+          // Selected day
+          '&.Mui-selected': {
+            background: `${theme.selected} !important`,
+            color: `${theme.selected_text} !important`,
+
+          },
+          // Current day
+          '&:not(.Mui-selected)': {
+            borderColor: `${theme.focused} !important`,
+          },
+          '&.Mui-disabled':{
+            color: `${theme.disabled} !important`,
+          },
+          '&.MuiClock-amButton, &.MuiClock-pmButton': {
+            '-webkitTextFillColor': `${theme.text} !important`,
+            '&:hover': {
+              '-webkitTextFillColor': `${theme.clock_focus} !important`
+            }
+          },
+        }
+      }
+    },
+    MuiTypography: {
+      styleOverrides: {
+        root: { // Weekdays
+          color: `${theme.disabled} !important`,
+        },
+      }
+    },
+  }  
+})
+
+export const subtitleSelectStyle = (theme: Theme) => createTheme({
+  components: {
+    /* Label: 'Pick a language' & 'Video Flavor' */
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: `${theme.text} !important`,
+        },
+      }
+    },
+    /* Labelborder */
+    MuiOutlinedInput: {
+      styleOverrides: {
+        notchedOutline: {
+          border: `${theme.dropdown_border} !important`,
+        },
+      }
+    },
+    /* Selectfield/Inputfield with Icon */
+    MuiSelect: {
+      styleOverrides: {
+        select: {
+          background: `${theme.background}`,
+          color: `${theme.text} !important`,
+        },
+        icon: {
+          color: `${theme.indicator_color}`,
+        },
+      }
+    },
+
+    /* Dropdownlist */
+    MuiMenu: {
+      styleOverrides: {
+        list: {
+          background: `${theme.background}`,
+          color: `${theme.text}`,
+          border: `${theme.dropdown_border}`,
+        },
+      }
+    },
+    /* Dropdownlist: Single entry */
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          '&:hover, &.Mui-selected:hover': {
+            color: `${theme.focus_text}`,
+            background: `${theme.focused}`
+          },
+          '&.Mui-selected': {
+            color: `${theme.selected_text}`,
+            background: `${theme.selected}`,
+          },
+        },
+      }
+    }
+  }
+})

src/index.css

@@ -16,143 +16,3 @@ code {
 html, body, #root, .App {
   height: 100%;
 }
-
-/* These colors/themes are only for overwriting Mui DatePicker 
-*  and TimePicker. Had to define css for DateTimePicker like this. 
-*  Overwriting like described in mui-docs doesn't seem to work
-*  for DateTimePicker in current version */
-[data-theme = 'dark'] {
-  --bg-color: #2b2b2b; 
-  --color: rgba(255, 255, 255, 0.87);
-  --border: 2px solid #a1a1a1;
-  --arrow-am-pm: rgba(255, 255, 255, 0.54);
-  --arrow-disabled: rgba(255, 255, 255, 0.26);
-  --hover: rgba(255, 255, 255, 0.1);
-  --hover-border: none;
-  --weekdays: rgba(255, 255, 255, 0.6);
-  --selected: #1976D2;
-  --selected-text: #fff;
-  --selected-hover: #42A5F5;
-  --inner-clock: rgba(255, 255, 255, 0.1);
-  --clock-border: none;
-  --font-weight: normal;
-}
-
-[data-theme = 'light'] {
-  --bg-color: snow;
-  --color: rgba(0, 0, 0, 0.87);
-  --border: none;
-  --arrow-am-pm: rgba(0, 0, 0, 0.54);
-  --arrow-disabled: rgba(0, 0, 0, 0.26);
-  --hover: rgba(0, 0, 0, 0.04);
-  --hover-border: none;
-  --weekdays: rgba(0, 0, 0, 0.6);
-  --selected: #1976D2;
-  --selected-text: #fff;
-  --selected-hover: #42A5F5;
-  --inner-clock: rgba(0,0,0,.07);
-  --clock-border: none;
-  --font-weight: normal;
-}
-
-[data-theme = 'high-contrast-dark'] {
-  --bg-color: #000; 
-  --color: #fff;
-  --border: 2px solid #FFAD00;
-  --arrow-am-pm: #fff;
-  --arrow-disabled: rgba(255, 255, 255, 0.6);
-  --hover: #000;
-  --hover-border: 2px solid #FFAD00;
-  --weekdays: #fff;
-  --selected: #FFAD00;
-  --selected-text: #000;
-  --selected-hover: #ffd67f;
-  --inner-clock: #000;
-  --clock-border: 2px solid #ffd67f;
-  --font-weight: bold;
-}
-
-[data-theme = 'high-contrast-light'] {
-  --bg-color: snow;
-  --color: #000;
-  --border: 2px solid #370662;
-  --arrow-am-pm: rgba(0, 0, 0, 0.8);
-  --arrow-disabled: rgba(0, 0, 0, 0.5);
-  --hover: #fff;
-  --hover-border: 2px solid #370662;
-  --weekdays: #000;
-  --selected: #370662;
-  --selected-text: #fff;
-  --selected-hover: #5e3781;
-  --inner-clock: snow;
-  --clock-border: 2px solid #5e3781;
-  --font-weight: bold;
-}
-
-/* Mui DatePicker modal Metadata */
-.MuiPaper-root, .MuiClockPicker-root {
-  outline: var(--border) !important;
-}
-.MuiCalendarPicker-root, .MuiPickersDay-root, .MuiClockPicker-root {
-  background-color: var(--bg-color) !important;
-  color: var(--color) !important;
-}
-.MuiSvgIcon-root {
-  background: transparent;
-  color: var(--arrow-am-pm);
-}
-.MuiButtonBase-root:hover {
-  background-color: var(--hover) !important;
-  outline: var(--hover-border)
-}
-.MuiTypography-root {
-  color: var(--weekdays) !important;
-  font-weight: var(--font-weight) !important;
-}
-.Mui-selected {
-  background-color: var(--selected) !important;
-  color: var(--selected-text) !important;
-}
-.Mui-selected:hover {
-  background-color: var(--selected-hover) !important;
-}
-
-/* Mui TimePicker modal Metadata */
-.Mui-disabled > .MuiSvgIcon-root {
-  color: var(--arrow-disabled);
-}
-/* bg of the clock*/
-.css-eziifo, .css-1umqo6f {
-  background-color: var(--inner-clock) !important;
-  outline: var(--clock-border);
-  text-shadow: -2px 0 var(--inner-clock), 0 2px var(--inner-clock), 2px 0 var(--inner-clock), 0 -2px var(--inner-clock);
-}
-/* digits on the clock */
-.css-1flhz3h {
-  color: var(--color) !important;
-}
-/* clock hands */
-.MuiClockPicker-root .Mui-selected, .css-12ha4i7, .css-7lip4c, .css-a1rc6s  {
-  background-color: var(--selected) !important;
-  color: var(--selected-text) !important; 
-  text-shadow: -2px 0 var(--selected), 0 2px var(--selected), 2px 0 var(--selected), 0 -2px var(--selected);
-}
-/* minute hand */
-.css-2ujp1m {
-  border: 16px solid var(--selected) !important;
-  background-color: var(--bg-color) !important;
-  color: #000 !important;
-}
-/* AM, PM and digits when selected */
-.css-1t8wyba-MuiButtonBase-root-MuiIconButton-root,
-.css-13go44a-MuiButtonBase-root-MuiIconButton-root {
-  outline:2px solid var(--selected) !important;
-  background-color: transparent !important;
-  -webkit-text-fill-color: var(--color) !important;
-}
-/* AM and PM when selected on hover */
-.css-1t8wyba-MuiButtonBase-root-MuiIconButton-root:hover, 
-.css-13go44a-MuiButtonBase-root-MuiIconButton-root:hover {
-  background-color: var(--selected-hover) !important;
-  -webkit-text-fill-color: var(--selected-text) !important;
-}

src/main/MainContent.tsx

@@ -86,6 +86,7 @@ const MainContent: React.FC<{}> = () => {
     paddingRight: '20px',
     paddingLeft: '161px',
     height: '100%',
+    background: `${theme.background}`,
   })
 
   const thumbnailSelectStyle = css({

src/main/Metadata.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 
 import { css } from '@emotion/react'
-import { errorBoxStyle, selectFieldStyle } from '../cssStyles'
+import { calendarStyle, errorBoxStyle, selectFieldStyle } from '../cssStyles'
 
 import { useSelector, useDispatch } from 'react-redux';
 import {
@@ -30,7 +30,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { AppDispatch } from "../redux/store";
 import { selectTheme } from "../redux/themeSlice";
-
+import { ThemeProvider } from "@mui/material/styles";
 
 /**
  * Creates a Metadata form
@@ -541,36 +541,40 @@ const Metadata: React.FC<{}> = () => {
       return (
         <div data-testid="dateTimePicker" css={[fieldTypeStyle(field.readOnly), dateTimeTypeStyle(field.readOnly)]}>
           <LocalizationProvider dateAdapter={AdapterDateFns}>
-            <DateTimePicker {...input}
+            <ThemeProvider theme={calendarStyle(theme)}>
+              <DateTimePicker {...input}
+                name={field.id}
+                inputFormat="yyyy/MM/dd HH:mm"
+                disabled={field.readOnly}
+                dateFunsUtils={DateFnsUtils}
+                TextFieldProps={{
+                  variant: 'standard', // Removes default outline
+                  onBlur: (e: any) => {blurWithSubmit(e, input)},
+                  showError: showErrorOnBlur
+                }}
+                leftArrowButtonText={i18next.t('metadata.calendar-prev')}
+                rightArrowButtonText={i18next.t('metadata.calendar-next')}
+              />
+            </ThemeProvider>
+          </LocalizationProvider>
+        </div>
+      );
+    } else if (field.type === "time") {
+      return (
+        <div css={[fieldTypeStyle(field.readOnly), dateTimeTypeStyle(field.readOnly)]}>
+          <ThemeProvider theme={calendarStyle(theme)}>
+            <TimePicker {...input}
               name={field.id}
-              inputFormat="yyyy/MM/dd HH:mm"
+              inputFormat="HH:mm"
               disabled={field.readOnly}
               dateFunsUtils={DateFnsUtils}
               TextFieldProps={{
                 variant: 'standard', // Removes default outline
                 onBlur: (e: any) => {blurWithSubmit(e, input)},
                 showError: showErrorOnBlur
               }}
-              leftArrowButtonText={i18next.t('metadata.calendar-prev')}
-              rightArrowButtonText={i18next.t('metadata.calendar-next')}
             />
-          </LocalizationProvider>
-        </div>
-      );
-    } else if (field.type === "time") {
-      return (
-        <div css={[fieldTypeStyle(field.readOnly), dateTimeTypeStyle(field.readOnly)]}>
-          <TimePicker {...input}
-            name={field.id}
-            inputFormat="HH:mm"
-            disabled={field.readOnly}
-            dateFunsUtils={DateFnsUtils}
-            TextFieldProps={{
-              variant: 'standard', // Removes default outline
-              onBlur: (e: any) => {blurWithSubmit(e, input)},
-              showError: showErrorOnBlur
-            }}
-          />
+          </ThemeProvider>
         </div>
       );
     } else if (field.type === "text_long") {