diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 5be3e02ae..4d4ebaa8b 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -92,6 +92,7 @@ if (!apiKey) { const options: ChannelOptions = { presence: true, state: true, + limit: 10, }; const sort: ChannelSort = { last_message_at: -1, updated_at: -1 }; diff --git a/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx b/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx index e20ea0a3f..1c1be781d 100644 --- a/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx +++ b/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx @@ -63,53 +63,7 @@ const ActionsMenuButton = ({ ); -export const ActionsMenu = ({ iconOnly = true }: { iconOnly?: boolean }) => ( - -); - -function TriggerNotificationAction({ onTrigger }: { onTrigger: () => void }) { - const { closeMenu } = useContextMenuContext(); - - return ( - { - closeMenu(); - onTrigger(); - }} - /> - ); -} - -function TriggerAttachmentAction({ onTrigger }: { onTrigger: () => void }) { - const { closeMenu } = useContextMenuContext(); - - return ( - { - closeMenu(); - onTrigger(); - }} - /> - ); -} - -function TriggerWebSocketEventAction({ onTrigger }: { onTrigger: () => void }) { - const { closeMenu } = useContextMenuContext(); - - return ( - { - closeMenu(); - onTrigger(); - }} - /> - ); -} - -const ActionsMenuInner = ({ iconOnly }: { iconOnly: boolean }) => { +export const ActionsMenu = ({ iconOnly = true }: { iconOnly?: boolean }) => { const [menuButtonElement, setMenuButtonElement] = useState( null, ); @@ -156,3 +110,45 @@ const ActionsMenuInner = ({ iconOnly }: { iconOnly: boolean }) => { ); }; + +function TriggerNotificationAction({ onTrigger }: { onTrigger: () => void }) { + const { closeMenu } = useContextMenuContext(); + + return ( + { + closeMenu(); + onTrigger(); + }} + /> + ); +} + +function TriggerAttachmentAction({ onTrigger }: { onTrigger: () => void }) { + const { closeMenu } = useContextMenuContext(); + + return ( + { + closeMenu(); + onTrigger(); + }} + /> + ); +} + +function TriggerWebSocketEventAction({ onTrigger }: { onTrigger: () => void }) { + const { closeMenu } = useContextMenuContext(); + + return ( + { + closeMenu(); + onTrigger(); + }} + /> + ); +} diff --git a/examples/vite/src/AppSettings/AppSettings.scss b/examples/vite/src/AppSettings/AppSettings.scss index 043adabe2..349877de0 100644 --- a/examples/vite/src/AppSettings/AppSettings.scss +++ b/examples/vite/src/AppSettings/AppSettings.scss @@ -7,7 +7,19 @@ gap: 16px; .app__settings-group_button { - color: var(--str-chat__text-secondary); + color: var(--str-chat__text-tertiary); + + .str-chat__icon--bolt, + .str-chat__icon--moon, + .str-chat__icon--sun { + fill: none; + stroke: currentColor; + stroke-width: 1.5px; + } + + &.app__settings-group_button--toggle[aria-checked='true'] { + color: var(--str-chat__text-on-accent); + } } } diff --git a/examples/vite/src/AppSettings/AppSettings.tsx b/examples/vite/src/AppSettings/AppSettings.tsx index e1f3b063a..52acd1064 100644 --- a/examples/vite/src/AppSettings/AppSettings.tsx +++ b/examples/vite/src/AppSettings/AppSettings.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { type ComponentType, useState } from 'react'; import { Button, ChatViewSelectorButton, @@ -7,7 +7,6 @@ import { IconEmoji, IconMessageBubble, } from 'stream-chat-react'; -import { type ComponentType, useState } from 'react'; import { ActionsMenu } from './ActionsMenu'; import { GeneralTab } from './tabs/General'; @@ -16,7 +15,13 @@ import { NotificationsTab } from './tabs/Notifications'; import { ReactionsTab } from './tabs/Reactions'; import { SidebarTab } from './tabs/Sidebar'; import { appSettingsStore, useAppSettingsState } from './state'; -import { IconGear, IconLightBulb, IconSidebar, IconTextDirection } from '../icons.tsx'; +import { + IconGear, + IconMoon, + IconSidebar, + IconSun, + IconTextDirection, +} from '../icons.tsx'; type TabId = 'general' | 'messageActions' | 'notifications' | 'reactions' | 'sidebar'; @@ -34,15 +39,15 @@ const SidebarThemeToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => { theme: { mode }, } = useAppSettingsState(); const nextMode = mode === 'dark' ? 'light' : 'dark'; - + const Icon = mode === 'dark' ? IconSun : IconMoon; return ( appSettingsStore.partialNext({ @@ -50,8 +55,7 @@ const SidebarThemeToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => { }) } role='switch' - style={{ color: mode === 'dark' ? '#facc15' : undefined }} - text={mode === 'dark' ? 'Dark mode' : 'Light mode'} + text={mode === 'dark' ? 'Light mode' : 'Dark mode'} /> ); }; @@ -68,7 +72,7 @@ const SidebarRtlToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => { aria-checked={isRtl} aria-label={`Switch to ${isRtl ? 'LTR' : 'RTL'} direction`} aria-selected={isRtl} - className='app__settings-group_button' + className='app__settings-group_button app__settings-group_button--toggle' iconOnly={iconOnly} Icon={IconTextDirection} isActive={isRtl} @@ -89,9 +93,9 @@ export const AppSettings = ({ iconOnly = true }: { iconOnly?: boolean }) => { return (
- - + + - - - , - { viewBox: '0 0 16 16' }, +export const IconMoon = createIcon( + 'IconMoon', + , +); + +export const IconSun = createIcon( + 'IconSun', + , ); export const IconTextDirection = createIcon( 'IconTextDirection', - , - { viewBox: '0 0 16 16' }, + , ); export const IconInfoCircle = createIcon( diff --git a/src/components/Attachment/styling/ModalGallery.scss b/src/components/Attachment/styling/ModalGallery.scss index 50547c9a0..907bea391 100644 --- a/src/components/Attachment/styling/ModalGallery.scss +++ b/src/components/Attachment/styling/ModalGallery.scss @@ -234,7 +234,17 @@ } &:focus-visible { - @include utils.focusable; + outline: none; + } + + &:focus-visible::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + border-radius: inherit; + box-shadow: inset 0 0 0 2px var(--str-chat__brand-300); + z-index: 1; } } } diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss index df6bbaad0..6504d042a 100644 --- a/src/components/ChatView/styling/ChatView.scss +++ b/src/components/ChatView/styling/ChatView.scss @@ -36,7 +36,7 @@ } } - .str-chat__chat-view__selector-button { + .str-chat__button.str-chat__chat-view__selector-button { --str-chat-unread-count-badge-absolute-offset-vertical: 25%; gap: 4px; diff --git a/src/components/Form/styling/NumericInput.scss b/src/components/Form/styling/NumericInput.scss index 484f760a4..6cde27ee5 100644 --- a/src/components/Form/styling/NumericInput.scss +++ b/src/components/Form/styling/NumericInput.scss @@ -31,16 +31,12 @@ font-size: var(--str-chat__typography-font-size-sm, 0.875rem); font-weight: var(--str-chat__typography-font-weight-medium, 500); line-height: var(--str-chat__typography-line-height-tight, 1.25); - color: var(--str-chat__input-text-default, #1a1b25); + color: var(--str-chat__input-text-default); text-align: center; background: transparent; border: none; box-shadow: none; - &::placeholder { - color: var(--str-chat__input-text-placeholder, var(--str-chat__text-tertiary)); - } - .str-chat__form-numeric-input--disabled & { color: var(--str-chat__input-text-placeholder); cursor: not-allowed; diff --git a/src/components/Form/styling/TextInput.scss b/src/components/Form/styling/TextInput.scss index 789f3f778..bcf0ea0d4 100644 --- a/src/components/Form/styling/TextInput.scss +++ b/src/components/Form/styling/TextInput.scss @@ -132,14 +132,9 @@ background: transparent; border: none; outline: none; - outline-style: none; box-shadow: none; } -.str-chat__form-text-input .str-chat__form-text-input__input::placeholder { - color: var(--str-chat__input-text-placeholder); -} - .str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input { color: var(--str-chat__input-text-placeholder); @@ -154,7 +149,6 @@ .str-chat__form-text-input .str-chat__form-text-input__input:focus, .str-chat__form-text-input .str-chat__form-text-input__input:focus-visible { outline: none; - outline-style: none; box-shadow: none; } diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index ceefe5afb..d93eb8d5d 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -74,6 +74,11 @@ $attachment-preview-row-height: 72px; gap: var(--str-chat__spacing-md); } + .str-chat__attachment-preview-audio, + .str-chat__attachment-preview-voice-recording { + --chat-border-on-chat: var(--str-chat__chat-border-on-chat-incoming); + } + .str-chat__attachment-preview-audio, .str-chat__attachment-preview-file, .str-chat__attachment-preview-voice-recording, diff --git a/src/components/MessageList/ScrollToLatestMessageButton.tsx b/src/components/MessageList/ScrollToLatestMessageButton.tsx index c9fe06bf5..99d7c5de3 100644 --- a/src/components/MessageList/ScrollToLatestMessageButton.tsx +++ b/src/components/MessageList/ScrollToLatestMessageButton.tsx @@ -90,7 +90,7 @@ const UnMemoizedScrollToLatestMessageButton = ( return (