add styles

apps/app/src/components/SlackNotification.module.scss

@@ -2,66 +2,156 @@
 
 // TODO: activate (https://redmine.weseek.co.jp/issues/128307)
 .grw-slack-notification :global {
-  // $input-height-slack: bs.$form-check-indicator-size * 1.5;
-  // border-color: bs.$gray-200;
-
-  // border-style: solid;
-  // border-width: 1px;
-  // border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
-
-  // .form-control {
-  //   height: $input-height-slack;
-  //   border: transparent;
-  //   @include bs.media-breakpoint-up(sm) {
-  //     width: 130px;
+  $input-height-slack: bs.$form-check-indicator-size * 1.5;
+
+
+  // .form-switch-slack {
+
+  //   .form-check-input {
+
   //   }
-  //   @include bs.media-breakpoint-up(md) {
-  //     width: 180px;
+
+  //   .form-check-input:not(:checked):not(:focus) {
+  //     background-color: #E4E7EA;
+  //     --bs-form-switch-bg: url('/images/icons/slack/slack-logo-off.svg');
   //   }
-  // }
-  // // height settings for slack button's responsive design
-  // // in the input and form-control element
-  // .grw-form-control-slack-notification.form-control {
-  //   height: $input-height-slack;
-  // }
-  // .grw-input-group-slack-notification {
-  //   height: $input-height-slack;
-  //   label {
-  //     display: flex;
-  //     align-items: center;
-  //     justify-content: center;
-  //     margin-bottom: 0;
+
+  //   .form-check-input:not(:checked) {
+  //     background-color: #E4E7EA;
+  //     --bs-form-switch-bg: url('/images/icons/slack/slack-logo-off.svg');
   //   }
-  // }
 
-  // .form-check-label {
-  //   &::before {
-  //     border: transparent;
+  //   .form-check-input:checked {
+  //     background-color: #E7A9E8;
+  //     --bs-form-switch-bg: url('/images/icons/slack/slack-logo-on.svg');
   //   }
-  // }
-  .form-switch-slack {
 
-    .form-check-input {
+  background-color: transparent;
+  border-color: bs.$gray-200;
+
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
+
+  .form-control {
+    height: $input-height-slack;
+    border: transparent;
+    @include bs.media-breakpoint-up(sm) {
+      width: 130px;
+    }
+    @include bs.media-breakpoint-up(md) {
+      width: 180px;
+    }
+  }
+  // height settings for slack button's responsive design
+  // in the input and form-control element
+  .grw-form-control-slack-notification.form-control {
+    height: $input-height-slack;
+  }
+  .grw-input-group-slack-notification {
+    height: $input-height-slack;
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0;
+    }
+  }
 
+  .form-check-label {
+    &::before {
+      border: transparent;
     }
+  }
+  $color-slack: #4b144c;
+
+  .form-control {
+    background: var(--bgcolor-global);
+  }
 
-    .form-check-input:not(:checked):not(:focus) {
-      background-color: #E4E7EA;
-      --bs-form-switch-bg: url('/images/icons/slack/slack-logo-off.svg');
+  .form-check-label {
+    &::before {
+      background-color: var(--secondary);
+      border-color: transparent;
     }
+    &::after {
+      background-color: darken($color-slack, 5%);
+      background-image: url('/images/icons/slack/slack-logo-dark-off.svg');
+    }
+  }
 
-    .form-check-input:not(:checked) {
-      background-color: #E4E7EA;
-      --bs-form-switch-bg: url('/images/icons/slack/slack-logo-off.svg');
+  .form-check-input:checked ~ .form-check-label {
+    &::before {
+      background-color: lighten($color-slack, 10%);
     }
+    &::after {
+      background-color: darken($color-slack, 5%);
+      background-image: url('/images/icons/slack/slack-logo-dark-on.svg');
+    }
+  }
+  .grw-slack-logo svg {
+    fill: #dd80de;
+  }
 
-    .form-check-input:checked {
-      background-color: #E7A9E8;
-      --bs-form-switch-bg: url('/images/icons/slack/slack-logo-on.svg');
+  .grw-btn-slack {
+    background-color: black;
+    &:focus,
+    &:hover {
+      background-color: black;
     }
+  }
 
+  .grw-btn-slack-triangle {
+    color: var(--secondary);
   }
+
+  // }
 }
 //　TODO デザインの使用が確定して実装、本タスクのスコープ外
 // .grw-slack-notification-xd {
 // }
+
+// .grw-slack-notification :global {
+//   background-color: transparent;
+//   $color-slack: #4b144c;
+
+//   .form-control {
+//     background: var(--bgcolor-global);
+//   }
+
+//   .form-check-label {
+//     &::before {
+//       background-color: var(--secondary);
+//       border-color: transparent;
+//     }
+//     &::after {
+//       background-color: darken($color-slack, 5%);
+//       background-image: url('/images/icons/slack/slack-logo-dark-off.svg');
+//     }
+//   }
+
+//   .form-check-input:checked ~ .form-check-label {
+//     &::before {
+//       background-color: lighten($color-slack, 10%);
+//     }
+//     &::after {
+//       background-color: darken($color-slack, 5%);
+//       background-image: url('/images/icons/slack/slack-logo-dark-on.svg');
+//     }
+//   }
+//   .grw-slack-logo svg {
+//     fill: #dd80de;
+//   }
+
+//   .grw-btn-slack {
+//     background-color: black;
+//     &:focus,
+//     &:hover {
+//       background-color: black;
+//     }
+//   }
+
+//   .grw-btn-slack-triangle {
+//     color: var(--secondary);
+//   }
+// }

apps/app/src/components/SlackNotification.tsx

@@ -41,9 +41,44 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
 
 
   return (
+    // <div className={`grw-slack-notification ${styles['grw-slack-notification']} w-100`}>
+    //   <div className="grw-input-group-slack-notification input-group extended-setting">
+    //     <label className="form-label input-group-addon m-0">
+    //       <div className="form-check form-switch form-switch-lg form-switch-slack">
+    //         <input
+    //           type="checkbox"
+    //           className="form-check-input border-0"
+    //           id={id}
+    //           checked={isSlackEnabled}
+    //           onChange={updateCheckboxHandler}
+    //         />
+    //         <label className="form-label form-check-label align-center" htmlFor={id}></label>
+    //       </div>
+    //     </label>
+    //     <Form>
+    //       <FormGroup switch>
+    //         <Input type="switch" role="switch">
+    //           <p>kohsei</p>
+    //         </Input>
+    //       </FormGroup>
+    //     </Form>
+    //     <input
+    //       className="grw-form-control-slack-notification form-control align-top ps-0 h-100"
+    //       id={idForSlackPopover}
+    //       type="text"
+    //       value={slackChannels}
+    //       placeholder="Input channels"
+    //       onChange={updateSlackChannelsHandler}
+    //     />
+    //     <UncontrolledPopover trigger="focus" placement="top" target={idForSlackPopover}>
+    //       <PopoverHeader>{t('slack_notification.popover_title')}</PopoverHeader>
+    //       <PopoverBody>{t('slack_notification.popover_desc')}</PopoverBody>
+    //     </UncontrolledPopover>
+    //   </div>
+    // </div>
     <div className={`grw-slack-notification ${styles['grw-slack-notification']} w-100`}>
       <div className="grw-input-group-slack-notification input-group extended-setting">
-        {/* <label className="form-label input-group-addon m-0">
+        <label className="input-group-addon">
           <div className="form-check form-switch form-switch-lg form-switch-slack">
             <input
               type="checkbox"
@@ -52,18 +87,11 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
               checked={isSlackEnabled}
               onChange={updateCheckboxHandler}
             />
-            <label className="form-label form-check-label align-center" htmlFor={id}></label>
+            <label className="form-check-label align-center" htmlFor={id}></label>
           </div>
-        </label> */}
-        <Form>
-          <FormGroup switch>
-            <Input type="switch" role="switch">
-              <p>kohsei</p>
-            </Input>
-          </FormGroup>
-        </Form>
+        </label>
         <input
-          className="grw-form-control-slack-notification form-control align-top ps-0 h-100"
+          className="grw-form-control-slack-notification form-control align-top pl-0"
           id={idForSlackPopover}
           type="text"
           value={slackChannels}
@@ -76,6 +104,5 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
         </UncontrolledPopover>
       </div>
     </div>
-
   );
 };

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

@@ -2,95 +2,98 @@
 
 // TODO: activate (https://redmine.weseek.co.jp/issues/128307)
 
-// .form-check .form-check-label::before {
-//   border-radius: $border-radius !important;
-// }
-
-// label.form-check-label {
-//   font-weight: normal;
-// }
-
-// .form-switch.form-switch-sm {
-//   $form-check-indicator-size-sm: $form-check-indicator-size * 0.8;
-//   $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;
-//   $form-switch-indicator-size-sm: subtract($form-check-indicator-size-sm, $form-check-indicator-border-width * 4);
-
-//   padding-left: $form-switch-width-sm + $form-check-gutter-sm;
-
-//   .form-check-label {
-//     &::before {
-//       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(-($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($form-switch-width-sm - $form-check-indicator-size-sm);
-//     }
-//   }
-// }
-
-// //lg
-// .form-switch.form-switch-lg {
-//   $form-check-indicator-size-lg: $form-check-indicator-size * 1.5;
-//   $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;
-//   $form-switch-indicator-size-lg: subtract($form-check-indicator-size-lg, $form-check-indicator-border-width * 4);
-
-//   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: -($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(-($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($form-switch-width-lg - $form-check-indicator-size-lg);
-//     }
-//   }
-// }
-
-// .form-switch.form-switch-slack {
-//   .form-check-label {
-//     &::before {
-//       background-color: $gray-200;
-//       border-color: transparent;
-//     }
-//     &::after {
-//       background-size: 15px;
-//     }
-//   }
-//   .input-group-addon {
-//     input {
-//       vertical-align: middle;
-//     }
-//   }
-// }
+$form-check-gutter: .5rem;
+$form-check-indicator-border-width: 1px;
+
+.form-check .form-check-label::before {
+  border-radius: $border-radius !important;
+}
+
+label.form-check-label {
+  font-weight: normal;
+}
+
+.form-switch.form-switch-sm {
+  $form-check-indicator-size-sm: $form-check-indicator-size * 0.8;
+  $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;
+  $form-switch-indicator-size-sm: subtract($form-check-indicator-size-sm, $form-check-indicator-border-width * 4);
+
+  padding-left: $form-switch-width-sm + $form-check-gutter-sm;
+
+  .form-check-label {
+    &::before {
+      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(-($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($form-switch-width-sm - $form-check-indicator-size-sm);
+    }
+  }
+}
+
+//lg
+.form-switch.form-switch-lg {
+  $form-check-indicator-size-lg: $form-check-indicator-size * 1.5;
+  $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;
+  $form-switch-indicator-size-lg: subtract($form-check-indicator-size-lg, $form-check-indicator-border-width * 4);
+
+  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: -($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(-($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($form-switch-width-lg - $form-check-indicator-size-lg);
+    }
+  }
+}
+
+.form-switch.form-switch-slack {
+  .form-check-label {
+    &::before {
+      background-color: $gray-200;
+      border-color: transparent;
+    }
+    &::after {
+      background-size: 15px;
+    }
+  }
+  .input-group-addon {
+    input {
+      vertical-align: middle;
+    }
+  }
+}

packages/core/scss/bootstrap/_variables.scss

@@ -164,4 +164,4 @@ $pre-color: dummyinvalildcolor; // disable pre color specification with invalid
 //== Custom Checkbox
 // $form-check-indicator-border-radius: 0px;
 // $form-check-indicator-focus-box-shadow: none;
-// $form-check-indicator-size: 1.2rem;
+$form-check-indicator-size: 1.2rem;