fix: remirror buttons (#267)

apps/app/components/rich-text-editor/toolbar/index.tsx

@@ -1,11 +1,12 @@
-// history
-import { RedoButton } from "./redo";
-import { UndoButton } from "./undo";
-// formats
-import { BoldButton } from "./bold";
-import { ItalicButton } from "./italic";
-import { UnderlineButton } from "./underline";
-import { StrikeButton } from "./strike";
+// buttons
+import {
+  ToggleBoldButton,
+  ToggleItalicButton,
+  ToggleUnderlineButton,
+  ToggleStrikeButton,
+  RedoButton,
+  UndoButton,
+} from "@remirror/react";
 // headings
 import HeadingControls from "./heading-controls";
 // list
@@ -15,17 +16,17 @@ import { UnorderedListButton } from "./unordered-list";
 export const RichTextToolbar: React.FC = () => (
   <div className="flex items-center gap-y-2 divide-x">
     <div className="flex items-center gap-x-1 px-2">
-      <UndoButton />
       <RedoButton />
+      <UndoButton />
     </div>
     <div className="px-2">
       <HeadingControls />
     </div>
     <div className="flex items-center gap-x-1 px-2">
-      <BoldButton />
-      <ItalicButton />
-      <UnderlineButton />
-      <StrikeButton />
+      <ToggleBoldButton />
+      <ToggleItalicButton />
+      <ToggleUnderlineButton />
+      <ToggleStrikeButton />
     </div>
     <div className="flex items-center gap-x-1 px-2">
       <OrderedListButton />

apps/app/styles/editor.css

@@ -419,3 +419,23 @@ img.ProseMirror-separator {
   text-decoration: underline;
 }
 /* end link styling */
+
+/* format buttons styling */
+.MuiButtonBase-root {
+  border: none !important;
+  border-radius: 0.25rem !important;
+  padding: 0.25rem !important;
+}
+
+.MuiButtonBase-root:hover {
+  background-color: rgb(229 231 235);
+}
+
+.MuiButtonBase-root svg {
+  fill: #000 !important;
+}
+
+.MuiButtonBase-root.Mui-selected {
+  background-color: rgb(229 231 235) !important;
+}
+/* end format buttons styling */