Show droppable area on bookmark item tree

https://youtrack.weseek.co.jp/issue/GW-7923
- Update translation for droppable area text
- Remove min-height property for drop item area
- Always display droppable area if bookmarkFolder is not empty
- Remove background color of droppable area

packages/app/public/static/locales/en_US/translation.json

@@ -824,7 +824,7 @@
     "input_placeholder": "Input folder name",
     "new_folder": "New Folder",
     "delete": "Delete Folder",
-    "drop_item_here": "Drop item here",
+    "drop_item_here": "Drag and drop item here",
     "cancel_bookmark": "Un-bookmark this page",
     "bookmark_this_page": "Bookmark this page"
   },

packages/app/public/static/locales/ja_JP/translation.json

@@ -824,7 +824,7 @@
     "input_placeholder": "フォルダ名を入力してください`",
     "new_folder": "新しいフォルダ",
     "delete": "フォルダを削除",
-    "drop_item_here": "ここにアイテムをドロップ",
+    "drop_item_here": "ここに項目をドラッグ アンド ドロップします",
     "cancel_bookmark": "このページのブックマークを解除",
     "bookmark_this_page": "このページをブックマークして"
   },

packages/app/public/static/locales/zh_CN/translation.json

@@ -827,7 +827,7 @@
     "input_placeholder": "输入文件夹名称",
     "new_folder": "新建文件夹",
     "delete": "删除文件夹",
-    "drop_item_here": "将项目放在这里",
+    "drop_item_here": "将项目拖放到此处",
     "cancel_bookmark": "取消收藏此页面",
     "bookmark_this_page": "收藏此页"
   },

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

@@ -9,9 +9,7 @@
   }
 
   .grw-drop-item-area {
-    min-height: 90vh;
     padding: 1rem;
-
     & .grw-accept-drop-item {
       padding: 0.7rem;
     }

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

@@ -99,7 +99,7 @@ const BookmarkFolderTree = (props: BookmarkFolderTreeProps): JSX.Element => {
 
   };
 
-  const [{ isOver, canDrop }, dropRef] = useDrop(() => ({
+  const [, dropRef] = useDrop(() => ({
     accept: acceptedTypes,
     drop: (item: DragItemDataType, monitor) => {
       const dragType = monitor.getItemType();
@@ -146,10 +146,13 @@ const BookmarkFolderTree = (props: BookmarkFolderTreeProps): JSX.Element => {
           ))}
         </ul>
         { bookmarkFolderData && bookmarkFolderData.length > 0 && (
-          <div ref={(c) => { dropRef(c) }} className= 'grw-drop-item-area' >
-            { canDrop && isOver && (
-              <div className='grw-accept-drop-item' >{t('bookmark_folder.drop_item_here')}</div>
-            )}
+          <div ref={(c) => { dropRef(c) }} className= 'grw-drop-item-area '>
+            <div className="grw-accept-drop-item ">
+              <div className='d-flex flex-column align-items-center' >
+                {t('bookmark_folder.drop_item_here')}
+              </div>
+            </div>
+
           </div>
         ) }
       </div>

packages/app/src/components/UsersHomePageFooter.module.scss

@@ -85,7 +85,6 @@ $grw-sidebar-content-footer-height: 50px;
     }
     .grw-folder-tree-container {
       .grw-drop-item-area {
-        min-height: 25vh;
         padding: 1rem;
         .grw-accept-drop-item {
           padding: 0.5rem;

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

@@ -373,7 +373,6 @@
     .grw-folder-tree-container {
       .grw-drop-item-area , .grw-foldertree-item-container {
         .grw-accept-drop-item {
-          background-color: hsl.lighten(var(--bgcolor-sidebar-context), 10%) !important;
           border-color: hsl.lighten(var(--bgcolor-sidebar-context), 30%) !important;
         }
       }
@@ -440,7 +439,6 @@
     .grw-folder-tree-container {
       .grw-drop-item-area , .grw-foldertree-item-container {
         .grw-accept-drop-item {
-          background-color: hsl.lighten(var($body-bg), 10%) !important;
           border-color: hsl.lighten(var($body-bg), 30%) !important;
         }
       }

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

@@ -241,7 +241,6 @@
     .grw-folder-tree-container {
       .grw-drop-item-area, .grw-foldertree-item-container  {
         .grw-accept-drop-item {
-          background-color: hsl.darken(var(--bgcolor-sidebar-context), 10%) !important;
           border-color: hsl.darken(var(--bgcolor-sidebar-context), 30%) !important;
         }
       }
@@ -312,7 +311,6 @@
     .grw-folder-tree-container {
       .grw-drop-item-area, .grw-foldertree-item-container  {
         .grw-accept-drop-item {
-          background-color: hsl.darken(var($body-bg), 10%) !important;
           border-color: hsl.darken(var($body-bg), 30%) !important;
         }
       }