add margin

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

@@ -112,86 +112,70 @@ class MailSetting extends React.Component {
             <button type="button" className="btn btn-primary" onClick={this.submitFromAdressHandler}>{ t('Update') }</button>
           </div>
         </div>
-        <ul className="nav nav-tabs passport-settings mb-2" role="tablist">
-          <li className="nav-item active">
-            <a href="#mail-smtp" className="nav-link active" data-toggle="tab" role="tab">
-              SMTP
-            </a>
-          </li>
-          <li className="nav-item">
-            <a href="#mail-ses" className="nav-link" data-toggle="tab" role="tab">
-              SES(AWS)
-            </a>
-          </li>
-        </ul>
-        <div className="tab-content">
-          <div id="mail-smtp" className="tab-pane active">
-            <div className="alert alert-warning">AWSの設定が有効のため、SMTPでの送信は行われません</div>
-            <div className="row form-group mb-5">
-              <label className="col-md-3 col-form-label text-left">{t('admin:app_setting.smtp_settings')}</label>
-              <div className="col-md-4">
-                <label>{t('admin:app_setting.host')}</label>
-                <input
-                  className="form-control"
-                  type="text"
-                  ref={this.hostInput}
-                  defaultValue={adminAppContainer.state.smtpHost || ''}
-                  onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
-                />
-              </div>
-              <div className="col-md-2">
-                <label>{t('admin:app_setting.port')}</label>
-                <input
-                  className="form-control"
-                  ref={this.portInput}
-                  defaultValue={adminAppContainer.state.smtpPort || ''}
-                  onChange={(e) => { adminAppContainer.changeSmtpPort(e.target.value) }}
-                />
-              </div>
+        <div id="mail-smtp" className="tab-pane active mt-5">
+          <div className="row form-group mb-5">
+            <label className="col-md-3 col-form-label text-left">{t('admin:app_setting.smtp_settings')}</label>
+            <div className="col-md-4">
+              <label>{t('admin:app_setting.host')}</label>
+              <input
+                className="form-control"
+                type="text"
+                ref={this.hostInput}
+                defaultValue={adminAppContainer.state.smtpHost || ''}
+                onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
+              />
             </div>
+            <div className="col-md-2">
+              <label>{t('admin:app_setting.port')}</label>
+              <input
+                className="form-control"
+                ref={this.portInput}
+                defaultValue={adminAppContainer.state.smtpPort || ''}
+                onChange={(e) => { adminAppContainer.changeSmtpPort(e.target.value) }}
+              />
+            </div>
+          </div>
 
-            <div className="row form-group mb-5">
-              <div className="col-md-3 offset-md-3">
-                <label>{t('admin:app_setting.user')}</label>
-                <input
-                  className="form-control"
-                  type="text"
-                  ref={this.userInput}
-                  defaultValue={adminAppContainer.state.smtpUser || ''}
-                  onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
-                />
-              </div>
-              <div className="col-md-3">
-                <label>{t('Password')}</label>
-                <input
-                  className="form-control"
-                  type="password"
-                  ref={this.passwordInput}
-                  defaultValue={adminAppContainer.state.smtpPassword || ''}
-                  onChange={(e) => { adminAppContainer.changeSmtpPassword(e.target.value) }}
-                />
-              </div>
+          <div className="row form-group mb-5">
+            <div className="col-md-3 offset-md-3">
+              <label>{t('admin:app_setting.user')}</label>
+              <input
+                className="form-control"
+                type="text"
+                ref={this.userInput}
+                defaultValue={adminAppContainer.state.smtpUser || ''}
+                onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
+              />
             </div>
+            <div className="col-md-3">
+              <label>{t('Password')}</label>
+              <input
+                className="form-control"
+                type="password"
+                ref={this.passwordInput}
+                defaultValue={adminAppContainer.state.smtpPassword || ''}
+                onChange={(e) => { adminAppContainer.changeSmtpPassword(e.target.value) }}
+              />
+            </div>
+          </div>
 
-            <div className="row my-3">
-              <div className="offset-5">
-                <button type="button" className="btn btn-primary" onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null}>
-                  { t('Update') }
-                </button>
-              </div>
-              <div className="offset-1">
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  onClick={this.openInitializeValueModal}
-                  disabled={adminAppContainer.state.retrieveError != null}
-                >
-                  {t('admin:app_setting.initialize_mail_settings')}
-                </button>
-              </div>
+          <div className="row my-3">
+            <div className="offset-5">
+              <button type="button" className="btn btn-primary" onClick={this.submitHandler} disabled={adminAppContainer.state.retrieveError != null}>
+                { t('Update') }
+              </button>
+            </div>
+            <div className="offset-1">
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={this.openInitializeValueModal}
+                disabled={adminAppContainer.state.retrieveError != null}
+              >
+                {t('admin:app_setting.initialize_mail_settings')}
+              </button>
             </div>
           </div>
-          <div id="mail-ses" className="tab-pane" role="tabpanel">下記の AWS 設定から設定お願いします。</div>
         </div>