Add styling and update component classes

https://youtrack.weseek.co.jp/issue/GW-7910
- Create scss module for BookmarkFolderMenu component
- Implement styling for dark and light theme
- Implement create new folder from BookmarkFolderMenu
- Adjust classes of element on BookmarkFolderMenu  component
- Remove  onMouseEnterHandler method from BookmarkFolderMenuItem component
- Split dropdown toggle button and update classes
- Use UncontrolledDropdown instead of Dropdown component

packages/app/src/components/Bookmarks/BookmarkFolderMenu.module.scss

@@ -0,0 +1,10 @@
+.grw-bookmark-folder-dropdown :global {
+  .grw-bookmark-folder-menu {
+    .grw-bookmark-folder-menu-item {
+      svg,
+      .grw-bookmark-folder-menu-toggle-btn svg {
+        background-color: transparent;
+      }
+    }
+  }
+}

packages/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import {
   DropdownItem, DropdownMenu, UncontrolledDropdown,
 } from 'reactstrap';
 
+import { toastError, toastSuccess } from '~/client/util/apiNotification';
+import { apiv3Post } from '~/client/util/apiv3-client';
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
+import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
 import FolderIcon from '../Icons/FolderIcon';
 
 import BookmarkFolderMenuItem from './BookmarkFolderMenuItem';
+import BookmarkFolderNameInput from './BookmarkFolderNameInput';
 
+import styles from './BookmarkFolderMenu.module.scss';
 
 type Props = {
   children?: React.ReactNode
@@ -20,32 +25,63 @@ type Props = {
 const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const { t } = useTranslation();
   const { children, bookmarkFolders } = props;
+  const [isCreateAction, setIsCreateAction] = useState(false);
+  const { mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
+
+
+  const onClickNewBookmarkFolder = useCallback(() => {
+    setIsCreateAction(true);
+  }, []);
+
+  const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
+
+    try {
+      await apiv3Post('/bookmark-folder', { name: folderName, parent: null });
+      await mutateChildBookmarkData();
+      setIsCreateAction(false);
+      toastSuccess(t('toaster.create_succeeded', { target: t('bookmark_folder.bookmark_folder') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+
+  }, [mutateChildBookmarkData, t]);
 
   return (
-    <UncontrolledDropdown >
+    <UncontrolledDropdown className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}>
       {children}
-      <DropdownMenu right className='rounded-0'>
-        <DropdownItem toggle={false}>
-          <FolderIcon isOpen={false}/>
-          <span className="mx-2 ">{t('bookmark_folder.new_folder')}</span>
-        </DropdownItem>
+      <DropdownMenu right className='grw-bookmark-folder-menu'>
+        { isCreateAction ? (
+          <div className='mx-2'>
+            <BookmarkFolderNameInput
+              onClickOutside={() => setIsCreateAction(false)}
+              onPressEnter={onPressEnterHandlerForCreate}
+            />
+          </div>
+        ) : (
+          <DropdownItem toggle={false} onClick={onClickNewBookmarkFolder} className='grw-bookmark-folder-menu-item'>
+            <FolderIcon isOpen={false}/>
+            <span className="mx-2 ">{t('bookmark_folder.new_folder')}</span>
+          </DropdownItem>
+        )}
         <DropdownItem divider />
         {bookmarkFolders?.map(folder => (
           <div key={folder._id} >
             { folder.children.length > 0 ? (
-              <div className='dropdown-item' tabIndex={0} role="menuitem">
+              <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem">
                 <BookmarkFolderMenuItem item={folder} />
               </div>
             ) : (
-              <DropdownItem toggle={false}>
-                {folder.name}
+              <DropdownItem toggle={false} className='grw-bookmark-folder-menu-item'>
+                <div className='grw-bookmark-folder-menu-item-title'>
+                  {folder.name}
+                </div>
               </DropdownItem>
             )}
           </div>
         ))}
       </DropdownMenu>
     </UncontrolledDropdown>
-
   );
 };
 

packages/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import {
-  DropdownItem, DropdownMenu, DropdownToggle, Dropdown,
+  DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown, Button,
 } from 'reactstrap';
 
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
@@ -24,10 +24,6 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
     }
   }, [isOpen, mutateChildFolders]);
 
