Adjutst color and layout

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

@@ -31,7 +31,7 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
 
   return (
     <>
-      <p className="card custom-card bg-body-tertiary my-3">
+      <p className="card custom-card bg-warning-subtle my-3">
         {t('admin:app_setting.file_upload')}
         <span className="text-danger mt-1">
           <span className="material-symbols-outlined">link_off</span>

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

@@ -55,7 +55,7 @@ export const MaintenanceMode: FC = () => {
         onConfirm={onConfirmHandler}
         onCancel={() => closeModal()}
       />
-      <p className="card custom-card bg-body-tertiary">
+      <p className="card custom-card bg-warning-subtle">
         {t('admin:maintenance_mode.description')}
         <span className="text-warning mt-1">
           <span className="material-symbols-outlined">error</span>

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

@@ -50,7 +50,7 @@ const QuestionnaireSettings = (): JSX.Element => {
 
   return (
     <div id="questionnaire-settings" className="mb-5">
-      <p className="card custom-card bg-body-tertiary">
+      <p className="card custom-card bg-info-subtle">
         <div className="mb-3">{t('app_setting.questionnaire_settings_explanation')}</div>
         <span>
           <div className="mb-2">

apps/app/src/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -144,8 +144,8 @@ class SlackConfiguration extends React.Component {
           <a href="#collapseHelpForIwh" data-bs-toggle="collapse">{t('notification_settings.how_to.header')}</a>
         </h3>
 
-        <ol id="collapseHelpForIwh" className="collapse">
-          <li>
+        <ol id="collapseHelpForIwh" className="collapse card custom-card bg-body-tertiary">
+          <li className="ms-3">
             {t('notification_settings.how_to.workspace')}
             <ol>
               {/* eslint-disable-next-line react/no-danger */}
@@ -154,7 +154,7 @@ class SlackConfiguration extends React.Component {
               <li>{t('notification_settings.how_to.workspace_desc3')}</li>
             </ol>
           </li>
-          <li>
+          <li className="ms-3">
             {t('notification_settings.how_to.at_growi')}
             <ol>
               {/* eslint-disable-next-line react/no-danger */}

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

@@ -112,7 +112,7 @@ class SamlSecurityManagementContents extends React.Component {
             {(adminSamlSecurityContainer.state.missingMandatoryConfigKeys.length !== 0) && (
               <div className="alert alert-danger">
                 {t('security_settings.missing mandatory configs')}
-                <ul>
+                <ul className="mb-0">
                   {adminSamlSecurityContainer.state.missingMandatoryConfigKeys.map((configKey) => {
                     const key = configKey.replace('security:passport-saml:', '');
                     return <li key={configKey}>{t(`security_settings.form_item_name.${key}`)}</li>;

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

@@ -301,7 +301,7 @@ class SecuritySetting extends React.Component {
                   </button>
                   <Collapse isOpen={expantDeleteOptionsState}>
                     <div className="pb-4">
-                      <p className="card custom-card bg-body-tertiary">
+                      <p className="card custom-card bg-warning-sublte">
                         <span className="text-warning">
                           <span className="material-symbols-outlined">info</span>
                           {/* eslint-disable-next-line react/no-danger */}
@@ -524,7 +524,7 @@ class SecuritySetting extends React.Component {
             />
             {/* eslint-disable-next-line react/no-danger */}
             <p className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('security_settings.max_age_desc') }} />
-            <p className="card custom-card bg-body-tertiary">
+            <p className="card custom-card bg-warning-subtle">
               <span className="text-warning">
                 <span className="material-symbols-outlined">info</span> {t('security_settings.max_age_caution')}
               </span>