From d8bf9b4c2a9b98c53762e3349034dc9d49fb3851 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Tue, 7 Mar 2023 16:09:37 +0530
Subject: [PATCH] feat: added floating toolbar on text selection (#386)

style: re-designed create-issue modal
---
 apps/app/components/issues/modal.tsx          |  2 +-
 .../toolbar/float-tool-tip.tsx                | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index 6de90d5c9..c87ff2e66 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -231,7 +231,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="mt-10 flex items-start justify-center p-4 text-center sm:p-0 md:mt-20">
+          <div className="mt-10 flex min-h-full items-start justify-center p-4 text-center sm:p-0 md:mt-20">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
diff --git a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
index d6cd4e794..8146159a3 100644
--- a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
@@ -7,14 +7,27 @@ import {
   ToggleOrderedListButton,
   ToggleBulletListButton,
   ToggleCodeButton,
+  ToggleHeadingButton,
 } from "@remirror/react";
 
-import HeadingControls from "./heading-controls";
-
 export const CustomFloatingToolbar: React.FC = () => (
   <div className="z-[99999] flex items-center gap-y-2 divide-x rounded border bg-white p-1 px-0.5 shadow-md">
     <div className="flex items-center gap-x-1 px-2">
-      <HeadingControls />
+      <ToggleHeadingButton
+        attrs={{
+          level: 1,
+        }}
+      />
+      <ToggleHeadingButton
+        attrs={{
+          level: 2,
+        }}
+      />
+      <ToggleHeadingButton
+        attrs={{
+          level: 3,
+        }}
+      />
     </div>
     <div className="flex items-center gap-x-1 px-2">
       <ToggleBoldButton />