replace only switch button without table

packages/app/src/components/Me/EditorSettings.tsx

@@ -26,62 +26,210 @@ export const EditorSettings: FC<Props> = () => {
   return (
     <>
       <h4 className="mt-4">Japanese Settings</h4>
-      <div className="offset-lg-2  col-lg-9">
-        <div className="row">
-
-          <table className="table table-bordered col-lg-8 mb-5">
-            <thead>
-              <tr>
-                <th scope="col">{ t('scope_of_page_disclosure') }</th>
-                <th scope="col">{ t('set_point') }</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">{ t('Public') }</th>
-                <td>{ t('always_displayed') }</td>
-              </tr>
-              <tr>
-                <th scope="row">{ t('Anyone with the link') }</th>
-                <td>{ t('always_hidden') }</td>
-              </tr>
-              <tr>
-                <th scope="row">{ t('Only me') }</th>
-                <td>
-                  <div className="custom-control custom-switch custom-checkbox-success">
-                    <input
-                      type="checkbox"
-                      className="custom-control-input"
-                      id="isShowRestrictedByOwner"
-                      // checked={adminGeneralSecurityContainer.state.isShowRestrictedByOwner}
-                      // onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByOwner() }}
-                    />
-                    <label className="custom-control-label" htmlFor="isShowRestrictedByOwner">
-                      {t('displayed_or_hidden')}
-                    </label>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <th scope="row">{ t('Only inside the group') }</th>
-                <td>
-                  <div className="custom-control custom-switch custom-checkbox-success">
-                    <input
-                      type="checkbox"
-                      className="custom-control-input"
-                      id="isShowRestrictedByGroup"
-                      // checked={adminGeneralSecurityContainer.state.isShowRestrictedByGroup}
-                      // onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByGroup() }}
-                    />
-                    <label className="custom-control-label" htmlFor="isShowRestrictedByGroup">
-                      {t('displayed_or_hidden')}
-                    </label>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+      {/* <div className="offset-lg-2  col-lg-9">
+        <div className="row"> */}
 
+      <div className="form-group row">
+        <div className="offset-md-3 col-md-6 text-left">
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
+
+          <div className="row my-3">
+            <div className="offset-4 col-5">
+              <button type="button" className="btn btn-primary">
+                {t('Update')}
+              </button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+
+      <h4 className="mt-4">Common Settings</h4>
+
+      <div className="form-group row">
+        <div className="offset-md-3 col-md-6 text-left">
+
+          <div className="custom-control custom-switch custom-checkbox-success">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="highlightBorder"
+              // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
+              // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
+            />
+            <label className="custom-control-label" htmlFor="highlightBorder">
+              <strong>Border</strong>
+            </label>
+          </div>
         </div>
       </div>
     </>