task(improvements): Improve chat modal styles (#1903)

Satellite-im · Mar 6, 2024 · 4c69090 · 4c69090
1 parent 2e23bfa
commit 4c69090
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 54 deletions.
diff --git 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
@@ -509,38 +509,41 @@ pub fn ShareFriendsModal(cx: Scope<FriendProps>) -> 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
@@ -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
@@ -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
@@ -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;
+    }
   }