Theme adjustments (#3522)

GMOD · Feb 16, 2023 · 819526f · 819526f
1 parent 52af854
commit 819526f
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 175 deletions.
diff --git a/packages/core/ui/theme.ts b/packages/core/ui/theme.ts
@@ -37,9 +37,8 @@ const mandarin = '#FFB11D'
 
 const refTheme = createTheme()
 
-function getDefaultTheme() {
+function stockTheme() {
   return {
-    name: 'Default (from config)',
     palette: {
       mode: undefined,
       primary: { main: midnight },
@@ -55,27 +54,33 @@ function getDefaultTheme() {
         T: refTheme.palette.augmentColor({ color: red }),
       },
     },
+    components: {
+      MuiLink: {
+        styleOverrides: {
+          // the default link color uses theme.palette.primary.main which is
+          // very bad with dark mode+midnight primary
+          //
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          root: ({ theme }: any) => ({
+            color: theme.palette.tertiary.main,
+          }),
+        },
+      },
+    },
+  }
+}
+
+function getDefaultTheme() {
+  return {
+    name: 'Default (from config)',
+    ...stockTheme(),
   }
 }
 
 function getLightStockTheme() {
   return {
     name: 'Light (stock)',
-    palette: {
-      mode: undefined,
-      primary: { main: midnight },
-      secondary: { main: grape },
-      tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
-      quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
-      stopCodon: '#e22',
-      startCodon: '#3e3',
-      bases: {
-        A: refTheme.palette.augmentColor({ color: green }),
-        C: refTheme.palette.augmentColor({ color: blue }),
-        G: refTheme.palette.augmentColor({ color: amber }),
-        T: refTheme.palette.augmentColor({ color: red }),
-      },
-    },
+    ...stockTheme(),
   }
 }
 
@@ -452,7 +457,7 @@ function augmentTheme(theme: ThemeOptions = {}) {
 
 // creates some blank quaternary/tertiary colors if unsupplied by a user theme
 function augmentThemePlus(theme: ThemeOptions = {}) {
-  augmentTheme(theme)
+  theme = augmentTheme(theme)
   if (!theme?.palette?.quaternary) {
     theme = deepmerge(theme, {
       palette: {

diff --git a/plugins/circular-view/src/CircularView/components/Controls.tsx b/plugins/circular-view/src/CircularView/components/Controls.tsx
@@ -39,8 +39,8 @@ const Controls = observer(function ({ model }: { model: CircularViewModel }) {
 
       <IconButton
         onClick={model.zoomInButton}
-        title="zoom in"
         disabled={model.atMinBpPerPx}
+        title="zoom in"
       >
         <ZoomInIcon />
       </IconButton>

diff --git a/...management/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.tsx.snap b/...management/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.tsx.snap
@@ -789,7 +789,7 @@ exports[`renders with the available plugins 1`] = `
                     class="MuiTypography-root MuiTypography-h5 css-1ldbtdh-MuiTypography-root"
                   >
                     <a
-                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1qdqql0-MuiTypography-root-MuiLink-root"
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1py4a5k-MuiTypography-root-MuiLink-root"
                       href="https://github.com/GMOD/jbrowse-plugin-msaview#readme"
                       rel="noopener"
                       target="_blank"

diff --git a/plugins/hic/src/HicAdapter/HicAdapter.ts b/plugins/hic/src/HicAdapter/HicAdapter.ts
@@ -53,8 +53,11 @@ class GenericFilehandleWrapper {
     return b.buffer.slice(b.byteOffset, b.byteOffset + bytesRead)
   }
 }
-export function openFilehandleWrapper(location: FileLocation) {
-  return new GenericFilehandleWrapper(openLocation(location))
+export function openFilehandleWrapper(
+  location: FileLocation,
+  pluginManager?: PluginManager,
+) {
+  return new GenericFilehandleWrapper(openLocation(location, pluginManager))
 }
 
 interface HicParser {
@@ -79,7 +82,7 @@ export default class HicAdapter extends BaseFeatureDataAdapter {
     super(config, getSubAdapter, pluginManager)
     const hicLocation = this.getConf('hicLocation')
     this.hic = new HicStraw({
-      file: openFilehandleWrapper(hicLocation),
+      file: openFilehandleWrapper(hicLocation, this.pluginManager),
     })
   }
 

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/Header.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/Header.tsx
@@ -10,20 +10,14 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 
 // locals
-import {
-  LinearGenomeViewModel,
-  WIDGET_HEIGHT,
-  SPACING,
-  HEADER_BAR_HEIGHT,
-} from '..'
+import { LinearGenomeViewModel, SPACING } from '..'
 import OverviewScalebar from './OverviewScalebar'
 import ZoomControls from './ZoomControls'
 import SearchBox from './SearchBox'
 
 type LGV = LinearGenomeViewModel
 const useStyles = makeStyles()(theme => ({
   headerBar: {
-    height: HEADER_BAR_HEIGHT,
     display: 'flex',
   },
   headerForm: {
@@ -37,7 +31,6 @@ const useStyles = makeStyles()(theme => ({
   panButton: {
     background: alpha(theme.palette.background.paper, 0.8),
     color: theme.palette.text.primary,
-    height: WIDGET_HEIGHT,
     margin: SPACING,
   },
   bp: {
@@ -48,7 +41,7 @@ const useStyles = makeStyles()(theme => ({
   toggleButton: {
     height: 44,
     border: 'none',
-    margin: theme.spacing(0.5),
+    marginLeft: theme.spacing(4),
   },
   buttonSpacer: {
     marginRight: theme.spacing(2),