Improve space in the menu (#1075)

* Removed vertical dividers from Fixed Menu * Moved the Link option to the beginning
bigbinary · Apr 26, 2024 · be5cfb2 · be5cfb2
1 parent 6b94161
commit be5cfb2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 25 deletions.
diff --git a/src/components/Editor/Menu/Fixed/index.jsx b/src/components/Editor/Menu/Fixed/index.jsx
@@ -143,11 +143,14 @@ const Fixed = ({
             tooltipContent={tooltips.fontSize || t("neetoEditor.menu.fontSize")}
           />
         )}
-        {isFontSizeActive && <div className="vertical-divider" />}
         <div className="neeto-editor-fixed-menu__wrapper__button-group">
           {fontStyleOptions.map(renderOptionButton)}
         </div>
-        {isNotEmpty(fontStyleOptions) && <div className="vertical-divider" />}
+        {isAddLinkActive && (
+          <LinkAddPopOver
+            {...{ editor, isAddLinkActive, setIsAddLinkActive }}
+          />
+        )}
         {(isMenuExpanded || not(isMenuCollapsible)) && (
           <div
             className={classNames(
@@ -161,15 +164,9 @@ const Fixed = ({
             <div className="neeto-editor-fixed-menu__wrapper__button-group">
               {listStyleOptions.map(renderOptionButton)}
             </div>
-            {isNotEmpty(listStyleOptions) && (
-              <div className="vertical-divider" />
-            )}
             <div className="neeto-editor-fixed-menu__wrapper__button-group">
               {blockStyleOptions.map(renderOptionButton)}
             </div>
-            {isNotEmpty(blockStyleOptions) && (
-              <div className="vertical-divider" />
-            )}
             <div className="neeto-editor-fixed-menu__wrapper__button-group">
               {isTableActive && (
                 <TableOption
@@ -259,9 +256,6 @@ const Fixed = ({
           />
         </div>
       )}
-      {isAddLinkActive && (
-        <LinkAddPopOver {...{ editor, isAddLinkActive, setIsAddLinkActive }} />
-      )}
     </div>
   );
 };

diff --git a/src/components/Editor/Menu/Fixed/utils.jsx b/src/components/Editor/Menu/Fixed/utils.jsx
@@ -55,6 +55,12 @@ export const createMenuOptions = ({
       optionName: "underline",
       tooltip: tooltips.underline || t("neetoEditor.menu.underline"),
     },
+    {
+      Icon: Link,
+      command: () => setIsAddLinkActive(not),
+      optionName: "link",
+      tooltip: "Link",
+    },
     {
       Icon: TextCross,
       command: () => editor.chain().focus().toggleStrike().run(),
@@ -113,12 +119,6 @@ export const createMenuOptions = ({
     },
   ],
   misc: [
-    {
-      Icon: Link,
-      command: () => setIsAddLinkActive(not),
-      optionName: "link",
-      tooltip: "Link",
-    },
     {
       Icon: Attachment,
       command: attachmentProps?.handleUploadAttachments,

diff --git a/src/styles/editor/_menu.scss b/src/styles/editor/_menu.scss
@@ -14,13 +14,6 @@
     border-radius: var(--neeto-ui-rounded-sm) !important;
   }
 
-  .vertical-divider {
-    border-left: 1px solid rgb(var(--neeto-ui-gray-300));
-    margin: 0 11.5px;
-    opacity: 0.5;
-    height: 24px;
-  }
-
   button.neeto-editor-fixed-menu__item {
     min-width: fit-content;
     padding: 2px;
@@ -210,7 +203,6 @@
 
 .neeto-editor-font-size__wrapper {
   font-weight: var(--neeto-ui-font-normal) !important;
-  gap: 15px !important;
 }
 
 .neeto-editor-bubble-menu {