improve styles

apps/app/src/components/SearchPage.module.scss

@@ -1,8 +1,10 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '@growi/ui/scss/atoms/btn-muted';
 
 .search-page :global {
-  .danger-button-style {
-    --bs-btn-bg: #{rgba( bs.$danger, .1 )};
-    --bs-btn-hover-bg: #{rgba( bs.$danger, .1 )};
+  .btn.btn-muted-danger {
+    @include btn-muted.colorize(bs.$danger, bs.$secondary);
+
+    --bs-btn-active-bg: rgba(var(--bs-danger-rgb), 0.3);
   }
 }

apps/app/src/components/SearchPage.tsx

@@ -174,7 +174,7 @@ export const SearchPage = (): JSX.Element => {
         <NotAvailableForReadOnlyUser>
           <button
             type="button"
-            className={`${isCollapsed ? 'danger-button-style text-danger' : 'text-muted'} btn border-0 d-flex align-items-center`}
+            className={`${isCollapsed ? 'active' : ''} btn btn-muted-danger d-flex align-items-center`}
             aria-expanded="false"
             disabled={isDeleteButtonDisabled}
             onClick={() => { setIsCollapsed(!isCollapsed) }}
@@ -204,7 +204,7 @@ export const SearchPage = (): JSX.Element => {
 
             <button
               type="button"
-              className="ms-3 open-delete-modal-button btn border-0 text-danger danger-button-style d-flex align-items-center"
+              className="ms-3 open-delete-modal-button btn btn-outline-danger d-flex align-items-center"
               disabled={isDeleteButtonDisabled}
               onClick={deleteAllButtonClickedHandler}
             >