-  const onMouseEnterHandler = useCallback(() => {
-    setIsOpen(true);
-  }, []);
-
   const onMouseLeaveHandler = useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -36,33 +32,40 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   }, [isOpen]);
 
   return (
-    <Dropdown direction="right"
-      onMouseOver={onMouseEnterHandler} onMouseLeave={onMouseLeaveHandler} isOpen={isOpen} toggle={toggleHandler}>
-      <DropdownToggle color="transparent" className={'border-0 px-0 d-flex justify-content-between'} style={{ minWidth: '100%' }}>
+    <UncontrolledDropdown
+      direction="right"
+      className='d-flex justify-content-between'
+      isOpen={isOpen}
+      toggle={toggleHandler}
+      onMouseLeave={onMouseLeaveHandler}
+    >
+      <Button color="transparent" className='pl-0 grw-bookmark-folder-menu-item-title'>
         {item.name}
-        <span className='pl-2'>
-          <TriangleIcon/>
-        </span>
+      </Button>
+      <DropdownToggle color="transparent" className='grw-bookmark-folder-menu-toggle-btn'>
+        <TriangleIcon/>
       </DropdownToggle>
-      { childFolders != null
-          && (<DropdownMenu className='rounded-0 py-1 m-0'>
-            {childFolders?.map(child => (
-              <div key={child._id} >
-                {child.children.length > 0 ? (
-                  <div className='dropdown-item' tabIndex={0} role="menuitem">
-                    <BookmarkFolderMenuItem item={child} />
-                  </div>
-                ) : (
-                  <DropdownItem toggle={false}>
+      { childFolders != null && (
+        <DropdownMenu>
+          {childFolders?.map(child => (
+            <div key={child._id} >
+              {child.children.length > 0 ? (
+                <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem">
+                  <BookmarkFolderMenuItem item={child} />
+                </div>
+              ) : (
+                <DropdownItem toggle={false} className='grw-bookmark-folder-menu-item'>
+                  <div className='grw-bookmark-folder-menu-item-title'>
                     {child.name}
-                  </DropdownItem>
-                )}
-              </div>
-            ))}
-          </DropdownMenu>
-          )
+                  </div>
+                </DropdownItem>
+              )}
+            </div>
+          ))}
+        </DropdownMenu>
+      )
       }
-    </Dropdown>
+    </UncontrolledDropdown >
   );
 };
 export default BookmarkFolderMenuItem;

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -391,6 +391,23 @@ ul.pagination {
   }
 }
 
+// Bookmark dropdown menu
+.grw-bookmark-folder-dropdown  {
+  .grw-bookmark-folder-menu {
+    .form-control{
+      &:focus {
+        color: $body-color
+      }
+    }
+    .grw-bookmark-folder-menu-item  {
+      @include mixins.button-outline-svg-icon-variant($secondary, $gray-200);
+      .grw-bookmark-folder-menu-item-title {
+        color: $body-color
+      }
+    }
+  }
+}
+
 .btn.btn-page-item-control {
   @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
   @include hover() {

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -269,6 +269,23 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   }
 }
 
+// Bookmark dropdown menu
+.grw-bookmark-folder-dropdown  {
+  .grw-bookmark-folder-menu {
+    .form-control{
+      &:focus {
+        color: $body-color
+      }
+    }
+    .grw-bookmark-folder-menu-item {
+      @include mixins.button-outline-svg-icon-variant($gray-400, $primary);
+      .grw-bookmark-folder-menu-item-title {
+        color: $body-color
+      }
+    }
+  }
+}
+
 .btn.btn-page-item-control {
   @include button-outline-variant($gray-500, $primary, lighten($primary, 52%), transparent);
   @include hover() {