change checkbox to switch

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

@@ -45,14 +45,15 @@ class LineBreakForm extends React.Component {
     return (
       <div className="form-group my-3">
         <div className="col-xs-offset-4 col-xs-6 text-left">
-          <div className="checkbox checkbox-success">
+          <div className="custom-control custom-switch checkbox-success">
             <input
               type="checkbox"
+              className="custom-control-input"
               id="isEnabledLinebreaks"
               checked={isEnabledLinebreaks}
               onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
             />
-            <label htmlFor="isEnabledLinebreaks">
+            <label className="custom-control-label" htmlFor="isEnabledLinebreaks">
               { t('markdown_setting.Enable Line Break') }
             </label>
           </div>
@@ -71,14 +72,15 @@ class LineBreakForm extends React.Component {
     return (
       <div className="form-group my-3">
         <div className="col-xs-offset-4 col-xs-6 text-left">
-          <div className="checkbox checkbox-success">
+          <div className="custom-control custom-switch checkbox-success">
             <input
               type="checkbox"
+              className="custom-control-input"
               id="isEnabledLinebreaksInComments"
               checked={isEnabledLinebreaksInComments}
               onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
             />
-            <label htmlFor="isEnabledLinebreaksInComments">
+            <label className="custom-control-label" htmlFor="isEnabledLinebreaksInComments">
               { t('markdown_setting.Enable Line Break for comment') }
             </label>
           </div>

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

@@ -95,15 +95,16 @@ class XssForm extends React.Component {
       <React.Fragment>
         <fieldset className="form-group mx-auto my-3">
           <div className="col-xs-offset-4 col-xs-6 text-left">
-            <div className="checkbox checkbox-success">
+            <div className="custom-control custom-switch checkbox-success">
               <input
                 type="checkbox"
+                className="custom-control-input"
                 id="XssEnable"
                 name="isEnabledXss"
                 checked={isEnabledXss}
                 onChange={markDownSettingContainer.switchEnableXss}
               />
-              <label htmlFor="XssEnable">
+              <label className="custom-control-label" htmlFor="XssEnable">
                 { t('markdown_setting.Enable XSS prevention') }
               </label>
             </div>