Skip to content

Commit

Permalink
Adds highlight to theme and border to overview scale bar to ensure vi…
Browse files Browse the repository at this point in the history
…sibility
  • Loading branch information
carolinebridge committed Mar 8, 2024
1 parent d947d6b commit 3225693
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 3 deletions.
6 changes: 6 additions & 0 deletions packages/core/ui/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ declare module '@mui/material/styles/createPalette' {
interface Palette {
tertiary: Palette['primary']
quaternary: Palette['primary']
highlight: Palette['primary']
stopCodon?: string
startCodon?: string
bases: {
Expand All @@ -19,6 +20,7 @@ declare module '@mui/material/styles/createPalette' {
interface PaletteOptions {
tertiary?: PaletteOptions['primary']
quaternary?: PaletteOptions['primary']
highlight?: PaletteOptions['primary']
stopCodon?: string
startCodon?: string
bases?: {
Expand All @@ -45,6 +47,7 @@ function stockTheme() {
secondary: { main: grape },
tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
highlight: refTheme.palette.augmentColor({ color: { main: mandarin } }),
stopCodon: '#e22',
startCodon: '#3e3',
bases: {
Expand Down Expand Up @@ -93,6 +96,7 @@ function getDarkStockTheme() {
secondary: { main: grape },
tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
highlight: refTheme.palette.augmentColor({ color: { main: mandarin } }),
stopCodon: '#e22',
startCodon: '#3e3',
bases: {
Expand Down Expand Up @@ -127,6 +131,7 @@ function getDarkMinimalTheme() {
secondary: { main: grey[800] },
tertiary: refTheme.palette.augmentColor({ color: { main: grey[900] } }),
quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
highlight: refTheme.palette.augmentColor({ color: { main: mandarin } }),
stopCodon: '#e22',
startCodon: '#3e3',
bases: {
Expand All @@ -147,6 +152,7 @@ function getMinimalTheme() {
secondary: { main: grey[800] },
tertiary: refTheme.palette.augmentColor({ color: { main: grey[900] } }),
quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
highlight: refTheme.palette.augmentColor({ color: { main: mandarin } }),
stopCodon: '#e22',
startCodon: '#3e3',
bases: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ const OverviewHighlight = observer(function OverviewHighlight({
left,
width,
background: highlight,
borderLeft: `1px solid ${highlight}`,
borderRight: `1px solid ${highlight}`,
}}
/>
</Tooltip>
Expand All @@ -94,6 +96,8 @@ const OverviewHighlight = observer(function OverviewHighlight({
left,
width,
background: highlight,
borderLeft: `1px solid ${highlight}`,
borderRight: `1px solid ${highlight}`,
}}
/>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const useStyles = makeStyles()(theme => ({
height: '100%',
position: 'absolute',
overflow: 'hidden',
background: `${colord(theme.palette.quaternary?.main ?? 'goldenrod')
background: `${colord(theme.palette.highlight?.main ?? 'goldenrod')
.alpha(0.35)
.toRgbString()}`,
},
Expand All @@ -36,7 +36,7 @@ const Highlight = observer(function Highlight({ model }: { model: LGV }) {
const { classes } = useStyles()
const [open, setOpen] = useState(false)
const anchorEl = useRef(null)
const color = useTheme().palette.quaternary?.main ?? 'goldenrod'
const color = useTheme().palette.highlight?.main ?? 'goldenrod'

const session = getSession(model) as SessionWithWidgets

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@ const useStyles = makeStyles()(theme => ({
highlight: {
height: '100%',
position: 'absolute',
background: `${colord(theme.palette.quaternary?.main ?? 'goldenrod')
background: `${colord(theme.palette.highlight?.main ?? 'goldenrod')
.alpha(0.35)
.toRgbString()}`,
borderLeft: `1px solid ${theme.palette.highlight?.main ?? 'goldenrod'}`,
borderRight: `1px solid ${theme.palette.highlight?.main ?? 'goldenrod'}`,
},
}))

Expand Down

0 comments on commit 3225693

Please sign in to comment.