From d1f85fda716aee15121e9064ee99c4390fac41bd Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Sun, 21 Aug 2022 13:32:32 +0200 Subject: refactor(frontend): theme improvements --- subprojects/frontend/index.html | 10 ++-- subprojects/frontend/src/Loading.tsx | 7 +-- subprojects/frontend/src/editor/EditorPane.tsx | 23 ++++++-- subprojects/frontend/src/editor/EditorTheme.ts | 13 +++-- subprojects/frontend/src/editor/SearchToolbar.tsx | 32 +++++++---- subprojects/frontend/src/theme/ThemeProvider.tsx | 65 +++++++++++++++-------- subprojects/frontend/vite.config.ts | 2 +- 7 files changed, 105 insertions(+), 47 deletions(-) (limited to 'subprojects/frontend') diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html index a3e52ef9..f9e87485 100644 --- a/subprojects/frontend/index.html +++ b/subprojects/frontend/index.html @@ -10,7 +10,7 @@ - + diff --git a/subprojects/frontend/src/Loading.tsx b/subprojects/frontend/src/Loading.tsx index 72020a43..8c293239 100644 --- a/subprojects/frontend/src/Loading.tsx +++ b/subprojects/frontend/src/Loading.tsx @@ -2,18 +2,19 @@ import CircularProgress from '@mui/material/CircularProgress'; import { styled } from '@mui/material/styles'; import React from 'react'; -const LoadingRoot = styled('div')({ +const LoadingRoot = styled('div')(({ theme }) => ({ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', -}); + background: theme.palette.outer.background, +})); export default function Loading() { return ( - + ); } diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx index 935a84e8..df43d2c9 100644 --- a/subprojects/frontend/src/editor/EditorPane.tsx +++ b/subprojects/frontend/src/editor/EditorPane.tsx @@ -1,10 +1,10 @@ import Box from '@mui/material/Box'; +import Skeleton from '@mui/material/Skeleton'; import Stack from '@mui/material/Stack'; import Toolbar from '@mui/material/Toolbar'; import { observer } from 'mobx-react-lite'; -import React from 'react'; +import React, { useState } from 'react'; -import Loading from '../Loading'; import { useRootStore } from '../RootStore'; import EditorArea from './EditorArea'; @@ -12,6 +12,23 @@ import EditorButtons from './EditorButtons'; import GenerateButton from './GenerateButton'; import SearchPanelPortal from './SearchPanelPortal'; +function EditorLoading(): JSX.Element { + const [skeletonSizes] = useState(() => + new Array(10).fill(0).map(() => Math.random() * 60 + 10), + ); + + return ( + + {skeletonSizes.map((length, i) => ( + /* eslint-disable-next-line react/no-array-index-key -- + Random placeholders have no identity. + */ + + ))} + + ); +} + function EditorPane(): JSX.Element { const { editorStore } = useRootStore(); @@ -23,7 +40,7 @@ function EditorPane(): JSX.Element { {editorStore === undefined ? ( - + ) : ( <> diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index ca07d602..dfeeb547 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts @@ -14,8 +14,10 @@ export default styled('div', { })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => { const editorFontStyle = { ...theme.typography.editor, + fontWeight: theme.typography.fontWeightEditorNormal, [theme.breakpoints.down('sm')]: { - fontSize: '0.875rem', + // `rem` for JetBrains MonoVariable make the text too large in Safari. + fontSize: '14px', lineHeight: 1.43, }, }; @@ -29,7 +31,12 @@ export default styled('div', { color: theme.palette.text.secondary, }, '.cm-gutters': { - background: theme.palette.background.default, + background: `linear-gradient( + to right, + ${theme.palette.background.default} 0%, + ${theme.palette.background.default} calc(100% - 12px), + transparent 100% + )`, border: 'none', }, '.cm-content': { @@ -93,7 +100,7 @@ export default styled('div', { fontStyle: 'italic', }, '.tok-problem-containment': { - fontWeight: theme.typography.fontWeightBold, + fontWeight: theme.typography.fontWeightEditorBold, textDecorationSkipInk: 'none', }, '.tok-problem-error': { diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx index 7e6ff4f7..895f1ca1 100644 --- a/subprojects/frontend/src/editor/SearchToolbar.tsx +++ b/subprojects/frontend/src/editor/SearchToolbar.tsx @@ -11,6 +11,7 @@ import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import ToggleButton from '@mui/material/ToggleButton'; import Toolbar from '@mui/material/Toolbar'; +import { styled } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import { observer } from 'mobx-react-lite'; import React, { useCallback, useState } from 'react'; @@ -18,7 +19,13 @@ import React, { useCallback, useState } from 'react'; import type SearchPanelStore from './SearchPanelStore'; const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)'; -const ABBREVIATE_MEDIA_QUERY = '@media (max-width: 720px)'; + +const DimLabel = styled(FormControlLabel)(({ theme }) => ({ + '.MuiFormControlLabel-label': { + ...theme.typography.body2, + color: theme.palette.text.secondary, + }, +})); function SearchToolbar({ searchPanelStore, @@ -31,7 +38,6 @@ function SearchToolbar({ invalidRegexp, } = searchPanelStore; const split = useMediaQuery(SPLIT_MEDIA_QUERY); - const abbreviate = useMediaQuery(ABBREVIATE_MEDIA_QUERY); const [showRepalceState, setShowReplaceState] = useState(false); const showReplace = !split || showRepalceState || replace !== ''; @@ -132,7 +138,7 @@ function SearchToolbar({ alignItems="center" rowGap={0.5} > - } - aria-label="Match case" - label={abbreviate ? 'Case' : 'Match case'} + label="Match case" /> - } - aria-label="Literal" - label={abbreviate ? 'Lit' : 'Literal'} + label="Literal" /> - - + searchPanelStore.close()} diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index 3a0703fe..0c780e85 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx @@ -43,11 +43,15 @@ interface HighlightPalette { declare module '@mui/material/styles' { interface TypographyVariants { + fontWeightEditorNormal: number; + fontWeightEditorBold: number; editor: TypographyStyle; } // eslint-disable-next-line @typescript-eslint/no-shadow -- Augment imported interface. interface TypographyVariantsOptions { + fontWeightEditorNormal: number; + fontWeightEditorBold: number; editor: TypographyStyle; } @@ -63,11 +67,14 @@ declare module '@mui/material/styles' { } const typography: TypographyVariantsOptions = { + fontWeightEditorNormal: 400, + fontWeightEditorBold: 600, editor: { fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace', fontFeatureSettings: '"liga", "calt"', - fontSize: '1rem', + // `rem` for JetBrains MonoVariable make the text too large in Safari. + fontSize: '16px', fontWeight: 400, lineHeight: 1.5, letterSpacing: 0, @@ -78,10 +85,20 @@ const typography: TypographyVariantsOptions = { const components: Components = { MuiButton: { styleOverrides: { - root: { '&.rounded': { borderRadius: '50em' } }, - text: { '&.rounded': { padding: '6px 16px' } }, - textSizeSmall: { '&.rounded': { padding: '4px 10px' } }, - textSizeLarge: { '&.rounded': { padding: '8px 22px' } }, + root: { + '&.rounded': { borderRadius: '50em' }, + '.MuiButton-startIcon': { marginRight: 6 }, + '.MuiButton-endIcon': { marginLeft: 6 }, + }, + text: { '&.rounded': { padding: '6px 14px' } }, + textSizeSmall: { + fontSize: '0.875rem', + '&.rounded': { padding: '4px 8px' }, + }, + textSizeLarge: { + fontSize: '1rem', + '&.rounded': { padding: '8px 20px' }, + }, }, }, MuiToggleButton: { @@ -142,31 +159,31 @@ const lightTheme = createResponsiveTheme({ success: { main: '#50a14f' }, info: { main: '#4078f2' }, background: { - default: '#ffffff', - paper: '#ffffff', + default: '#fff', + paper: '#fff', }, text: { - primary: '#35373e', + primary: '#19202b', secondary: '#696c77', - disabled: '#8e8f97', + disabled: '#a0a1a7', }, - divider: alpha('#35373e', 0.21), + divider: alpha('#19202b', 0.16), outer: { - background: '#fafafa', - border: '#d4d4d6', + background: '#f5f5f5', + border: '#d6d7d9', }, highlight: { number: '#0084bc', parameter: '#6a3e3e', - comment: '#8e8f97', - activeLine: '#fafafa', + comment: '#a0a1a7', + activeLine: '#f5f5f5', selection: '#c8e4fb', - lineNumber: '#8e8f97', - foldPlaceholder: alpha('#35373e', 0.08), + lineNumber: '#a0a1a7', + foldPlaceholder: alpha('#19202b', 0.08), activeLintRange: alpha('#f2a60d', 0.28), occurences: { - read: alpha('#35373e', 0.16), - write: alpha('#35373e', 0.16), + read: alpha('#19202b', 0.16), + write: alpha('#19202b', 0.16), }, search: { match: '#00bcd4', @@ -178,7 +195,11 @@ const lightTheme = createResponsiveTheme({ }); const darkTheme = createResponsiveTheme({ - typography, + typography: { + ...typography, + fontWeightEditorNormal: 350, + fontWeightEditorBold: 550, + }, components: { ...components, MuiSnackbarContent: { @@ -218,7 +239,7 @@ const darkTheme = createResponsiveTheme({ text: { primary: '#ebebff', secondary: '#abb2bf', - disabled: '#828997', + disabled: '#5c6370', }, divider: alpha('#abb2bf', 0.24), outer: { @@ -228,10 +249,10 @@ const darkTheme = createResponsiveTheme({ highlight: { number: '#6188a6', parameter: '#c8ae9d', - comment: '#828997', + comment: '#5c6370', activeLine: '#21252b', selection: '#3e4453', - lineNumber: '#828997', + lineNumber: '#5c6370', foldPlaceholder: alpha('#ebebff', 0.12), activeLintRange: alpha('#fbc346', 0.28), occurences: { diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts index f2e0f15c..0c13f133 100644 --- a/subprojects/frontend/vite.config.ts +++ b/subprojects/frontend/vite.config.ts @@ -110,7 +110,7 @@ export default defineConfig({ short_name: 'Refinery', description: 'An efficient graph sovler for generating well-formed models', - theme_color: '#21252b', + theme_color: '#f5f5f5', display_override: ['window-controls-overlay'], display: 'standalone', background_color: '#21252b', -- cgit v1.2.3-54-g00ecf