Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-04-18 07:36:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Member Labels: A few visual tweaks

Browse Source
This commit is contained in:
Scott Nonnenberg
2026-02-19 02:26:30 +10:00
committed by GitHub
parent 3ec6d86759
commit 360faed3cc
3 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
stylesheets/_mixins.scss
View File

@@ -405,13 +405,13 @@ $rtl-icon-map: (
// Individual traits
@mixin button-focus-outline {
@mixin button-focus-outline($width: 3px) {
&:focus {
@include keyboard-mode {
box-shadow: 0px 0px 0px 3px variables.$color-ultramarine;
box-shadow: 0px 0px 0px $width variables.$color-ultramarine;
}
@include dark-keyboard-mode {
box-shadow: 0px 0px 0px 3px variables.$color-ultramarine-light;
box-shadow: 0px 0px 0px $width variables.$color-ultramarine-light;
}
}
}

15
stylesheets/components/ConversationDetails.scss
View File

@@ -51,6 +51,20 @@
&-membership-list__member-label-button {
@include mixins.font-body-small;
@include mixins.button-focus-outline(2px);
@include mixins.mouse-mode {
&:hover {
background-color: light-dark(
variables.$color-gray-02,
variables.$color-gray-90
);
}
}
font-weight: 500;
outline: none;
border-radius: 5px;
display: flex;
align-items: center;
color: light-dark(
@@ -62,7 +76,6 @@
height: 16px;
width: 16px;
margin-bottom: 1px;
margin-block-start: -2px;
@include mixins.color-svg-themed(
'../images/icons/v3/chevron/chevron-right.svg',

17
ts/components/conversation/conversation-details/GroupMemberLabelEditor.dom.tsx
View File

@@ -99,17 +99,20 @@ export function GroupMemberLabelEditor({
const emojiKey = labelEmoji ? getEmojiVariantKey(labelEmoji) : null;
const [isSaving, setIsSaving] = useState(false);
const labelStringForSave = labelString ? labelString.trim() : labelString;
const isDirty =
labelEmoji !== existingLabelEmoji || labelString !== existingLabelString;
const canSave = isDirty;
labelEmoji !== existingLabelEmoji ||
labelStringForSave !== existingLabelString;
const canSave =
isDirty && ((!labelEmoji && !labelStringForSave) || labelStringForSave);
const spinner = isSaving
? {
'aria-label': i18n('icu:ConversationDetails--member-label--saving'),
}
: undefined;
const contactLabelForMessage = labelString?.trim()
? { labelEmoji, labelString: labelString.trim() }
const contactLabelForMessage = labelStringForSave
? { labelEmoji, labelString: labelStringForSave }
: undefined;
useEffect(() => {
@@ -173,7 +176,7 @@ export function GroupMemberLabelEditor({
</div>
<div
className={tw(
'mt-5 rounded-[27px] bg-fill-primary-pressed px-2 pt-[47px] pb-6'
'mt-2.5 rounded-[27px] bg-fill-primary-pressed px-2 py-6'
)}
ref={messageContainer}
>
@@ -252,7 +255,7 @@ export function GroupMemberLabelEditor({
</div>
<div>
{membersWithLabel.length === 0 && (
<div className={tw('mt-2 type-body-medium text-label-secondary')}>
<div className={tw('type-body-medium text-label-secondary')}>
{i18n('icu:ConversationDetails--member-label--no-members')}
</div>
)}
@@ -346,7 +349,7 @@ export function GroupMemberLabelEditor({
{
conversationId: group.id,
labelEmoji,
labelString: labelString?.trim(),
labelString: labelStringForSave,
},
{
onSuccess() {