message: restyle SideDrawer RichText to match text fields
diff: -import React from "react";
  +import React, { useState } from "react";
  +import clsx from "clsx";
  import "tinymce/tinymce.min.js";
  import "tinymce/themes/silver";
  @@ -14,7 +15,70 @@ import { makeStyles, createStyles } from "@material-ui/core";
  const useStyles = makeStyles(theme =>
  createStyles({
  root: {
  - "& .tox-tinymce": { borderRadius: theme.shape.borderRadius },
  + "& .tox": {
  + "&.tox-tinymce": {
  + borderRadius: theme.shape.borderRadius,
  + border: "none",
  + backgroundColor:
  + theme.palette.type === "light"
  + ? "rgba(0, 0, 0, 0.09)"
  + : "rgba(255, 255, 255, 0.09)",
  +
  + transition: theme.transitions.create("background-color", {
  + duration: theme.transitions.duration.shorter,
  + easing: theme.transitions.easing.easeOut,
  + }),
  +
  + "&:hover": {
  + backgroundColor:
  + theme.palette.type === "light"
  + ? "rgba(0, 0, 0, 0.13)"
  + : "rgba(255, 255, 255, 0.13)",
  + },
  + },
  +
  + "& .tox-toolbar-overlord, & .tox-edit-area__iframe, & .tox-toolbar__primary": {
  + background: "transparent",
  + },
  +
  + "& .tox-toolbar__primary": { padding: theme.spacing(0.5, 0) },
  + "& .tox-toolbar__group": {
  + padding: theme.spacing(0, 1),
  + border: "none !important",
  + },
  +
  + "& .tox-tbtn": {
  + borderRadius: theme.shape.borderRadius,
  + color: theme.palette.text.secondary,
  + cursor: "pointer",
  + margin: 0,
  +
  + transition: theme.transitions.create(["color", "background-color"], {
  + duration: theme.transitions.duration.shortest,
  + }),
  +
  + "&:hover": {
  + color: theme.palette.text.primary,
  + backgroundColor: "transparent",
  + },
  +
  + "& svg": { fill: "currentColor" },
  + },
  +
  + "& .tox-tbtn--enabled, & .tox-tbtn--enabled:hover": {
  + backgroundColor: theme.palette.action.selected + " !important",
  + color: theme.palette.text.primary,
  + },
  + },
  + },
  +
  + focus: {
  + "& .tox.tox-tinymce": {
  + backgroundColor:
  + (theme.palette.type === "light"
  + ? "rgba(0, 0, 0, 0.09)"
  + : "rgba(255, 255, 255, 0.09)") + "!important",
  + },
  },
  })
  );
  @@ -26,9 +90,10 @@ export interface IRichTextProps {
  export default function RichText({ value, onChange }: IRichTextProps) {
  const classes = useStyles();
  + const [focus, setFocus] = useState(false);
  return (
  - <div className={classes.root}>
  + <div className={clsx(classes.root, focus && classes.focus)}>
  <Editor
  init={{
  height: 300,
  @@ -41,6 +106,8 @@ export default function RichText({ value, onChange }: IRichTextProps) {
  }}
  value={value}
  onEditorChange={onChange}
  + onFocus={() => setFocus(true)}
  + onBlur={() => setFocus(false)}
  />
  </div>
  );
  