Merge pull request #4791 from weseek/feat/80324-82891-desing-include-path-button

Feat/80324 82891 search page left part design

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

@@ -118,9 +118,9 @@ const SearchControl: FC <Props> = (props: Props) => {
             <i className="icon-equalizer"></i>
           </button>
         </div>
-        <div className="d-none d-lg-flex align-items-center mr-3">
+        <div className="d-none d-lg-flex align-items-center mr-4">
           <div className="border border-gray mr-3">
-            <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckDefault">
+            <label className="px-3 py-2 mb-0 d-flex align-items-center text-secondary with-no-font-weight" htmlFor="flexCheckDefault">
               <input
                 className="mr-2"
                 type="checkbox"
@@ -131,7 +131,7 @@ const SearchControl: FC <Props> = (props: Props) => {
             </label>
           </div>
           <div className="border border-gray">
-            <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckChecked">
+            <label className="px-3 py-2 mb-0 d-flex align-items-center text-secondary with-no-font-weight" htmlFor="flexCheckChecked">
               <input
                 className="mr-2"
                 type="checkbox"

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

@@ -69,7 +69,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
               {/* page title */}
               <h3 className="mb-0">
                 <UserPicture user={pageData.lastUpdateUser} />
-                <span className="mx-2">{dPagePath.latter}</span>
+                <span className="mx-2 search-result-page-title">{dPagePath.latter}</span>
               </h3>
               {/* page meta */}
               <div className="d-flex mx-2">
@@ -80,7 +80,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
                 <PageItemControl page={pageData} onClickDeleteButton={props.onClickDeleteButton} />
               </div>
             </div>
-            <div className="my-2">
+            <div className="my-2 search-result-list-snippet">
               {
                 pageMeta.elasticSearchResult != null && (
                   <Clamp lines={2}>

packages/app/src/styles/_override-bootstrap.scss

@@ -153,7 +153,10 @@
 
   // label
   label {
-    font-weight: 700;
+    // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
+    :not(.with-no-font-weight) {
+      font-weight: 700;
+    }
   }
 
   // disabled button (reproduction from bootstrap3.)

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

@@ -20,6 +20,8 @@ $bgcolor-keyword-highlighted: $grw-marker-yellow !default;
 $bordercolor-search-item-left-active: $primary;
 $bgcolor-search-item-active: lighten($bordercolor-search-item-left-active, 76%) !default;
 $color-search-item-pagelist-meta: $gray-500 !default;
+$color-search-page-list-title: $color-global !default;
+$color-search-page-list-snippet: $gray-600 !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -622,6 +624,14 @@ body.pathname-sidebar {
       }
     }
   }
+
+  .search-result-page-title {
+    color: $color-search-page-list-title;
+  }
+
+  .search-result-list-snippet {
+    color: $color-search-page-list-snippet;
+  }
 }
 
 /*