style: set primary to laconic blue

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 (
     <>
-      <MuiAppBar position='fixed' elevation={0}>
-        <Toolbar>
-          <Link classes={{ root: classes.logoLink }} href='/'>
+      <MuiAppBar position="fixed" elevation={0}>
+        <Toolbar sx={{ backgroundColor: "#0000F4" }}>
+          <Link classes={{ root: classes.logoLink }} href="/">
             {/* <div className={classes.logo}>
               <LaconicIcon />
             </div> */}
             <div className={classes.title}>
-              <Typography variant='h6'>Laconic</Typography>
+              <Typography variant="h6">Laconic</Typography>
             </div>
           </Link>
           &nbsp;
           <div className={classes.title}>
-            <Typography variant='h6'>{config.app.title}</Typography>
+            <Typography variant="h6">{config.app.title}</Typography>
           </div>
           {/* <div>
             <Link

src/components/Json.js

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

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.

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 = () => {
     <Panel
       toolbar={
         <Toolbar>
-          <Tabs value={tab} onChange={(_, value) => setTab(value)}>
-            <Tab value={TAB_RECORDS} label='Records' />
-            <Tab value={TAB_LOOKUP} label='Lookup' />
-            <Tab value={TAB_STATUS} label='Status' />
+          <Tabs
+            value={tab}
+            onChange={(_, value) => setTab(value)}
+            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' /> */}
           </Tabs>
 

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",
+          },
+        },
+      },
+    },
+  });