From 43127384c6ffddf0338dbfc7d93e825ac6132ad3 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 16 Aug 2023 13:48:12 -0400
Subject: [PATCH] Update modal icon styles

Co-Authored-By: Max Brunsfeld <maxbrunsfeld@gmail.com>
---
 assets/icons/ellipsis.svg                     |  5 ++++
 .../src/collab_panel/channel_modal.rs         | 21 +++++++++----
 crates/theme/src/theme.rs                     |  4 +--
 styles/src/style_tree/collab_modals.ts        | 30 +++++--------------
 4 files changed, 30 insertions(+), 30 deletions(-)
 create mode 100644 assets/icons/ellipsis.svg

diff --git a/assets/icons/ellipsis.svg b/assets/icons/ellipsis.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1858c655202cf6940c90278b43241bb1cabc32ac
--- /dev/null
+++ b/assets/icons/ellipsis.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="1" fill="black"/>
+<circle cx="11" cy="7" r="1" fill="black"/>
+<circle cx="3" cy="7" r="1" fill="black"/>
+</svg>
diff --git a/crates/collab_ui/src/collab_panel/channel_modal.rs b/crates/collab_ui/src/collab_panel/channel_modal.rs
index 3e4f274f234494e47660d9b7b51aadb6b7f6a4ca..75ab40be85adb1e1df7678cf292c4c177237db0c 100644
--- a/crates/collab_ui/src/collab_panel/channel_modal.rs
+++ b/crates/collab_ui/src/collab_panel/channel_modal.rs
@@ -423,30 +423,39 @@ impl PickerDelegate for ChannelModalDelegate {
             .with_children({
                 let svg = match self.mode {
                     Mode::ManageMembers => Some(
-                        Svg::new("icons/ellipsis_14.svg")
+                        Svg::new("icons/ellipsis.svg")
                             .with_color(theme.member_icon.color)
                             .constrained()
-                            .with_width(theme.member_icon.width)
+                            .with_width(theme.member_icon.icon_width)
                             .aligned()
+                            .constrained()
+                            .with_width(theme.member_icon.button_width)
+                            .with_height(theme.member_icon.button_width)
                             .contained()
                             .with_style(theme.member_icon.container),
                     ),
                     Mode::InviteMembers => match request_status {
                         Some(proto::channel_member::Kind::Member) => Some(
-                            Svg::new("icons/check_8.svg")
+                            Svg::new("icons/check.svg")
                                 .with_color(theme.member_icon.color)
                                 .constrained()
-                                .with_width(theme.member_icon.width)
+                                .with_width(theme.member_icon.icon_width)
                                 .aligned()
+                                .constrained()
+                                .with_width(theme.member_icon.button_width)
+                                .with_height(theme.member_icon.button_width)
                                 .contained()
                                 .with_style(theme.member_icon.container),
                         ),
                         Some(proto::channel_member::Kind::Invitee) => Some(
-                            Svg::new("icons/check_8.svg")
+                            Svg::new("icons/check.svg")
                                 .with_color(theme.invitee_icon.color)
                                 .constrained()
-                                .with_width(theme.invitee_icon.width)
+                                .with_width(theme.invitee_icon.icon_width)
                                 .aligned()
+                                .constrained()
+                                .with_width(theme.invitee_icon.button_width)
+                                .with_height(theme.invitee_icon.button_width)
                                 .contained()
                                 .with_style(theme.invitee_icon.container),
                         ),
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 912ca0e8b87bc5b55307d3a9f549341bc4bdf80a..69fa7a09b3efa908b2da9a8a89e9fa533aba9505 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -276,8 +276,8 @@ pub struct ChannelModal {
     pub contact_username: ContainerStyle,
     pub remove_member_button: ContainedText,
     pub cancel_invite_button: ContainedText,
-    pub member_icon: Icon,
-    pub invitee_icon: Icon,
+    pub member_icon: IconButton,
+    pub invitee_icon: IconButton,
     pub member_tag: ContainedText,
 }
 
diff --git a/styles/src/style_tree/collab_modals.ts b/styles/src/style_tree/collab_modals.ts
index c0bf358e71624fc7d4aa6a6e26c57042d1e861ee..4bdeb45f9c9c025258676af44b661be06ca3521e 100644
--- a/styles/src/style_tree/collab_modals.ts
+++ b/styles/src/style_tree/collab_modals.ts
@@ -4,6 +4,7 @@ import picker from "./picker"
 import { input } from "../component/input"
 import contact_finder from "./contact_finder"
 import { tab } from "../component/tab"
+import { icon_button } from "../component/icon_button"
 
 export default function channel_modal(): any {
     const theme = useTheme()
@@ -26,6 +27,11 @@ export default function channel_modal(): any {
 
     const picker_input = input()
 
+    const member_icon_style = icon_button({
+        variant: "ghost",
+        size: "sm",
+    }).default
+
     return {
         contact_finder: contact_finder(),
         tabbed_modal: {
@@ -93,29 +99,9 @@ export default function channel_modal(): any {
         },
         channel_modal: {
             // This is used for the icons that are rendered to the right of channel Members in both UIs
-            member_icon: {
-                background: background(theme.middle),
-                padding: {
-                    bottom: 4,
-                    left: 4,
-                    right: 4,
-                    top: 4,
-                },
-                width: 5,
-                color: foreground(theme.middle, "accent"),
-            },
+            member_icon: member_icon_style,
             // This is used for the icons that are rendered to the right of channel invites in both UIs
-            invitee_icon: {
-                background: background(theme.middle),
-                padding: {
-                    bottom: 4,
-                    left: 4,
-                    right: 4,
-                    top: 4,
-                },
-                width: 5,
-                color: foreground(theme.middle, "accent"),
-            },
+            invitee_icon: member_icon_style,
             remove_member_button: {
                 ...text(theme.middle, "sans", { size: "xs" }),
                 background: background(theme.middle),