80388 modify colors

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

@@ -9,10 +9,12 @@ class SearchResultList extends React.Component {
       // TODO : send cetain  length of body (revisionBody) from elastisearch by adding some settings to the query and
       //         when keyword is not in page content, display revisionBody.
       // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
+
+      const { selectedPage } = this.props;
       return (
         <SearchResultListItem
           page={page}
-          selectedPageId={this.props.selectedPage.id}
+          selectedPageId={selectedPage.id != null ? selectedPage.id : ''}
           onClickInvoked={this.props.onClickInvoked}
           noLink
         />

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

@@ -17,7 +17,7 @@ type Props ={
       snippet: string,
     }
   },
-  selectedPageId: string,
+  selectedPageId?: string,
   onClickInvoked: (data: string) => void,
 }
 

packages/app/src/styles/_search.scss

@@ -273,3 +273,11 @@
     }
   }
 }
+
+.search-result {
+  .page-list {
+    .active {
+      border-left: 3px solid transparent;
+    }
+  }
+}

packages/app/src/styles/_variables.scss

@@ -34,6 +34,3 @@ $grw-logomark-width: 36px;
 $grw-nav-main-left-tab-width: 95px;
 $grw-nav-main-left-tab-width-mobile: 50px;
 $grw-nav-main-tab-height: 42px;
-
-$grw-search-active-item-bgcolor: #eff5ff;
-$grw-search-active-item-left-border: 3px solid #122c55;

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

@@ -29,6 +29,8 @@ $nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
 $nav-tabs-link-active-color: $color-nav-tabs-link-active;
 $nav-tabs-link-active-bg: $bgcolor-global;
 $nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
+$search-active-item-left-border-color: $primary;
+$search-active-item-bgcolor: lighten($search-active-item-left-border-color, 76%);
 
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
@@ -680,3 +682,12 @@ mark.rbt-highlight-text {
     width: 20px;
   }
 }
+
+.search-result {
+  .page-list {
+    .active {
+      background-color: $search-active-item-bgcolor;
+      border-color: $search-active-item-left-border-color;
+    }
+  }
+}

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

@@ -112,13 +112,6 @@ html[light] {
       @include btn-page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
-  // Search result list
-  .page-list {
-    .active {
-      background-color: $grw-search-active-item-bgcolor;
-      border-left: $grw-search-active-item-left-border;
-    }
-  }
 }
 
 //== Dark Mode