wip

apps/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -58,25 +58,6 @@ const EditorNavbarBottom = (): JSX.Element => {
 
   return (
     <div data-testid="grw-editor-navbar-bottom">
-      {/* Collapsed SlackNotification */}
-      {isSlackConfigured && (
-        <Collapse isOpen={isSlackExpanded && !isDeviceLargerThanLg}>
-          <nav className={`navbar navbar-expand-lg border-top ${moduleClass}`}>
-            {isSlackEnabled != null
-            && (
-              <SlackNotification
-                isSlackEnabled={isSlackEnabled}
-                slackChannels={slackChannelsStr}
-                onEnabledFlagChange={isSlackEnabledToggleHandler}
-                onChannelChange={slackChannelsChangedHandler}
-                id="idForEditorNavbarBottomForMobile"
-              />
-            )
-            }
-          </nav>
-        </Collapse>
-      )
-      }
       <div className={`flex-expand-horiz align-items-center px-2 px-md-3 ${moduleClass}`}>
         <form>
           <OptionsSelector collapsed={!isDeviceLargerThanMd} />
@@ -84,17 +65,7 @@ const EditorNavbarBottom = (): JSX.Element => {
         <form className="row row-cols-lg-auto g-3 align-items-center ms-auto">
           {/* Responsive Design for the SlackNotification */}
           {/* Button or the normal Slack banner */}
-          {isSlackConfigured && (!isDeviceLargerThanMd ? (
-            <Button
-              className="grw-btn-slack border me-2"
-              onClick={() => (setSlackExpanded(!isSlackExpanded))}
-            >
-              <div className="grw-slack-logo">
-                <SlackLogo />
-                <span className="grw-btn-slack-triangle material-symbols-outlined ms-2">arrow_drop_up</span>
-              </div>
-            </Button>
-          ) : (
+          {isSlackConfigured && (
             <div className="me-2">
               {isSlackEnabled != null
               && (
@@ -107,7 +78,8 @@ const EditorNavbarBottom = (): JSX.Element => {
                 />
               )}
             </div>
-          ))}
+          )
+          }
           <SavePageControls slackChannels={slackChannelsStr} />
         </form>
       </div>

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

@@ -1,5 +1,10 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+
+.grw-slack-switch :global {
+  flex-basis: 50px;
+}
+
 // TODO: activate (https://redmine.weseek.co.jp/issues/128307)
 .grw-slack-notification :global {
   $input-height-slack: bs.$form-check-indicator-size * 1.5;

apps/app/src/components/SlackNotification.tsx

@@ -104,22 +104,21 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
     //     </UncontrolledPopover>
     //   </div>
     // </div>
-    <InputGroup className={`d-flex ${styles['grw-slack-switch']}`}>
-      <InputGroupText className="">
-        <FormGroup switch className="">
+    <InputGroup className={`d-flex align-items-stretch  ${styles['grw-slack-switch']}`}>
+      <InputGroupText className="rounded-end rounded-pill d-flex flex-column align-items-stretch">
+        <FormGroup switch className="position-relative pe-2 m-0">
           <Input
-            className="grw-slack-switch"
+            className="position-absolute top-0 end-0 p-0 m-0 w-100 h-100 border-0"
             type="switch"
             role="switch"
             id={id}
             checked={isSlackEnabled}
             onChange={updateCheckboxHandler}
           />
-
         </FormGroup>
       </InputGroupText>
       <Input
-        className=""
+        className="rounded-start rounded-pill"
         id={idForSlackPopover}
         type="text"
         value={slackChannels}