adjust layout and remove extra jsx file

src/client/js/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -43,8 +43,8 @@ class LineBreakForm extends React.Component {
     const helpLineBreak = { __html: t('markdown_setting.Enable Line Break desc') };
 
     return (
-      <div className="form-group my-3">
-        <div className="col-xs-offset-4 col-xs-6 text-left">
+      <div className="form-group text-left my-3">
+        <div className="col-xs-offset-4 col-xs-6">
           <div className="custom-control custom-switch checkbox-success">
             <input
               type="checkbox"
@@ -70,8 +70,8 @@ class LineBreakForm extends React.Component {
     const helpLineBreakInComment = { __html: t('markdown_setting.Enable Line Break for comment desc') };
 
     return (
-      <div className="form-group my-3">
-        <div className="col-xs-offset-4 col-xs-6 text-left">
+      <div className="form-group text-left my-3">
+        <div className="col-xs-offset-4 col-xs-6">
           <div className="custom-control custom-switch checkbox-success">
             <input
               type="checkbox"
@@ -99,7 +99,7 @@ class LineBreakForm extends React.Component {
           {this.renderLineBreakOption()}
           {this.renderLineBreakInCommentOption()}
         </fieldset>
-        <div className="form-group my-3">
+        <div className="form-group col-12 text-center my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -41,12 +41,12 @@ class PresentationForm extends React.Component {
       <React.Fragment>
         <fieldset className="form-group mx-auto my-2">
 
-          <p className="col-xs-3 control-label text-left">
+          <p className="col-12 col-xs-3 control-label font-weight-bold text-left mt-3">
             { t('markdown_setting.Page break setting') }
           </p>
 
-          <div className="form-group form-check-inline col-xs-12 my-3">
-            <div className="col-xs-4 align-self-start">
+          <div className="form-group form-check-inline mx-auto col-xs-12 my-3">
+            <div className="col-4 align-self-start">
               <div className="custom-control custom-radio">
                 <input
                   type="radio"
@@ -64,7 +64,7 @@ class PresentationForm extends React.Component {
                 </label>
               </div>
             </div>
-            <div className="col-xs-4 align-self-start">
+            <div className="col-4 align-self-start">
               <div className="custom-control custom-radio">
                 <input
                   type="radio"
@@ -82,7 +82,7 @@ class PresentationForm extends React.Component {
                 </label>
               </div>
             </div>
-            <div className="col-xs-4 align-self-start">
+            <div className="col-4 align-self-start">
               <div className="custom-control custom-radio">
                 <input
                   type="radio"
@@ -106,7 +106,7 @@ class PresentationForm extends React.Component {
             </div>
           </div>
         </fieldset>
-        <div className="form-group my-3">
+        <div className="form-group col-12 text-center my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>

src/client/js/components/Admin/MarkdownSetting/PresentationLineBreakOptions.jsx

@@ -1,86 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-
-import AppContainer from '../../../services/AppContainer';
-import MarkDownSettingContainer from '../../../services/MarkDownSettingContainer';
-
-class PresentationLineBreakOptions extends React.Component {
-
-  render() {
-    const { t, markDownSettingContainer } = this.props;
-    const { pageBreakOption, customRegularExpression } = markDownSettingContainer.state;
-
-    return (
-      <Fragment>
-        <div className="col-xs-3 radio radio-primary">
-          <input
-            type="radio"
-            id="pageBreakOption1"
-            checked={pageBreakOption === 1}
-            onChange={() => { markDownSettingContainer.setState({ pageBreakOption: 1 }) }}
-          />
-          <label htmlFor="pageBreakOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset one separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset one separator desc') }
-              <pre><code>{ t('markdown_setting.Preset one separator value') }</code></pre>
-            </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption2"
-            checked={pageBreakOption === 2}
-            onChange={() => { markDownSettingContainer.setState({ pageBreakOption: 2 }) }}
-          />
-          <label htmlFor="pageBreakOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset two separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset two separator desc') }
-              <pre><code>{ t('markdown_setting.Preset two separator value') }</code></pre>
-            </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption3"
-            checked={pageBreakOption === 3}
-            onChange={() => { markDownSettingContainer.setState({ pageBreakOption: 3 }) }}
-          />
-          <label htmlFor="pageBreakOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Custom separator desc') }
-              <input
-                className="form-control"
-                value={customRegularExpression}
-                onChange={(e) => { markDownSettingContainer.setState({ customRegularExpression: e.target.value }) }}
-              />
-            </div>
-          </label>
-        </div>
-      </Fragment>
-    );
-  }
-
-}
-
-const PresentationLineBreakOptionsWrapper = (props) => {
-  return createSubscribedElement(PresentationLineBreakOptions, props, [AppContainer, MarkDownSettingContainer]);
-};
-
-PresentationLineBreakOptions.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  markDownSettingContainer: PropTypes.instanceOf(MarkDownSettingContainer).isRequired,
-
-};
-
-export default withTranslation()(PresentationLineBreakOptionsWrapper);

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -103,7 +103,8 @@ class XssForm extends React.Component {
     return (
       <React.Fragment>
         <fieldset className="form-group mx-auto my-3">
-          <div className="col-xs-offset-4 col-xs-6 text-left">
+
+          <div className="col-xs-offset-4 col-xs-6 text-center">
             <div className="custom-control custom-switch checkbox-success">
               <input
                 type="checkbox"
@@ -118,9 +119,12 @@ class XssForm extends React.Component {
               </label>
             </div>
           </div>
-          {isEnabledXss && this.xssOptions()}
+
+          <div className="col-xs-offset-4 col-xs-6 mx-auto">
+            {isEnabledXss && this.xssOptions()}
+          </div>
         </fieldset>
-        <div className="form-group my-3">
+        <div className="form-group col-12 text-center my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>