fix styles

apps/app/src/components/Admin/Security/DeleteAllShareLinksModal.jsx

@@ -21,8 +21,8 @@ const DeleteAllShareLinksModal = React.memo((props) => {
   return (
     <Modal isOpen={props.isOpen} toggle={closeButtonHandler} className="page-comment-delete-modal">
       <ModalHeader tag="h4" toggle={closeButtonHandler} className="bg-danger text-light">
-        <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('security_settings.delete_all_share_links')}
         </span>
       </ModalHeader>
@@ -31,9 +31,8 @@ const DeleteAllShareLinksModal = React.memo((props) => {
       </ModalBody>
       <ModalFooter>
         <Button onClick={closeButtonHandler}>{t('Cancel')}</Button>
-        <Button color="danger" onClick={deleteAllLinkHandler}>
-          <span className="material-symbols-outlined">delete_forever</span>
-          {t('Delete')}
+        <Button color="danger" onClick={deleteAllLinkHandler} className="d-flex">
+          <span className="material-symbols-outlined">delete_forever</span>{t('Delete')}
         </Button>
       </ModalFooter>
     </Modal>

apps/app/src/components/Admin/Security/GoogleSecuritySettingContents.jsx

@@ -174,8 +174,8 @@ class GoogleSecurityManagementContents extends React.Component {
         <hr />
 
         <div style={{ minHeight: '300px' }}>
-          <h4>
-            <span className="material-symbols-outlined" aria-hidden="true">help</span>
+          <h4 className="d-flex align-items-center">
+            <span className="material-symbols-outlined me-1" aria-hidden="true">help</span>
             <a href="#collapseHelpForGoogleOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.google')}</a>
           </h4>
           <ol id="collapseHelpForGoogleOauth" className="collapse">

apps/app/src/components/Admin/Security/OidcSecuritySettingContents.jsx

@@ -448,8 +448,8 @@ class OidcSecurityManagementContents extends React.Component {
         <hr />
 
         <div style={{ minHeight: '300px' }}>
-          <h4>
-            <span className="material-symbols-outlined" aria-hidden="true">help</span>
+          <h4 className="d-flex align-items-center">
+            <span className="material-symbols-outlined me-1" aria-hidden="true">help</span>
             <a href="#collapseHelpForOidcOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.oidc')}</a>
           </h4>
           <ol id="collapseHelpForOidcOauth" className="collapse">

apps/app/src/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.jsx

@@ -23,16 +23,16 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
       <ModalHeader tag="h4" toggle={closeButtonHandler} className="bg-danger text-light">
         <span>
           {props.isResetAll && (
-            <>
-              <span className="material-symbols-outlined">delete_forever</span>
+            <div className="d-flex align-items-center">
+              <span className="material-symbols-outlined me-1">delete_forever</span>
               {t('admin:slack_integration.reset_all_settings')}
-            </>
+            </div>
           )}
           {!props.isResetAll && (
-            <>
-              <span className="material-symbols-outlined">delete</span>
+            <div className="d-flex align-items-center">
+              <span className="material-symbols-outlined me-1">delete</span>
               {t('admin:slack_integration.delete_slackbot_settings')}
-            </>
+            </div>
           )}
         </span>
       </ModalHeader>
@@ -54,16 +54,16 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
         <Button onClick={closeButtonHandler}>{t('Cancel')}</Button>
         <Button color="danger" onClick={deleteSlackCredentialsHandler}>
           {props.isResetAll && (
-            <>
+            <div className="d-flex align-items-center">
               <span className="material-symbols-outlined">delete_forever</span>
               {t('admin:slack_integration.reset')}
-            </>
+            </div>
           )}
           {!props.isResetAll && (
-            <>
+            <div className="d-flex align-items-center">
               <span className="material-symbols-outlined">delete</span>
               {t('admin:slack_integration.delete')}
-            </>
+            </div>
           )}
         </Button>
       </ModalFooter>

apps/app/src/components/Admin/SlackIntegration/SlackAppIntegrationControl.tsx

@@ -38,7 +38,7 @@ export const SlackAppIntegrationControl: FC<Props> = (props: Props) => {
         </label>
       </div>
       <button
-        className="btn btn-outline-danger ms-3"
+        className="btn btn-outline-danger ms-3 d-flex"
         type="button"
         onClick={() => {
           if (onDeleteButtonClicked != null) {

apps/app/src/components/Admin/UserGroup/UserGroupDeleteModal.tsx

@@ -184,7 +184,10 @@ export const UserGroupDeleteModal: FC<Props> = (props: Props) => {
   return (
     <Modal className="modal-md" isOpen={props.isShow} toggle={toggleHandler}>
       <ModalHeader tag="h4" toggle={toggleHandler} className="bg-danger text-light">
-        <span className="material-symbols-outlined">delete_forever</span> {t('admin:user_group_management.delete_modal.header')}
+        <div className="d-flex align-items-center">
+          <span className="material-symbols-outlined me-1">delete_forever</span>
+          {t('admin:user_group_management.delete_modal.header')}
+        </div>
       </ModalHeader>
       <ModalBody>
         <div>
@@ -200,8 +203,8 @@ export const UserGroupDeleteModal: FC<Props> = (props: Props) => {
             {renderPageActionSelector()}
             {renderGroupSelector()}
           </div>
-          <button type="submit" value="" className="btn btn-sm btn-danger text-nowrap" disabled={!validateForm()}>
-            <span className="material-symbols-outlined">delete_forever</span> {t('Delete')}
+          <button type="submit" value="" className="btn btn-sm btn-danger text-nowrap d-flex align-items-center" disabled={!validateForm()}>
+            <span className="material-symbols-outlined">delete_forever</span>{t('Delete')}
           </button>
         </form>
       </ModalFooter>

apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx

@@ -209,17 +209,35 @@ export const UserGroupTable: FC<Props> = ({
                           <i className="icon-settings"></i>
                         </button>
                         <div className="dropdown-menu" role="menu" aria-labelledby={`admin-group-menu-button-${group._id}`}>
-                          <button className="dropdown-item" type="button" role="button" onClick={onClickEdit} data-user-group-id={group._id}>
-                            <i className="icon-fw icon-note"></i> {t('Edit')}
+                          <button
+                            className="dropdown-item d-flex align-items-center"
+                            type="button"
+                            role="button"
+                            onClick={onClickEdit}
+                            data-user-group-id={group._id}
+                          >
+                            <span className="material-symbols-outlined me-1">edit</span>{t('Edit')}
                           </button>
                           {onRemove != null
                           && (
-                            <button className="dropdown-item" type="button" role="button" onClick={onClickRemove} data-user-group-id={group._id}>
-                              <i className="icon-fw fa fa-chain-broken"></i> {t('admin:user_group_management.remove_child_group')}
+                            <button
+                              className="dropdown-item d-flex align-items-center"
+                              type="button"
+                              role="button"
+                              onClick={onClickRemove}
+                              data-user-group-id={group._id}
+                            >
+                              <span className="material-symbols-outlined me-1">link_off</span>{t('admin:user_group_management.remove_child_group')}
                             </button>
                           )}
-                          <button className="dropdown-item" type="button" role="button" onClick={onClickDelete} data-user-group-id={group._id}>
-                            <span className="material-symbols-outlined text-danger">delete_forever</span> {t('Delete')}
+                          <button
+                            className="dropdown-item d-flex align-items-center"
+                            type="button"
+                            role="button"
+                            onClick={onClickDelete}
+                            data-user-group-id={group._id}
+                          >
+                            <span className="material-symbols-outlined text-danger me-1">delete_forever</span> {t('Delete')}
                           </button>
                         </div>
                       </div>

apps/app/src/components/Admin/UserManagement.tsx

@@ -128,8 +128,10 @@ const UserManagement = (props: UserManagementProps) => {
           className="btn btn-outline-secondary ms-2"
           role="button"
         >
-          <span className="material-symbols-outlined" aria-hidden="true">person_add</span>
-          {t('admin:user_management.external_account')}
+          <div className="d-flex">
+            <span className="material-symbols-outlined me-1" aria-hidden="true">person_add</span>
+            {t('admin:user_management.external_account')}
+          </div>
         </Link>
       </p>
 
@@ -180,10 +182,10 @@ const UserManagement = (props: UserManagementProps) => {
           <div className="col-md-2 my-2">
             <button
               type="button"
-              className="btn btn-outline-secondary btn-sm"
+              className="btn btn-outline-secondary btn-sm d-flex align-items-center"
               onClick={resetButtonClickHandler}
             >
-              <span className="material-symbols-outlined">refresh</span>
+              <span className="material-symbols-outlined fs-5">refresh</span>
               {t('commons:Reset')}
             </button>
           </div>

apps/app/src/components/Admin/Users/ExternalAccountTable.tsx

@@ -97,12 +97,12 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                     <ul className="dropdown-menu" role="menu">
                       <li className="dropdown-header">{t('user_management.user_table.edit_menu')}</li>
                       <button
-                        className="dropdown-item"
+                        className="dropdown-item d-flex align-items-center"
                         type="button"
                         role="button"
                         onClick={() => removeExtenalAccount(ea._id)}
                       >
-                        <span className="material-symbols-outlined text-danger">delete_forever</span> {t('Delete')}
+                        <span className="material-symbols-outlined text-danger me-1">delete_forever</span> {t('Delete')}
                       </button>
                     </ul>
                   </div>

apps/app/src/components/Admin/Users/SendInvitationEmailButton.jsx

@@ -37,8 +37,8 @@ const SendInvitationEmailButton = (props) => {
   };
 
   return (
-    <button className={`dropdown-item ${textColor}`} type="button" onClick={() => { onClickSendInvitationEmailButton() }}>
-      <i className="icon-fw icon-envelope"></i>
+    <button className={`dropdown-item ${textColor} d-flex align-items-center`} type="button" onClick={() => { onClickSendInvitationEmailButton() }}>
+      <span className="material-symbols-outlined me-1">mail</span>
       {isInvitationEmailSended && (<>{t('admin:user_management.user_table.resend_invitation_email')}</>)}
       {!isInvitationEmailSended && (<>{t('admin:user_management.user_table.send_invitation_email')}</>)}
     </button>

apps/app/src/components/Admin/Users/UserMenu.tsx

@@ -47,8 +47,8 @@ const UserMenu = (props: UserMenuProps) => {
         <li className="dropdown-divider"></li>
         <li className="dropdown-header">{t('user_management.user_table.edit_menu')}</li>
         <li>
-          <button className="dropdown-item" type="button" onClick={onClickPasswordResetHandler}>
-            <i className="icon-fw icon-key"></i>{ t('user_management.reset_password') }
+          <button className="dropdown-item d-flex align-items-center" type="button" onClick={onClickPasswordResetHandler}>
+            <span className="material-symbols-outlined me-1">key</span>{ t('user_management.reset_password') }
           </button>
         </li>
       </>

apps/app/src/components/Admin/Users/UserRemoveButton.jsx

@@ -33,8 +33,8 @@ class UserRemoveButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <button className="dropdown-item" type="button" onClick={() => { this.onClickDeleteBtn() }}>
-        <span className="material-symbols-outlined text-danger">delete_forever</span> {t('Delete')}
+      <button className="dropdown-item d-flex align-items-center" type="button" onClick={() => { this.onClickDeleteBtn() }}>
+        <span className="material-symbols-outlined text-danger me-1">delete_forever</span> {t('Delete')}
       </button>
     );
   }