fix style

apps/app/src/components/Admin/App/ConfirmModal.tsx

@@ -32,8 +32,10 @@ export const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) =>
   return (
     <Modal isOpen={props.isModalOpen} toggle={onCancel}>
       <ModalHeader tag="h4" toggle={onCancel} className="bg-danger">
-        <span className="material-symbols-outlined">help</span>
-        {t('Warning')}
+        <div className="d-flex align-items-center">
+          <span className="material-symbols-outlined me-2">help</span>
+          {t('Warning')}
+        </div>
       </ModalHeader>
       <ModalBody>
         {props.warningMessage}
@@ -42,9 +44,9 @@ export const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) =>
             <>
               <br />
               <br />
-              <span className="text-warning">
+              <span className="text-warning d-flex">
                 <>
-                  <span className="material-symbols-outlined">error</span>
+                  <span className="material-symbols-outlined me-1">error</span>
                   {props.supplymentaryMessage}
                 </>
               </span>

apps/app/src/components/Admin/App/FileUploadSetting.tsx

@@ -34,8 +34,8 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
         {t('admin:app_setting.file_upload')}
         <br />
         <br />
-        <span className="text-danger">
-          <span className="material-symbols-outlined">link_off</span>
+        <span className="text-danger d-flex">
+          <span className="material-symbols-outlined me-1">link_off</span>
           {t('admin:app_setting.change_setting')}
         </span>
       </p>
@@ -65,8 +65,10 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
         </div>
         {props.isFixedFileUploadByEnvVar && (
           <p className="alert alert-warning mt-2 text-start offset-3 col-6">
-            <span className="material-symbols-outlined">help</span>
-            <b>FIXED</b><br />
+            <div className="d-flex align-items-center">
+              <span className="material-symbols-outlined fs-5 me-1">help</span>
+              <b>FIXED</b><br />
+            </div>
             {/* eslint-disable-next-line react/no-danger */}
             <b dangerouslySetInnerHTML={{ __html: t('admin:app_setting.fixed_by_env_var', { fileUploadType: props.envFileUploadType }) }} />
           </p>

apps/app/src/components/Admin/App/MailSetting.tsx

@@ -47,7 +47,9 @@ const MailSetting = (props: Props) => {
   return (
     <React.Fragment>
       {!adminAppContainer.state.isMailerSetup && (
-        <div className="alert alert-danger"><span className="material-symbols-outlined">error</span> {t('admin:app_setting.mailer_is_not_set_up')}</div>
+        <div className="alert alert-danger d-flex align-items-center">
+          <span className="material-symbols-outlined me-1">error</span> {t('admin:app_setting.mailer_is_not_set_up')}
+        </div>
       )}
       <div className="row mb-5">
         <label className="col-md-3 col-form-label text-end">{t('admin:app_setting.from_e-mail_address')}</label>

apps/app/src/components/Admin/App/MaintenanceMode.tsx

@@ -58,8 +58,8 @@ export const MaintenanceMode: FC = () => {
         {t('admin:maintenance_mode.description')}
         <br />
         <br />
-        <span className="text-warning">
-          <span className="material-symbols-outlined">error</span>
+        <span className="text-warning d-flex">
+          <span className="material-symbols-outlined me-1">error</span>
           {t('admin:maintenance_mode.supplymentary_message_to_start')}
         </span>
       </p>

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -52,10 +52,14 @@ const QuestionnaireSettings = (): JSX.Element => {
       <p className="card custom-card">
         <div className="mb-4">{t('app_setting.questionnaire_settings_explanation')}</div>
         <span>
-          <div className="mb-2">
-            <span className="text-info me-2"><span className="material-symbols-outlined">info</span>{t('app_setting.about_data_sent')}</span>
-            <a href={t('app_setting.docs_link')} rel="noreferrer" target="_blank" className="d-inline">
-              {t('app_setting.learn_more')} <span className="material-symbols-outlined">share</span>
+          <div className="mb-2 d-flex">
+            <span className="text-info d-flex me-2">
+              <span className="material-symbols-outlined me-1">info</span>{t('app_setting.about_data_sent')}
+            </span>
+            <a href={t('app_setting.docs_link')} rel="noreferrer" target="_blank" className="d-flex">
+              {t('app_setting.learn_more')}
+              {/* TODO: 137284 */}
+              <span className="material-symbols-outlined">share</span>
             </a>
           </div>
           {t('app_setting.other_info_will_be_sent')}<br />

apps/app/src/components/Admin/App/SiteUrlSetting.tsx

@@ -37,7 +37,11 @@ const SiteUrlSetting = (props: Props) => {
     <React.Fragment>
       <p className="card custom-card">{t('site_url.desc')}</p>
       {!adminAppContainer.state.isSetSiteUrl
-          && (<p className="alert alert-danger"><span className="material-symbols-outlined">error</span> {t('site_url.warn')}</p>)}
+          && (
+            <p className="alert alert-danger d-flex">
+              <span className="material-symbols-outlined me-1">error</span> {t('site_url.warn')}
+            </p>
+          )}
 
       { adminAppContainer.state.siteUrlUseOnlyEnvVars && (
         <div className="row">

apps/app/src/components/Admin/App/V5PageMigration.tsx

@@ -137,8 +137,8 @@ const V5PageMigration: FC<Props> = (props: Props) => {
         {t('admin:v5_page_migration.migration_desc')}
         <br />
         <br />
-        <span className="text-danger">
-          <span className="material-symbols-outlined">error</span>
+        <span className="text-danger d-flex">
+          <span className="material-symbols-outlined me-1">error</span>
           {t('admin:v5_page_migration.migration_note')}
         </span>
       </p>