Style contacts popover background based on theme

Antonio Scandurra created 3 years ago

Change summary

crates/contacts_status_item/src/contacts_popover.rs | 6 ++++--
crates/theme/src/theme.rs                           | 6 ++++++
styles/src/styleTree/app.ts                         | 2 ++
styles/src/styleTree/contactsPopover.ts             | 8 ++++++++
4 files changed, 20 insertions(+), 2 deletions(-)

Detailed changes

crates/contacts_status_item/src/contacts_popover.rs

@@ -1,4 +1,5 @@
-use gpui::{color::Color, elements::*, Entity, RenderContext, View, ViewContext};
+use gpui::{elements::*, Entity, RenderContext, View, ViewContext};
+use settings::Settings;
 
 pub enum Event {
     Deactivated,
@@ -16,9 +17,10 @@ impl View for ContactsPopover {
     }
 
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
+        let theme = &cx.global::<Settings>().theme.contacts_popover;
         Empty::new()
             .contained()
-            .with_background_color(Color::red())
+            .with_background_color(theme.background)
             .boxed()
     }
 }

crates/theme/src/theme.rs

@@ -19,6 +19,7 @@ pub struct Theme {
     pub workspace: Workspace,
     pub context_menu: ContextMenu,
     pub chat_panel: ChatPanel,
+    pub contacts_popover: ContactsPopover,
     pub contacts_panel: ContactsPanel,
     pub contact_finder: ContactFinder,
     pub project_panel: ProjectPanel,
@@ -301,6 +302,11 @@ pub struct CommandPalette {
     pub keystroke_spacing: f32,
 }
 
+#[derive(Deserialize, Default)]
+pub struct ContactsPopover {
+    pub background: Color,
+}
+
 #[derive(Deserialize, Default)]
 pub struct ContactsPanel {
     #[serde(flatten)]

styles/src/styleTree/app.ts

@@ -3,6 +3,7 @@ import chatPanel from "./chatPanel";
 import { text } from "./components";
 import contactFinder from "./contactFinder";
 import contactsPanel from "./contactsPanel";
+import contactsPopover from "./contactsPopover";
 import commandPalette from "./commandPalette";
 import editor from "./editor";
 import projectPanel from "./projectPanel";
@@ -34,6 +35,7 @@ export default function app(theme: Theme): Object {
     commandPalette: commandPalette(theme),
     projectPanel: projectPanel(theme),
     chatPanel: chatPanel(theme),
+    contactsPopover: contactsPopover(theme),
     contactsPanel: contactsPanel(theme),
     contactFinder: contactFinder(theme),
     search: search(theme),

styles/src/styleTree/contactsPopover.ts

@@ -0,0 +1,8 @@
+import Theme from "../themes/common/theme";
+import { backgroundColor } from "./components";
+
+export default function workspace(theme: Theme) {
+  return {
+    background: backgroundColor(theme, 300),
+  }
+}