From 80b8f2cde4e5a3fc16de8042b4037c61dbede938 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 14 Apr 2026 18:21:26 +0200 Subject: [PATCH 1/7] fix: decrease poll option padding in full list --- src/components/Poll/styling/PollOptionFullList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Poll/styling/PollOptionFullList.scss b/src/components/Poll/styling/PollOptionFullList.scss index c81fc7dba..368f6874a 100644 --- a/src/components/Poll/styling/PollOptionFullList.scss +++ b/src/components/Poll/styling/PollOptionFullList.scss @@ -17,7 +17,7 @@ background-color: var(--background-core-surface-card); .str-chat__poll-option { - padding: var(--spacing-sm) var(--spacing-xs); + padding: var(--spacing-xs); border-radius: var(--radius-lg); } .str-chat__poll-option--votable { From 32f2785268d48f561b1a91b93ef91fee2e4bb5d7 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 14 Apr 2026 18:21:48 +0200 Subject: [PATCH 2/7] fix: set correct size of the numeric stepper button --- src/components/Form/NumericInput.tsx | 7 ++-- src/components/Form/styling/NumericInput.scss | 42 +------------------ 2 files changed, 4 insertions(+), 45 deletions(-) diff --git a/src/components/Form/NumericInput.tsx b/src/components/Form/NumericInput.tsx index 4ec6b4b41..7e7b570fd 100644 --- a/src/components/Form/NumericInput.tsx +++ b/src/components/Form/NumericInput.tsx @@ -124,11 +124,10 @@ export const NumericInput = forwardRef( )} disabled={disabled || atMin} onClick={handleDecrement} + size='xs' variant='secondary' > - - - + ( )} disabled={disabled || atMax} onClick={handleIncrement} - size='sm' + size='xs' variant='secondary' > diff --git a/src/components/Form/styling/NumericInput.scss b/src/components/Form/styling/NumericInput.scss index 99db30069..434e5d127 100644 --- a/src/components/Form/styling/NumericInput.scss +++ b/src/components/Form/styling/NumericInput.scss @@ -7,10 +7,7 @@ gap: var(--spacing-xs, 0.5rem); &__label { - font-size: var(--typography-font-size-sm, 0.875rem); - font-weight: var(--typography-font-weight-medium, 500); - line-height: var(--typography-line-height-tight, 1.25); - color: var(--text-primary, #1a1b25); + font: var(--str-chat__caption-default-text); } &__wrapper { @@ -27,43 +24,6 @@ } // Stepper buttons: circular, light border (Figma) - &__stepper { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - width: 24px; - height: 24px; - padding: 0; - background-color: transparent; - border: 1px solid var(--border-core-on-surface, #a3acba); - border-radius: var(--button-radius-full, 9999px); - color: var(--text-tertiary, #687385); - cursor: pointer; - transition: - border-color 0.15s ease, - color 0.15s ease; - - &:hover:not(:disabled) { - color: var(--text-primary, #1a1b25); - } - - &:disabled { - color: var(--text-disabled, #a3acba); - cursor: not-allowed; - } - - &-icon { - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - font-weight: 300; - line-height: 1; - color: inherit; - } - } - &__input { flex: 0 1 auto; min-width: 2ch; From b0c5effe8f9b25958451f2acdd8316c699a097af Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 14 Apr 2026 18:30:25 +0200 Subject: [PATCH 3/7] fix: adjust poll checkmark borders --- src/components/Poll/styling/PollOptionList.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Poll/styling/PollOptionList.scss b/src/components/Poll/styling/PollOptionList.scss index 9258ed05a..92c402200 100644 --- a/src/components/Poll/styling/PollOptionList.scss +++ b/src/components/Poll/styling/PollOptionList.scss @@ -28,7 +28,7 @@ height: var(--str-chat__poll-checkmark-size); width: var(--str-chat__poll-checkmark-size); border-radius: var(--str-chat__border-radius-circle); - border: 1px solid var(--str-chat__disabled-color); + border: 1px solid var(--chat-border-on-chat-incoming); } .str-chat__checkmark--checked { @@ -95,3 +95,11 @@ } } } + +.str-chat__message--me { + .str-chat__poll-option-list { + .str-chat__checkmark { + border: 1px solid var(--chat-border-on-chat-outgoing); + } + } +} \ No newline at end of file From b541aa140133f4f0ffccd15165624554792f4154 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 14 Apr 2026 19:53:39 +0200 Subject: [PATCH 4/7] feat: add TextInput variant for placing the field error --- src/components/Form/TextInput.tsx | 248 +++++++++---- src/components/Form/styling/TextInput.scss | 332 ++++++++++-------- .../PollCreationDialog/OptionFieldSet.tsx | 3 +- .../Poll/styling/OptionFieldSet.scss | 9 + src/components/Poll/styling/index.scss | 1 + 5 files changed, 379 insertions(+), 214 deletions(-) create mode 100644 src/components/Poll/styling/OptionFieldSet.scss diff --git a/src/components/Form/TextInput.tsx b/src/components/Form/TextInput.tsx index 711648286..4c6dd9ca4 100644 --- a/src/components/Form/TextInput.tsx +++ b/src/components/Form/TextInput.tsx @@ -6,7 +6,17 @@ import { IconCheckmark, IconExclamationMark } from '../Icons'; export type TextInputVariant = 'outline' | 'ghost'; +/** Where the active field message (error, success, or neutral) sits relative to the bordered control */ +export type TextInputFieldMessagePlacement = 'outside' | 'inside'; + export type TextInputProps = Omit, 'className'> & { + /** Root class name */ + className?: string; + /** + * `outside` (default): message below the bordered wrapper. + * `inside`: message under the value row, inside the border (error, success, or neutral). + */ + fieldMessagePlacement?: TextInputFieldMessagePlacement; /** Optional label above the input */ label?: string; /** Optional leading content (e.g. icon) inside the input area */ @@ -17,20 +27,109 @@ export type TextInputProps = Omit, 'className'> & { trailingText?: string; /** Neutral/helper message below the input (no icon) */ message?: ReactNode; - /** Error message below the input; shown when error is true, with errorMessageIcon */ + /** Error message; shown when `error` is true, with `errorMessageIcon` */ errorMessage?: ReactNode; - /** Icon shown before error message (default: IconExclamationMark) */ + /** Icon before error text (default: exclamation) */ errorMessageIcon?: ReactNode; - /** Success message below the input; shown when provided, with successMessageIcon */ + /** Success message below the input */ successMessage?: ReactNode; - /** Icon shown before success message (default: IconCheckmark) */ + /** Icon before success text (default: checkmark) */ successMessageIcon?: ReactNode; - /** When true, shows error border and error message styling */ + /** When true, error border and error styling */ error?: boolean; - /** Visual variant: outline = border always visible, ghost = border only on focus */ + /** `outline` = border always; `ghost` = border on focus */ variant?: TextInputVariant; - /** Optional class name for the root wrapper */ - className?: string; +}; + +type TextInputIconMessageLineProps = { + icon: ReactNode; + text: ReactNode; +}; + +const TextInputIconMessageLine = ({ icon, text }: TextInputIconMessageLineProps) => ( + <> + + {icon} + + {text} + +); + +/** At most one of error / success / neutral is shown under the field */ +type TextInputFieldMessageProps = + | { + kind: 'error'; + id?: string; + insidePlacement: boolean; + errorMessageIcon?: ReactNode; + text: ReactNode; + } + | { + kind: 'success'; + id?: string; + insidePlacement: boolean; + successMessageIcon?: ReactNode; + text: ReactNode; + } + | { + kind: 'neutral'; + id?: string; + insidePlacement: boolean; + text: ReactNode; + }; + +const TextInputFieldMessage = (props: TextInputFieldMessageProps) => { + if (props.kind === 'neutral') { + return ( +
+ {props.text} +
+ ); + } else if (props.kind === 'success') { + return ( +
+ } + text={props.text} + /> +
+ ); + } else if (props.kind === 'error') { + return ( + + ); + } + + return null; }; export const TextInput = forwardRef(function TextInput( @@ -40,6 +139,7 @@ export const TextInput = forwardRef(function T error = false, errorMessage, errorMessageIcon, + fieldMessagePlacement = 'outside', id: idProp, label, leading, @@ -53,32 +153,45 @@ export const TextInput = forwardRef(function T }, ref, ) { - const generatedId = useStableId(); - const id = idProp ?? generatedId; + const autoId = useStableId(); + const id = idProp ?? autoId; - const displayError = error && (errorMessage != null || message != null); - const displaySuccess = successMessage != null; - const displayNeutralMessage = message != null && !error; - const displayMessage = displayError || displaySuccess || displayNeutralMessage; + const hasError = error && (errorMessage != null || message != null); + const showSuccess = !hasError && successMessage != null; + const showNeutral = !hasError && !showSuccess && message != null; + const hasFeedback = hasError || showSuccess || showNeutral; + const messageInside = fieldMessagePlacement === 'inside' && hasFeedback; - const messageId = displayMessage ? `${id}-message` : undefined; + const messageId = hasError + ? `${id}-field-error` + : showSuccess || showNeutral + ? `${id}-message` + : undefined; + const describedBy = messageId; - const messageContent = displayError ? ( - <> - - {errorMessageIcon ?? } - - {errorMessage ?? message} - - ) : displaySuccess ? ( - <> - - {successMessageIcon ?? } - - {successMessage} - - ) : displayNeutralMessage ? ( - (message as ReactNode) + const fieldMessage = hasError ? ( + + ) : showSuccess ? ( + + ) : showNeutral ? ( + ) : null; return ( @@ -86,60 +199,53 @@ export const TextInput = forwardRef(function T className={clsx( 'str-chat__form-text-input', error && 'str-chat__form-text-input--error', - displaySuccess && 'str-chat__form-text-input--success', + showSuccess && 'str-chat__form-text-input--success', disabled && 'str-chat__form-text-input--disabled', + messageInside && 'str-chat__form-text-input--field-message-inside', className, )} > - {!!label && ( + {label ? ( - )} + ) : null}
- {!!leading && ( - - {leading} - - )} - - {trailingText != null && ( - - {trailingText} - - )} - {!!trailing && ( - - {trailing} - - )} -
- {messageContent != null && ( -
- {messageContent} +
+ {leading ? ( + + {leading} + + ) : null} + + {trailingText != null ? ( + + {trailingText} + + ) : null} + {trailing ? ( + + {trailing} + + ) : null}
- )} + {messageInside ? fieldMessage : null} +
+ {messageInside ? null : fieldMessage} ); }); diff --git a/src/components/Form/styling/TextInput.scss b/src/components/Form/styling/TextInput.scss index 0253e0720..72e5126e4 100644 --- a/src/components/Form/styling/TextInput.scss +++ b/src/components/Form/styling/TextInput.scss @@ -2,165 +2,213 @@ display: flex; flex-direction: column; gap: var(--spacing-xs); +} - &__label { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-tight); - color: var(--text-primary); - } +.str-chat__form-text-input__label { + font-size: var(--typography-font-size-sm); + font-weight: var(--typography-font-weight-medium); + line-height: var(--typography-line-height-tight); + color: var(--text-primary); +} - &__wrapper { - display: flex; - align-items: center; - gap: var(--spacing-xs); - min-height: var(--size-40); - padding: 0 var(--spacing-sm); - background-color: var(--background-core-elevation-0); - border-radius: var(--radius-md); - outline: none; - transition: - border-color 0.15s ease, - box-shadow 0.15s ease; - } +/* Column shell: control row + optional in-border error */ +.str-chat__form-text-input__wrapper { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0; + background-color: var(--background-core-elevation-0); + border-radius: var(--radius-md); + outline: none; + transition: + border-color 0.15s ease, + box-shadow 0.15s ease; +} - // --------------------------------------------------------------------------- - // Outline variant — always 1px border on wrapper; + 2px focus ring on focus-within - // --------------------------------------------------------------------------- - &__wrapper--outline { - border: 1px solid var(--border-core-default); - box-shadow: none; - } +.str-chat__form-text-input__control-row { + display: flex; + align-items: center; + gap: var(--spacing-xs); + padding: var(--spacing-xs) var(--spacing-sm); + min-width: 0; + width: 100%; +} - &:focus-within &__wrapper--outline { - border: 1px solid var(--input-border-focus); - box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff); - } +// --------------------------------------------------------------------------- +// Outline variant — always 1px border on wrapper; + 2px focus ring on focus-within +// --------------------------------------------------------------------------- +.str-chat__form-text-input__wrapper--outline { + border: 1px solid var(--border-core-default); + box-shadow: none; +} - &--error &__wrapper--outline { - border: 1px solid var(--border-utility-error); - } +.str-chat__form-text-input:focus-within .str-chat__form-text-input__wrapper--outline { + border: 1px solid var(--input-border-focus); + box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff); +} - @at-root .str-chat__form-text-input:focus-within.str-chat__form-text-input--error - .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-utility-error); - box-shadow: none; - } +.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline { + border: 1px solid var(--border-utility-error); +} - &--disabled &__wrapper--outline { - border: 1px solid var(--border-utility-disabled); - } +/* In-border error: shell keeps default outline (red only on message row) */ +.str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside + .str-chat__form-text-input__wrapper--outline { + border: 1px solid var(--border-core-default); +} - // --------------------------------------------------------------------------- - // Ghost variant — no border on wrapper; 2px focus ring only on focus-within (and error) - // --------------------------------------------------------------------------- - &__wrapper--ghost { - border: none; - box-shadow: none; - } +.str-chat__form-text-input:focus-within.str-chat__form-text-input--error + .str-chat__form-text-input__wrapper--outline { + border: 1px solid var(--border-utility-error); + box-shadow: none; +} - &:focus-within &__wrapper--ghost { - border: none; - box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff); - } +.str-chat__form-text-input:focus-within.str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside + .str-chat__form-text-input__wrapper--outline { + border: 1px solid var(--input-border-focus); + box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff); +} - &--error &__wrapper--ghost { - border: 1px solid var(--border-utility-error); - box-shadow: none; - } +.str-chat__form-text-input--disabled .str-chat__form-text-input__wrapper--outline { + border: 1px solid var(--border-utility-disabled); +} - @at-root .str-chat__form-text-input:focus-within.str-chat__form-text-input--error - .str-chat__form-text-input__wrapper--ghost { - border: 1px solid var(--border-utility-error); - box-shadow: none; - } +// --------------------------------------------------------------------------- +// Ghost variant — no border on wrapper; 2px focus ring only on focus-within (and error) +// --------------------------------------------------------------------------- +.str-chat__form-text-input__wrapper--ghost { + border: none; + box-shadow: none; +} - // --------------------------------------------------------------------------- - // Shared: leading, input, suffix, trailing, message - // --------------------------------------------------------------------------- - &__leading { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - color: var(--input-text-icon); - } +.str-chat__form-text-input:focus-within .str-chat__form-text-input__wrapper--ghost { + border: none; + box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff); +} - &__input { - flex: 1; - min-width: 0; - padding: var(--spacing-xs) 0; - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); - color: var(--input-text-default); - background: transparent; - border: none; - outline: none; - box-shadow: none; - - &::placeholder { - color: var(--input-text-placeholder); - } - - .str-chat__form-text-input--disabled & { - color: var(--input-text-placeholder); - cursor: not-allowed; - - &::placeholder { - color: var(--input-text-placeholder); - } - } - } +.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost { + border: 1px solid var(--border-utility-error); + box-shadow: none; +} - .str-chat__form-text-input__input:focus, - .str-chat__form-text-input__input:focus-visible { - outline: none; - box-shadow: none; - } +.str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside + .str-chat__form-text-input__wrapper--ghost { + border: none; + box-shadow: none; +} - &__suffix { - flex-shrink: 0; - font-size: var(--typography-font-size-sm); - line-height: var(--typography-line-height-normal); - color: var(--text-tertiary); - } +.str-chat__form-text-input:focus-within.str-chat__form-text-input--error + .str-chat__form-text-input__wrapper--ghost { + border: 1px solid var(--border-utility-error); + box-shadow: none; +} - &__trailing { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - margin-inline-end: calc(-1 * var(--space-4)); - color: var(--input-text-icon); - - .str-chat__form-text-input--error & { - color: var(--accent-error); - } - } +.str-chat__form-text-input:focus-within.str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside + .str-chat__form-text-input__wrapper--ghost { + border: none; + box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff); +} - &__message { - display: flex; - align-items: center; - gap: var(--spacing-xxs); - line-height: var(--typography-line-height-tight); - - /* Base typography/color only when not error (error uses str-chat__form-field-error) */ - &:not(.str-chat__form-field-error) { - font-size: var(--typography-font-size-xs); - color: var(--text-tertiary); - } - - &--success { - color: var(--accent-success); - } - } +// --------------------------------------------------------------------------- +// Shared: leading, input, suffix, trailing, message +// --------------------------------------------------------------------------- +.str-chat__form-text-input__leading { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: var(--input-text-icon); +} + +.str-chat__form-text-input .str-chat__form-text-input__input { + flex: 1; + min-width: 0; + padding: 0; + font: var(--str-chat__caption-default-text); + color: var(--input-text-default); + 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(--input-text-placeholder); +} + +.str-chat__form-text-input.str-chat__form-text-input--disabled + .str-chat__form-text-input__input { + color: var(--input-text-placeholder); + cursor: not-allowed; +} + +.str-chat__form-text-input.str-chat__form-text-input--disabled + .str-chat__form-text-input__input::placeholder { + color: var(--input-text-placeholder); +} + +.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; +} + +.str-chat__form-text-input__suffix { + flex-shrink: 0; + font-size: var(--typography-font-size-sm); + line-height: var(--typography-line-height-normal); + color: var(--text-tertiary); +} + +.str-chat__form-text-input__trailing { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + margin-inline-end: calc(-1 * var(--space-4)); + color: var(--input-text-icon); +} + +.str-chat__form-text-input--error .str-chat__form-text-input__trailing { + color: var(--accent-error); +} + +.str-chat__form-text-input__message { + display: flex; + align-items: center; + gap: var(--spacing-xxs); + font: var(--str-chat__metadata-default-text); +} + +/* Base typography/color only when not error (error uses str-chat__form-field-error) */ +.str-chat__form-text-input__message:not(.str-chat__form-field-error) { + color: var(--text-tertiary); +} + +.str-chat__form-text-input__message--field-message-inside { + padding: var(--spacing-none) var(--spacing-sm) var(--spacing-sm); +} + +.str-chat__form-text-input__message--success { + color: var(--accent-success); +} + +.str-chat__form-text-input__message-text { + min-width: 0; + flex: 1 1 auto; +} + +.str-chat__form-text-input__message-icon { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: inherit; - .str-chat__form-text-input__message-icon { - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - color: inherit; + svg { + height: 13px; + width: 13px; } } diff --git a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx index 01792040f..3f4f806d8 100644 --- a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx +++ b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx @@ -68,6 +68,7 @@ export const OptionFieldSet = () => { : undefined @@ -115,7 +116,7 @@ const RemoveOptionButton = ({ className, ...props }: ButtonProps) => ( appearance='ghost' circular className={clsx('str-chat__form__remove-option-button', className)} - size='sm' + size='xs' variant='secondary' {...props} > diff --git a/src/components/Poll/styling/OptionFieldSet.scss b/src/components/Poll/styling/OptionFieldSet.scss new file mode 100644 index 000000000..fe829f99e --- /dev/null +++ b/src/components/Poll/styling/OptionFieldSet.scss @@ -0,0 +1,9 @@ +.str-chat__form__input-fieldset { + .str-chat__form__input-field { + .str-chat__form__input-field__value { + .str-chat__form__remove-option-button { + color: var(--input-text-icon); + } + } + } +} \ No newline at end of file diff --git a/src/components/Poll/styling/index.scss b/src/components/Poll/styling/index.scss index 10df95035..d3c7464cd 100644 --- a/src/components/Poll/styling/index.scss +++ b/src/components/Poll/styling/index.scss @@ -1,5 +1,6 @@ @use 'AddCommentPrompt'; @use 'EndPollAlert'; +@use 'OptionFieldSet'; @use 'Poll'; @use 'PollAnswerList'; @use 'PollCreationDialog'; From b79ecf2a4ea9a3dee049beb553d68638897aa357 Mon Sep 17 00:00:00 2001 From: martincupela Date: Wed, 15 Apr 2026 09:33:18 +0200 Subject: [PATCH 5/7] fix: use correct border for voice recording speed button --- src/components/AudioPlayback/styling/PlaybackRateButton.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AudioPlayback/styling/PlaybackRateButton.scss b/src/components/AudioPlayback/styling/PlaybackRateButton.scss index af8fa7e4f..3f8d1e6bf 100644 --- a/src/components/AudioPlayback/styling/PlaybackRateButton.scss +++ b/src/components/AudioPlayback/styling/PlaybackRateButton.scss @@ -12,7 +12,7 @@ padding: var(--button-padding-y-sm) var(--spacing-xs); background-color: inherit; border-radius: var(--button-radius-lg); - border: 1px solid var(--control-playback-toggle-border); + border: 1px solid var(--chat-border-on-chat-incoming); color: var(--control-playback-toggle-text, var(--text-primary)); font: var(--str-chat__metadata-emphasis-text); From a65ba7b3257f9061b1ac13df75de26b4ab84c02d Mon Sep 17 00:00:00 2001 From: martincupela Date: Wed, 15 Apr 2026 10:43:54 +0200 Subject: [PATCH 6/7] style: fix linter issues --- src/components/Poll/styling/OptionFieldSet.scss | 2 +- src/components/Poll/styling/PollOptionList.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Poll/styling/OptionFieldSet.scss b/src/components/Poll/styling/OptionFieldSet.scss index fe829f99e..28d972c5a 100644 --- a/src/components/Poll/styling/OptionFieldSet.scss +++ b/src/components/Poll/styling/OptionFieldSet.scss @@ -6,4 +6,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/components/Poll/styling/PollOptionList.scss b/src/components/Poll/styling/PollOptionList.scss index 92c402200..cb7699d46 100644 --- a/src/components/Poll/styling/PollOptionList.scss +++ b/src/components/Poll/styling/PollOptionList.scss @@ -102,4 +102,4 @@ border: 1px solid var(--chat-border-on-chat-outgoing); } } -} \ No newline at end of file +} From bf53ea9b448d924d63946ee80b6f9e4fe168df15 Mon Sep 17 00:00:00 2001 From: martincupela Date: Wed, 15 Apr 2026 10:54:06 +0200 Subject: [PATCH 7/7] fix: apply dark background in dark mode --- examples/vite/src/index.scss | 1 + src/components/ChatView/styling/ChatView.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss index 96e91598f..301e9039d 100644 --- a/examples/vite/src/index.scss +++ b/examples/vite/src/index.scss @@ -37,6 +37,7 @@ body { min-height: 0; height: 100%; width: 100%; + background: var(--str-chat__background-color); } /* Fills viewport minus in-flow `.str-chat__system-notification` when present */ diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss index fc28c7a0a..5e31cfebf 100644 --- a/src/components/ChatView/styling/ChatView.scss +++ b/src/components/ChatView/styling/ChatView.scss @@ -20,6 +20,7 @@ height: 100%; min-height: 0; position: relative; + background-color: var(--str-chat__background-color); .str-chat__chat-view__selector { display: flex;