deep-stack/laconic-console
3
0
Fork 0
forked from cerc-io/laconic-console
Code Pull Requests 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>

74
src/theme.js
View File

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