diff --git a/kit/src/layout/modal/style.scss b/kit/src/layout/modal/style.scss index 13e0f722c1f..685c1b54c1e 100644 --- a/kit/src/layout/modal/style.scss +++ b/kit/src/layout/modal/style.scss @@ -13,8 +13,8 @@ .close-btn { position: absolute; - top: var(--gap-less); - left: var(--gap-less); + top: var(--gap); + left: var(--gap); visibility: hidden; display: inline-block; } diff --git a/ui/src/components/friends/friends_list/mod.rs b/ui/src/components/friends/friends_list/mod.rs index 9047398f882..bcec2698aff 100644 --- a/ui/src/components/friends/friends_list/mod.rs +++ b/ui/src/components/friends/friends_list/mod.rs @@ -509,38 +509,41 @@ pub fn ShareFriendsModal(cx: Scope) -> Element { let selected = chats_selected.read().contains(&id); rsx!(div { class: format_args!("modal-share-friend {}", if selected {"share-friend-selected"} else {""}), - Checkbox { - disabled: false, - width: "1em".into(), - height: "1em".into(), - is_checked: selected, - on_click: move |_| { - chats_selected.with_mut(|v|{ - if !selected { - v.push(id); - } else { - v.retain(|c|!c.eq(&id)); - } - }); - } - } User { username: participants_name, subtext: subtext_val, timestamp: raygun::Message::default().date(), active: false, user_image: cx.render(rsx!( - match chat.conversation_type { - ConversationType::Direct => rsx!(UserImage { - platform: platform, - status: user.identity_status().into(), - image: user.profile_picture(), - typing: false, - }), - _ => rsx!(UserImageGroup { - participants: build_participants(&participants), - typing: false, - }) + div { + class: "modal-share-friend-image-group", + Checkbox { + disabled: false, + width: "1em".into(), + height: "1em".into(), + is_checked: selected, + on_click: move |_| { + chats_selected.with_mut(|v|{ + if !selected { + v.push(id); + } else { + v.retain(|c|!c.eq(&id)); + } + }); + } + }, + match chat.conversation_type { + ConversationType::Direct => rsx!(UserImage { + platform: platform, + status: user.identity_status().into(), + image: user.profile_picture(), + typing: false, + }), + _ => rsx!(UserImageGroup { + participants: build_participants(&participants), + typing: false, + }) + } } )), onpress: move |_| { diff --git a/ui/src/components/friends/style.scss b/ui/src/components/friends/style.scss index 776a5a15610..6e3762a3e3e 100644 --- a/ui/src/components/friends/style.scss +++ b/ui/src/components/friends/style.scss @@ -99,6 +99,13 @@ .user { height: calc(3.5 * var(--text-size)); } + .modal-share-friend-image-group { + display: flex; + flex-direction: row; + gap: var(--gap); + height: fit-content; + align-items: center; + } } } diff --git a/ui/src/layouts/storage/send_files_layout/mod.rs b/ui/src/layouts/storage/send_files_layout/mod.rs index 2815e7054c2..5a64edc505a 100644 --- a/ui/src/layouts/storage/send_files_layout/mod.rs +++ b/ui/src/layouts/storage/send_files_layout/mod.rs @@ -162,38 +162,41 @@ fn ChatsToSelect<'a>(cx: Scope<'a, ChatsToSelectProps<'a>>) -> Element<'a> { rsx!(div { id: "chat-selector-to-send-files", - Checkbox { - disabled: false, - width: "1em".into(), - height: "1em".into(), - is_checked: is_checked, - on_click: move |_| { - if is_checked { - cx.props.storage_controller.with_mut(|f| f.chats_selected_to_send.retain(|uuid| chat.id != *uuid)); - } else { - cx.props.storage_controller.with_mut(|f| f.chats_selected_to_send.push(chat.id)); - } - } - } User { username: participants_name, subtext: subtext_val, timestamp: raygun::Message::default().date(), active: false, user_image: cx.render(rsx!( - if chat.conversation_type == ConversationType::Direct {rsx! ( - UserImage { - platform: platform, - status: user.identity_status().into(), - image: user.profile_picture(), - typing: false, + div { + class: "chat-selector-to-send-image-group", + Checkbox { + disabled: false, + width: "1em".into(), + height: "1em".into(), + is_checked: is_checked, + on_click: move |_| { + if is_checked { + cx.props.storage_controller.with_mut(|f| f.chats_selected_to_send.retain(|uuid| chat.id != *uuid)); + } else { + cx.props.storage_controller.with_mut(|f| f.chats_selected_to_send.push(chat.id)); + } + } } - )} else {rsx! ( - UserImageGroup { - participants: build_participants(&participants), - typing: false, - } - )} + if chat.conversation_type == ConversationType::Direct {rsx! ( + UserImage { + platform: platform, + status: user.identity_status().into(), + image: user.profile_picture(), + typing: false, + } + )} else {rsx! ( + UserImageGroup { + participants: build_participants(&participants), + typing: false, + } + )} + } )), with_badge: "".into(), onpress: move |_| { diff --git a/ui/src/layouts/storage/send_files_layout/style.scss b/ui/src/layouts/storage/send_files_layout/style.scss index a2889d2b5e0..249dff0edff 100644 --- a/ui/src/layouts/storage/send_files_layout/style.scss +++ b/ui/src/layouts/storage/send_files_layout/style.scss @@ -1,8 +1,15 @@ #chat-selector-to-send-files { - padding: 16px; + padding: var(--padding-less) 16px; display: inline-flex; gap: var(--gap-less); .user { height: calc(3.5 * var(--text-size)); } + .chat-selector-to-send-image-group { + display: flex; + flex-direction: row; + gap: var(--gap); + height: fit-content; + align-items: center; + } } \ No newline at end of file