fix styles

apps/app/src/components/AlertSiteUrlUndefined.tsx

@@ -27,11 +27,13 @@ export const AlertSiteUrlUndefined = (): JSX.Element => {
   }
 
   return (
-    <div className="alert alert-danger rounded-0 d-edit-none mb-0 px-4 py-2">
-      <span className="material-symbols-outlined">error</span>
-      {
-        t('alert.siteUrl_is_not_set', { link: t('headers.app_settings') })
-      } &gt;&gt; <a href="/admin/app">{t('headers.app_settings')}<span className="material-symbols-outlined">login</span></a>
+    <div className="alert alert-danger rounded-0 d-edit-none mb-0 px-4 py-2 d-flex align-items-center">
+      <span className="material-symbols-outlined me-1">error</span>
+      {t('alert.siteUrl_is_not_set', { link: t('headers.app_settings') })}
+      &gt;&gt;
+      <a href="/admin/app" className="d-flex align-items-center">{t('headers.app_settings')}
+        <span className="material-symbols-outlined">login</span>
+      </a>
     </div>
   );
 };

apps/app/src/components/PasswordResetExecutionForm.tsx

@@ -81,7 +81,10 @@ const PasswordResetExecutionForm: FC = () => {
         <input name="reset-password-btn" className="btn btn-lg btn-primary" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <Link href="/login" prefetch={false}>
-        <span className="material-symbols-outlined">login</span>{t('forgot_password.sign_in_instead')}
+        <div className="d-flex align-items-center justify-content-center mt-3">
+          <span className="material-symbols-outlined">login</span>
+          {t('forgot_password.sign_in_instead')}
+        </div>
       </Link>
     </form>
   );

apps/app/src/components/PasswordResetRequestForm.tsx

@@ -40,8 +40,7 @@ const PasswordResetRequestForm: FC = () => {
         </div>
       ) : (
         <>
-          {/* lock-icon large */}
-          <h1><span className="material-symbols-outlined">lock</span></h1>
+          <h1><span className="material-symbols-outlined fs-1">lock</span></h1>
           <h1 className="text-center">{ t('forgot_password.forgot_password') }</h1>
           <h3>{t('forgot_password.password_reset_request_desc')}</h3>
           <div>
@@ -68,7 +67,10 @@ const PasswordResetRequestForm: FC = () => {
         </>
       )}
       <Link href="/login" prefetch={false}>
-        <span className="material-symbols-outlined">login</span>{t('forgot_password.return_to_login')}
+        <div className="d-flex align-items-center justify-content-center mt-3">
+          <span className="material-symbols-outlined">login</span>
+          {t('forgot_password.return_to_login')}
+        </div>
       </Link>
     </form>
   );

apps/app/src/components/PrivateLegacyPages.tsx

