Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2025-12-20 02:08:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make AxoSymbol.Icon center in non-inline parents

Browse Source
This commit is contained in:
Jamie Kyle
2025-11-12 16:59:06 -08:00
parent 3af0bde568
commit c41efe7f59
5 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts/axo/AxoBadge.dom.tsx
View File

@@ -96,7 +96,7 @@ export namespace ExperimentalAxoBadge {
} }
if (value === 'mention') { if (value === 'mention') {
return ( return (
<span aria-hidden className={tw('leading-none')}> <span aria-hidden>
<AxoSymbol.InlineGlyph symbol="at" label={null} /> <AxoSymbol.InlineGlyph symbol="at" label={null} />
</span> </span>
); );

2
ts/axo/AxoIconButton.dom.tsx
View File

@@ -15,7 +15,7 @@ type GenericButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
export namespace AxoIconButton { export namespace AxoIconButton {
const baseStyles = tw( const baseStyles = tw(
'relative rounded-full align-top leading-none select-none', 'relative rounded-full select-none',
'outline-border-focused not-forced-colors:outline-0 not-forced-colors:focused:outline-[2.5px]', 'outline-border-focused not-forced-colors:outline-0 not-forced-colors:focused:outline-[2.5px]',
'forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText]', 'forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText]',
'forced-colors:disabled:text-[GrayText]', 'forced-colors:disabled:text-[GrayText]',

2
ts/axo/AxoSymbol.dom.stories.tsx
View File

@@ -52,7 +52,7 @@ const SymbolInfo = memo(function SymbolInfo(props: {
<span className={tw('type-caption text-label-secondary')}> <span className={tw('type-caption text-label-secondary')}>
{variant.title} {variant.title}
</span> </span>
<span className={tw('text-[20px] leading-none')}> <span className={tw('text-[20px]')}>
<Direction.Provider dir={variant.dir}> <Direction.Provider dir={variant.dir}>
<AxoSymbol.InlineGlyph <AxoSymbol.InlineGlyph
symbol={props.symbolName} symbol={props.symbolName}

2
ts/axo/AxoSymbol.dom.tsx
View File

@@ -90,7 +90,7 @@ export namespace AxoSymbol {
}>; }>;
const iconStyles = tw( const iconStyles = tw(
'inline-flex size-[1em] shrink-0 items-center justify-center align-middle' 'inline-flex size-[1em] shrink-0 items-center justify-center align-middle leading-none'
); );
export const Icon: FC<IconProps> = memo(props => { export const Icon: FC<IconProps> = memo(props => {

10
ts/components/PreferencesNotificationProfiles.dom.tsx
View File

@@ -1593,7 +1593,7 @@ function EmojiOrMoon({
return ( return (
<div <div
className={tw( className={tw(
'absolute start-1/2 top-1/2 -translate-1/2 leading-none text-color-label-primary' 'absolute start-1/2 top-1/2 -translate-1/2 text-color-label-primary'
)} )}
style={ style={
forceLightTheme forceLightTheme
@@ -2073,9 +2073,7 @@ function TimePicker({
}} }}
value={formatTimeForInput(time)} value={formatTimeForInput(time)}
> >
<DateInput <DateInput className={tw('inline-flex min-w-[5em] items-center')}>
className={tw('inline-flex min-w-[5em] items-center leading-none')}
>
{segment => { {segment => {
// We don't need the space between the time and the am/pm // We don't need the space between the time and the am/pm
if (segment.type === 'literal' && segment.text === ' ') { if (segment.type === 'literal' && segment.text === ' ') {
@@ -2103,9 +2101,7 @@ function TimePicker({
</DateInput> </DateInput>
<button <button
className={classNames( className={classNames(
tw( tw('ms-3 p-0.5 outline-0 focus-visible:bg-fill-selected'),
'ms-3 p-0.5 leading-none outline-0 focus-visible:bg-fill-selected'
),
isDisabled ? tw('text-label-placeholder') : null isDisabled ? tw('text-label-placeholder') : null
)} )}
type="button" type="button"