From 6b3b497a046889ca670a1b4870b70c3a2b64a46c Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Wed, 21 Aug 2024 14:41:29 +0800
Subject: [PATCH] change file chooser classname (#6594)

---
 .../components/file-chooser/file-chooser.js   | 10 ++--
 frontend/src/css/file-chooser.css             | 48 ++++++-------------
 2 files changed, 19 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/file-chooser/file-chooser.js b/frontend/src/components/file-chooser/file-chooser.js
index efafa791ea..3fb6018e25 100644
--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/frontend/src/components/file-chooser/file-chooser.js
@@ -443,12 +443,12 @@ class FileChooser extends React.Component {
     const recentlyUsedList = JSON.parse(localStorage.getItem('recently-used-list')) || [];
 
     return (
-      <div className='scroll-wrapper' onScroll={this.onScroll}>
-        <div className="file-chooser-container user-select-none" >
+      <div className='file-chooser-scroll-wrapper' onScroll={this.onScroll}>
+        <div className="file-chooser-container user-select-none">
           {mode === 'current_repo_and_other_repos' && (
             <Fragment>
               <div className="list-view">
-                <div className="list-view-header">
+                <div className="file-chooser-list-view-header">
                   <span className={`item-toggle sf3-font ${isCurrentRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onCurrentRepoToggle}></span>
                   <span className="library">{gettext('Current Library')}</span>
                 </div>
@@ -469,7 +469,7 @@ class FileChooser extends React.Component {
                 }
               </div>
               <div className="list-view">
-                <div className="list-view-header">
+                <div className="file-chooser-list-view-header">
                   <span className={`item-toggle sf3-font ${isOtherRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onOtherRepoToggle}></span>
                   <span className="library">{gettext('Other Libraries')}</span>
                 </div>
@@ -511,7 +511,7 @@ class FileChooser extends React.Component {
           {mode === 'only_all_repos' && (
             <div className="file-chooser-container">
               <div className="list-view">
-                <div className="list-view-header">
+                <div className="file-chooser-list-view-header">
                   <span className="item-toggle sf3-font sf3-font-down"></span>
                   <span className="library">{gettext('Libraries')}</span>
                 </div>
diff --git a/frontend/src/css/file-chooser.css b/frontend/src/css/file-chooser.css
index 8d4bbff5f5..43f92293a8 100644
--- a/frontend/src/css/file-chooser.css
+++ b/frontend/src/css/file-chooser.css
@@ -131,53 +131,33 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0);
 }
 
-.item-toggle {
-  width: 1.5rem;
-  height: 1.5rem;
-  line-height: 1.5rem !important;
-  color: #c0c0c0;
-  text-align: center;
-  cursor: pointer;
+.file-chooser-scroll-wrapper {
+  max-height: 100%;
+  overflow: auto;
 }
 
-.list-view-content {
+.file-chooser-scroll-wrapper .list-view-content {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.list-view-header {
+.file-chooser-scroll-wrapper .list-view-content .item-toggle {
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem !important;
+  text-align: center;
+}
+
+.file-chooser-list-view-header {
   position: relative;
   padding-left: 1.5rem;
 }
 
-.list-view-header:hover {
+.file-chooser-list-view-header:hover {
   background-color: #f5f5f5;
 }
 
-.list-view-header .name {
+.file-chooser-list-view-header .name {
   color: #eb8205;
 }
-
-.scroll-wrapper {
-  max-height: 100%;
-  overflow: auto;
-}
-
-.searched-active {
-  background: #f3af7d !important;
-  border-radius: 2px;
-  box-shadow: inset 0 0 1px #999;
-}
-
-.searched-active .icon {
-  color: #fff !important;
-}
-
-.searched-active td {
-  color: #fff;
-}
-
-.select-open-repo {
-  background: #fdefb9;
-}