Skip to content

Commit

Permalink
Smaller fontSize in global theme by default (#3677)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed May 2, 2023
1 parent b6d72c2 commit f75837d
Show file tree
Hide file tree
Showing 9 changed files with 347 additions and 313 deletions.
21 changes: 6 additions & 15 deletions packages/core/ui/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,9 +294,7 @@ function createDefaultProps(theme?: ThemeOptions): ThemeOptions {
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) => ({
root: ({ theme }) => ({
color: theme.palette.text.secondary,
}),
},
Expand All @@ -310,10 +308,7 @@ function createDefaultProps(theme?: ThemeOptions): ThemeOptions {
// keeps the forest-green checkbox by default but for darkmode, uses
// a text-like coloring to ensure contrast
// xref https://stackoverflow.com/a/72546130/2129219
//
// eslint-disable-next-line @typescript-eslint/no-explicit-any
root: (props: any) => {
const { theme } = props
root: ({ theme }) => {
return theme.palette.mode === 'dark'
? {
color: theme.palette.text.secondary,
Expand All @@ -334,10 +329,7 @@ function createDefaultProps(theme?: ThemeOptions): ThemeOptions {
// keeps the forest-green checkbox by default but for darkmode, uses
// a text-like coloring to ensure contrast
// xref https://stackoverflow.com/a/72546130/2129219
//
// eslint-disable-next-line @typescript-eslint/no-explicit-any
root: (props: any) => {
const { theme } = props
root: ({ theme }) => {
return theme.palette.mode === 'dark'
? {
color: theme.palette.text.secondary,
Expand All @@ -359,9 +351,8 @@ function createDefaultProps(theme?: ThemeOptions): ThemeOptions {
// a text-like coloring to ensure contrast
// xref https://stackoverflow.com/a/72546130/2129219
//
// eslint-disable-next-line @typescript-eslint/no-explicit-any
root: (props: any) => {
const { theme } = props

root: ({ theme }) => {
return theme.palette.mode === 'dark'
? {
color: theme.palette.text.secondary,
Expand Down Expand Up @@ -398,7 +389,7 @@ export function createJBrowseBaseTheme(theme?: ThemeOptions): ThemeOptions {
return deepmerge(
{
palette: theme?.palette,
typography: { fontSize: 12 },
typography: { fontSize: 11 },
spacing: 4,
...createDefaultProps(theme),
},
Expand Down
32 changes: 16 additions & 16 deletions ...hicalTrackSelectorWidget/components/__snapshots__/HierarchicalTrackSelector.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

exports[`renders nothing with no assembly 1`] = `
<button
class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary css-15opis6-MuiButtonBase-root-MuiFab-root-fab"
class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary css-1qcd8kx-MuiButtonBase-root-MuiFab-root-fab"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-thxhq5-MuiSvgIcon-root"
data-testid="AddIcon"
focusable="false"
viewBox="0 0 24 24"
Expand All @@ -31,13 +31,13 @@ exports[`renders with a couple of categorized tracks 1`] = `
style="display: flex;"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1kgqocu-MuiButtonBase-root-MuiIconButton-root-menuIcon"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-15u0slq-MuiButtonBase-root-MuiIconButton-root-menuIcon"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-thxhq5-MuiSvgIcon-root"
data-testid="MenuIcon"
focusable="false"
viewBox="0 0 24 24"
Expand All @@ -54,15 +54,15 @@ exports[`renders with a couple of categorized tracks 1`] = `
class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-rlnh8o-MuiFormControl-root-MuiTextField-root-searchBox"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-8ajfgw-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="false"
for="mui-5"
id="mui-5-label"
>
Filter tracks
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1blad95-MuiInputBase-root-MuiInput-root"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-e5xmlq-MuiInputBase-root-MuiInput-root"
>
<input
aria-invalid="false"
Expand All @@ -75,13 +75,13 @@ exports[`renders with a couple of categorized tracks 1`] = `
class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1lruqhb-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-thxhq5-MuiSvgIcon-root"
data-testid="ClearIcon"
focusable="false"
viewBox="0 0 24 24"
Expand All @@ -98,7 +98,7 @@ exports[`renders with a couple of categorized tracks 1`] = `
</div>
</div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1c8zr45-MuiButtonBase-root-MuiButton-root-menuIcon"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-qsk2yr-MuiButtonBase-root-MuiButton-root-menuIcon"
tabindex="0"
type="button"
>
Expand All @@ -119,13 +119,13 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
style="display: flex;"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1kgqocu-MuiButtonBase-root-MuiIconButton-root-menuIcon"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-15u0slq-MuiButtonBase-root-MuiIconButton-root-menuIcon"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-thxhq5-MuiSvgIcon-root"
data-testid="MenuIcon"
focusable="false"
viewBox="0 0 24 24"
Expand All @@ -142,15 +142,15 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-rlnh8o-MuiFormControl-root-MuiTextField-root-searchBox"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-8ajfgw-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="false"
for="mui-1"
id="mui-1-label"
>
Filter tracks
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1blad95-MuiInputBase-root-MuiInput-root"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-e5xmlq-MuiInputBase-root-MuiInput-root"
>
<input
aria-invalid="false"
Expand All @@ -163,13 +163,13 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1lruqhb-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-thxhq5-MuiSvgIcon-root"
data-testid="ClearIcon"
focusable="false"
viewBox="0 0 24 24"
Expand All @@ -186,7 +186,7 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
</div>
</div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1c8zr45-MuiButtonBase-root-MuiButton-root-menuIcon"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-qsk2yr-MuiButtonBase-root-MuiButton-root-menuIcon"
tabindex="0"
type="button"
>
Expand Down
Loading

0 comments on commit f75837d

Please sign in to comment.