Add margin to picker in contacts popover

Antonio Scandurra created 3 years ago

Change summary

crates/collab_ui/src/contact_finder.rs | 6 +++++-
styles/src/styleTree/contactFinder.ts  | 6 +++++-
2 files changed, 10 insertions(+), 2 deletions(-)

Detailed changes

crates/collab_ui/src/contact_finder.rs

@@ -121,7 +121,11 @@ impl PickerDelegate for ContactFinder {
         } else {
             &theme.contact_finder.contact_button
         };
-        let style = theme.picker.item.style_for(mouse_state, selected);
+        let style = theme
+            .contact_finder
+            .picker
+            .item
+            .style_for(mouse_state, selected);
         Flex::row()
             .with_children(user.avatar.clone().map(|avatar| {
                 Image::new(avatar)

styles/src/styleTree/contactFinder.ts

@@ -3,6 +3,7 @@ import picker from "./picker";
 import { backgroundColor, border, iconColor, player, text } from "./components";
 
 export default function contactFinder(theme: Theme) {
+  const sideMargin = 12;
   const contactButton = {
     background: backgroundColor(theme, 100),
     color: iconColor(theme, "primary"),
@@ -13,7 +14,10 @@ export default function contactFinder(theme: Theme) {
 
   return {
     picker: {
-      item: picker(theme).item,
+      item: {
+        ...picker(theme).item,
+        margin: { left: sideMargin, right: sideMargin }
+      },
       empty: picker(theme).empty,
       inputEditor: {
         background: backgroundColor(theme, 500),