cerc-io/laconic-console
20
0
Fork 1
Code Issues 15 Pull Requests 1 Actions Packages Projects Releases 14 Wiki Activity

style: set primary to laconic blue

Browse Source
This commit is contained in:
Cody Bender 2024-08-08 22:03:52 -04:00
parent 740143ce7d
commit 01122eb7a8
5 changed files with 146 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/AppBar.js
View File

@ -2,13 +2,13 @@
// Copyright 2020 DXOS.org // Copyright 2020 DXOS.org
// //
import React from 'react'; import React from "react";
import { makeStyles } from '@material-ui/core'; import { makeStyles } from "@material-ui/core";
import MuiAppBar from '@material-ui/core/AppBar'; import MuiAppBar from "@material-ui/core/AppBar";
import Link from '@material-ui/core/Link'; import Link from "@material-ui/core/Link";
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from "@material-ui/core/Toolbar";
import Typography from '@material-ui/core/Typography'; import Typography from "@material-ui/core/Typography";
import blueGrey from '@material-ui/core/colors/blueGrey'; import blueGrey from "@material-ui/core/colors/blueGrey";
// import GraphQLIcon from '@material-ui/icons/Adb'; // import GraphQLIcon from '@material-ui/icons/Adb';
// import LaconicIcon from '../icons/Laconic'; // import LaconicIcon from '../icons/Laconic';
@ -21,26 +21,26 @@ const useStyles = makeStyles((theme) => ({
marginRight: theme.spacing(2), marginRight: theme.spacing(2),
color: theme.palette.grey[800], color: theme.palette.grey[800],
'& svg': { "& svg": {
width: 100, width: 100,
height: 48 height: 48,
} },
}, },
logoLink: { logoLink: {
lineHeight: 0 lineHeight: 0,
}, },
title: { title: {
display: 'flex', display: "flex",
flex: 1, flex: 1,
marginTop: 2, marginTop: 2,
color: theme.palette.grey[800] color: "#FBFBFB",
}, },
link: { link: {
color: blueGrey[900] color: blueGrey[900],
} },
})); }));
const AppBar = ({ config }) => { const AppBar = ({ config }) => {
@ -48,19 +48,19 @@ const AppBar = ({ config }) => {
return ( return (
<> <>
<MuiAppBar position='fixed' elevation={0}> <MuiAppBar position="fixed" elevation={0}>
<Toolbar> <Toolbar sx={{ backgroundColor: "#0000F4" }}>
<Link classes={{ root: classes.logoLink }} href='/'> <Link classes={{ root: classes.logoLink }} href="/">
{/* <div className={classes.logo}> {/* <div className={classes.logo}>
<LaconicIcon /> <LaconicIcon />
</div> */} </div> */}
<div className={classes.title}> <div className={classes.title}>
<Typography variant='h6'>Laconic</Typography> <Typography variant="h6">Laconic</Typography>
</div> </div>
</Link> </Link>
&nbsp; &nbsp;
<div className={classes.title}> <div className={classes.title}>
<Typography variant='h6'>{config.app.title}</Typography> <Typography variant="h6">{config.app.title}</Typography>
</div> </div>
{/* <div> {/* <div>
<Link <Link

9
src/components/Json.js
View File

@ -5,7 +5,7 @@
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core'; import { makeStyles } from '@material-ui/core';
import { JsonTreeView } from '@lirewine/react-ux'; // import { JsonTreeView } from '@lirewine/react-ux';
import { omitDeep } from '../util/omit'; import { omitDeep } from '../util/omit';
@ -18,9 +18,10 @@ const useStyles = makeStyles(() => ({
const Json = ({ data }) => { const Json = ({ data }) => {
const classes = useStyles(); const classes = useStyles();
return ( return null
<JsonTreeView className={classes.root} data={omitDeep(data, '__typename')} /> // return (
); // <JsonTreeView className={classes.root} data={omitDeep(data, '__typename')} />
// );
}; };
export default Json; export default Json;

23
src/components/Toolbar.js
View File

@ -2,20 +2,21 @@
// Copyright 2020 DXOS.org // Copyright 2020 DXOS.org
// //
import React from 'react'; import React from "react";
import { makeStyles } from '@material-ui/core'; import { makeStyles } from "@material-ui/core";
import MuiToolbar from '@material-ui/core/Toolbar'; import MuiToolbar from "@material-ui/core/Toolbar";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles((theme) => ({
toolbar: { toolbar: {
display: 'flex', display: "flex",
justifyContent: 'space-between', justifyContent: "space-between",
whiteSpace: 'nowrap', whiteSpace: "nowrap",
'& > button': { "& > button": {
margin: theme.spacing(0.5) margin: theme.spacing(0.5),
} },
} color: "primary",
},
})); }));
// TODO(burdon): Tabs. // TODO(burdon): Tabs.

56
src/containers/panels/registry/Registry.js
View File

@ -2,43 +2,43 @@
// Copyright 2020 DXOS.org // Copyright 2020 DXOS.org
// //
import React, { useState } from 'react'; import React, { useState } from "react";
import { makeStyles } from '@material-ui/core'; import { makeStyles } from "@material-ui/core";
import Paper from '@material-ui/core/Paper'; import Paper from "@material-ui/core/Paper";
import Tab from '@material-ui/core/Tab'; import Tab from "@material-ui/core/Tab";
import Tabs from '@material-ui/core/Tabs'; import Tabs from "@material-ui/core/Tabs";
import TabContext from '@material-ui/lab/TabContext'; import TabContext from "@material-ui/lab/TabContext";
import Panel from '../../../components/Panel'; import Panel from "../../../components/Panel";
import Toolbar from '../../../components/Toolbar'; import Toolbar from "../../../components/Toolbar";
// import LogPoller from '../../../components/LogPoller'; // import LogPoller from '../../../components/LogPoller';
import RegistryLookup, { LookupType } from './RegistryLookup'; import RegistryLookup, { LookupType } from "./RegistryLookup";
import RegistryStatus from './RegistryStatus'; import RegistryStatus from "./RegistryStatus";
import RegistryRecords from './RegistryRecords'; import RegistryRecords from "./RegistryRecords";
// import RegistryRecords, { RecordType } from './RegistryRecords'; // import RegistryRecords, { RecordType } from './RegistryRecords';
const TAB_RECORDS = 'records'; const TAB_RECORDS = "records";
const TAB_STATUS = 'status'; const TAB_STATUS = "status";
const TAB_LOOKUP = 'lookup'; const TAB_LOOKUP = "lookup";
// const TAB_LOG = 'log'; // const TAB_LOG = 'log';
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
expand: { expand: {
flex: 1 flex: 1,
}, },
panel: { panel: {
display: 'flex', display: "flex",
overflowY: 'scroll', overflowY: "scroll",
flex: 1 flex: 1,
}, },
paper: { paper: {
display: 'flex', display: "flex",
overflow: 'hidden', overflow: "hidden",
flex: 1 flex: 1,
} },
})); }));
const Registry = () => { const Registry = () => {
@ -51,10 +51,14 @@ const Registry = () => {
<Panel <Panel
toolbar={ toolbar={
<Toolbar> <Toolbar>
<Tabs value={tab} onChange={(_, value) => setTab(value)}> <Tabs
<Tab value={TAB_RECORDS} label='Records' /> value={tab}
<Tab value={TAB_LOOKUP} label='Lookup' /> onChange={(_, value) => setTab(value)}
<Tab value={TAB_STATUS} label='Status' /> indicatorColor="primary"
>
<Tab value={TAB_RECORDS} label="Records" />
<Tab value={TAB_LOOKUP} label="Lookup" />
<Tab value={TAB_STATUS} label="Status" />
{/* <Tab value={TAB_LOG} label='Log' /> */} {/* <Tab value={TAB_LOG} label='Log' /> */}
</Tabs> </Tabs>

148
src/theme.js
View File

@ -2,78 +2,88 @@
// Copyright 2019 DXOS.org // Copyright 2019 DXOS.org
// //
import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { createTheme as createMuiTheme } from "@material-ui/core/styles";
import teal from '@material-ui/core/colors/teal'; import teal from "@material-ui/core/colors/teal";
import orange from '@material-ui/core/colors/orange'; 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 // https://stackoverflow.com/questions/60567673/reactjs-material-ui-theme-mixins-toolbar-offset-is-not-adapting-when-toolbar
shadows: ['none'], mixins: {
denseToolbar: {
height: 48,
},
},
// https://stackoverflow.com/questions/60567673/reactjs-material-ui-theme-mixins-toolbar-offset-is-not-adapting-when-toolbar // https://material-ui.com/customization/globals/#default-props
mixins: { props: {
denseToolbar: { MuiButtonBase: {
height: 48 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 // https://material-ui.com/customization/palette/
props: { palette:
MuiButtonBase: { theme === "dark"
disableRipple: true ? {
}, type: "dark",
MuiButton: { primary: {
size: 'small' main: "#0000F4",
}, },
MuiFilledInput: { background: {
margin: 'dense' default: "#0F0F0F",
}, secondary: "#18181A",
MuiFormControl: { paper: "#18181A",
margin: 'dense' },
}, }
MuiFormHelperText: { : {
margin: 'dense' primary: teal,
}, },
MuiIconButton: {
size: 'small'
},
MuiInputBase: {
margin: 'dense'
},
MuiInputLabel: {
margin: 'dense'
},
MuiTable: {
size: 'small'
},
MuiTextField: {
margin: 'dense'
},
MuiToolbar: {
variant: 'dense'
}
},
// https://material-ui.com/customization/palette/ // https://material-ui.com/customization/theming/#theme-configuration-variables
palette: theme === 'dark' ? {
type: 'dark',
primary: orange
} : {
primary: teal
},
// https://material-ui.com/customization/theming/#theme-configuration-variables // https://material-ui.com/customization/globals/
overrides: {
// https://material-ui.com/customization/globals/ MuiCssBaseline: {
overrides: { "@global": {
MuiCssBaseline: { body: {
'@global': { margin: 0,
body: { overflow: "hidden",
margin: 0, },
overflow: 'hidden' },
} },
} },
} });
}
});