feat: redesign SendToChannelCheckbox

examples/vite/src/index.scss

@@ -93,6 +93,7 @@ body {
   .str-chat__thread-list-container,
   .str-chat__thread-container {
     //flex: 0 0 360px;
+    width: 100%;
     max-width: 360px;
   }
 

src/components/MessageInput/SendToChannelCheckbox.tsx

@@ -1,5 +1,7 @@
-import { useMessageComposer } from './hooks';
+import clsx from 'clsx';
 import React from 'react';
+import { useMessageComposer } from './hooks';
+import { IconCheckmark2 } from '../Icons';
 import type { MessageComposerState } from 'stream-chat';
 import { useStateStore } from '../../store';
 import { useTranslationContext } from '../../context';
@@ -15,21 +17,37 @@ export const SendToChannelCheckbox = () => {
 
   if (messageComposer.editedMessage || !messageComposer.threadId) return null;
 
+  const labelText =
+    Object.keys(messageComposer.channel.state.members).length === 2
+      ? t('Also send as a direct message')
+      : t('Also send in channel');
+
   return (
-    <div className='str-chat__send-to-channel-checkbox__container'>
-      <div className='str-chat__send-to-channel-checkbox__field'>
+    <div
+      className={clsx('str-chat__send-to-channel-checkbox__container', {
+        'str-chat__send-to-channel-checkbox__container--checked': showReplyInChannel,
+      })}
+      data-testid='send-to-channel-checkbox'
+    >
+      <label
+        className='str-chat__send-to-channel-checkbox__field'
+        htmlFor='send-to-channel-checkbox'
+      >
         <input
+          aria-checked={showReplyInChannel}
+          checked={showReplyInChannel}
+          className='str-chat__send-to-channel-checkbox__input'
           id='send-to-channel-checkbox'
-          onClick={messageComposer.toggleShowReplyInChannel}
+          onChange={() => messageComposer.toggleShowReplyInChannel()}
           type='checkbox'
-          value={showReplyInChannel.toString()}
         />
-        <label htmlFor='send-to-channel-checkbox'>
-          {Object.keys(messageComposer.channel.state.members).length === 2
-            ? t('Also send as a direct message')
-            : t('Also send in channel')}
-        </label>
-      </div>
+        <span aria-hidden className='str-chat__send-to-channel-checkbox__visual'>
+          <span className='str-chat__send-to-channel-checkbox__checkmark'>
+            <IconCheckmark2 />
+          </span>
+        </span>
+        <span className='str-chat__send-to-channel-checkbox__label'>{labelText}</span>
+      </label>
     </div>
   );
 };

src/components/MessageInput/styling/MessageComposer.scss

@@ -42,10 +42,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-md);
     justify-content: center;
     padding: var(--str-chat__message-composer-padding);
     min-width: 0;
+    border-top: 1px solid var(--border-core-default);
+    background: var(--background-elevation-elevation-1);
   }
 
   .str-chat__message-composer {
@@ -178,34 +180,6 @@
       font-weight: var(--typography-font-weight-regular, 400);
     }
   }
-
-  // todo: need designs?
-  .str-chat__send-to-channel-checkbox__container {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    padding-inline: 0.75rem;
-    max-width: var(--str-chat__message-composer-max-width);
-
-    .str-chat__send-to-channel-checkbox__field {
-      display: flex;
-      align-items: center;
-
-      * {
-        cursor: pointer;
-      }
-
-      label {
-        padding-inline: 0.5rem;
-        color: var(--str-chat__text-low-emphasis-color);
-        font: var(--str-chat__body-text);
-      }
-
-      input {
-        margin: 0;
-      }
-    }
-  }
 }
 
 //

src/components/MessageInput/styling/SendToChannelCheckbox.scss

@@ -0,0 +1,77 @@
+.str-chat__send-to-channel-checkbox__container {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  max-width: var(--str-chat__message-composer-max-width);
+  color: var(--text-tertiary);
+
+  &.str-chat__send-to-channel-checkbox__container--checked {
+    color: var(--text-primary);
+  }
+
+  .str-chat__send-to-channel-checkbox__field {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    cursor: pointer;
+
+    /* Visually hide the native checkbox; it stays focusable and clickable for a11y */
+    .str-chat__send-to-channel-checkbox__input {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
+      appearance: none;
+    }
+
+    .str-chat__send-to-channel-checkbox__visual {
+      width: 20px;
+      height: 20px;
+      border: 1px solid var(--control-checkbox-border, #D5DBE1);
+      border-radius: var(--radius-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .str-chat__send-to-channel-checkbox__input:checked + .str-chat__send-to-channel-checkbox__visual {
+      background-color: var(--control-radiocheck-bg-selected, var(--accent-primary));
+      border-color: var(--control-radiocheck-bg-selected, var(--accent-primary));
+    }
+
+    .str-chat__send-to-channel-checkbox__checkmark {
+      color: var(--control-radiocheck-icon-selected);
+      opacity: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.15s ease;
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    .str-chat__send-to-channel-checkbox__input:checked + .str-chat__send-to-channel-checkbox__visual .str-chat__send-to-channel-checkbox__checkmark {
+      opacity: 1;
+    }
+
+    .str-chat__send-to-channel-checkbox__label {
+      font: var(--str-chat__metadata-default-text);
+      transition: color 0.15s ease, border-color 0.15s ease;
+    }
+
+  }
+}

src/components/MessageInput/styling/index.scss

@@ -9,3 +9,4 @@
 @use 'QuotedMessageIndicator';
 @use 'QuotedMessagePreview';
 @use 'RemoveAttachmentPreviewButton';
+@use 'SendToChannelCheckbox';