#1 Update toolbar styling

UniRegensburg · Aug 13, 2022 · 625afd8 · 625afd8
1 parent 669d55e
commit 625afd8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/src/components/entry/NewEntry.tsx b/src/components/entry/NewEntry.tsx
@@ -10,6 +10,18 @@ import { EntryHeader } from "./EntryHeader";
 import { Editor } from "react-draft-wysiwyg";
 import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 
+const toolbarOptions = {
+  options: ["inline", "list"],
+  inline: {
+    className: ["!mb-0"],
+    options: ["bold", "italic", "underline", "strikethrough"],
+  },
+  list: {
+    className: ["!mb-0"],
+    options: ["unordered", "ordered"],
+  },
+};
+
 interface NewEntryProps {
   parentRole: "Kläger" | "Beklagter";
   setIsNewEntryVisible: (isVisible: boolean) => void;
@@ -75,17 +87,7 @@ export const NewEntry: React.FC<NewEntryProps> = ({
           editorClassName="p-6 "
           placeholder="Text eingeben..."
           toolbarClassName="p-2 relative"
-          toolbar={{
-            options: ["inline", "list"],
-            inline: {
-              className: ["!mb-0"],
-              options: ["bold", "italic", "underline", "strikethrough"],
-            },
-            list: {
-              className: ["!mb-0"],
-              options: ["unordered", "ordered"],
-            },
-          }}
+          toolbar={toolbarOptions}
           toolbarCustomButtons={[
             <Action
               className="text-base absolute right-2 top-1/2 -translate-y-1/2"

diff --git a/src/index.css b/src/index.css
@@ -28,3 +28,11 @@ body {
     @apply opacity-50 cursor-not-allowed;
   }
 }
+
+.rdw-option-wrapper {
+  @apply w-7 h-7 rounded bg-offWhite hover:shadow-none hover:border-lightGrey;
+}
+
+.rdw-option-active {
+  @apply shadow-none border-mediumGrey box-border;
+}