fb

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

@@ -107,7 +107,8 @@ const SearchControl: FC <Props> = (props: Props) => {
         </div>
         <div className="d-none d-lg-flex align-items-center mr-4">
           <div className="border border-gray mr-3">
-            <label className="search-include-path-btn px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckDefault">
+            {/* By defualt font weight is 700 (_override-bootstrap.scss) */}
+            <label className="px-3 py-2 mb-0 d-flex align-items-center text-secondary font-weight-light" htmlFor="flexCheckDefault">
               <input
                 className="mr-2"
                 type="checkbox"
@@ -118,7 +119,8 @@ const SearchControl: FC <Props> = (props: Props) => {
             </label>
           </div>
           <div className="border border-gray">
-            <label className="search-include-path-btn px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckChecked">
+            {/* By defualt font weight is 700 (_override-bootstrap.scss) */}
+            <label className="px-3 py-2 mb-0 d-flex align-items-center text-secondary font-weight-light" htmlFor="flexCheckChecked">
               <input
                 className="mr-2"
                 type="checkbox"

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;
@@ -601,11 +603,6 @@ body.pathname-sidebar {
   .search-result-list {
     .search-control {
       background-color: $bgcolor-global;
-      .search-include-path-btn {
-        // label has 700 weight by default
-        font-weight: initial;
-        color: $secondary;
-      }
     }
     .page-list {
       .highlighted-keyword {
@@ -617,24 +614,27 @@ body.pathname-sidebar {
             background-color: $bgcolor-search-item-active;
             border-color: $bordercolor-search-item-left-active;
           }
-          .search-result-page-title {
-            color: $color-global;
-          }
-          .search-result-list-snippet {
-            color: $gray-600;
-          }
-        }
-      }
-      .page-list-meta {
-        color: $color-search-item-pagelist-meta;
-        svg {
-          fill: $color-search-item-pagelist-meta;
         }
       }
     }
   }
 }
 
+.search-result-page-title {
+  color: $color-search-page-list-title;
+}
+
+.search-result-list-snippet {
+  color: $color-search-page-list-snippet;
+}
+
+.page-list-meta {
+  color: $color-search-item-pagelist-meta;
+  svg {
+    fill: $color-search-item-pagelist-meta;
+  }
+}
+
 /*
  * react bootstrap typeahead
  */