fix design

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

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

apps/app/src/components/SavePageControls.tsx

@@ -239,7 +239,11 @@ export const SavePageControls = (): JSX.Element | null => {
         ) : (
           <>
             <SavePageButton slackChannels={slackChannels} />
-            <button type="button" className="btn btn-outline-neutral-secondary border-0 text-muted" onClick={() => setIsSavePageControlsModalShown(true)}>
+            <button
+              type="button"
+              className="btn btn-outline-neutral-secondary border-0 fs-5 p-0 ms-1 text-muted"
+              onClick={() => setIsSavePageControlsModalShown(true)}
+            >
               <span className="material-symbols-outlined">more_vert</span>
             </button>
             <Modal
@@ -250,13 +254,15 @@ export const SavePageControls = (): JSX.Element | null => {
               <div className="d-flex flex-column pt-5 pb-3 px-4 gap-3">
                 {
                   isAclEnabled && (
-                    <GrantSelector
-                      grant={grant}
-                      disabled={isGrantSelectorDisabledPage}
-                      openInModal
-                      userRelatedGrantedGroups={userRelatedGrantedGroups}
-                      onUpdateGrant={updateGrantHandler}
-                    />
+                    <div className="py-2">
+                      <GrantSelector
+                        grant={grant}
+                        disabled={isGrantSelectorDisabledPage}
+                        openInModal
+                        userRelatedGrantedGroups={userRelatedGrantedGroups}
+                        onUpdateGrant={updateGrantHandler}
+                      />
+                    </div>
                   )
                 }
 

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

@@ -15,12 +15,15 @@
     box-shadow: none;
     transition: all 0.4s ease-out;
   }
+  .form-control::placeholder {
+    color: bs.$gray-500
+  }
 }
 
 :root[data-bs-theme='light'] {
   .grw-slack-switch :global {
     .form-check-input:not(:checked) {
-      background-color: bs.$gray-500;
+      background-color: bs.$gray-200;
       background-image:
         url('/images/icons/slack/slack-logo-off.svg'),
         url('/images/icons/slack/slack-logo-background.svg');
@@ -40,7 +43,7 @@
 :root[data-bs-theme='dark'] {
   .grw-slack-switch :global {
     .form-check-input:not(:checked) {
-      background-color: bs.$gray-500;
+      background-color: bs.$gray-200;
       background-image:
         url('/images/icons/slack/slack-logo-dark-off.svg'),
         url('/images/icons/slack/slack-logo-dark-background.svg');

apps/app/src/components/SlackNotification.tsx

@@ -42,7 +42,7 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
 
   return (
     <InputGroup className={`d-flex align-items-center ${styles['grw-slack-switch']}`}>
-      <InputGroupText className="rounded-pill rounded-end border-end-0 border-secondary p-0 pe-1 grw-slack-switch">
+      <InputGroupText className="rounded-pill rounded-end border-end-0 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"
@@ -55,7 +55,7 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
         </FormGroup>
       </InputGroupText>
       <Input
-        className="rounded-pill rounded-start border-start-0 border-secondary py-1 text-muted"
+        className="rounded-pill rounded-start border-start-0 py-1"
         id={idForSlackPopover}
         type="text"
         value={slackChannels}