button: Fix Button click prevent_default.

Use icon in title_bar for switch theme, and add github icon.

crates/app/src/story_workspace.rs

@@ -9,9 +9,9 @@ use workspace::{TitleBar, Workspace};
 
 use std::sync::Arc;
 use ui::{
-    switch::{LabelSide, Switch},
+    button::{Button, ButtonStyle},
     theme::{ActiveTheme, Theme},
-    Size,
+    Clickable as _, IconName, Size,
 };
 
 use crate::app_state::AppState;
@@ -275,20 +275,33 @@ impl Render for StoryWorkspace {
                             .justify_end()
                             .px_2()
                             .mr_3()
+                            .gap_2()
                             .child(
-                                Switch::new("theme-mode")
+                                Button::new("theme-mode", cx)
+                                    .when_else(
+                                        cx.theme().mode.is_dark(),
+                                        |this| this.icon(IconName::Moon),
+                                        |this| this.icon(IconName::Sun),
+                                    )
                                     .size(Size::Small)
-                                    .checked(cx.theme().mode.is_dark())
-                                    .label_side(LabelSide::Left)
-                                    .label("Dark Mode")
-                                    .on_click(move |checked, cx| {
-                                        let mode = match checked {
-                                            true => ui::theme::ThemeMode::Dark,
-                                            false => ui::theme::ThemeMode::Light,
+                                    .style(ButtonStyle::Ghost)
+                                    .on_click(move |_, cx| {
+                                        let mode = match cx.theme().mode.is_dark() {
+                                            true => ui::theme::ThemeMode::Light,
+                                            false => ui::theme::ThemeMode::Dark,
                                         };
 
                                         Theme::change(mode, cx);
                                     }),
+                            )
+                            .child(
+                                Button::new("github", cx)
+                                    .icon(IconName::GitHub)
+                                    .size(Size::Small)
+                                    .style(ButtonStyle::Ghost)
+                                    .on_click(|_, cx| {
+                                        cx.open_url("https://github.com/huacnlee/gpui-component")
+                                    }),
                             ),
                     ),
             )

crates/ui/src/button.rs

@@ -245,12 +245,13 @@ impl RenderOnce for Button {
             .when_some(
                 self.on_click.filter(|_| !self.disabled),
                 |this, on_click| {
-                    this.on_mouse_down(MouseButton::Left, |_, cx| cx.stop_propagation())
-                        .on_click(move |event, cx| {
-                            cx.prevent_default();
-                            cx.stop_propagation();
-                            (on_click)(event, cx)
-                        })
+                    this.on_mouse_down(MouseButton::Left, |_, cx| {
+                        cx.prevent_default();
+                        cx.stop_propagation()
+                    })
+                    .on_click(move |event, cx| {
+                        (on_click)(event, cx);
+                    })
                 },
             )
             .when(self.disabled, |this| {

crates/ui/src/icon.rs

@@ -14,8 +14,8 @@ pub enum IconName {
     ChevronDown,
     ChevronLeft,
     ChevronRight,
-    ChevronUp,
     ChevronsUpDown,
+    ChevronUp,
     CircleX,
     Close,
     Dash,
@@ -24,6 +24,7 @@ pub enum IconName {
     EllipsisVertical,
     Eye,
     EyeOff,
+    GitHub,
     Heart,
     HeartOff,
     Inbox,
@@ -33,12 +34,14 @@ pub enum IconName {
     Maximize,
     Minimize,
     Minus,
+    Moon,
     Plus,
     Search,
-    Star,
-    StarOff,
     SortAscending,
     SortDescending,
+    Star,
+    StarOff,
+    Sun,
     ThumbsDown,
     ThumbsUp,
 }
@@ -54,8 +57,8 @@ impl IconName {
             IconName::ChevronDown => "icons/chevron-down.svg",
             IconName::ChevronLeft => "icons/chevron-left.svg",
             IconName::ChevronRight => "icons/chevron-right.svg",
-            IconName::ChevronUp => "icons/chevron-up.svg",
             IconName::ChevronsUpDown => "icons/chevrons-up-down.svg",
+            IconName::ChevronUp => "icons/chevron-up.svg",
             IconName::CircleX => "icons/circle-x.svg",
             IconName::Close => "icons/close.svg",
             IconName::Dash => "icons/dash.svg",
@@ -64,6 +67,7 @@ impl IconName {
             IconName::EllipsisVertical => "icons/ellipsis-vertical.svg",
             IconName::Eye => "icons/eye.svg",
             IconName::EyeOff => "icons/eye-off.svg",
+            IconName::GitHub => "icons/github.svg",
             IconName::Heart => "icons/heart.svg",
             IconName::HeartOff => "icons/heart-off.svg",
             IconName::Inbox => "icons/inbox.svg",
@@ -73,12 +77,14 @@ impl IconName {
             IconName::Maximize => "icons/maximize.svg",
             IconName::Minimize => "icons/minimize.svg",
             IconName::Minus => "icons/minus.svg",
+            IconName::Moon => "icons/moon.svg",
             IconName::Plus => "icons/plus.svg",
             IconName::Search => "icons/search.svg",
-            IconName::Star => "icons/star.svg",
-            IconName::StarOff => "icons/star-off.svg",
             IconName::SortAscending => "icons/sort-ascending.svg",
             IconName::SortDescending => "icons/sort-descending.svg",
+            IconName::Star => "icons/star.svg",
+            IconName::StarOff => "icons/star-off.svg",
+            IconName::Sun => "icons/sun.svg",
             IconName::ThumbsDown => "icons/thumbs-down.svg",
             IconName::ThumbsUp => "icons/thumbs-up.svg",
         }