From 5207f583271fa2ee80b7f93de203eb1e8a1b6657 Mon Sep 17 00:00:00 2001 From: automated-signal <37887102+automated-signal@users.noreply.github.com> Date: Thu, 5 Mar 2026 13:16:17 -0600 Subject: [PATCH] View Once UI Updates Co-authored-by: yash-signal --- stylesheets/components/AudioCapture.scss | 16 +-- .../components/MediaQualitySelector.scss | 3 +- stylesheets/components/fun/FunButton.scss | 4 +- ts/axo/AxoIconButton.dom.tsx | 3 + ts/axo/AxoSymbol.dom.tsx | 20 ++- ts/components/CompositionInput.dom.tsx | 1 + ts/components/MediaEditor.dom.tsx | 1 + ts/components/MediaQualitySelector.dom.tsx | 135 ++++++++++-------- 8 files changed, 102 insertions(+), 81 deletions(-) diff --git a/stylesheets/components/AudioCapture.scss b/stylesheets/components/AudioCapture.scss index 2a53548101..e0c3cfa58d 100644 --- a/stylesheets/components/AudioCapture.scss +++ b/stylesheets/components/AudioCapture.scss @@ -40,18 +40,10 @@ height: 20px; width: 20px; - @include mixins.light-theme { - @include mixins.color-svg( - '../images/icons/v3/mic/mic.svg', - variables.$color-gray-75 - ); - } - @include mixins.dark-theme { - @include mixins.color-svg( - '../images/icons/v3/mic/mic.svg', - variables.$color-gray-15 - ); - } + @include mixins.color-svg( + '../images/icons/v3/mic/mic.svg', + var(--color-label-primary) + ); } } diff --git a/stylesheets/components/MediaQualitySelector.scss b/stylesheets/components/MediaQualitySelector.scss index d89ef11fc7..36395055ec 100644 --- a/stylesheets/components/MediaQualitySelector.scss +++ b/stylesheets/components/MediaQualitySelector.scss @@ -8,6 +8,7 @@ &__popper { @include mixins.module-composition-popper; & { + color: var(--color-label-primary); padding-block: 12px; padding-inline: 16px; width: auto; @@ -42,7 +43,7 @@ &--selected { @include mixins.color-svg( '../images/icons/v3/check/check-compact.svg', - variables.$color-ultramarine + currentColor ); } diff --git a/stylesheets/components/fun/FunButton.scss b/stylesheets/components/fun/FunButton.scss index 9184b51c88..b4519c54f2 100644 --- a/stylesheets/components/fun/FunButton.scss +++ b/stylesheets/components/fun/FunButton.scss @@ -39,13 +39,13 @@ .FunButton__Icon--EmojiPicker { @include mixins.color-svg( '../images/icons/v3/emoji/emoji.svg', - light-dark(variables.$color-gray-75, variables.$color-gray-15) + var(--color-label-primary) ); } .FunButton__Icon--StickerPicker { @include mixins.color-svg( '../images/icons/v3/sticker/sticker.svg', - light-dark(variables.$color-gray-75, variables.$color-gray-15) + var(--color-label-primary) ); } diff --git a/ts/axo/AxoIconButton.dom.tsx b/ts/axo/AxoIconButton.dom.tsx index ab7825890a..889cd3bd07 100644 --- a/ts/axo/AxoIconButton.dom.tsx +++ b/ts/axo/AxoIconButton.dom.tsx @@ -112,6 +112,7 @@ export namespace AxoIconButton { variant: Variant; size: Size; symbol: AxoSymbol.IconName; + iconWeight?: AxoSymbol.Weight; experimentalSpinner?: { 'aria-label': string } | null; @@ -130,6 +131,7 @@ export namespace AxoIconButton { variant, size, symbol, + iconWeight, experimentalSpinner, ...rest } = props; @@ -166,6 +168,7 @@ export namespace AxoIconButton { size={Sizes[size].iconSize} symbol={symbol} label={null} + weight={iconWeight} /> {experimentalSpinner != null && ( diff --git a/ts/axo/AxoSymbol.dom.tsx b/ts/axo/AxoSymbol.dom.tsx index 4b1e2727f0..50b84e2b45 100644 --- a/ts/axo/AxoSymbol.dom.tsx +++ b/ts/axo/AxoSymbol.dom.tsx @@ -4,6 +4,7 @@ import type { FC } from 'react'; import React, { memo, useMemo } from 'react'; import { Direction } from 'radix-ui'; import { VisuallyHidden } from 'react-aria'; +import type { TailwindStyles } from './tw.dom.js'; import { tw } from './tw.dom.js'; import { getAxoSymbolIcon, @@ -21,15 +22,22 @@ const Namespace = 'AxoSymbol'; export namespace AxoSymbol { const symbolStyles = tw('font-symbols select-none'); const labelStyles = tw('select-none'); + export type Weight = 300 | 400 | 700; + const WeightStyles = { + 300: tw('font-light'), + 400: tw(), + 700: tw('font-semibold'), + } as const satisfies Record; function useRenderSymbol( glyph: string, - label: string | null + label: string | null, + weight: Weight ): React.JSX.Element { return useMemo(() => { return ( <> - + {glyph} {label != null && ( @@ -37,7 +45,7 @@ export namespace AxoSymbol { )} ); - }, [glyph, label]); + }, [glyph, label, weight]); } /** @@ -55,7 +63,7 @@ export namespace AxoSymbol { export const InlineGlyph: FC = memo(props => { const direction = useDirection(); const glyph = getAxoSymbolInlineGlyph(props.symbol, direction); - const content = useRenderSymbol(glyph, props.label); + const content = useRenderSymbol(glyph, props.label, 400); return content; }); @@ -89,6 +97,7 @@ export namespace AxoSymbol { size: IconSize; symbol: IconName; label: string | null; + weight?: Weight; }>; const iconStyles = tw( @@ -98,8 +107,9 @@ export namespace AxoSymbol { export const Icon: FC = memo(props => { const config = IconSizes[props.size]; const direction = useDirection(); + const weight = props.weight ?? 400; const glyph = getAxoSymbolIcon(props.symbol, direction); - const content = useRenderSymbol(glyph, props.label); + const content = useRenderSymbol(glyph, props.label, weight); const style = useMemo(() => { return { diff --git a/ts/components/CompositionInput.dom.tsx b/ts/components/CompositionInput.dom.tsx index 032cb16c58..66741e893a 100644 --- a/ts/components/CompositionInput.dom.tsx +++ b/ts/components/CompositionInput.dom.tsx @@ -1084,6 +1084,7 @@ export function CompositionInput(props: Props): React.ReactElement { diff --git a/ts/components/MediaEditor.dom.tsx b/ts/components/MediaEditor.dom.tsx index 9b79bd7557..fad8cc12f2 100644 --- a/ts/components/MediaEditor.dom.tsx +++ b/ts/components/MediaEditor.dom.tsx @@ -1380,6 +1380,7 @@ export function MediaEditor({ i18n={i18n} isHighQuality={localIsHighQuality} onSelectQuality={handleSelectQuality} + theme={pickerTheme} /> )} diff --git a/ts/components/MediaQualitySelector.dom.tsx b/ts/components/MediaQualitySelector.dom.tsx index adce410c53..60af367242 100644 --- a/ts/components/MediaQualitySelector.dom.tsx +++ b/ts/components/MediaQualitySelector.dom.tsx @@ -6,6 +6,7 @@ import React, { useCallback, useRef, useState } from 'react'; import classNames from 'classnames'; import { Popover } from 'radix-ui'; import type { LocalizerType } from '../types/Util.std.js'; +import { ThemeType } from '../types/Util.std.js'; import { AxoIconButton } from '../axo/AxoIconButton.dom.js'; export type PropsType = { @@ -13,6 +14,7 @@ export type PropsType = { i18n: LocalizerType; isHighQuality: boolean; onSelectQuality: (conversationId: string, isHQ: boolean) => unknown; + theme?: ThemeType; }; export function MediaQualitySelector({ @@ -20,6 +22,7 @@ export function MediaQualitySelector({ i18n, isHighQuality, onSelectQuality, + theme, }: PropsType): React.JSX.Element { const [open, setOpen] = useState(false); const standardRef = useRef(null); @@ -56,78 +59,88 @@ export function MediaQualitySelector({ variant="borderless-secondary" size="md" symbol={isHighQuality ? 'hd' : 'hd-slash'} + iconWeight={300} label={i18n('icu:MediaQualitySelector--button')} tooltip={false} /> {open && ( - -
- {i18n('icu:MediaQualitySelector--title')} -
- - + - + + + )}