clean bs4 classes and scss

packages/app/src/components/PageList/PageListItem.tsx

@@ -64,21 +64,21 @@ const PageListItem: FC<Props> = memo((props:Props) => {
   }, [isDeviceSmallerThanLg, onClickSearchResultItem, pageData._id]);
 
   const styleListGroupItem = (!isDeviceSmallerThanLg && onClickCheckbox != null) ? 'list-group-item-action' : '';
-  // background color of list item changes when class "active" exists under 'grw-search-result-item'
+  // background color of list item changes when class "active" exists under 'list-group-item'
   const styleActive = !isDeviceSmallerThanLg && isSelected ? 'active' : '';
   const styleBorder = onClickCheckbox != null ? 'border-bottom' : 'list-group-item p-0';
 
   return (
     <li
       key={pageData._id}
-      className={`w-100 grw-search-result-item search-result-list ${styleListGroupItem} ${styleActive} ${styleBorder}}`
+      className={`list-group-item p-0 ${styleListGroupItem} ${styleActive} ${styleBorder}}`
       }
     >
       <div
-        className="h-100 text-break"
+        className="text-break"
         onClick={clickHandler}
       >
-        <div className="d-flex h-100">
+        <div className="d-flex">
           {/* checkbox */}
           {onClickCheckbox != null && (
             <div className="form-check d-flex align-items-center justify-content-center px-md-2 pl-3 pr-2 search-item-checkbox">
@@ -91,7 +91,7 @@ const PageListItem: FC<Props> = memo((props:Props) => {
               />
             </div>
           )}
-          <div className="search-item-text p-md-3 pl-2 py-3 pr-3 flex-grow-1">
+          <div className="search-item-text p-md-3 pl-2 py-3 pr-3">
             {/* page path */}
             <h6 className="mb-1 py-1 d-flex">
               <a className="d-inline-block" href={pagePath.isRoot ? pagePath.latter : pagePath.former}>
@@ -113,7 +113,7 @@ const PageListItem: FC<Props> = memo((props:Props) => {
               </Clamp>
 
               {/* page meta */}
-              <div className="d-none d-md-flex item-meta py-0 px-1">
+              <div className="d-none d-md-flex py-0 px-1">
                 <PageListMeta page={pageData} bookmarkCount={pageMeta.bookmarkCount} shouldSpaceOutIcon />
               </div>
               {/* doropdown icon includes page control buttons */}
@@ -127,7 +127,7 @@ const PageListItem: FC<Props> = memo((props:Props) => {
                 />
               </div>
             </div>
-            <div className="grw-search-result-list-snippet py-1">
+            <div className="page-list-snippet py-1">
               <Clamp lines={2}>
                 {
                   pageMeta.elasticSearchResult != null && pageMeta.elasticSearchResult?.snippet.length !== 0 ? (

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -34,7 +34,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
   return (
     <div className="content-main">
       <div className="search-result d-flex" id="search-result">
-        <div className="mw-0 flex-grow-1 flex-basis-0 page-list border boder-gray search-result-list" id="search-result-list">
+        <div className="mw-0 flex-grow-1 flex-basis-0 border boder-gray search-result-list" id="search-result-list">
 
           <SearchControl></SearchControl>
           <div className="search-result-list-scroll">
@@ -62,8 +62,8 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
               </div>
             </div>
 
-            <div className="page-list">
-              <ul className="page-list-ul page-list-ul-flat px-md-4 nav nav-pills"><SearchResultList></SearchResultList></ul>
+            <div className="page-list px-md-4">
+              <SearchResultList></SearchResultList>
             </div>
           </div>
         </div>

packages/app/src/components/SearchPage/SearchResultList.tsx

@@ -29,7 +29,7 @@ const SearchResultList: FC<Props> = (props:Props) => {
 
   const focusedPageId = (focusedSearchResultData != null && focusedSearchResultData.pageData != null) ? focusedSearchResultData.pageData._id : '';
   return (
-    <>
+    <ul className="page-list-ul list-group list-group-flush">
       {Array.isArray(props.pages) && props.pages.map((page) => {
         const isChecked = selectedPagesIdList.has(page.pageData._id);
 
@@ -58,7 +58,7 @@ const SearchResultList: FC<Props> = (props:Props) => {
         </div>
       )}
 
-    </>
+    </ul>
   );
 
 };

packages/app/src/styles/_page_list.scss

@@ -54,6 +54,28 @@ body .page-list {
       padding-left: 0;
     }
   }
+
+  // List group
+  .list-group {
+    .list-group-item {
+      min-height: 136px;
+
+      .page-list-meta {
+        .meta-icon {
+          width: 14px;
+          height: 14px;
+          margin-right: 14px;
+        }
+        .footstamp-icon {
+          margin-right: 2px;
+        }
+      }
+
+      &.list-group-item-action {
+        border-left: solid 3px transparent;
+      }
+    }
+  }
 }
 
 .popular-page-high {

packages/app/src/styles/_search.scss

@@ -142,9 +142,6 @@
     padding-bottom: unset;
   }
 
-  .search-control {
-    padding: 5px 0;
-  }
   // To fix the sort options position
   .search-sort-option-btn {
     min-width: 12rem;
@@ -155,10 +152,6 @@
     }
   }
   .search-result-list {
-    position: sticky;
-    top: 0px;
-    z-index: 10; // to avoid dropdown menu in this class to be placed behind elements displayed on the right pane
-
     .search-result-list-scroll {
       // subtract the height of GrowiNavbar + (SearchControl component + other factors)
       height: calc(100vh - (($grw-navbar-height + $grw-navbar-border-width) + 110px));
@@ -169,41 +162,6 @@
       }
     }
 
-    .nav.nav-pills {
-      > .grw-search-result-item {
-        min-height: 136px;
-        &.active {
-          border-left: solid 3px transparent;
-          .search-item-checkbox {
-            // subtract 3px from padding left applied by .search-item-checkbox
-            // as 3px of border-left is added above
-            padding-left: 4px !important;
-          }
-        }
-        > a {
-          word-break: break-all;
-
-          &:hover {
-            color: inherit;
-            text-decoration: none;
-          }
-          > * {
-            margin-right: 3px;
-          }
-        }
-        .page-list-meta {
-          .meta-icon {
-            width: 14px;
-            height: 14px;
-            margin-right: 14px;
-          }
-          .footstamp-icon {
-            margin-right: 2px;
-          }
-        }
-      }
-    }
-
     .search-result-meta {
       font-weight: bold;
     }
@@ -216,14 +174,14 @@
       margin: 0 10px 0 0;
       vertical-align: middle;
     }
-  }
-  .search-item-text {
-    .item-meta {
+    // not show top label in search result list
+    .page-list-meta {
       .top-label {
-        display: none; // not show top label in search result list
+        display: none;
       }
     }
   }
+
   .search-result-content {
     .search-result-content-nav {
       min-height: $grw-subnav-search-preview-min-height;

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

@@ -218,6 +218,19 @@ ul.pagination {
       }
     }
   }
+
+  // List group
+  .list-group-item {
+    &.active {
+      background-color: lighten($bgcolor-global, 9%) !important;
+    }
+    .list-group-item-action:hover {
+      background-color: $bgcolor-list-hover;
+    }
+    .page-list-snippet {
+      color: theme-color('light');
+    }
+  }
 }
 
 /*
@@ -442,21 +455,3 @@ ul.pagination {
 .grw-modal-head {
   border-color: $border-color-global;
 }
-
-/*
- * search page
- */
-.on-search {
-  .grw-search-result-item {
-    &.active {
-      background-color: lighten($bgcolor-global, 9%) !important;
-    }
-  }
-  .list-group-item-action:hover {
-    background-color: $bgcolor-list-hover;
-  }
-
-  .grw-search-result-list-snippet {
-    color: theme-color('light');
-  }
-}

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

@@ -17,10 +17,10 @@ $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcol
 $color-seen-user: #549c79 !default;
 $color-btn-reload-in-sidebar: $gray-500;
 $bgcolor-keyword-highlighted: $grw-marker-yellow !default;
-$bgcolor-search-item-active: lighten($primary, 76%) !default;
-$color-search-item-pagelist-meta: $gray-500 !default;
+$bgcolor-page-list-group-item-active: lighten($primary, 76%) !default;
+$color-page-list-group-item-meta: $gray-500 !default;
 $color-search-page-list-title: $color-global !default;
-$color-search-page-list-snippet: $gray-600 !default;
+$color-page-list-snippet: $gray-600 !default;
 $bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 
 // override bootstrap variables
@@ -510,6 +510,34 @@ ul.pagination {
   }
 }
 
+/*
+ * GROWI page-list
+ */
+.page-list {
+  // List group
+  .list-group {
+    .list-group-item {
+      .page-list-meta {
+        color: $color-page-list-group-item-meta;
+        svg {
+          fill: $color-page-list-group-item-meta;
+        }
+      }
+
+      .page-list-snippet {
+        color: $color-page-list-snippet;
+      }
+
+      &.list-group-item-action {
+        &.active {
+          background-color: $bgcolor-page-list-group-item-active;
+          border-left-color: $primary;
+        }
+      }
+    }
+  }
+}
+
 /*
  * GROWI on-edit
  */
@@ -616,33 +644,13 @@ body.pathname-sidebar {
   .grw-search-page-nav {
     background-color: $bgcolor-subnav;
   }
-  .search-result-list {
-    .search-control {
-      background-color: $bgcolor-global;
-    }
-    .page-list {
-      .highlighted-keyword {
-        background-color: $bgcolor-keyword-highlighted;
-      }
-      .page-list-ul {
-        .grw-search-result-item {
-          &.active {
-            background-color: $bgcolor-search-item-active;
-            border-color: $primary;
-          }
-        }
-      }
-      .page-list-meta {
-        color: $color-search-item-pagelist-meta;
-        svg {
-          fill: $color-search-item-pagelist-meta;
-        }
-      }
-    }
+  .search-control {
+    background-color: $bgcolor-global;
   }
-
-  .grw-search-result-list-snippet {
-    color: $color-search-page-list-snippet;
+  .page-list {
+    .highlighted-keyword {
+      background-color: $bgcolor-keyword-highlighted;
+    }
   }
 }