From beffe6f6a9c1bcef9565cc7bbe3eb8eb871c94b0 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 9 Aug 2023 12:44:34 -0400
Subject: [PATCH] WIP BROKEN

---
 crates/collab_ui/src/collab_panel.rs  | 21 +++++++++++++++------
 crates/theme/src/theme.rs             |  6 +++---
 styles/src/style_tree/collab_panel.ts | 15 ++-------------
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/crates/collab_ui/src/collab_panel.rs b/crates/collab_ui/src/collab_panel.rs
index b3b43dbabe..c934313621 100644
--- a/crates/collab_ui/src/collab_panel.rs
+++ b/crates/collab_ui/src/collab_panel.rs
@@ -1103,9 +1103,12 @@ impl CollabPanel {
         enum AddContact {}
         let button = match section {
             Section::ActiveCall => Some(
-                MouseEventHandler::<AddContact, Self>::new(0, cx, |_, _| {
+                MouseEventHandler::<AddContact, Self>::new(0, cx, |state, _| {
                     render_icon_button(
-                        theme.collab_panel.leave_call_button.in_state(is_selected),
+                        theme
+                            .collab_panel
+                            .leave_call_button
+                            .style_for(is_selected, state),
                         "icons/radix/exit.svg",
                     )
                 })
@@ -1122,9 +1125,12 @@ impl CollabPanel {
                 ),
             ),
             Section::Contacts => Some(
-                MouseEventHandler::<LeaveCallContactList, Self>::new(0, cx, |_, _| {
+                MouseEventHandler::<LeaveCallContactList, Self>::new(0, cx, |state, _| {
                     render_icon_button(
-                        theme.collab_panel.add_contact_button.in_state(is_selected),
+                        theme
+                            .collab_panel
+                            .add_contact_button
+                            .style_for(is_selected, state),
                         "icons/plus_16.svg",
                     )
                 })
@@ -1141,9 +1147,12 @@ impl CollabPanel {
                 ),
             ),
             Section::Channels => Some(
-                MouseEventHandler::<AddChannel, Self>::new(0, cx, |_, _| {
+                MouseEventHandler::<AddChannel, Self>::new(0, cx, |state, _| {
                     render_icon_button(
-                        theme.collab_panel.add_contact_button.in_state(is_selected),
+                        theme
+                            .collab_panel
+                            .add_contact_button
+                            .style_for(is_selected, state),
                         "icons/plus_16.svg",
                     )
                 })
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index cf8da6233a..1756f91fb8 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -226,9 +226,9 @@ pub struct CollabPanel {
     pub channel_modal: ChannelModal,
     pub user_query_editor: FieldEditor,
     pub user_query_editor_height: f32,
-    pub leave_call_button: Toggleable<IconButton>,
-    pub add_contact_button: Toggleable<IconButton>,
-    pub add_channel_button: Toggleable<IconButton>,
+    pub leave_call_button: Toggleable<Interactive<IconButton>>,
+    pub add_contact_button: Toggleable<Interactive<IconButton>>,
+    pub add_channel_button: Toggleable<Interactive<IconButton>>,
     pub header_row: ContainedText,
     pub subheader_row: Toggleable<Interactive<ContainedText>>,
     pub leave_call: Interactive<ContainedText>,
diff --git a/styles/src/style_tree/collab_panel.ts b/styles/src/style_tree/collab_panel.ts
index a859f6d670..fd6e75d9ec 100644
--- a/styles/src/style_tree/collab_panel.ts
+++ b/styles/src/style_tree/collab_panel.ts
@@ -8,6 +8,7 @@ import {
 import { interactive, toggleable } from "../element"
 import { useTheme } from "../theme"
 import channel_modal from "./channel_modal"
+import { icon_button, toggleable_icon_button } from "../component/icon_button"
 
 
 export default function contacts_panel(): any {
@@ -51,19 +52,7 @@ export default function contacts_panel(): any {
         },
     }
 
-    const headerButton = toggleable({
-        base: {
-            color: foreground(layer, "on"),
-            button_width: 28,
-            icon_width: 16,
-        },
-        state: {
-            active: {
-                background: background(layer, "active"),
-                corner_radius: 8,
-            }
-        }
-    })
+    const headerButton = toggleable_icon_button(theme, {})
 
     return {
         channel_modal: channel_modal(),