fix styles

apps/app/src/features/search/client/components/SearchHelp.tsx

@@ -24,37 +24,37 @@ export const SearchHelp = (): JSX.Element => {
           <tbody>
             <tr>
               <th className="py-2">
-                <code>word1</code> <code>word2</code><br></br>
-                <small>({ t('search_help.and.syntax help') })</small>
+                <code>word1</code> <code>word2</code><br />
+                <small className="text-muted">({ t('search_help.and.syntax help') })</small>
               </th>
-              <td><h6 className="m-0">{ t('search_help.and.desc', { word1: 'word1', word2: 'word2' }) }</h6></td>
+              <td><h6 className="m-0 text-muted">{ t('search_help.and.desc', { word1: 'word1', word2: 'word2' }) }</h6></td>
             </tr>
             <tr>
               <th className="py-2">
-                <code>&quot;This is GROWI&quot;</code><br></br>
-                <small>({ t('search_help.phrase.syntax help') })</small>
+                <code>&quot;This is GROWI&quot;</code><br />
+                <small className="text-muted">({ t('search_help.phrase.syntax help') })</small>
               </th>
-              <td><h6 className="m-0">{ t('search_help.phrase.desc', { phrase: 'This is GROWI' }) }</h6></td>
+              <td><h6 className="m-0 text-muted">{ t('search_help.phrase.desc', { phrase: 'This is GROWI' }) }</h6></td>
             </tr>
             <tr>
               <th className="py-2"><code>-keyword</code></th>
-              <td><h6 className="m-0">{ t('search_help.exclude.desc', { word: 'keyword' }) }</h6></td>
+              <td><h6 className="m-0 text-muted">{ t('search_help.exclude.desc', { word: 'keyword' }) }</h6></td>
             </tr>
             <tr>
               <th className="py-2"><code>prefix:/user/</code></th>
-              <td><h6 className="m-0">{ t('search_help.prefix.desc', { path: '/user/' }) }</h6></td>
+              <td><h6 className="m-0 text-muted">{ t('search_help.prefix.desc', { path: '/user/' }) }</h6></td>
             </tr>
             <tr>
               <th className="py-2"><code>-prefix:/user/</code></th>
-              <td><h6 className="m-0">{ t('search_help.exclude_prefix.desc', { path: '/user/' }) }</h6></td>
+              <td><h6 className="m-0 text-muted">{ t('search_help.exclude_prefix.desc', { path: '/user/' }) }</h6></td>
             </tr>
             <tr>
               <th className="py-2"><code>tag:wiki</code></th>
-              <td><h6 className="m-0">{ t('search_help.tag.desc', { tag: 'wiki' }) }</h6></td>
+              <td><h6 className="m-0 text-muted">{ t('search_help.tag.desc', { tag: 'wiki' }) }</h6></td>
             </tr>
             <tr>
               <th className="py-2"><code>-tag:wiki</code></th>
-              <td><h6 className="m-0">{ t('search_help.exclude_tag.desc', { tag: 'wiki' }) }</h6></td>
+              <td><h6 className="m-0 text-muted">{ t('search_help.exclude_tag.desc', { tag: 'wiki' }) }</h6></td>
             </tr>
           </tbody>
         </table>

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -4,7 +4,6 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter,
 } from 'reactstrap';
 
 import { useSearchModal } from '../stores/search';
@@ -15,7 +14,7 @@ const SearchModal = (): JSX.Element => {
   const { data: searchModalData, close: closeSearchModal } = useSearchModal();
 
   return (
-    <Modal isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
+    <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
       <ModalHeader>
         header
       </ModalHeader>
@@ -23,10 +22,6 @@ const SearchModal = (): JSX.Element => {
       <ModalBody>
         <SearchHelp />
       </ModalBody>
-
-      <ModalFooter>
-        footer
-      </ModalFooter>
     </Modal>
   );
 };