fix(settings - drawer): icon button widget color; cleanup comments

Author: swetar-mecha

shell/crates/settings_drawer/src/ui/mod.rs

@@ -129,7 +129,6 @@ impl Render for SettingsDrawer {
                             .icon(IconName::Settings)
                             .icon_color(rgb(0xF4F4F4))
                             .size((px(24.), px(24.)))
-                            // .bg_color(rgb(0x101010))
                             .border(px(0.))
                             .on_click(cx.listener(|_, _, _, _| {
                                 println!("settings clicked");
@@ -157,7 +156,6 @@ impl Render for SettingsDrawer {
                             .icon(IconName::Power)
                             .icon_color(rgb(0xF4F4F4))
                             .size((px(24.), px(24.)))
-                            // .bg_color(rgb(0x101010))
                             .border(px(0.))
                             .on_click(cx.listener(|_, _, _, _| {
                                 println!("power clicked");
@@ -178,7 +176,6 @@ impl Render for SettingsDrawer {
                         IconButton::new("id_rotation")
                             .icon(rotation_icon)
                             .active(self.rotation_on)
-                            // .icon_color(rotation_icon_color)
                             .on_click(cx.listener(
                                 |this: &mut SettingsDrawer,
                                  _event: &ClickEvent,
@@ -211,7 +208,6 @@ impl Render for SettingsDrawer {
                         IconButton::new("id_screen_mirroring")
                             .icon(screen_mirroring_icon)
                             .active(self.screen_mirrorring)
-                            // .icon_color(screen_mirroring_icon_color)
                             .on_click(cx.listener(
                                 |this: &mut SettingsDrawer,
                                  _event: &ClickEvent,
@@ -326,7 +322,6 @@ impl Render for SettingsDrawer {
                                             .icon(IconName::BrightnessHigh)
                                             .icon_color(rgb(0xF4F4F4))
                                             .size((px(36.), px(36.)))
-                                            // .bg_color(rgb(0x202020))
                                             .border(px(0.))
                                             .on_click(cx.listener(|_, _, _, _| {
                                                 println!("brightness clicked");
@@ -369,7 +364,6 @@ impl Render for SettingsDrawer {
                                             .icon(IconName::VolumeMedium)
                                             .icon_color(rgb(0xF4F4F4))
                                             .size((px(36.), px(36.)))
-                                            // .bg_color(rgb(0x202020))
                                             .border(px(0.))
                                             .on_click(cx.listener(|_, _, _, _| {
                                                 println!("volume clicked");
@@ -390,7 +384,7 @@ impl Render for SettingsDrawer {
                     .child(
                         IconButton::new("id_wireless")
                             .icon(self.wireless_details.icon.clone())
-                            .icon_color(rgb(0x4D4D4D))
+                            .icon_color(rgb(0x4D4D4D))  // changes as per wireless state
                             .size((px(104.), px(104.)))
                             .active(self.wireless_details.enalble)
                             .label("Office wifi 1")

shell/crates/settings_drawer/src/ui/widgets/icon_button.rs

@@ -3,12 +3,10 @@ use std::rc::Rc;
 use crate::ui::icon::Icon;
 use gpui::{prelude::FluentBuilder, *};
 
-use std::sync::LazyLock;
-
-pub static ICON_COLOR: LazyLock<Rgba> = LazyLock::new(|| rgb(0x4D4D4D)); // default - gray | passed-white or active - blue
-pub static ACTIVE_ICON_COLOR: LazyLock<Rgba> = LazyLock::new(|| rgb(0x4892F1));
-pub static ACTIVE_BG_COLOR: LazyLock<Rgba> = LazyLock::new(|| rgb(0x202020));
-pub static PRESSED_BG_COLOR: LazyLock<Rgba> = LazyLock::new(|| rgb(0x363636)); // default - light gray | passed - yellow - xDB9200
+const ICON_COLOR: u32 = 0x4D4D4D;               // default - gray | custom can be - white or active - blue
+const ACTIVE_ICON_COLOR: u32 = 0x4892F1;
+const ACTIVE_BG_COLOR: u32 = 0x202020;
+const PRESSED_BG_COLOR: u32 = 0x363636;         // default - light gray | custom can be - yellow - xDB9200
 
 #[derive(IntoElement)]
 pub struct IconButton {
@@ -108,37 +106,29 @@ impl RenderOnce for IconButton {
             // .opacity(0.2)
             .items_center()
             .justify_center()
-            .when(self.pressed, |this| this.bg(PRESSED_BG_COLOR.to_owned())) // BG - light gray - pressed
+            .when(self.pressed, |this| this.bg(rgb(PRESSED_BG_COLOR)))
             .when(!self.pressed && self.active, |this| {
                 if let Some(active_bg_color) = self.active_bg_color {
                     this.bg(active_bg_color)
                 } else {
-                    this.bg(ACTIVE_BG_COLOR.to_owned())
+                    this.bg(rgb(ACTIVE_BG_COLOR))
                 }
-               
-            }) // BG - dark gray - active
+            })
             .when_some(self.on_click, |this, on_click| {
                 this.on_click(move |event, window, cx| (on_click)(event, window, cx))
             })
-            // .when_some(self.icon, |this, icon| {
-            //     if let Some(icon_color) = self.icon_color {
-            //         this.child(icon.text_color(icon_color))       // passing gray for default
-            //     } else {
-            //         this.child(icon.text_color(rgb(0x4892F1)))   // blue - icon color
-            //     }
-            // })
             .when_some(self.icon, |this, icon| {
                 let color: Hsla = if self.active {
                     if let Some(active_icon_color) = self.active_icon_color {
                         active_icon_color
                     } else {
-                        ACTIVE_ICON_COLOR.to_owned().into()
+                        rgb(ACTIVE_ICON_COLOR).into()
                     }
                 } else {
                     if let Some(icon_color) = self.icon_color {
                         icon_color
                     } else {
-                        ICON_COLOR.to_owned().into()
+                        rgb(ICON_COLOR).into()
                     }
                 };
                 this.child(icon.text_color(color))