darkmode and clean code

apps/app/public/images/icons/slack/slack-logo-dark-background.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+  <circle fill="#370f38" cx="300" cy="300" r="300" />
+</svg>

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

@@ -1,15 +1,13 @@
 import React, { useCallback, useState, useEffect } from 'react';
 
 import dynamic from 'next/dynamic';
-import { Collapse, Button } from 'reactstrap';
-
 
 import type { SavePageControlsProps } from '~/components/SavePageControls';
 import { useIsSlackConfigured } from '~/stores/context';
 import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
 import { useCurrentPagePath } from '~/stores/page';
 import {
-  useEditorMode, useIsDeviceLargerThanLg, useIsDeviceLargerThanMd,
+  useEditorMode, useIsDeviceLargerThanMd,
 } from '~/stores/ui';
 
 
@@ -17,21 +15,16 @@ import styles from './EditorNavbarBottom.module.scss';
 
 const moduleClass = styles['grw-editor-navbar-bottom'];
 
-
 const SavePageControls = dynamic<SavePageControlsProps>(() => import('~/components/SavePageControls').then(mod => mod.SavePageControls), { ssr: false });
-const SlackLogo = dynamic(() => import('~/components/SlackLogo').then(mod => mod.SlackLogo), { ssr: false });
 const SlackNotification = dynamic(() => import('~/components/SlackNotification').then(mod => mod.SlackNotification), { ssr: false });
 const OptionsSelector = dynamic(() => import('~/components/PageEditor/OptionsSelector').then(mod => mod.OptionsSelector), { ssr: false });
 
 
 const EditorNavbarBottom = (): JSX.Element => {
 
-  const [isSlackExpanded, setSlackExpanded] = useState(false);
-
   const { data: editorMode } = useEditorMode();
   const { data: isSlackConfigured } = useIsSlackConfigured();
   const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
-  const { data: isDeviceLargerThanLg } = useIsDeviceLargerThanLg();
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
 
@@ -59,14 +52,14 @@ const EditorNavbarBottom = (): JSX.Element => {
   return (
     <div data-testid="grw-editor-navbar-bottom">
       <div className={`flex-expand-horiz align-items-center px-2 px-md-3 ${moduleClass}`}>
-        <form>
+        <form className="m-2 me-auto">
           <OptionsSelector collapsed={!isDeviceLargerThanMd} />
         </form>
-        <form className="row row-cols-lg-auto g-3 align-items-center ms-auto">
+        <form className="m-2">
           {/* Responsive Design for the SlackNotification */}
           {/* Button or the normal Slack banner */}
           {isSlackConfigured && (
-            <div className="me-2">
+            <>
               {isSlackEnabled != null
               && (
                 <SlackNotification
@@ -77,11 +70,11 @@ const EditorNavbarBottom = (): JSX.Element => {
                   id="idForEditorNavbarBottom"
                 />
               )}
-            </div>
+            </>
           )
           }
-          <SavePageControls slackChannels={slackChannelsStr} />
         </form>
+        <SavePageControls slackChannels={slackChannelsStr} />
       </div>
     </div>
   );

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

@@ -274,7 +274,7 @@ export const OptionsSelector = ({ collapsed }: {collapsed?: boolean}): JSX.Eleme
   return (
     <Dropdown isOpen={dropdownOpen} toggle={() => { setStatus(OptionsStatus.Home); setDropdownOpen(!dropdownOpen) }} direction="up" className="">
       <DropdownToggle
-        className={`btn btn-outline-neutral-secondary d-flex align-items-center justify-content-center p-1 m-1
+        className={`btn btn-outline-neutral-secondary d-flex align-items-center justify-content-center
               ${collapsed ? 'border-0' : 'border border-secondary'}
               ${dropdownOpen ? 'active' : ''}
               `}

apps/app/src/components/SlackLogo.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export const SlackLogo = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 448 448"
-    height="20"
-    width="20"
-  >
-    <path
-      d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,
-      0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,
-      47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,
-      0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,
-      47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,
-      0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"
-    />
-  </svg>
-);

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

@@ -1,5 +1,10 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
 
 .grw-slack-switch :global {
+  .input-group-text {
+    background-color: inherit;
+  }
   .form-check-input {
     cursor: pointer;
     background-repeat: no-repeat;
@@ -10,28 +15,44 @@
     box-shadow: none;
     transition: all 0.4s ease-out;
   }
+}
 
-  .form-check-input:not(:checked):not(:focus) {
-    background-color: #E4E7EA;
-    background-image:
-      url('/images/icons/slack/slack-logo-off.svg'),
-      url('/images/icons/slack/slack-logo-background.svg');
-    background-position: 15%, 5%, 50%, 50%;
-  }
+:root[data-bs-theme='light'] {
+  .grw-slack-switch :global {
+    .form-check-input:not(:checked) {
+      background-color: bs.$gray-500;
+      background-image:
+        url('/images/icons/slack/slack-logo-off.svg'),
+        url('/images/icons/slack/slack-logo-background.svg');
+      background-position: 15%, 5%, 50%, 50%;
+    }
 
-  .form-check-input:not(:checked) {
-    background-color: #E4E7EA;
-    background-image:
-      url('/images/icons/slack/slack-logo-off.svg'),
-      url('/images/icons/slack/slack-logo-background.svg');
-    background-position: 15%, 5%, 50%, 50%;
+    .form-check-input:checked {
+      background-color: #E7A9E8;
+      background-image:
+        url('/images/icons/slack/slack-logo-on.svg'),
+        url('/images/icons/slack/slack-logo-background.svg');
+      background-position: 85%, 95%, 50%, 50%;
+    }
   }
+}
+
+:root[data-bs-theme='dark'] {
+  .grw-slack-switch :global {
+    .form-check-input:not(:checked) {
+      background-color: bs.$gray-500;
+      background-image:
+        url('/images/icons/slack/slack-logo-dark-off.svg'),
+        url('/images/icons/slack/slack-logo-dark-background.svg');
+      background-position: 14%, 4%, 50%, 50%;
+    }
 
-  .form-check-input:checked {
-    background-color: #E7A9E8;
-    background-image:
-      url('/images/icons/slack/slack-logo-on.svg'),
-      url('/images/icons/slack/slack-logo-background.svg');
-    background-position: 85%, 95%, 50%, 50%;
+    .form-check-input:checked {
+      background-color: #731f74;
+      background-image:
+        url('/images/icons/slack/slack-logo-dark-on.svg'),
+        url('/images/icons/slack/slack-logo-dark-background.svg');
+      background-position: 86%, 95%, 50%, 50%;
+    }
   }
 }

apps/app/src/components/SlackNotification.tsx

@@ -42,8 +42,8 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
 
   return (
     <InputGroup className={`d-flex align-items-center ${styles['grw-slack-switch']}`}>
-      <InputGroupText className="rounded-end rounded-pill p-0 pe-1">
-        <FormGroup switch className="position-relative pe-4 py-3 m-0 grw-slack-switch">
+      <InputGroupText className="rounded-pill rounded-end border-end-0 border-secondary p-0 pe-1 grw-slack-switch">
+        <FormGroup switch className="position-relative pe-4 py-3 m-0">
           <Input
             className="position-absolute bottom-0 start-0 p-0 m-0 w-100 h-100 border-0"
             type="switch"
@@ -55,7 +55,7 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
         </FormGroup>
       </InputGroupText>
       <Input
-        className="rounded-start rounded-pill py-1 border-left-0"
+        className="rounded-pill rounded-start border-start-0 border-secondary py-1 text-muted"
         id={idForSlackPopover}
         type="text"
         value={slackChannels}