add form-group class

src/client/js/components/Admin/App/AppSetting.jsx

@@ -38,7 +38,7 @@ class AppSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">{t('admin:app_setting.site_name')}</label>
           <div className="col-6">
             <input
@@ -52,7 +52,7 @@ class AppSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">{t('admin:app_setting.confidential_name')}</label>
           <div className="col-6">
             <input
@@ -66,7 +66,7 @@ class AppSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">{t('admin:app_setting.default_language')}</label>
           <div className="col-6">
             <div className="radio radio-primary radio-inline">
@@ -94,18 +94,19 @@ class AppSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">{t('admin:app_setting.file_uploading')}</label>
           <div className="col-6">
-            <div className="checkbox checkbox-info">
+            <div className="custom-control custom-checkbox custom-checkbox-info">
               <input
                 type="checkbox"
                 id="cbFileUpload"
+                className="custom-control-input"
                 name="fileUpload"
                 checked={adminAppContainer.state.fileUpload}
                 onChange={(e) => { adminAppContainer.changeFileUpload(e.target.checked) }}
               />
-              <label htmlFor="cbFileUpload">{t('admin:app_setting.enable_files_except_image')}</label>
+              <label className="custom-control-label" htmlFor="cbFileUpload">{t('admin:app_setting.enable_files_except_image')}</label>
             </div>
 
             <p className="form-text text-muted">

src/client/js/components/Admin/App/AwsSetting.jsx

@@ -50,7 +50,7 @@ class AwsSetting extends React.Component {
           </span>
         </p>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">
             {t('admin:app_setting.region')}
           </label>
@@ -66,7 +66,7 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">
             {t('admin:app_setting.custom_endpoint')}
           </label>
@@ -84,7 +84,7 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">
             {t('admin:app_setting.bucket_name')}
           </label>
@@ -101,7 +101,7 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">
             Access Key ID
           </label>
@@ -117,7 +117,7 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">
             Secret Access Key
           </label>

src/client/js/components/Admin/App/MailSetting.jsx

@@ -39,7 +39,7 @@ class MailSetting extends React.Component {
     return (
       <React.Fragment>
         <p className="card well">{t('admin:app_setting.smtp_used')} {t('admin:app_setting.smtp_but_aws')}<br />{t('admin:app_setting.neihter_of')}</p>
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">{t('admin:app_setting.from_e-mail_address')}</label>
           <div className="col-6">
             <input
@@ -52,7 +52,7 @@ class MailSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <label className="col-3 col-form-label">{t('admin:app_setting.smtp_settings')}</label>
           <div className="col-4">
             <label>{t('admin:app_setting.host')}</label>

src/client/js/components/Admin/App/PluginSetting.jsx

@@ -41,7 +41,7 @@ class PluginSetting extends React.Component {
       <React.Fragment>
         <p className="card well">{t('admin:app_setting.enable_plugin_loading')}</p>
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <div className="offset-3 col-6 text-left">
             <div className="checkbox checkbox-success">
               <input

src/client/js/components/Admin/App/SiteUrlSetting.jsx

@@ -42,47 +42,45 @@ class SiteUrlSetting extends React.Component {
         {!adminAppContainer.state.isSetSiteUrl
           && (<p className="alert alert-danger"><i className="icon-exclamation"></i> {t('admin:app_setting.site_url_warn')}</p>)}
 
-        <div className="row">
-          <div className="col-lg-12">
-            <div className="offset-3">
-              <table className="table settings-table">
-                <colgroup>
-                  <col className="from-db" />
-                  <col className="from-env-vars" />
-                </colgroup>
-                <thead>
-                  <tr>
-                    <th>Database</th>
-                    <th>Environment variables</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>
-                      <input
-                        className="form-control"
-                        type="text"
-                        name="settingForm[app:siteUrl]"
-                        defaultValue={adminAppContainer.state.siteUrl || ''}
-                        onChange={(e) => { adminAppContainer.changeSiteUrl(e.target.value) }}
-                        placeholder="e.g. https://my.growi.org"
-                      />
-                      <p className="form-text text-muted">
-                        {/* eslint-disable-next-line react/no-danger */}
-                        <span dangerouslySetInnerHTML={{ __html: t('admin:app_setting.siteurl_help') }} />
-                      </p>
-                    </td>
-                    <td>
-                      <input className="form-control" type="text" value={adminAppContainer.state.envSiteUrl || ''} readOnly />
-                      <p className="form-text text-muted">
-                        {/* eslint-disable-next-line react/no-danger */}
-                        <span dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'APP_SITE_URL' }) }} />
-                      </p>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+        <div className="row form-group">
+          <div className="offset-3">
+            <table className="table settings-table">
+              <colgroup>
+                <col className="from-db" />
+                <col className="from-env-vars" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th>Database</th>
+                  <th>Environment variables</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <input
+                      className="form-control"
+                      type="text"
+                      name="settingForm[app:siteUrl]"
+                      defaultValue={adminAppContainer.state.siteUrl || ''}
+                      onChange={(e) => { adminAppContainer.changeSiteUrl(e.target.value) }}
+                      placeholder="e.g. https://my.growi.org"
+                    />
+                    <p className="form-text text-muted">
+                      {/* eslint-disable-next-line react/no-danger */}
+                      <span dangerouslySetInnerHTML={{ __html: t('admin:app_setting.siteurl_help') }} />
+                    </p>
+                  </td>
+                  <td>
+                    <input className="form-control" type="text" value={adminAppContainer.state.envSiteUrl || ''} readOnly />
+                    <p className="form-text text-muted">
+                      {/* eslint-disable-next-line react/no-danger */}
+                      <span dangerouslySetInnerHTML={{ __html: t('admin:app_setting.use_env_var_if_empty', { variable: 'APP_SITE_URL' }) }} />
+                    </p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>