diff --git a/src/components/AppBar.js b/src/components/AppBar.js index 1aebe39..45f4594 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -2,13 +2,13 @@ // Copyright 2020 DXOS.org // -import React from 'react'; -import { makeStyles } from '@material-ui/core'; -import MuiAppBar from '@material-ui/core/AppBar'; -import Link from '@material-ui/core/Link'; -import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; -import blueGrey from '@material-ui/core/colors/blueGrey'; +import React from "react"; +import { makeStyles } from "@material-ui/core"; +import MuiAppBar from "@material-ui/core/AppBar"; +import Link from "@material-ui/core/Link"; +import Toolbar from "@material-ui/core/Toolbar"; +import Typography from "@material-ui/core/Typography"; +import blueGrey from "@material-ui/core/colors/blueGrey"; // import GraphQLIcon from '@material-ui/icons/Adb'; // import LaconicIcon from '../icons/Laconic'; @@ -21,26 +21,26 @@ const useStyles = makeStyles((theme) => ({ marginRight: theme.spacing(2), color: theme.palette.grey[800], - '& svg': { + "& svg": { width: 100, - height: 48 - } + height: 48, + }, }, logoLink: { - lineHeight: 0 + lineHeight: 0, }, title: { - display: 'flex', + display: "flex", flex: 1, marginTop: 2, - color: theme.palette.grey[800] + color: "#FBFBFB", }, link: { - color: blueGrey[900] - } + color: blueGrey[900], + }, })); const AppBar = ({ config }) => { @@ -48,19 +48,19 @@ const AppBar = ({ config }) => { return ( <> - - - + + + {/*
*/}
- Laconic + Laconic
 
