128828 chenge custom-switch to form-switch

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -72,7 +72,7 @@ const QuestionnaireSettings = (): JSX.Element => {
       {!isLoading && (
         <>
           <div className="row my-3">
-            <div className="form-check custom-switch form-check-info col-md-5 offset-md-5">
+            <div className="form-check form-switch form-check-info col-md-5 offset-md-5">
               <input
                 type="checkbox"
                 className="form-check-input"

apps/app/src/components/Admin/MarkdownSetting/XssForm.jsx

@@ -120,7 +120,7 @@ class XssForm extends React.Component {
         <fieldset className="col-12">
           <div className="form-group">
             <div className="col-8 offset-4 my-3">
-              <div className="form-check custom-switch form-check-success">
+              <div className="form-check form-switch form-check-success">
                 <input
                   type="checkbox"
                   className="form-check-input"

apps/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -80,7 +80,7 @@ class GlobalNotificationList extends React.Component {
           return (
             <tr key={notification._id}>
               <td className="align-middle td-abs-center">
-                <div className="form-check custom-switch form-check-success">
+                <div className="form-check form-switch form-check-success">
                   <input
                     type="checkbox"
                     className="form-check-input"

apps/app/src/components/Admin/Security/GitHubSecuritySettingContents.jsx

@@ -58,7 +58,7 @@ class GitHubSecurityManagementContents extends React.Component {
 
         <div className="form-group row">
           <div className="col-6 offset-3">
-            <div className="form-check custom-switch form-check-success">
+            <div className="form-check form-switch form-check-success">
               <input
                 id="isGitHubEnabled"
                 className="form-check-input"

apps/app/src/components/Admin/Security/GoogleSecuritySettingContents.jsx

@@ -56,7 +56,7 @@ class GoogleSecurityManagementContents extends React.Component {
 
         <div className="form-group row">
           <div className="col-6 offset-3">
-            <div className="form-check custom-switch form-check-success">
+            <div className="form-check form-switch form-check-success">
               <input
                 id="isGoogleEnabled"
                 className="form-check-input"

apps/app/src/components/Admin/Security/LdapSecuritySettingContents.jsx

@@ -60,7 +60,7 @@ class LdapSecuritySettingContents extends React.Component {
 
         <div className="form-group row">
           <div className="col-6 offset-3">
-            <div className="form-check custom-switch form-check-success">
+            <div className="form-check form-switch form-check-success">
               <input
                 id="isLdapEnabled"
                 className="form-check-input"

apps/app/src/components/Admin/Security/LocalSecuritySettingContents.jsx

@@ -64,7 +64,7 @@ class LocalSecuritySettingContents extends React.Component {
 
         <div className="row mb-5">
           <div className="col-6 offset-3">
-            <div className="form-check custom-switch form-check-success">
+            <div className="form-check form-switch form-check-success">
               <input
                 type="checkbox"
                 className="form-check-input"
@@ -165,7 +165,7 @@ class LocalSecuritySettingContents extends React.Component {
             <div className="row">
               <label className="col-12 col-md-3 text-left text-md-right  col-form-label">{t('security_settings.Local.password_reset_by_users')}</label>
               <div className="col-12 col-md-6">
-                <div className="form-check custom-switch form-check-success">
+                <div className="form-check form-switch form-check-success">
                   <input
                     type="checkbox"
                     className="form-check-input"
@@ -194,7 +194,7 @@ class LocalSecuritySettingContents extends React.Component {
             <div className="row">
               <label className="col-12 col-md-3 text-left text-md-right  col-form-label">{t('security_settings.Local.email_authentication')}</label>
               <div className="col-12 col-md-6">
-                <div className="form-check custom-switch form-check-success">
+                <div className="form-check form-switch form-check-success">
                   <input
                     type="checkbox"
                     className="form-check-input"

apps/app/src/components/Admin/Security/OidcSecuritySettingContents.jsx

@@ -50,7 +50,7 @@ class OidcSecurityManagementContents extends React.Component {
 
         <div className="row mb-5 form-group">
           <div className="offset-3 col-6">
-            <div className="form-check custom-switch form-check-success">
+            <div className="form-check form-switch form-check-success">
               <input
                 id="isOidcEnabled"
                 className="form-check-input"

apps/app/src/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -66,7 +66,7 @@ class SamlSecurityManagementContents extends React.Component {
 
         <div className="row form-group mb-5">
           <div className="col-6 offset-3">
-            <div className="form-check custom-switch form-check-success">
+            <div className="form-check form-switch form-check-success">
               <input
                 id="isSamlEnabled"
                 className="form-check-input"

apps/app/src/components/Admin/Security/SecuritySetting.jsx

@@ -356,7 +356,7 @@ class SecuritySetting extends React.Component {
               <tr>
                 <th scope="row">{ t('only_me') }</th>
                 <td>
-                  <div className="form-check custom-switch form-check-success">
+                  <div className="form-check form-switch form-check-success">
                     <input
                       type="checkbox"
                       className="form-check-input"
@@ -373,7 +373,7 @@ class SecuritySetting extends React.Component {
               <tr>
                 <th scope="row">{ t('only_inside_the_group') }</th>
                 <td>
-                  <div className="form-check custom-switch form-check-success">
+                  <div className="form-check form-switch form-check-success">
                     <input
                       type="checkbox"
                       className="form-check-input"
@@ -456,7 +456,7 @@ class SecuritySetting extends React.Component {
         <h4>{t('security_settings.user_homepage_deletion.user_homepage_deletion')}</h4>
         <div className="row mb-4">
           <div className="col-6 offset-3">
-            <div className="form-check custom-switch form-check-success">
+            <div className="form-check form-switch form-check-success">
               <input
                 type="checkbox"
                 className="form-check-input"

apps/app/src/components/Admin/Security/ShareLinkSetting.tsx

@@ -116,7 +116,7 @@ const ShareLinkSetting = (props: ShareLinkSettingProps) => {
       <h4>{t('security_settings.share_link_rights')}</h4>
       <div className="row mb-5">
         <div className="col-6 offset-3">
-          <div className="form-check custom-switch form-check-success">
+          <div className="form-check form-switch form-check-success">
             <input
               type="checkbox"
               className="form-check-input"

apps/app/src/components/Admin/SlackIntegration/SlackAppIntegrationControl.tsx

@@ -19,7 +19,7 @@ export const SlackAppIntegrationControl: FC<Props> = (props: Props) => {
 
   return (
     <div className="d-flex align-items-center">
-      <div className="my-1 form-check custom-switch">
+      <div className="my-1 form-check form-switch">
         <input
           className="form-check-input"
           id={inputId}

apps/app/src/components/Common/ImageCropModal.tsx

@@ -162,7 +162,7 @@ const ImageCropModal: FC<Props> = (props: Props) => {
         </button>
         { !showCropOption && (
           <div className="mr-auto">
-            <div className="form-check custom-switch ">
+            <div className="form-check form-switch ">
               <input
                 id="cropImageOption"
                 className="form-check-input mr-auto"

apps/app/src/components/Me/InAppNotificationSettings.tsx

@@ -74,7 +74,7 @@ const InAppNotificationSettings: FC = () => {
           {subscribeRulesMenuItems.map(rule => (
             <div
               key={rule.name}
-              className="form-check custom-switch form-check-success"
+              className="form-check form-switch form-check-success"
             >
               <input
                 type="checkbox"

apps/app/src/components/Me/OtherSettings.tsx

@@ -53,7 +53,7 @@ const OtherSettings = (): JSX.Element => {
       <div className="form-group row">
         <div className="offset-md-3 col-md-6 text-left">
           {!isLoadingCurrentUser && (
-            <div className="form-check custom-switch form-check-primary">
+            <div className="form-check form-switch form-check-primary">
               <span id="grw-questionnaire-settings-toggle-wrapper">
                 <input
                   type="checkbox"

apps/app/src/components/Navbar/SubNavButtons.tsx

@@ -45,7 +45,7 @@ const WideViewMenuItem = (props: WideViewMenuItemProps): JSX.Element => {
       onClick={() => onClickMenuItem(!(expandContentWidth))}
       className="grw-page-control-dropdown-item"
     >
-      <div className="form-check custom-switch ml-1">
+      <div className="form-check form-switch ml-1">
         <input
           id="switchContentWidth"
           className="form-check-input"

apps/app/src/components/Page/CopyDropdown.jsx

@@ -127,7 +127,7 @@ const CopyDropdown = (props) => {
               { t('copy_to_clipboard.Copy to clipboard') }
             </DropdownItem>
             { !isShareLinkMode && (
-              <div className="px-3 form-check custom-switch custom-switch-sm">
+              <div className="px-3 form-check form-switch form-switch-sm">
                 <input
                   type="checkbox"
                   id={customSwitchForParamsId}

apps/app/src/components/Sidebar/AppearanceModeDropdown.tsx

@@ -80,7 +80,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
               <IconWithTooltip id={isEditMode ? 'iwt-sidebar-editor-drawer' : 'iwt-sidebar-drawer'} label="Drawer" additionalClasses="grw-sidebar-mode-icon">
                 <SidebarDrawerIcon />
               </IconWithTooltip>
-              <div className="form-check custom-switch form-check-secondary ml-2">
+              <div className="form-check form-switch form-check-secondary ml-2">
                 <input
                   id={isEditMode ? 'swSidebarModeOnEditor' : 'swSidebarMode'}
                   className="form-check-input"
@@ -134,7 +134,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
                   <IconWithTooltip id="iwt-light" label="Light" additionalClasses={useOsSettings ? 'grw-color-mode-icon-muted' : 'grw-color-mode-icon'}>
                     <SunIcon />
                   </IconWithTooltip>
-                  <div className="form-check custom-switch form-check-secondary ml-2">
+                  <div className="form-check form-switch form-check-secondary ml-2">
                     <input
                       id="swUserPreference"
                       className="form-check-input"

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -133,7 +133,7 @@ export const RecentChangesHeader = ({ isSmall, onSizeChange }: HeaderProps): JSX
     <>
       <SidebarHeaderReloadButton onClick={() => mutate()} />
       <div className="d-flex align-items-center">
-        <div className={`grw-recent-changes-resize-button ${styles['grw-recent-changes-resize-button']} form-check custom-switch ml-1`}>
+        <div className={`grw-recent-changes-resize-button ${styles['grw-recent-changes-resize-button']} form-check form-switch ml-1`}>
           <input
             id="recentChangesResize"
             className="form-check-input"

apps/app/src/components/SlackNotification.tsx

@@ -40,7 +40,7 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
     <div className={`grw-slack-notification ${styles['grw-slack-notification']} w-100`}>
       <div className="grw-input-group-slack-notification input-group extended-setting">
         <label className="input-group-addon">
-          <div className="form-check custom-switch custom-switch-lg custom-switch-slack">
+          <div className="form-check form-switch form-switch-lg form-switch-slack">
             <input
               type="checkbox"
               className="form-check-input border-0"

apps/app/src/styles/atoms/_custom_control.scss

@@ -10,75 +10,75 @@
 //   font-weight: normal;
 // }
 
-// .custom-switch.custom-switch-sm {
+// .form-switch.form-switch-sm {
 //   $form-check-indicator-size-sm: $form-check-indicator-size * 0.8;
-//   $custom-switch-width-sm: $form-check-indicator-size-sm * 1.75;
+//   $form-switch-width-sm: $form-check-indicator-size-sm * 1.75;
 //   $form-check-gutter-sm: $form-check-gutter * 0.8;
 //   $form-check-indicator-size-sm: $form-check-indicator-size * 0.8;
-//   $custom-switch-indicator-size-sm: subtract($form-check-indicator-size-sm, $form-check-indicator-border-width * 4);
+//   $form-switch-indicator-size-sm: subtract($form-check-indicator-size-sm, $form-check-indicator-border-width * 4);
 
-//   padding-left: $custom-switch-width-sm + $form-check-gutter-sm;
+//   padding-left: $form-switch-width-sm + $form-check-gutter-sm;
 
 //   .form-check-label {
 //     &::before {
-//       left: -($custom-switch-width-sm + $form-check-gutter-sm);
-//       width: $custom-switch-width-sm;
+//       left: -($form-switch-width-sm + $form-check-gutter-sm);
+//       width: $form-switch-width-sm;
 //       height: $form-check-indicator-size-sm;
 //     }
 
 //     &::after {
 //       top: add(($font-size-base * $line-height-base - $form-check-indicator-size) / 2, $form-check-indicator-border-width * 2);
-//       left: add(-($custom-switch-width-sm + $form-check-gutter-sm), $form-check-indicator-border-width * 2);
-//       width: $custom-switch-indicator-size-sm;
-//       height: $custom-switch-indicator-size-sm;
+//       left: add(-($form-switch-width-sm + $form-check-gutter-sm), $form-check-indicator-border-width * 2);
+//       width: $form-switch-indicator-size-sm;
+//       height: $form-switch-indicator-size-sm;
 //     }
 //   }
 
 //   .form-check-input:checked ~ .form-check-label {
 //     &::after {
-//       transform: translateX($custom-switch-width-sm - $form-check-indicator-size-sm);
+//       transform: translateX($form-switch-width-sm - $form-check-indicator-size-sm);
 //     }
 //   }
 // }
 
 // //lg
-// .custom-switch.custom-switch-lg {
+// .form-switch.form-switch-lg {
 //   $form-check-indicator-size-lg: $form-check-indicator-size * 1.5;
-//   $custom-switch-width-lg: $form-check-indicator-size-lg * 1.75;
+//   $form-switch-width-lg: $form-check-indicator-size-lg * 1.75;
 //   $form-check-gutter-lg: $form-check-gutter * 1.5;
 //   $form-check-indicator-size-lg: $form-check-indicator-size * 1.5;
-//   $custom-switch-indicator-size-lg: subtract($form-check-indicator-size-lg, $form-check-indicator-border-width * 4);
+//   $form-switch-indicator-size-lg: subtract($form-check-indicator-size-lg, $form-check-indicator-border-width * 4);
 
-//   padding-left: $custom-switch-width-lg + $form-check-gutter-lg;
+//   padding-left: $form-switch-width-lg + $form-check-gutter-lg;
 
 //   line-height: $form-check-indicator-size-lg;
 //   .form-check-label {
 //     &::before {
 //       top: ($font-size-base * $line-height-base - $form-check-indicator-size-lg) / 2;
 
-//       left: -($custom-switch-width-lg + $form-check-gutter-lg);
-//       width: $custom-switch-width-lg;
+//       left: -($form-switch-width-lg + $form-check-gutter-lg);
+//       width: $form-switch-width-lg;
 //       height: $form-check-indicator-size-lg;
 //       border-radius: $form-check-indicator-size-lg/2;
 //     }
 
 //     &::after {
 //       top: add(($font-size-base * $line-height-base - $form-check-indicator-size-lg) / 2, $form-check-indicator-border-width * 2);
-//       left: add(-($custom-switch-width-lg + $form-check-gutter-lg), $form-check-indicator-border-width * 2);
-//       width: $custom-switch-indicator-size-lg;
-//       height: $custom-switch-indicator-size-lg;
+//       left: add(-($form-switch-width-lg + $form-check-gutter-lg), $form-check-indicator-border-width * 2);
+//       width: $form-switch-indicator-size-lg;
+//       height: $form-switch-indicator-size-lg;
 //       border-radius: $form-check-indicator-size-lg/2;
 //     }
 //   }
 
 //   .form-check-input:checked ~ .form-check-label {
 //     &::after {
-//       transform: translateX($custom-switch-width-lg - $form-check-indicator-size-lg);
+//       transform: translateX($form-switch-width-lg - $form-check-indicator-size-lg);
 //     }
 //   }
 // }
 
-// .custom-switch.custom-switch-slack {
+// .form-switch.form-switch-slack {
 //   .form-check-label {
 //     &::before {
 //       background-color: $gray-200;