apply bst4 custom-radio and adjust layout markdown

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

@@ -46,56 +46,63 @@ class PresentationForm extends React.Component {
           </p>
 
           <div className="form-group form-check-inline col-xs-12 my-3">
-            <div className="col-xs-3 radio radio-primary mt-3">
-              <input
-                type="radio"
-                id="pageBreakOption1"
-                checked={pageBreakSeparator === 1}
-                onChange={() => markDownSettingContainer.switchPageBreakSeparator(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 className="col-xs-4 align-self-start">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  id="pageBreakOption1"
+                  checked={pageBreakSeparator === 1}
+                  onChange={() => markDownSettingContainer.switchPageBreakSeparator(1)}
+                />
+                <label className="custom-control-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>
-
-            <div className="col-xs-3 radio radio-primary mt-3">
-              <input
-                type="radio"
-                id="pageBreakOption2"
-                checked={pageBreakSeparator === 2}
-                onChange={() => markDownSettingContainer.switchPageBreakSeparator(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 className="col-xs-4 align-self-start">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  id="pageBreakOption2"
+                  checked={pageBreakSeparator === 2}
+                  onChange={() => markDownSettingContainer.switchPageBreakSeparator(2)}
+                />
+                <label className="custom-control-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>
-
-            <div className="col-xs-3 radio radio-primary mt-3">
-              <input
-                type="radio"
-                id="pageBreakOption3"
-                checked={pageBreakSeparator === 3}
-                onChange={() => markDownSettingContainer.switchPageBreakSeparator(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={pageBreakCustomSeparator}
-                    onChange={(e) => { markDownSettingContainer.setPageBreakCustomSeparator(e.target.value) }}
-                  />
-                </div>
-              </label>
+            <div className="col-xs-4 align-self-start">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  id="pageBreakOption3"
+                  className="custom-control-input"
+                  checked={pageBreakSeparator === 3}
+                  onChange={() => markDownSettingContainer.switchPageBreakSeparator(3)}
+                />
+                <label className="custom-control-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={pageBreakCustomSeparator}
+                      onChange={(e) => { markDownSettingContainer.setPageBreakCustomSeparator(e.target.value) }}
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
           </div>
         </fieldset>

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

@@ -40,48 +40,57 @@ class XssForm extends React.Component {
 
     return (
       <div className="form-group form-check-inline col-xs-12 my-3">
-        <div className="col-xs-4 align-self-start radio radio-primary">
-          <input
-            type="radio"
-            id="xssOption1"
-            name="XssOption"
-            checked={xssOption === 1}
-            onChange={() => { markDownSettingContainer.setState({ xssOption: 1 }) }}
-          />
-          <label htmlFor="xssOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Ignore all tags') }</p>
-            <div className="mt-4">
-              { t('markdown_setting.Ignore all tags desc') }
-            </div>
-          </label>
+        <div className="col-xs-4 align-self-start">
+          <div className="custom-control custom-radio ">
+            <input
+              type="radio"
+              className="custom-control-input"
+              id="xssOption1"
+              name="XssOption"
+              checked={xssOption === 1}
+              onChange={() => { markDownSettingContainer.setState({ xssOption: 1 }) }}
+            />
+            <label className="custom-control-label" htmlFor="xssOption1">
+              <p className="font-weight-bold">{ t('markdown_setting.Ignore all tags') }</p>
+              <div className="mt-4">
+                { t('markdown_setting.Ignore all tags desc') }
+              </div>
+            </label>
+          </div>
         </div>
 
-        <div className="col-xs-4 align-self-start radio radio-primary">
-          <input
-            type="radio"
-            id="xssOption2"
-            name="XssOption"
-            checked={xssOption === 2}
-            onChange={() => { markDownSettingContainer.setState({ xssOption: 2 }) }}
-          />
-          <label htmlFor="xssOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Recommended setting') }</p>
-            <WhiteListInput customizable={false} />
-          </label>
+        <div className="col-xs-4 align-self-start">
+          <div className="custom-control custom-radio">
+            <input
+              type="radio"
+              className="custom-control-input"
+              id="xssOption2"
+              name="XssOption"
+              checked={xssOption === 2}
+              onChange={() => { markDownSettingContainer.setState({ xssOption: 2 }) }}
+            />
+            <label className="custom-control-label" htmlFor="xssOption2">
+              <p className="font-weight-bold">{ t('markdown_setting.Recommended setting') }</p>
+              <WhiteListInput customizable={false} />
+            </label>
+          </div>
         </div>
 
-        <div className="col-xs-4 align-self-start radio radio-primary">
-          <input
-            type="radio"
-            id="xssOption3"
-            name="XssOption"
-            checked={xssOption === 3}
-            onChange={() => { markDownSettingContainer.setState({ xssOption: 3 }) }}
-          />
-          <label htmlFor="xssOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom Whitelist') }</p>
-            <WhiteListInput customizable />
-          </label>
+        <div className="col-xs-4 align-self-start">
+          <div className="custom-control custom-radio">
+            <input
+              type="radio"
+              className="custom-control-input"
+              id="xssOption3"
+              name="XssOption"
+              checked={xssOption === 3}
+              onChange={() => { markDownSettingContainer.setState({ xssOption: 3 }) }}
+            />
+            <label className="custom-control-label" htmlFor="xssOption3">
+              <p className="font-weight-bold">{ t('markdown_setting.Custom Whitelist') }</p>
+              <WhiteListInput customizable />
+            </label>
+          </div>
         </div>
       </div>
     );