Polish styling of contacts popover

Antonio Scandurra and Nathan Sobo created 3 years ago

Co-Authored-By: Nathan Sobo <[e-mail]>

Change summary

crates/collab_ui/src/contact_list.rs    | 13 +++++--------
styles/src/styleTree/contactFinder.ts   |  6 +++---
styles/src/styleTree/contactList.ts     |  8 +++-----
styles/src/styleTree/contactsPopover.ts |  4 ++--
4 files changed, 13 insertions(+), 18 deletions(-)

Detailed changes

crates/collab_ui/src/contact_list.rs

@@ -1087,14 +1087,11 @@ impl View for ContactList {
                     )
                     .with_child(
                         MouseEventHandler::<AddContact>::new(0, cx, |_, _| {
-                            Svg::new("icons/user_plus_16.svg")
-                                .with_color(theme.contact_list.add_contact_button.color)
-                                .constrained()
-                                .with_height(16.)
-                                .contained()
-                                .with_style(theme.contact_list.add_contact_button.container)
-                                .aligned()
-                                .boxed()
+                            render_icon_button(
+                                &theme.contact_list.add_contact_button,
+                                "icons/user_plus_16.svg",
+                            )
+                            .boxed()
                         })
                         .with_cursor_style(CursorStyle::PointingHand)
                         .on_click(MouseButton::Left, |_, cx| {

styles/src/styleTree/contactFinder.ts

@@ -3,7 +3,7 @@ import picker from "./picker";
 import { backgroundColor, border, iconColor, player, text } from "./components";
 
 export default function contactFinder(theme: Theme) {
-  const sideMargin = 12;
+  const sideMargin = 6;
   const contactButton = {
     background: backgroundColor(theme, 100),
     color: iconColor(theme, "primary"),
@@ -33,8 +33,8 @@ export default function contactFinder(theme: Theme) {
           top: 4,
         },
         margin: {
-          left: 12,
-          right: 12,
+          left: sideMargin,
+          right: sideMargin,
         }
       }
     },

styles/src/styleTree/contactList.ts

@@ -53,22 +53,20 @@ export default function contactList(theme: Theme) {
         top: 4,
       },
       margin: {
-        left: sidePadding,
-        right: sidePadding,
+        left: 6
       },
     },
     userQueryEditorHeight: 33,
     addContactButton: {
-      margin: { left: 6, right: 12 },
       color: iconColor(theme, "primary"),
-      buttonWidth: 16,
+      buttonWidth: 28,
       iconWidth: 16,
     },
     rowHeight: 28,
     sectionIconSize: 8,
     headerRow: {
       ...text(theme, "mono", "secondary", { size: "sm" }),
-      margin: { top: 14 },
+      margin: { top: 6 },
       padding: {
         left: sidePadding,
         right: sidePadding,

styles/src/styleTree/contactsPopover.ts

@@ -8,7 +8,7 @@ export default function contactsPopover(theme: Theme) {
     padding: { top: 6 },
     shadow: popoverShadow(theme),
     border: border(theme, "primary"),
-    width: 250,
-    height: 300,
+    width: 300,
+    height: 400,
   }
 }