Adjust security setting layout

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

@@ -56,7 +56,7 @@ class GitHubSecurityManagementContents extends React.Component {
           </div>
         )}
 
-        <div className="row">
+        <div className="row my-4">
           <div className="col-6 offset-3">
             <div className="form-check form-switch form-check-success">
               <input
@@ -71,11 +71,11 @@ class GitHubSecurityManagementContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('github') && isGitHubEnabled)
-              && <div className="badge bg-warning text-dark">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge text-bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row mb-4">
           <label className="form-label col-12 col-md-3 text-start text-md-end py-2">{t('security_settings.callback_URL')}</label>
           <div className="col-12 col-md-6">
             <input
@@ -100,9 +100,9 @@ class GitHubSecurityManagementContents extends React.Component {
         {isGitHubEnabled && (
           <React.Fragment>
 
-            <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
+            <h3 className="border-bottom mb-4">{t('security_settings.configuration')}</h3>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="githubClientId" className="col-3 text-end py-2 form-label">{t('security_settings.clientID')}</label>
               <div className="col-6">
                 <input
@@ -118,7 +118,7 @@ class GitHubSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-3">
               <label htmlFor="githubClientSecret" className="col-3 text-end py-2 form-label">{t('security_settings.client_secret')}</label>
               <div className="col-6">
                 <input
@@ -134,7 +134,7 @@ class GitHubSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-3">
               <div className="offset-3 col-6 text-start">
                 <div className="form-check form-check-success">
                   <input
@@ -156,7 +156,7 @@ class GitHubSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row my-3">
+            <div className="row mb-4">
               <div className="offset-3 col-5">
                 <div className="btn btn-primary" disabled={adminGitHubSecurityContainer.state.retrieveError != null} onClick={this.onClickSubmit}>
                   {t('Update')}
@@ -174,12 +174,14 @@ class GitHubSecurityManagementContents extends React.Component {
             <span className="material-symbols-outlined" aria-hidden="true">help</span>
             <a href="#collapseHelpForGitHubOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.github')}</a>
           </h4>
-          <ol id="collapseHelpForGitHubOauth" className="collapse">
-            {/* eslint-disable-next-line max-len */}
-            <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.GitHub.register_1', { link: '<a href="https://github.com/settings/developers" target=_blank>GitHub Developer Settings</a>' }) }} />
-            <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.GitHub.register_2', { url: gitHubCallbackUrl }) }} />
-            <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.GitHub.register_3') }} />
-          </ol>
+          <div className="card custom-card bg-body-tertiary">
+            <ol id="collapseHelpForGitHubOauth" className="collapse mb-0">
+              {/* eslint-disable-next-line max-len */}
+              <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.GitHub.register_1', { link: '<a href="https://github.com/settings/developers" target=_blank>GitHub Developer Settings</a>' }) }} />
+              <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.GitHub.register_2', { url: gitHubCallbackUrl }) }} />
+              <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.GitHub.register_3') }} />
+            </ol>
+          </div>
         </div>
 
       </React.Fragment>

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

@@ -54,7 +54,7 @@ class GoogleSecurityManagementContents extends React.Component {
           </div>
         )}
 
-        <div className="row">
+        <div className="row my-4">
           <div className="col-6 offset-3">
             <div className="form-check form-switch form-check-success">
               <input
@@ -69,7 +69,7 @@ class GoogleSecurityManagementContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('google') && isGoogleEnabled)
-              && <div className="badge bg-warning text-dark">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge text-bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
@@ -99,9 +99,9 @@ class GoogleSecurityManagementContents extends React.Component {
         {isGoogleEnabled && (
           <React.Fragment>
 
-            <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
+            <h3 className="border-bottom mb-4">{t('security_settings.configuration')}</h3>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="googleClientId" className="col-3 text-end py-2 form-label">{t('security_settings.clientID')}</label>
               <div className="col-6">
                 <input
@@ -117,7 +117,7 @@ class GoogleSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="googleClientSecret" className="col-3 text-end py-2 form-label">{t('security_settings.client_secret')}</label>
               <div className="col-6">
                 <input
@@ -133,7 +133,7 @@ class GoogleSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-3">
               <div className="offset-3 col-6">
                 <div className="form-check form-check-success">
                   <input
@@ -155,7 +155,7 @@ class GoogleSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row my-3">
+            <div className="row mb-4">
               <div className="offset-3 col-5">
                 <button
                   type="button"
@@ -178,14 +178,16 @@ class GoogleSecurityManagementContents extends React.Component {
             <span className="material-symbols-outlined" 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">
-            {/* eslint-disable-next-line max-len */}
-            <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_1', { link: '<a href="https://console.cloud.google.com/apis/credentials" target=_blank>Google Cloud Platform API Manager</a>' }) }} />
-            <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_2') }} />
-            <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_3') }} />
-            <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_4', { url: googleCallbackUrl }) }} />
-            <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_5') }} />
-          </ol>
+          <div className="card custom-card bg-body-tertiary">
+            <ol id="collapseHelpForGoogleOauth" className="collapse mb-0">
+              {/* eslint-disable-next-line max-len */}
+              <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_1', { link: '<a href="https://console.cloud.google.com/apis/credentials" target=_blank>Google Cloud Platform API Manager</a>' }) }} />
+              <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_2') }} />
+              <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_3') }} />
+              <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_4', { url: googleCallbackUrl }) }} />
+              <li dangerouslySetInnerHTML={{ __html: t('security_settings.OAuth.Google.register_5') }} />
+            </ol>
+          </div>
         </div>
 
       </React.Fragment>

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

@@ -54,11 +54,11 @@ class LdapSecuritySettingContents extends React.Component {
     return (
       <React.Fragment>
 
-        <h2 className="alert-anchor border-bottom">
+        <h2 className="alert-anchor border-bottom mb-4">
           LDAP
         </h2>
 
-        <div className="row">
+        <div className="row my-4">
           <div className="col-6 offset-3">
             <div className="form-check form-switch form-check-success">
               <input
@@ -73,7 +73,7 @@ class LdapSecuritySettingContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('ldap') && isLdapEnabled)
-              && <div className="badge bg-warning text-dark">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge text-bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
@@ -81,13 +81,13 @@ class LdapSecuritySettingContents extends React.Component {
         {isLdapEnabled && (
           <React.Fragment>
 
-            <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
+            <h3 className="border-bottom mb-4">{t('security_settings.configuration')}</h3>
 
-            <div className="row">
+            <div className="row my-3">
               <label htmlFor="serverUrl" className="text-start text-md-end col-md-3 col-form-label">
                 Server URL
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"
@@ -106,11 +106,11 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.bind_mode')}</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <div className="dropdown">
                   <button
                     className="btn btn-outline-secondary dropdown-toggle"
@@ -136,11 +136,11 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong>Bind DN</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"
@@ -171,11 +171,11 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
+            <div className="row my-3">
               <div htmlFor="bindDNPassword" className="text-start text-md-end col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.bind_DN_password')}</strong>
               </div>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 {(adminLdapSecurityContainer.state.isUserBind) ? (
                   <p className="card custom-card passport-ldap-userbind">
                     <small>
@@ -202,11 +202,11 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.search_filter')}</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"
@@ -234,15 +234,15 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <h3 className="alert-anchor border-bottom">
+            <h3 className="alert-anchor border-bottom mb-4">
               Attribute Mapping ({t('optional')})
             </h3>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong htmlFor="attrMapUsername">{t('username')}</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"
@@ -258,8 +258,8 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
-              <div className="offset-md-3 col-md-6">
+            <div className="row my-3">
+              <div className="offset-md-3 col-md-9">
                 <div className="form-check form-check-success">
                   <input
                     type="checkbox"
@@ -282,11 +282,11 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong htmlFor="attrMapMail">{t('Email')}</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"
@@ -303,11 +303,11 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong htmlFor="attrMapName">{t('Name')}</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"
@@ -324,15 +324,15 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
 
-            <h3 className="alert-anchor border-bottom">
+            <h3 className="alert-anchor border-bottom mb-4">
               {t('security_settings.ldap.group_search_filter')} ({t('optional')})
             </h3>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong htmlFor="groupSearchBase">{t('security_settings.ldap.group_search_base_DN')}</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"
@@ -350,11 +350,11 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong htmlFor="groupSearchFilter">{t('security_settings.ldap.group_search_filter')}</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"
@@ -381,11 +381,11 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="row">
+            <div className="row my-3">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong htmlFor="groupDnProperty">{t('security_settings.ldap.group_search_user_DN_property')}</strong>
               </label>
-              <div className="col-md-6">
+              <div className="col-md-9">
                 <input
                   className="form-control"
                   type="text"

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

@@ -62,7 +62,7 @@ class LocalSecuritySettingContents extends React.Component {
           />
         )}
 
-        <div className="row mb-5">
+        <div className="row mt-4 mb-5">
           <div className="col-6 offset-3">
             <div className="form-check form-switch form-check-success">
               <input
@@ -88,10 +88,10 @@ class LocalSecuritySettingContents extends React.Component {
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
             <div className="row">
-              <div className="col-12 col-md-3 text-start text-md-end py-2">
+              <div className="col-12 col-md-4 text-start text-md-end py-2">
                 <strong>{t('security_settings.register_limitation')}</strong>
               </div>
-              <div className="col-12 col-md-6">
+              <div className="col-12 col-md-8">
                 <div className="dropdown">
                   <button
                     className="btn btn-outline-secondary dropdown-toggle"
@@ -139,10 +139,10 @@ class LocalSecuritySettingContents extends React.Component {
               </div>
             </div>
             <div className="row">
-              <div className="col-12 col-md-3 text-start text-md-end">
+              <div className="col-12 col-md-4 text-start text-md-end">
                 <strong dangerouslySetInnerHTML={{ __html: t('security_settings.The whitelist of registration permission E-mail address') }} />
               </div>
-              <div className="col-12 col-md-6">
+              <div className="col-12 col-md-8">
                 <textarea
                   className="form-control"
                   type="textarea"
@@ -163,8 +163,8 @@ class LocalSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="col-12 col-md-3 text-start text-md-end  col-form-label">{t('security_settings.Local.password_reset_by_users')}</label>
-              <div className="col-12 col-md-6">
+              <label className="col-12 col-md-4 text-start text-md-end  col-form-label">{t('security_settings.Local.password_reset_by_users')}</label>
+              <div className="col-12 col-md-8">
                 <div className="form-check form-switch form-check-success">
                   <input
                     type="checkbox"
@@ -178,7 +178,7 @@ class LocalSecuritySettingContents extends React.Component {
                   </label>
                 </div>
                 {!isMailerSetup && (
-                  <div className="alert alert-warning p-1 my-1 small d-inline-block">
+                  <div className="alert alert-warning p-2 my-1 small d-inline-block">
                     <span>{t('commons:alert.password_reset_please_enable_mailer')}</span>
                     <Link href="/admin/app#mail-settings">
                       <span className="material-symbols-outlined">link</span> {t('app_setting.mail_settings')}
@@ -192,8 +192,8 @@ class LocalSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="col-12 col-md-3 text-start text-md-end  col-form-label">{t('security_settings.Local.email_authentication')}</label>
-              <div className="col-12 col-md-6">
+              <label className="col-12 col-md-4 text-start text-md-end  col-form-label">{t('security_settings.Local.email_authentication')}</label>
+              <div className="col-12 col-md-8">
                 <div className="form-check form-switch form-check-success">
                   <input
                     type="checkbox"
@@ -207,7 +207,7 @@ class LocalSecuritySettingContents extends React.Component {
                   </label>
                 </div>
                 {!isMailerSetup && (
-                  <div className="alert alert-warning p-1 my-1 small d-inline-block">
+                  <div className="alert alert-warning p-2 my-1 small d-inline-block">
                     <span>{t('commons:alert.please_enable_mailer')}</span>
                     <Link href="/admin/app#mail-settings">
                       <span className="material-symbols-outlined">link</span> {t('app_setting.mail_settings')}

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

@@ -48,7 +48,7 @@ class OidcSecurityManagementContents extends React.Component {
           {t('security_settings.OAuth.OIDC.name')}
         </h2>
 
-        <div className="row mb-5">
+        <div className="row  my-4">
           <div className="offset-3 col-6">
             <div className="form-check form-switch form-check-success">
               <input
@@ -63,7 +63,7 @@ class OidcSecurityManagementContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('oidc') && isOidcEnabled)
-              && <div className="badge bg-warning text-dark">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge text-bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
@@ -92,9 +92,9 @@ class OidcSecurityManagementContents extends React.Component {
         {isOidcEnabled && (
           <>
 
-            <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
+            <h3 className="border-bottom mb-4">{t('security_settings.configuration')}</h3>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcProviderName" className="text-start text-md-end col-md-3 col-form-label">{t('security_settings.providerName')}</label>
               <div className="col-md-6">
                 <input
@@ -107,7 +107,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcIssuerHost" className="text-start text-md-end col-md-3 col-form-label">{t('security_settings.issuerHost')}</label>
               <div className="col-md-6">
                 <input
@@ -123,7 +123,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcClientId" className="text-start text-md-end col-md-3 col-form-label">{t('security_settings.clientID')}</label>
               <div className="col-md-6">
                 <input
@@ -139,7 +139,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcClientSecret" className="text-start text-md-end col-md-3 col-form-label">{t('security_settings.client_secret')}</label>
               <div className="col-md-6">
                 <input
@@ -155,7 +155,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcAuthorizationEndpoint" className="text-start text-md-end col-md-3 col-form-label">
                 {t('security_settings.authorization_endpoint')}
               </label>
@@ -173,7 +173,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcTokenEndpoint" className="text-start text-md-end col-md-3 col-form-label">{t('security_settings.token_endpoint')}</label>
               <div className="col-md-6">
                 <input
@@ -189,7 +189,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcRevocationEndpoint" className="text-start text-md-end col-md-3 col-form-label">
                 {t('security_settings.revocation_endpoint')}
               </label>
@@ -207,7 +207,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcIntrospectionEndpoint" className="text-start text-md-end col-md-3 col-form-label">
                 {t('security_settings.introspection_endpoint')}
               </label>
@@ -225,7 +225,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcUserInfoEndpoint" className="text-start text-md-end col-md-3 col-form-label">
                 {t('security_settings.userinfo_endpoint')}
               </label>
@@ -243,7 +243,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcEndSessionEndpoint" className="text-start text-md-end col-md-3 col-form-label">
                 {t('security_settings.end_session_endpoint')}
               </label>
@@ -261,7 +261,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcRegistrationEndpoint" className="text-start text-md-end col-md-3 col-form-label">
                 {t('security_settings.registration_endpoint')}
               </label>
@@ -279,7 +279,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcJWKSUri" className="text-start text-md-end col-md-3 col-form-label">{t('security_settings.jwks_uri')}</label>
               <div className="col-md-6">
                 <input
@@ -295,11 +295,11 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <h3 className="alert-anchor border-bottom">
+            <h3 className="alert-anchor border-bottom mb-4">
               Attribute Mapping ({t('optional')})
             </h3>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcAttrMapId" className="text-start text-md-end col-md-3 col-form-label">Identifier</label>
               <div className="col-md-6">
                 <input
@@ -315,7 +315,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcAttrMapUserName" className="text-start text-md-end col-md-3 col-form-label">{t('username')}</label>
               <div className="col-md-6">
                 <input
@@ -331,7 +331,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcAttrMapName" className="text-start text-md-end col-md-3 col-form-label">{t('Name')}</label>
               <div className="col-md-6">
                 <input
@@ -347,7 +347,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label htmlFor="oidcAttrMapEmail" className="text-start text-md-end col-md-3 col-form-label">{t('Email')}</label>
               <div className="col-md-6">
                 <input
@@ -363,7 +363,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <label className="form-label text-start text-md-end col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
               <div className="col-md-6">
                 <input
@@ -385,7 +385,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <div className="offset-md-3 col-md-6">
                 <div className="form-check form-check-success">
                   <input
@@ -407,7 +407,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
+            <div className="row mb-4">
               <div className="offset-md-3 col-md-6">
                 <div className="form-check form-check-success">
                   <input
@@ -452,11 +452,13 @@ class OidcSecurityManagementContents extends React.Component {
             <span className="material-symbols-outlined" 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">
-            <li>{t('security_settings.OAuth.OIDC.register_1')}</li>
-            <li>{t('security_settings.OAuth.OIDC.register_2')}</li>
-            <li>{t('security_settings.OAuth.OIDC.register_3')}</li>
-          </ol>
+          <div className=" card custom-card bg-body-tertiary">
+            <ol id="collapseHelpForOidcOauth" className="collapse mb-0">
+              <li>{t('security_settings.OAuth.OIDC.register_1')}</li>
+              <li>{t('security_settings.OAuth.OIDC.register_2')}</li>
+              <li>{t('security_settings.OAuth.OIDC.register_3')}</li>
+            </ol>
+          </div>
         </div>
 
       </>

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

@@ -64,7 +64,7 @@ class SamlSecurityManagementContents extends React.Component {
           />
         )}
 
-        <div className="row mt-3 mb-5">
+        <div className="row mt-4 mb-5">
           <div className="col-6 offset-3">
             <div className="form-check form-switch form-check-success">
               <input
@@ -80,7 +80,7 @@ class SamlSecurityManagementContents extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('saml') && isSamlEnabled)
-              && <div className="badge rounded-pill text-bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
+              && <div className="badge text-bg-warning">{t('security_settings.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 

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

@@ -252,7 +252,7 @@ class SecuritySetting extends React.Component {
     return (
       <div key={`page-delete-permission-dropdown-${deletionType}`} className="row">
 
-        <div className="col-md-3 text-md-end">
+        <div className="col-md-4 text-md-end">
           {!isRecursiveDeletion(deletionType) && isTypeDeletion(deletionType) && (
             <strong>{t('security_settings.page_delete')}</strong>
           )}
@@ -261,7 +261,7 @@ class SecuritySetting extends React.Component {
           )}
         </div>
 
-        <div className="col-md-6">
+        <div className="col-md-8">
           {
             !isRecursiveDeletion(deletionType)
               ? (
@@ -292,7 +292,7 @@ class SecuritySetting extends React.Component {
                 <>
                   <button
                     type="button"
-                    className="btn btn-link p-0 mb-2"
+                    className="btn btn-link p-0 mb-4"
                     aria-expanded="false"
                     onClick={() => this.setExpantOtherDeleteOptionsState(deletionType, !expantDeleteOptionsState)}
                   >
@@ -414,10 +414,10 @@ class SecuritySetting extends React.Component {
 
         <h4 className="mb-3">{t('security_settings.page_access_rights')}</h4>
         <div className="row mb-4">
-          <div className="col-md-3 text-md-end py-2">
+          <div className="col-md-4 text-md-end py-2">
             <strong>{t('security_settings.Guest Users Access')}</strong>
           </div>
-          <div className="col-md-9">
+          <div className="col-md-8">
             <div className="dropdown">
               <button
                 className={`btn btn-outline-secondary dropdown-toggle text-end col-12
@@ -476,7 +476,7 @@ class SecuritySetting extends React.Component {
 
         <h4 className="mb-3">{t('security_settings.user_homepage_deletion.user_homepage_deletion')}</h4>
         <div className="row mb-4">
-          <div className="col-6 offset-3">
+          <div className="col-md-10 offset-md-2">
             <div className="form-check form-switch form-check-success">
               <input
                 type="checkbox"
@@ -512,9 +512,9 @@ class SecuritySetting extends React.Component {
         <h4>{t('security_settings.session')}</h4>
         <div className="row">
           <label className="text-start text-md-end col-md-3 col-form-label">{t('security_settings.max_age')}</label>
-          <div className="col-md-6">
+          <div className="col-md-8">
             <input
-              className="form-control col-md-3"
+              className="form-control col-md-4"
               type="text"
               defaultValue={adminGeneralSecurityContainer.state.sessionMaxAge || ''}
               onChange={(e) => {

apps/app/src/components/Admin/Security/ShareLinkSetting.tsx

@@ -104,7 +104,7 @@ const ShareLinkSetting = (props: ShareLinkSettingProps) => {
     <>
       <h2 className="alert-anchor border-bottom mb-4">{t('security_settings.share_link_management')}</h2>
       <h4>{t('security_settings.share_link_rights')}</h4>
-      <div className="row mb-5">
+      <div className="row mt-4 mb-5">
         <div className="col-6 offset-3">
           <div className="form-check form-switch form-check-success">
             <input

apps/app/src/components/Common/PagePathNav/PagePathNav.tsx

@@ -98,7 +98,7 @@ export const PagePathNav = (props: Props): JSX.Element => {
         { pageId != null && !isNotFound && (
           <div className="d-flex align-items-center ms-2">
             { isWipPage && (
-              <span className="badge rounded-pill text-bg-secondary ms-1 me-1">WIP</span>
+              <span className="badge text-bg-secondary ms-1 me-1">WIP</span>
             )}
             <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName="p-2">
               <span className="material-symbols-outlined">content_paste</span>