Merge pull request #2340 from ProjectMirador/theme-top-bar

Updates theme approach

src/components/WindowTopBar.js

@@ -32,7 +32,6 @@ export class WindowTopBar extends Component {
         <Toolbar disableGutters className={classNames(classes.windowTopBarStyle, focused ? classes.focused : null, ns('window-top-bar'))} variant="dense">
           <MiradorMenuButton
             aria-label={t('toggleWindowSideBar')}
-            color="inherit"
             onClick={toggleWindowSideBar}
           >
             <MenuIcon />
@@ -46,7 +45,6 @@ export class WindowTopBar extends Component {
             <MiradorMenuButton
               aria-label={(maximized ? t('minimizeWindow') : t('maximizeWindow'))}
               className={ns('window-maximize')}
-              color="inherit"
               onClick={(maximized ? minimizeWindow : maximizeWindow)}
             >
               {(maximized ? <WindowMinIcon /> : <WindowMaxIcon />)}
@@ -56,7 +54,6 @@ export class WindowTopBar extends Component {
             <MiradorMenuButton
               aria-label={t('closeWindow')}
               className={ns('window-close')}
-              color="inherit"
               onClick={removeWindow}
             >
               <CloseIcon />

src/components/WindowTopMenuButton.js

@@ -52,7 +52,6 @@ export class WindowTopMenuButton extends Component {
           aria-label={t('windowMenu')}
           aria-owns={anchorEl ? `window-menu_${windowId}` : undefined}
           className={anchorEl ? classes.ctrlBtnSelected : null}
-          color="inherit"
           onClick={this.handleMenuClick}
         >
           <MoreVertIcon />

src/components/WorkspaceAdd.js

@@ -96,7 +96,6 @@ export class WorkspaceAdd extends React.Component {
                 <MiradorMenuButton
                   aria-label={t('closeAddResourceMenu')}
                   className={classes.menuButton}
-                  color="inherit"
                 >
                   <ExpandMoreIcon />
                 </MiradorMenuButton>

src/config/settings.js

@@ -8,13 +8,17 @@ export default {
       type: 'light', // dark also available
       primary: {
         main: '#f5f5f5',
-        light: '#ffffff',
-        dark: '#eeeeee',
       },
       secondary: {
         main: '#1967d2',
-        light: '#64b5f6',
-        dark: '#0d47a1',
+      },
+      darkened: { // custom colors used for a specific offset in some places
+        dark: '#000000',
+        light: '#eeeeee'
+      },
+      lightened: { // custom colors used for a specific offset in some places
+        dark: '#424242',
+        light: '#ffffff',
       },
       error: {
         main: '#b00020',

src/containers/CompanionArea.js

@@ -35,7 +35,7 @@ const styles = theme => ({
       backgroundColor: theme.palette.background.paper,
     },
     backgroundColor: theme.palette.background.paper,
-    border: `1px solid ${theme.palette.primary.dark}`,
+    border: `1px solid ${theme.palette.darkened[theme.palette.type]}`,
     borderRadius: 0,
     height: '48px',
     left: '100%',

src/containers/Window.js

@@ -68,7 +68,7 @@ const styles = theme => ({
     position: 'relative',
   },
   thumbnailArea: {
-    backgroundColor: theme.palette.primary.dark,
+    backgroundColor: theme.palette.darkened[theme.palette.type],
   },
   thumbnailAreaBottom: {
   },
@@ -76,7 +76,7 @@ const styles = theme => ({
     minWidth: 100,
   },
   window: {
-    backgroundColor: theme.palette.primary.dark,
+    backgroundColor: theme.palette.darkened[theme.palette.type],
     display: 'flex',
     flexDirection: 'column',
     height: '100%',

src/containers/WindowTopBar.js

@@ -44,7 +44,7 @@ const styles = theme => ({
     '&$focused': {
       borderTop: `2px solid ${theme.palette.secondary.main}`,
     },
-    backgroundColor: theme.palette.primary.light,
+    backgroundColor: theme.palette.lightened[theme.palette.type],
     borderTop: '2px solid transparent',
     minHeight: 32,
     paddingLeft: theme.spacing.unit / 2,