style: set primary to laconic blue

2024-08-08 22:03:52 -04:00 · 2024-08-08 22:03:52 -04:00 · 01122eb7a8
commit 01122eb7a8
parent 740143ce7d
5 changed files with 146 additions and 130 deletions
--- 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 (
    <>
-      <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
--- a/src/components/Json.js
+++ b/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;
--- 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.
--- 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 = () => {
    <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>

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