({
root: {
- flex: 1
- }
+ flex: 1,
+ },
}));
+const useTreeStyles = makeStyles(
+ (theme) => ({
+ colorPrimary: {
+ color: theme.palette.secondary.main,
+ },
+ }),
+ { name: "MuiTypography" },
+);
const Json = ({ data }) => {
const classes = useStyles();
+ useTreeStyles();
return (
-
+
);
};
diff --git a/src/components/Panel.js b/src/components/Panel.js
index a722b4b..35278bc 100644
--- a/src/components/Panel.js
+++ b/src/components/Panel.js
@@ -5,7 +5,7 @@
import React from 'react';
import { makeStyles } from '@material-ui/core';
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexDirection: 'column',
@@ -17,7 +17,8 @@ const useStyles = makeStyles(() => ({
display: 'flex',
flexDirection: 'column',
flex: 1,
- overflow: 'hidden'
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.paper,
}
}));
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index d5f91ef..353f78f 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -2,45 +2,60 @@
// Copyright 2020 DXOS.org
//
-import clsx from 'clsx';
-import React from 'react';
-import { useHistory, useParams } from 'react-router';
+import clsx from "clsx";
+import React from "react";
+import { useHistory, useParams } from "react-router";
// import { useQuery } from '@apollo/react-hooks';
-import { makeStyles } from '@material-ui/core';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import LinkIcon from '@material-ui/icons/ExitToApp';
-import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from "@material-ui/core";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import LinkIcon from "@material-ui/icons/ExitToApp";
+import ListItemText from "@material-ui/core/ListItemText";
// import EXTENSIONS from '../gql/extensions.graphql';
// import { useQueryStatusReducer } from '../hooks';
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
root: {
- display: 'flex',
+ display: "flex",
flex: 1,
- flexDirection: 'column',
- justifyContent: 'space-between'
+ flexDirection: "column",
+ justifyContent: "space-between",
},
list: {
- padding: 0
+ padding: 0,
+ },
+
+ listItem: {
+ display: "flex",
+ alignItems: "center",
+ backgroundColor: theme.palette.background.default,
+ },
+
+ selected: {
+ backgroundColor: theme.palette.background.secondary,
+ },
+
+ itemText: {
+ fontFamily: '"DM Mono", monospace',
+ fontWeight: 400,
},
icon: {
minWidth: 40,
- color: theme.palette.grey[500]
+ color: theme.palette.grey[500],
},
selected: {
- color: theme.palette.primary.main
+ color: theme.palette.text.primary,
},
expand: {
- flex: 1
- }
+ flex: 1,
+ },
}));
const Sidebar = ({ modules: { services, settings } }) => {
@@ -52,38 +67,61 @@ const Sidebar = ({ modules: { services, settings } }) => {
// const extensions = extensionsData ? JSON.parse(extensionsData.extensions.json) : [];
const extensions = [];
- const isSelected = path => path === `/${module}`;
+ const isSelected = (path) => path === `/${module}`;
const Modules = ({ modules }) => (
-
+
{modules.map(({ path, title, icon: Icon }) => (
- history.push(path)}>
+ history.push(path)}
+ classes={{ root: classes.listItem, selected: classes.selected }}
+ >
-
+
-
+
))}
);
const Extensions = ({ extensions }) => (
-
+
{extensions.map(({ url, title }) => {
url = url
- .replace('%HOST%', window.location.host)
- .replace('%PORT%', window.location.port)
- .replace('%PROTOCOL%', window.location.protocol);
+ .replace("%HOST%", window.location.host)
+ .replace("%PORT%", window.location.port)
+ .replace("%PROTOCOL%", window.location.protocol);
return (
- { window.location = url; return true; }}>
+ {
+ window.location = url;
+ return true;
+ }}
+ >
-
+
);
- }
- )}
+ })}
);
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/StatusBar.js b/src/containers/StatusBar.js
index 63100fc..92077ec 100644
--- a/src/containers/StatusBar.js
+++ b/src/containers/StatusBar.js
@@ -28,7 +28,10 @@ const useStyles = makeStyles((theme) => ({
flexDirection: 'row',
flex: 1,
justifyContent: 'space-between',
- backgroundColor: grey[900],
+ backgroundColor: theme.palette.background.default,
+ borderTop: 1,
+ borderTopColor: "rgba(255, 255, 255, 0.12)",
+ borderTopStyle: "solid",
color: grey[400]
},
left: {
diff --git a/src/containers/panels/registry/Registry.js b/src/containers/panels/registry/Registry.js
index 90ad6e8..167961b 100644
--- a/src/containers/panels/registry/Registry.js
+++ b/src/containers/panels/registry/Registry.js
@@ -2,43 +2,48 @@
// 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,
+ },
+
+ tabs: {
+ fontFamily: '"DM Mono", monospace',
+ fontWeight: 400,
+ },
}));
const Registry = () => {
@@ -51,10 +56,14 @@ const Registry = () => {
- setTab(value)}>
-
-
-
+ setTab(value)}
+ indicatorColor="primary"
+ >
+
+
+
{/* */}
diff --git a/src/icons/Logo.js b/src/icons/Logo.js
index 72f9c3c..cf3af44 100644
--- a/src/icons/Logo.js
+++ b/src/icons/Logo.js
@@ -2,35 +2,47 @@
// Copyright 2020 DXOS.org
//
-import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import React from "react";
+import SvgIcon from "@material-ui/core/SvgIcon";
// TODO(burdon): Fixed color?
const Icon = (props) => (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
diff --git a/src/theme.js b/src/theme.js
index ae763c6..be2be34 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -2,78 +2,96 @@
// 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",
+ },
+ secondary: {
+ main: "#A2A2FF",
+ },
+ background: {
+ default: "#0F0F0F",
+ secondary: "#18181A",
+ paper: "#18181A",
+ },
+ text: {
+ primary: "#FBFBFB",
+ secondary: "#BDBCC3",
+ lineLabel: "#A2A2FF",
+ },
+ }
+ : {
+ 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",
+ },
+ },
+ },
+ },
+ });
diff --git a/webpack.config.js b/webpack.config.js
index 7635931..1db095f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,6 +14,7 @@ module.exports = merge(commonConfig, {
// https://github.com/jantimon/html-webpack-plugin#options
new HtmlWebPackPlugin({
template: './public/index.html',
+ favicon: './public/favicon.ico',
templateParameters: {
title: 'Console'
}