Merge pull request #5118 from weseek/imprv/84556-replace-dom-with-bootstrap-class-and-apply-suitable-colors

Imprv/84556 replace dom with bootstrap class and apply suitable colors

packages/app/src/components/Common/ClosableTextInput.tsx

@@ -96,7 +96,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
       <input
         ref={inputRef}
         type="text"
-        className="form-control mt-1"
+        className="form-control my-1"
         placeholder={props.placeholder}
         name="input"
         onChange={onChangeHandler}

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -215,9 +215,9 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   return (
     <div className={`grw-pagetree-item-container ${isOver ? 'grw-pagetree-is-over' : ''}`}>
-      <div
+      <li
         ref={(c) => { drag(c); drop(c) }}
-        className={`grw-pagetree-item d-flex align-items-center pr-1 ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
+        className={`list-group-item list-group-item-action border-0 py-1 d-flex align-items-center  ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
       >
         <button
           type="button"
@@ -243,7 +243,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
             isDeletable={!page.isEmpty && !isTopPage(page.path as string)}
           />
         </div>
-      </div>
+      </li>
 
       {isEnableActions && (
         <ClosableTextInput

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -67,7 +67,7 @@ const renderByInitialNode = (
     initialNode: ItemNode, DeleteModal: JSX.Element, isEnableActions: boolean, targetPathOrId?: string, onClickDeleteByPage?: (page: IPageForPageDeleteModal) => void,
 ): JSX.Element => {
   return (
-    <div className="grw-pagetree p-3">
+    <ul className="grw-pagetree list-group p-3">
       <Item
         key={initialNode.page.path}
         targetPathOrId={targetPathOrId}
@@ -77,7 +77,7 @@ const renderByInitialNode = (
         onClickDeleteByPage={onClickDeleteByPage}
       />
       {DeleteModal}
-    </div>
+    </ul>
   );
 };
 

packages/app/src/styles/_page-tree.scss

@@ -5,7 +5,7 @@ $grw-pagetree-item-padding-left: 10px;
 .grw-pagetree {
   min-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
 
-  .grw-pagetree-item {
+  .list-group-item {
     &:hover {
       .grw-pagetree-control {
         display: flex !important;
@@ -47,54 +47,57 @@ $grw-pagetree-item-padding-left: 10px;
 
   // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
   > .grw-pagetree-item-container {
+    > .list-group-item {
+      padding-left: 0;
+    }
     > .grw-pagetree-item-children {
       > .grw-pagetree-item-container {
-        > .grw-pagetree-item {
+        > .list-group-item {
           padding-left: $grw-pagetree-item-padding-left;
         }
         > .grw-pagetree-item-children {
           > .grw-pagetree-item-container {
-            > .grw-pagetree-item {
+            > .list-group-item {
               padding-left: $grw-pagetree-item-padding-left * 2;
             }
             > .grw-pagetree-item-children {
               > .grw-pagetree-item-container {
-                > .grw-pagetree-item {
+                > .list-group-item {
                   padding-left: $grw-pagetree-item-padding-left * 3;
                 }
                 > .grw-pagetree-item-children {
                   > .grw-pagetree-item-container {
-                    > .grw-pagetree-item {
+                    > .list-group-item {
                       padding-left: $grw-pagetree-item-padding-left * 4;
                     }
                     > .grw-pagetree-item-children {
                       > .grw-pagetree-item-container {
-                        > .grw-pagetree-item {
+                        > .list-group-item {
                           padding-left: $grw-pagetree-item-padding-left * 5;
                         }
                         > .grw-pagetree-item-children {
                           > .grw-pagetree-item-container {
-                            > .grw-pagetree-item {
+                            > .list-group-item {
                               padding-left: $grw-pagetree-item-padding-left * 6;
                             }
                             > .grw-pagetree-item-children {
                               > .grw-pagetree-item-container {
-                                > .grw-pagetree-item {
+                                > .list-group-item {
                                   padding-left: $grw-pagetree-item-padding-left * 7;
                                 }
                                 > .grw-pagetree-item-children {
                                   > .grw-pagetree-item-container {
-                                    > .grw-pagetree-item {
+                                    > .list-group-item {
                                       padding-left: $grw-pagetree-item-padding-left * 8;
                                     }
                                     > .grw-pagetree-item-children {
                                       > .grw-pagetree-item-container {
-                                        > .grw-pagetree-item {
+                                        > .list-group-item {
                                           padding-left: $grw-pagetree-item-padding-left * 9;
                                         }
                                         .grw-pagetree-item-children {
                                           > .grw-pagetree-item-container {
-                                            > .grw-pagetree-item {
+                                            > .list-group-item {
                                               padding-left: $grw-pagetree-item-padding-left * 10;
                                             }
                                           }

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

@@ -2,7 +2,7 @@
 $color-list: $color-global !default;
 $bgcolor-list: $bgcolor-global !default;
 $color-list-hover: $color-global !default;
-$bgcolor-list-hover: lighten($bgcolor-global, 3%) !default;
+$bgcolor-list-hover: lighten($bgcolor-global, 8%) !default;
 $color-list-active: $color-reversal !default;
 $bgcolor-list-active: $primary !default;
 $bgcolor-subnav: lighten($bgcolor-global, 3%) !default;
@@ -257,32 +257,15 @@ ul.pagination {
 
   // Pagetree
   .grw-pagetree {
-    .grw-pagetree-is-over {
-      background: $bgcolor-list-hover;
-    }
-    .grw-pagetree-item {
-      &.grw-pagetree-is-target {
-        background: $bgcolor-list-hover;
-      }
-
-      .grw-pagetree-count {
-        background: $bgcolor-sidebar-list-group;
-      }
-
-      .grw-pagetree-button {
-        &:not(:hover) {
-          svg {
-            fill: $gray-500;
-          }
-        }
-      }
-      &:hover {
-        background: $bgcolor-list-hover;
-      }
-      &:active {
-        background: lighten($bgcolor-list-hover, 5%);
-      }
-    }
+    @include override-list-group-item-for-pagetree(
+      $color-list,
+      $bgcolor-sidebar-list-group,
+      $color-list-hover,
+      $bgcolor-list-hover,
+      $color-list-active,
+      lighten($bgcolor-list-hover, 5%),
+      $gray-500
+    );
   }
 }
 

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

@@ -170,32 +170,15 @@ $border-color: $border-color-global;
 
   // Pagetree
   .grw-pagetree {
-    .grw-pagetree-is-over {
-      background: $bgcolor-list-hover;
-    }
-    .grw-pagetree-item {
-      &.grw-pagetree-is-target {
-        background: $bgcolor-list-hover;
-      }
-
-      .grw-pagetree-count {
-        background: $bgcolor-sidebar-list-group;
-      }
-
-      .grw-pagetree-button {
-        &:not(:hover) {
-          svg {
-            fill: $gray-400;
-          }
-        }
-      }
-      &:hover {
-        background: $bgcolor-list-hover;
-      }
-      &:active {
-        background: $bgcolor-list-active;
-      }
-    }
+    @include override-list-group-item-for-pagetree(
+      $color-list,
+      $bgcolor-sidebar-list-group,
+      $color-list-hover,
+      $bgcolor-list-hover,
+      $color-list-active,
+      $bgcolor-list-active,
+      $gray-400
+    );
   }
 }
 

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

@@ -311,7 +311,7 @@ ul.pagination {
   }
 
   .grw-pagetree {
-    .grw-pagetree-item {
+    .list-group-item {
       .grw-pagetree-title-anchor {
         color: inherit;
       }

packages/app/src/styles/theme/christmas.scss

@@ -62,7 +62,7 @@ html[dark] {
   // $color-list: $color-global;
   $bgcolor-list: transparent;
   // $color-list-hover: $color-reversal;
-  $color-list-active: white;
+  $color-list-active: $themelight;
   $bgcolor-list-active: $themecolor;
 
   // Navbar
@@ -181,4 +181,22 @@ html[dark] {
       @include btn-page-editor-mode-manager(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
     }
   }
+
+  /*
+ * GROWI Sidebar
+ */
+  .grw-sidebar {
+    // Pagetree
+    .grw-pagetree {
+      @include override-list-group-item-for-pagetree(
+        $color-list,
+        $bgcolor-sidebar-list-group,
+        $color-list-hover,
+        $bgcolor-list-hover,
+        $color-list-active,
+        $bgcolor-list-hover,
+        $gray-400
+      );
+    }
+  }
 }

packages/app/src/styles/theme/future.scss

@@ -109,4 +109,22 @@ html[dark] {
     color: #95abba;
     background-color: #1f1f22;
   }
+
+  /*
+ * GROWI Sidebar
+ */
+  .grw-sidebar {
+    // Pagetree
+    .grw-pagetree {
+      @include override-list-group-item-for-pagetree(
+        $color-list,
+        $bgcolor-sidebar-list-group,
+        $color-list-hover,
+        $bgcolor-list-hover,
+        $color-list-active,
+        lighten($bgcolor-list-hover, 5%),
+        $gray-600
+      );
+    }
+  }
 }

packages/app/src/styles/theme/island.scss

@@ -29,9 +29,9 @@ html[dark] {
   // $color-list: $color-global;
   // $bgcolor-list: lighten($color-themelight, 10%);
   // $color-list-hover: ;
-  // $bgcolor-list-hover: ;
+  $bgcolor-list-hover: $color-themelight;
   $color-list-active: $color-global;
-  // $bgcolor-list-active: $primary;
+  $bgcolor-list-active: $primary;
 
   // Table colors
   // $color-table: #; // optional
@@ -118,4 +118,22 @@ html[dark] {
       color: $color-reversal;
     }
   }
+
+  /*
+   * GROWI Sidebar
+  */
+  .grw-sidebar {
+    // Pagetree
+    .grw-pagetree {
+      @include override-list-group-item-for-pagetree(
+        $color-list,
+        $bgcolor-sidebar-list-group,
+        $color-list-hover,
+        $bgcolor-list-hover,
+        $color-list-active,
+        lighten($bgcolor-list-hover, 5%),
+        $gray-400
+      );
+    }
+  }
 }

packages/app/src/styles/theme/kibela.scss

@@ -109,4 +109,22 @@ html[dark] {
       @include btn-page-editor-mode-manager(darken($primary, 15%), lighten($primary, 45%), lighten($primary, 50%));
     }
   }
+
+  /*
+ * GROWI Sidebar
+ */
+  .grw-sidebar {
+    // Pagetree
+    .grw-pagetree {
+      @include override-list-group-item-for-pagetree(
+        $color-list,
+        $bgcolor-sidebar-list-group,
+        $color-list-hover,
+        $bgcolor-list-hover,
+        $color-list-active,
+        lighten($bgcolor-list-active, 55%),
+        $gray-400
+      );
+    }
+  }
 }

packages/app/src/styles/theme/mixins/_list-group.scss

@@ -17,3 +17,45 @@
     }
   }
 }
+
+@mixin override-list-group-item-for-pagetree(
+  $color,
+  $bgcolor,
+  $color-hover: $color,
+  $bgcolor-hover: $bgcolor,
+  $color-active: $color,
+  $bgcolor-active: $bgcolor,
+  $button-color
+) {
+  .grw-pagetree-is-over {
+    background: $bgcolor-hover;
+  }
+  .list-group-item {
+    color: $color;
+    background-color: transparent;
+    border-color: $border-color-global;
+
+    &.grw-pagetree-is-target {
+      background: $bgcolor-active;
+    }
+    .grw-pagetree-count {
+      background: $bgcolor;
+    }
+    .grw-pagetree-button {
+      &:not(:hover) {
+        svg {
+          fill: $button-color;
+        }
+      }
+    }
+
+    &.list-group-item-action {
+      &:hover {
+        background-color: $bgcolor-hover;
+      }
+      &:active {
+        background-color: $bgcolor-active;
+      }
+    }
+  }
+}

packages/app/src/styles/theme/mono-blue.scss

@@ -32,7 +32,7 @@ html[light] {
   // $color-list: $color-global;
   $bgcolor-list: transparent;
   $color-list-hover: $color-search;
-  $bgcolor-list-hover: darken($bgcolor-global, 3%);
+  $bgcolor-list-hover: lighten($primary, 70%);
   // $color-list-active: $color-reversal;
   // $bgcolor-list-active: $primary;
 

packages/app/src/styles/theme/wood.scss

@@ -66,9 +66,9 @@ html[dark] {
   // $color-list: $color-global;
   $bgcolor-list: transparent;
   $color-list-hover: $gray-100;
-  $bgcolor-list-hover: darken($bgcolor-global, 3%);
+  $bgcolor-list-hover: lighten($primary, 40%);
   // $color-list-active: $color-reversal;
-  // $bgcolor-list-active: $primary;
+  $bgcolor-list-active: lighten($primary, 30%);
 
   // Table colors
   // $color-table: #; // optional
@@ -88,7 +88,7 @@ html[dark] {
   $color-editor-icons: $color-global;
 
   // Sidebar
-  $bgcolor-sidebar: transparent;
+  $bgcolor-sidebar: $themecolor;
   // Sidebar contents
   $color-sidebar-context: #9d7406;
   $bgcolor-sidebar-context: transparent;