@@ -171,11 +171,11 @@ const ConvertByPathModal = React.memo((props: ConvertByPathModalProps): JSX.Elem
         </div>
         <button
           type="button"
-          className="btn btn-primary"
+          className="btn btn-primary d-flex align-items-center"
           disabled={!checked}
           onClick={() => props.onSubmit?.(currentInput)}
         >
-          <span className="material-symbols-outlined" aria-hidden="true">refresh</span>
+          <span className="material-symbols-outlined me-1" aria-hidden="true">refresh</span>
           { t('private_legacy_pages.by_path_modal.button_label') }
         </button>
       </ModalFooter>
@@ -362,13 +362,13 @@ const PrivateLegacyPages = (): JSX.Element => {
                 {t('private_legacy_pages.bulk_operation')}
               </DropdownToggle>
               <DropdownMenu>
-                <DropdownItem onClick={convertMenuItemClickedHandler}>
-                  <span className="material-symbols-outlined">refresh</span>
+                <DropdownItem onClick={convertMenuItemClickedHandler} className="d-flex align-items-center">
+                  <span className="material-symbols-outlined me-1">refresh</span>
                   {t('private_legacy_pages.convert_all_selected_pages')}
                 </DropdownItem>
                 <DropdownItem onClick={deleteAllButtonClickedHandler}>
-                  <span className="text-danger">
-                    <span className="material-symbols-outlined">delete</span>
+                  <span className="text-danger d-flex align-items-cente">
+                    <span className="material-symbols-outlined me-1">delete</span>
                     {t('search_result.delete_all_selected_page')}
                   </span>
                 </DropdownItem>

apps/app/src/components/PrivateLegacyPagesMigrationModal.tsx

@@ -88,8 +88,8 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
       </ModalBody>
       <ModalFooter>
         <ApiErrorMessageList errs={errs} />
-        <button type="button" className="btn btn-primary" onClick={submit}>
-          <span className="material-symbols-outlined" aria-hidden="true">refresh</span>
+        <button type="button" className="btn btn-primary d-flex align-items-center" onClick={submit}>
+          <span className="material-symbols-outlined me-1" aria-hidden="true">refresh</span>
           { t('private_legacy_pages.modal.button_label') }
         </button>
       </ModalFooter>

apps/app/src/components/PutbackPageModal.jsx

@@ -59,9 +59,9 @@ const PutBackPageModal = () => {
       return <></>;
     }
     return (
-      <>
-        <span className="material-symbols-outlined" aria-hidden="true">undo</span> { t('modal_putback.label.Put Back Page') }
-      </>
+      <div className="d-flex align-items-center">
+        <span className="material-symbols-outlined me-1" aria-hidden="true">undo</span> { t('modal_putback.label.Put Back Page') }
+      </div>
     );
   };
 
@@ -101,7 +101,7 @@ const PutBackPageModal = () => {
     return (
       <>
         <ApiErrorMessageList errs={errs} targetPath={targetPath} />
-        <button type="button" className="btn btn-info" onClick={putbackPageButtonHandler} data-testid="put-back-execution-button">
+        <button type="button" className="btn btn-info d-flex align-items-center" onClick={putbackPageButtonHandler} data-testid="put-back-execution-button">
           <span className="material-symbols-outlined" aria-hidden="true">undo</span> { t('Put Back') }
         </button>
       </>

apps/app/src/components/ReactMarkdownComponents/RichAttachment.tsx

@@ -60,7 +60,7 @@ export const RichAttachment = React.memo((props: RichAttachmentProps) => {
             <img src="/images/icons/editor/attachment.svg" className="attachment-icon" alt="attachment icon" />
           </div>
           <div className="ps-0">
-            <div className="d-inline-block">
+            <div className="d-flex align-items-center">
               {/* Since we need to include the "referer" to view the attachment on the shared page */}
               {/* eslint-disable-next-line react/jsx-no-target-blank */}
               <a target="_blank" rel="noopener" href={filePathProxied}>

apps/app/src/components/SearchPage.tsx

@@ -185,7 +185,7 @@ export const SearchPage = (): JSX.Element => {
           >
             <button
               type="button"
-              className="btn btn-outline-danger text-nowrap border-0 px-2"
+              className="btn btn-outline-danger text-nowrap border-0 px-2 d-flex align-items-center"
               disabled={isDisabled}
               onClick={deleteAllButtonClickedHandler}
             >

apps/app/src/components/Sidebar/Custom/CustomSidebarNotFound.tsx

@@ -6,8 +6,8 @@ export const SidebarNotFound = (): JSX.Element => {
 
   return (
     <div className="grw-sidebar-content-header h5 text-center py-3">
-      <Link href="/Sidebar#edit">
-        <span className="material-symbols-outlined">edit_note</span>
+      <Link href="/Sidebar#edit" className="d-flex align-items-center">
+        <span className="material-symbols-outlined me-1">edit_note</span>
         {/* eslint-disable-next-line react/no-danger */}
         <span dangerouslySetInnerHTML={{ __html: t('Create Sidebar Page') }}></span>
       </Link>

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.tsx

@@ -68,34 +68,34 @@ export const PersonalDropdown = (): JSX.Element => {
           <li>
             <Link
               href={pagePathUtils.userHomepagePath(currentUser)}
-              className="dropdown-item"
+              className="dropdown-item d-flex align-items-center"
               data-testid="grw-personal-dropdown-menu-user-home"
             >
-              <i className="icon-fw icon-home"></i>{t('personal_dropdown.home')}
+              <span className="material-symbols-outlined me-1">home</span>{t('personal_dropdown.home')}
             </Link>
           </li>
           <li>
             <Link
               href="/me"
-              className="dropdown-item"
+              className="dropdown-item d-flex align-items-center"
               data-testid="grw-personal-dropdown-menu-user-settings"
             >
-              <i className="icon-fw icon-wrench"></i>{t('personal_dropdown.settings')}
+              <span className="material-symbols-outlined me-1">build</span>{t('personal_dropdown.settings')}
             </Link>
           </li>
           <li>
             <button
               data-testid="grw-proactive-questionnaire-modal-toggle-btn"
               type="button"
-              className="dropdown-item"
+              className="dropdown-item d-flex align-items-center"
               onClick={() => setQuestionnaireModalOpen(true)}
             >
-              <span className="material-symbols-outlined">edit</span>{t('personal_dropdown.feedback')}
+              <span className="material-symbols-outlined me-1">edit</span>{t('personal_dropdown.feedback')}
             </button>
           </li>
           <li>
-            <button type="button" className="dropdown-item" onClick={logoutHandler}>
-              <i className="icon-fw icon-power"></i>{t('Sign out')}
+            <button type="button" className="dropdown-item d-flex align-items-center" onClick={logoutHandler}>
+              <span className="material-symbols-outlined me-1">power_settings_new</span>{t('Sign out')}
             </button>
           </li>
         </ul>

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginDeleteModal.tsx

@@ -43,8 +43,8 @@ export const PluginDeleteModal: React.FC = () => {
   return (
     <Modal isOpen={isOpen} toggle={toggleHandler}>
       <ModalHeader tag="h4" toggle={toggleHandler} className="bg-danger text-light" name={name}>
-        <span>
-          <span className="material-symbols-outlined">delete_forever</span>
+        <span className="d-flex align-items-center">
+          <span className="material-symbols-outlined me-1">delete_forever</span>
           {t('plugins.confirm')}
         </span>
       </ModalHeader>
@@ -54,7 +54,7 @@ export const PluginDeleteModal: React.FC = () => {
         </div>
       </ModalBody>
       <ModalFooter>
-        <Button color="danger" onClick={onClickDeleteButtonHandler}>
+        <Button color="danger" className="d-flex align-items-center" onClick={onClickDeleteButtonHandler}>
           <span className="material-symbols-outlined">delete_forever</span>
           {t('Delete')}
         </Button>

apps/app/src/pages/reset-password.page.tsx

@@ -26,7 +26,7 @@ const ForgotPasswordPage: NextPage<Props> = (props: Props) => {
           <div className="row justify-content-md-center">
             <div className="col-md-6 mt-5">
               <div className="text-center">
-                <h1><i className="icon-lock-open large"></i></h1>
+                <h1><span className="material-symbols-outlined fs-1">lock_open_right</span></h1>
                 <h2 className="text-center">{ t('forgot_password.reset_password') }</h2>
                 <h5>{ props.email }</h5>
                 <p className="mt-4">{ t('forgot_password.password_reset_excecution_desc') }</p>