- {config.app.title} + {config.app.title}
{/*
({ const Json = ({ data }) => { const classes = useStyles(); - return ( - - ); + return null + // return ( + // + // ); }; export default Json; diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 223a3b2..e895558 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -2,20 +2,21 @@ // Copyright 2020 DXOS.org // -import React from 'react'; -import { makeStyles } from '@material-ui/core'; -import MuiToolbar from '@material-ui/core/Toolbar'; +import React from "react"; +import { makeStyles } from "@material-ui/core"; +import MuiToolbar from "@material-ui/core/Toolbar"; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ toolbar: { - display: 'flex', - justifyContent: 'space-between', - whiteSpace: 'nowrap', + display: "flex", + justifyContent: "space-between", + whiteSpace: "nowrap", - '& > button': { - margin: theme.spacing(0.5) - } - } + "& > button": { + margin: theme.spacing(0.5), + }, + color: "primary", + }, })); // TODO(burdon): Tabs. diff --git a/src/containers/panels/registry/Registry.js b/src/containers/panels/registry/Registry.js index 90ad6e8..dec0e07 100644 --- a/src/containers/panels/registry/Registry.js +++ b/src/containers/panels/registry/Registry.js @@ -2,43 +2,43 @@ // Copyright 2020 DXOS.org // -import React, { useState } from 'react'; -import { makeStyles } from '@material-ui/core'; -import Paper from '@material-ui/core/Paper'; -import Tab from '@material-ui/core/Tab'; -import Tabs from '@material-ui/core/Tabs'; -import TabContext from '@material-ui/lab/TabContext'; +import React, { useState } from "react"; +import { makeStyles } from "@material-ui/core"; +import Paper from "@material-ui/core/Paper"; +import Tab from "@material-ui/core/Tab"; +import Tabs from "@material-ui/core/Tabs"; +import TabContext from "@material-ui/lab/TabContext"; -import Panel from '../../../components/Panel'; -import Toolbar from '../../../components/Toolbar'; +import Panel from "../../../components/Panel"; +import Toolbar from "../../../components/Toolbar"; // import LogPoller from '../../../components/LogPoller'; -import RegistryLookup, { LookupType } from './RegistryLookup'; -import RegistryStatus from './RegistryStatus'; -import RegistryRecords from './RegistryRecords'; +import RegistryLookup, { LookupType } from "./RegistryLookup"; +import RegistryStatus from "./RegistryStatus"; +import RegistryRecords from "./RegistryRecords"; // import RegistryRecords, { RecordType } from './RegistryRecords'; -const TAB_RECORDS = 'records'; -const TAB_STATUS = 'status'; -const TAB_LOOKUP = 'lookup'; +const TAB_RECORDS = "records"; +const TAB_STATUS = "status"; +const TAB_LOOKUP = "lookup"; // const TAB_LOG = 'log'; const useStyles = makeStyles(() => ({ expand: { - flex: 1 + flex: 1, }, panel: { - display: 'flex', - overflowY: 'scroll', - flex: 1 + display: "flex", + overflowY: "scroll", + flex: 1, }, paper: { - display: 'flex', - overflow: 'hidden', - flex: 1 - } + display: "flex", + overflow: "hidden", + flex: 1, + }, })); const Registry = () => { @@ -51,10 +51,14 @@ const Registry = () => { - setTab(value)}> - - - + setTab(value)} + indicatorColor="primary" + > + + + {/* */} diff --git a/src/theme.js b/src/theme.js index ae763c6..2739619 100644 --- a/src/theme.js +++ b/src/theme.js @@ -2,78 +2,88 @@ // Copyright 2019 DXOS.org // -import { createTheme as createMuiTheme } from '@material-ui/core/styles'; -import teal from '@material-ui/core/colors/teal'; -import orange from '@material-ui/core/colors/orange'; +import { createTheme as createMuiTheme } from "@material-ui/core/styles"; +import teal from "@material-ui/core/colors/teal"; +import orange from "@material-ui/core/colors/orange"; -export const createTheme = (theme) => createMuiTheme({ +export const createTheme = (theme) => + createMuiTheme({ + // https://material-ui.com/system/shadows + shadows: ["none"], - // https://material-ui.com/system/shadows - shadows: ['none'], + // https://stackoverflow.com/questions/60567673/reactjs-material-ui-theme-mixins-toolbar-offset-is-not-adapting-when-toolbar + mixins: { + denseToolbar: { + height: 48, + }, + }, - // https://stackoverflow.com/questions/60567673/reactjs-material-ui-theme-mixins-toolbar-offset-is-not-adapting-when-toolbar - mixins: { - denseToolbar: { - height: 48 - } - }, + // https://material-ui.com/customization/globals/#default-props + props: { + MuiButtonBase: { + disableRipple: true, + }, + MuiButton: { + size: "small", + }, + MuiFilledInput: { + margin: "dense", + }, + MuiFormControl: { + margin: "dense", + }, + MuiFormHelperText: { + margin: "dense", + }, + MuiIconButton: { + size: "small", + }, + MuiInputBase: { + margin: "dense", + }, + MuiInputLabel: { + margin: "dense", + }, + MuiTable: { + size: "small", + }, + MuiTextField: { + margin: "dense", + }, + MuiToolbar: { + variant: "dense", + }, + }, - // https://material-ui.com/customization/globals/#default-props - props: { - MuiButtonBase: { - disableRipple: true - }, - MuiButton: { - size: 'small' - }, - MuiFilledInput: { - margin: 'dense' - }, - MuiFormControl: { - margin: 'dense' - }, - MuiFormHelperText: { - margin: 'dense' - }, - MuiIconButton: { - size: 'small' - }, - MuiInputBase: { - margin: 'dense' - }, - MuiInputLabel: { - margin: 'dense' - }, - MuiTable: { - size: 'small' - }, - MuiTextField: { - margin: 'dense' - }, - MuiToolbar: { - variant: 'dense' - } - }, + // https://material-ui.com/customization/palette/ + palette: + theme === "dark" + ? { + type: "dark", + primary: { + main: "#0000F4", + }, + background: { + default: "#0F0F0F", + secondary: "#18181A", + paper: "#18181A", + }, + } + : { + primary: teal, + }, - // https://material-ui.com/customization/palette/ - palette: theme === 'dark' ? { - type: 'dark', - primary: orange - } : { - primary: teal - }, + // https://material-ui.com/customization/theming/#theme-configuration-variables - // https://material-ui.com/customization/theming/#theme-configuration-variables - - // https://material-ui.com/customization/globals/ - overrides: { - MuiCssBaseline: { - '@global': { - body: { - margin: 0, - overflow: 'hidden' - } - } - } - } -}); + // https://material-ui.com/customization/globals/ + overrides: { + MuiCssBaseline: { + "@global": { + body: { + margin: 0, + overflow: "hidden", + }, + }, + }, + }, + });