dev menu in mui

src/ui/React/AugmentationAccordion.tsx

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 
-import { BBAccordion } from "./Accordion";
+import { BBAccordion } from "./BBAccordion";
 
 import { Augmentation } from "../../Augmentation/Augmentation";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";

src/ui/React/SourceFileAccordion.tsx

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 
-import { BBAccordion } from "./Accordion";
+import { BBAccordion } from "./BBAccordion";
 
 import { SourceFile } from "../../SourceFile/SourceFile";
 

src/ui/React/TextField.tsx

@@ -7,48 +7,11 @@ import React from "react";
 import { TextField as MuiTF, TextFieldProps, makeStyles } from "@material-ui/core";
 import { colors } from "./Theme";
 
-const useStyles = makeStyles({
-  // Tries to emulate StdButton in buttons.scss
-  root: {
-    backgroundColor: colors.well,
-    color: "white",
-    borderRadius: 0,
-    "& .MuiInputBase-input": {
-      color: colors.primarylight, // Text color
-    },
-    "& .MuiInputBase-input::placeholder::before": {
-      color: colors.primarydark,
-      userSelect: "none",
-    },
-    "& .MuiInput-underline:before": {
-      borderBottomColor: colors.primarydark,
-    },
-    "& .MuiInput-underline:hover:before": {
-      borderBottomColor: colors.primary,
-    },
-    "& .MuiInput-underline:after": {
-      borderBottomColor: colors.primarylight,
-    },
-    "& .MuiInputLabel-root::before": {
-      color: colors.primary,
-    },
-    "& .MuiInputLabel-root": {
-      // The little label on the top-right
-      color: colors.primary, // unfocused
-      userSelect: "none",
-      "&.Mui-focused": {
-        color: colors.primarylight, // focused
-      },
-    },
-  },
-});
-
 export const TextField: React.FC<TextFieldProps> = (props: TextFieldProps) => {
   return (
     <MuiTF
       {...props}
       classes={{
-        ...useStyles(),
         ...props.classes,
       }}
     />

src/ui/React/Theme.tsx

@@ -27,6 +27,64 @@ export const theme = createMuiTheme({
       root: {
         backgroundColor: colors.well,
       },
+      input: {
+        color: colors.primary,
+        "&::placeholder": {
+          userSelect: "none",
+          color: colors.primarydark,
+        },
+      },
+    },
+    MuiInput: {
+      root: {
+        backgroundColor: colors.well,
+        borderBottomColor: "#fff",
+      },
+      underline: {
+        "&:hover:before": {
+          borderBottomColor: colors.primarydark,
+        },
+        "&:before": {
+          borderBottomColor: colors.primary,
+        },
+        "&:after": {
+          borderBottomColor: colors.primarylight,
+        },
+      },
+    },
+    MuiInputLabel: {
+      root: {
+        color: colors.primarydark, // why is this switched?
+        userSelect: "none",
+        "&:before": {
+          color: colors.primarylight,
+        },
+      },
+    },
+    MuiSelect: {
+      icon: {
+        color: colors.primary,
+      },
+    },
+    MuiMenu: {
+      list: {
+        backgroundColor: colors.well,
+      },
+    },
+    MuiMenuItem: {
+      root: {
+        color: colors.primary,
+      },
+    },
+    MuiAccordionSummary: {
+      root: {
+        backgroundColor: "#111",
+      },
+    },
+    MuiAccordionDetails: {
+      root: {
+        backgroundColor: "#000",
+      },
     },
   },
 });