feat: add tab in/active, add primary button colours (#1619)

* feat: add tab in/active, add primary button colours Signed-off-by: Jakub Panek <me@panekj.dev> * fix: include svg name when unwrapping Signed-off-by: Jakub Panek <me@panekj.dev> * feat: add hover effect for source control panel Signed-off-by: Jakub Panek <me@panekj.dev> * feat: add colour preview in settings Signed-off-by: Jakub Panek <me@panekj.dev> * docs: update CHANGELOG * fix: allow message concat if it fits * fix: add theme colours for plugin name/desc/author Signed-off-by: Jakub Panek <me@panekj.dev>
2022-10-30 20:33:21 +01:00 · 2022-10-30 20:33:21 +01:00 · ab5da14aa6
parent dfb49a66e9
commit ab5da14aa6
18 changed files with 299 additions and 87 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,13 @@

 ### Features/Changes

+- [#1619](https://github.com/lapce/lapce/pull/1619):
+  - Add active/inactive tab colours
+  - Add primary button colour
+  - Replace custom drawn checkboxes with icons in source control
+  - Add hover effect in source control panel
+  - Add colour preview in settings
+- [#1619](https://github.com/lapce/lapce/pull/1619): Add active/inactive tab colours, add primary button colour, replace custom drawn checkboxes with icons in source
 - [#1617](https://github.com/lapce/lapce/pull/1617): Fixed a stack overflow that would crash lapce when attempting to sort a large number of PaletteItems
 - [#1609](https://github.com/lapce/lapce/pull/1609): Add syntax highlighting for erlang
 - [#1590](https://github.com/lapce/lapce/pull/1590): Added ability to open file and file diff from source control context menu
--- a/defaults/dark-theme.toml
+++ b/defaults/dark-theme.toml
@ -60,22 +60,38 @@ magenta = "#C678DD"
 "tag" = "$blue"

 [color-theme.ui]
-"lapce.active_tab" = "#528BFF"
-"lapce.inactive_tab" = "#5C6370"
 "lapce.error" = "$red"
 "lapce.warn" = "$yellow"
 "lapce.dropdown_shadow" = "#000000"
 "lapce.border" = "#000000"
 "lapce.scroll_bar" = "$grey"

-"lapce.icon_active" = "$white"
-"lapce.icon_inactive" = "$grey"
+"lapce.button.primary.background" = "#50a14f"
+"lapce.button.primary.foreground" = "$black"
+
+# tab
+"lapce.tab.active.background" = "$black"
+"lapce.tab.active.foreground" = "$white"
+"lapce.tab.active.underline" = "#528BFF"
+
+"lapce.tab.inactive.background" = "#1d2026"
+"lapce.tab.inactive.foreground" = "#7e838c"
+"lapce.tab.inactive.underline" = "#528BFF33"
+
+"lapce.tab.separator" = ""
+
+"lapce.icon.active" = "$white"
+"lapce.icon.inactive" = "$grey"

 "lapce.remote.local" = "#4078F2"
 "lapce.remote.connected" = "#50A14F"
 "lapce.remote.connecting" = "#C18401"
 "lapce.remote.disconnected" = "#E45649"

+"lapce.plugin.name" = "#DDDDDD"
+"lapce.plugin.description" = "$white"
+"lapce.plugin.author" = "#B0B0B0"
+
 "editor.background" = "$black"
 "editor.foreground" = "$white"
 "editor.dim" = "#5C6370"
@ -87,6 +103,7 @@ magenta = "#C678DD"
 "editor.visible_whitespace" = "$grey"
 "editor.indent_guide" = "$grey"
 "editor.drag_drop_background" = "#79c1fc55"
+"editor.drag_drop_tab_background" = "#0b0e14EE"

 "inlay_hint.foreground" = "$white"
 "inlay_hint.background" = "#528abF37"
--- a/defaults/light-theme.toml
+++ b/defaults/light-theme.toml
@ -66,21 +66,36 @@ magenta = "#A626A4"
 "tag" = "$blue"

 [color-theme.ui]
-"lapce.active_tab" = "#526FFF"
-"lapce.inactive_tab" = "#A0A1A7"
 "lapce.error" = "#E51400"
 "lapce.warn" = "#E9A700"
 "lapce.dropdown_shadow" = "#B4B4B4"
 "lapce.border" = "#B4B4B4"
 "lapce.scroll_bar" = "#B4B4B4"
-"lapce.icon_active" = "$black"
-"lapce.icon_inactive" = "$grey"
+
+"lapce.button.primary.background" = "#50a14f"
+"lapce.button.primary.foreground" = "$white"
+
+# tab
+"lapce.tab.active.background" = "$white"
+"lapce.tab.active.foreground" = "$black"
+"lapce.tab.active.underline" = "#528BFF"
+
+"lapce.tab.inactive.background" = "#d3d3d3"
+"lapce.tab.inactive.foreground" = "#17181c"
+"lapce.tab.inactive.underline" = ""
+
+"lapce.icon.active" = "$black"
+"lapce.icon.inactive" = "$grey"

 "lapce.remote.local" = "#4078F2"
 "lapce.remote.connected" = "#50A14F"
 "lapce.remote.connecting" = "#C18401"
 "lapce.remote.disconnected" = "#E45649"

+"lapce.plugin.name" = "#444444"
+"lapce.plugin.description" = "$black"
+"lapce.plugin.author" = "#707070"
+
 "terminal.cursor" = "$black"
 "terminal.foreground" = "$black"
 "terminal.background" = "$white"
@ -112,6 +127,7 @@ magenta = "#A626A4"
 "editor.visible_whitespace" = "$grey"
 "editor.indent_guide" = "$grey"
 "editor.drag_drop_background" = "#79c1fc33"
+"editor.drag_drop_tab_background" = "#0b0e14EE"

 "inlay_hint.foreground" = "$black"
 "inlay_hint.background" = "#528bFF55"
--- a/defaults/settings.toml
+++ b/defaults/settings.toml
@ -102,15 +102,28 @@ magenta = "#C678DD"
 "symbol" = "$yellow"

 [color-theme.ui]
-"lapce.active_tab" = "#528BFF"
-"lapce.inactive_tab" = "#5C6370"
 "lapce.error" = "$red"
 "lapce.warn" = "$yellow"
 "lapce.dropdown_shadow" = "#000000"
 "lapce.border" = "#000000"
 "lapce.scroll_bar" = "$grey"
-"lapce.icon_active" = "$white"
-"lapce.icon_inactive" = "$grey"
+
+"lapce.button.primary.background" = "#50a14f"
+"lapce.button.primary.foreground" = "$black"
+
+# tab
+"lapce.tab.active.background" = "$black"
+"lapce.tab.active.foreground" = "$white"
+"lapce.tab.active.underline" = "#528BFF"
+
+"lapce.tab.inactive.background" = "#1d2026"
+"lapce.tab.inactive.foreground" = "#7e838c"
+"lapce.tab.inactive.underline" = "#528BFF33"
+
+"lapce.tab.separator" = ""
+
+"lapce.icon.active" = "$white"
+"lapce.icon.inactive" = "$grey"

 "lapce.remote.local" = "#4078F2"
 "lapce.remote.connected" = "#50A14F"
@ -128,6 +141,7 @@ magenta = "#C678DD"
 "editor.visible_whitespace" = "#5C6370"
 "editor.indent_guide" = "$grey"
 "editor.drag_drop_background" = "#79c1fc55"
+"editor.drag_drop_tab_background" = "#0b0e14EE"

 "inlay_hint.foreground" = "$white"
 "inlay_hint.background" = "#528bFF88"
@ -218,6 +232,8 @@ name = ""
 "scm.diff.added" = "diff-added.svg"
 "scm.diff.removed" = "diff-removed.svg"
 "scm.diff.renamed" = "diff-renamed.svg"
+"scm.change.add" = "add.svg"
+"scm.change.remove" = "remove.svg"

 "palette.menu" = "chevron-down.svg"

--- a/icons/codicons/add.svg
+++ b/icons/codicons/add.svg
@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg>
--- a/lapce-data/src/config.rs
+++ b/lapce-data/src/config.rs
@ -41,19 +41,37 @@ pub struct LapceTheme {}
 impl LapceTheme {
    pub const LAPCE_WARN: &str = "lapce.warn";
    pub const LAPCE_ERROR: &str = "lapce.error";
-    pub const LAPCE_ACTIVE_TAB: &str = "lapce.active_tab";
-    pub const LAPCE_INACTIVE_TAB: &str = "lapce.inactive_tab";
    pub const LAPCE_DROPDOWN_SHADOW: &str = "lapce.dropdown_shadow";
    pub const LAPCE_BORDER: &str = "lapce.border";
    pub const LAPCE_SCROLL_BAR: &str = "lapce.scroll_bar";
-    pub const LAPCE_ICON_ACTIVE: &str = "lapce.icon_active";
-    pub const LAPCE_ICON_INACTIVE: &str = "lapce.icon_inactive";
+
+    pub const LAPCE_BUTTON_PRIMARY_BACKGROUND: &str =
+        "lapce.button.primary.background";
+    pub const LAPCE_BUTTON_PRIMARY_FOREGROUND: &str =
+        "lapce.button.primary.foreground";
+
+    pub const LAPCE_TAB_ACTIVE_BACKGROUND: &str = "lapce.tab.active.background";
+    pub const LAPCE_TAB_ACTIVE_FOREGROUND: &str = "lapce.tab.active.foreground";
+    pub const LAPCE_TAB_ACTIVE_UNDERLINE: &str = "lapce.tab.active.underline";
+
+    pub const LAPCE_TAB_INACTIVE_BACKGROUND: &str = "lapce.tab.inactive.background";
+    pub const LAPCE_TAB_INACTIVE_FOREGROUND: &str = "lapce.tab.inactive.foreground";
+    pub const LAPCE_TAB_INACTIVE_UNDERLINE: &str = "lapce.tab.inactive.underline";
+
+    pub const LAPCE_TAB_SEPARATOR: &str = "lapce.tab.separator";
+
+    pub const LAPCE_ICON_ACTIVE: &str = "lapce.icon.active";
+    pub const LAPCE_ICON_INACTIVE: &str = "lapce.icon.inactive";

    pub const LAPCE_REMOTE_LOCAL: &str = "lapce.remote.local";
    pub const LAPCE_REMOTE_CONNECTED: &str = "lapce.remote.connected";
    pub const LAPCE_REMOTE_CONNECTING: &str = "lapce.remote.connecting";
    pub const LAPCE_REMOTE_DISCONNECTED: &str = "lapce.remote.disconnected";

+    pub const LAPCE_PLUGIN_NAME: &str = "lapce.plugin.name";
+    pub const LAPCE_PLUGIN_DESCRIPTION: &str = "lapce.plugin.description";
+    pub const LAPCE_PLUGIN_AUTHOR: &str = "lapce.plugin.author";
+
    pub const EDITOR_BACKGROUND: &str = "editor.background";
    pub const EDITOR_FOREGROUND: &str = "editor.foreground";
    pub const EDITOR_DIM: &str = "editor.dim";
@ -65,6 +83,8 @@ impl LapceTheme {
    pub const EDITOR_VISIBLE_WHITESPACE: &str = "editor.visible_whitespace";
    pub const EDITOR_INDENT_GUIDE: &str = "editor.indent_guide";
    pub const EDITOR_DRAG_DROP_BACKGROUND: &str = "editor.drag_drop_background";
+    pub const EDITOR_DRAG_DROP_TAB_BACKGROUND: &str =
+        "editor.drag_drop_tab_background";

    pub const INLAY_HINT_FOREGROUND: &str = "inlay_hint.foreground";
    pub const INLAY_HINT_BACKGROUND: &str = "inlay_hint.background";
@ -179,6 +199,8 @@ impl LapceIcons {
    pub const SCM_DIFF_ADDED: &str = "scm.diff.added";
    pub const SCM_DIFF_REMOVED: &str = "scm.diff.removed";
    pub const SCM_DIFF_RENAMED: &str = "scm.diff.renamed";
+    pub const SCM_CHANGE_ADD: &str = "scm.change.add";
+    pub const SCM_CHANGE_REMOVE: &str = "scm.change.remove";

    pub const PALETTE_MENU: &str = "palette.menu";

@ -764,7 +786,7 @@ fn default() -> Self {
 }

 impl ThemeBaseColor {
-    fn get(&self, name: &str) -> Option<&Color> {
+    pub fn get(&self, name: &str) -> Option<&Color> {
        Some(match name {
            "white" => &self.white,
            "black" => &self.black,
@ -1046,8 +1068,6 @@ fn load_icon_themes(
            Self::load_icon_theme_from_str(DEFAULT_ICON_THEME).unwrap();
        themes.insert(name.to_lowercase(), (name, theme, None));

-        log::debug!("{themes:?}");
-
        themes
    }

--- a/lapce-data/src/svg.rs
+++ b/lapce-data/src/svg.rs
@ -44,7 +44,9 @@ pub fn get_default_svg(&mut self, name: &str) -> Svg {
            let file = if name == "lapce_remote.svg" {
                LAPCE_ICONS_DIR.get_file(name).unwrap()
            } else {
-                CODICONS_ICONS_DIR.get_file(name).unwrap()
+                CODICONS_ICONS_DIR
+                    .get_file(name)
+                    .unwrap_or_else(|| panic!("Failed to unwrap {name}"))
            };
            let content = file.contents_utf8().unwrap();
            let svg = Svg::from_str(content).unwrap();
--- a/lapce-ui/src/app.rs
+++ b/lapce-ui/src/app.rs
@ -89,6 +89,7 @@ pub fn launch() {
                .level_for("sled", log::LevelFilter::Off)
                .level_for("tracing", log::LevelFilter::Off)
                .level_for("druid::core", log::LevelFilter::Off)
+                .level_for("druid::window", log::LevelFilter::Off)
                .level_for("druid::box_constraints", log::LevelFilter::Off)
                .level_for("cranelift_codegen", log::LevelFilter::Off)
                .level_for("wasmtime_cranelift", log::LevelFilter::Off)
--- a/lapce-ui/src/editor/tab.rs
+++ b/lapce-ui/src/editor/tab.rs
@ -643,23 +643,34 @@ fn paint(

        let is_active_tab = tab_idx == editor_tab.active;
        if is_active_tab {
-            let color = if data.focus_area == FocusArea::Editor
+            let stroke = if data.focus_area == FocusArea::Editor
                && Some(widget_id) == *data.main_split.active_tab
            {
                data.config
-                    .get_color_unchecked(LapceTheme::LAPCE_ACTIVE_TAB)
+                    .get_color_unchecked(LapceTheme::LAPCE_TAB_ACTIVE_UNDERLINE)
            } else {
                data.config
-                    .get_color_unchecked(LapceTheme::LAPCE_INACTIVE_TAB)
+                    .get_color_unchecked(LapceTheme::LAPCE_TAB_INACTIVE_UNDERLINE)
            };
+            ctx.fill(
+                self.rect,
+                data.config
+                    .get_color_unchecked(LapceTheme::LAPCE_TAB_ACTIVE_BACKGROUND),
+            );
            ctx.stroke(
                Line::new(
                    Point::new(self.rect.x0 + 2.0, self.rect.y1 - 1.0),
                    Point::new(self.rect.x1 - 2.0, self.rect.y1 - 1.0),
                ),
-                color,
+                stroke,
                2.0,
            );
+        } else {
+            ctx.fill(
+                self.rect,
+                data.config
+                    .get_color_unchecked(LapceTheme::LAPCE_TAB_INACTIVE_BACKGROUND),
+            );
        }
        ctx.draw_svg(&self.svg, svg_rect, self.svg_color.as_ref());
        ctx.draw_text(
@ -681,7 +692,8 @@ fn paint(
                Point::new(x - 0.5, (size.height * 0.8).round()),
                Point::new(x - 0.5, size.height - (size.height * 0.8).round()),
            ),
-            data.config.get_color_unchecked(LapceTheme::LAPCE_BORDER),
+            data.config
+                .get_color_unchecked(LapceTheme::LAPCE_TAB_SEPARATOR),
            1.0,
        );
        if tab_idx == 0 {
@ -698,15 +710,6 @@ fn paint(
            );
        }

-        // Only show background of close button on hover
-        if mouse_pos.map(|s| self.rect.contains(s)).unwrap_or(false) {
-            ctx.fill(
-                &self.close_rect,
-                data.config
-                    .get_color_unchecked(LapceTheme::EDITOR_CURRENT_LINE),
-            );
-        }
-
        // See if any of the children have unsaved changes
        let is_pristine = match &editor_tab.children[tab_idx] {
            EditorTabChild::Editor(editor_id, _, _) => data
@ -719,13 +722,23 @@ fn paint(
        };

        let mut draw_icon = |name: &'static str| {
+            let close_color =
+                if mouse_pos.map(|s| self.rect.contains(s)).unwrap_or(false) {
+                    Some(druid::Color::rgba(1.0, 0.0, 0.0, 1.0))
+                } else {
+                    None
+                };
            ctx.draw_svg(
                &data.config.ui_svg(name),
                self.close_rect.inflate(-padding, -padding),
+                if close_color.is_some() {
+                    close_color.as_ref()
+                } else {
                    Some(
                        data.config
                            .get_color_unchecked(LapceTheme::LAPCE_ICON_ACTIVE),
-                ),
+                    )
+                },
            );
        };

--- a/lapce-ui/src/editor/tab_header.rs
+++ b/lapce-ui/src/editor/tab_header.rs
@ -357,6 +357,12 @@ fn layout(
    fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, env: &Env) {
        let size = ctx.size();
        let rect = size.to_rect();
+        ctx.fill(
+            size.to_rect(),
+            data.config
+                .get_color_unchecked(LapceTheme::LAPCE_TAB_INACTIVE_BACKGROUND),
+        );
+
        let shadow_width = data.config.ui.drop_shadow_width() as f64;
        if shadow_width > 0.0 {
            ctx.with_save(|ctx| {
--- a/lapce-ui/src/editor/tab_header_content.rs
+++ b/lapce-ui/src/editor/tab_header_content.rs
@ -472,7 +472,16 @@ fn layout(
                .font(data.config.ui.font_family(), font_size)
                .text_color(
                    data.config
-                        .get_color_unchecked(LapceTheme::EDITOR_FOREGROUND)
+                        .get_color_unchecked(
+                            if editor_tab.active_child().is_some()
+                                && editor_tab.active_child().unwrap().widget_id()
+                                    == child.widget_id()
+                            {
+                                LapceTheme::LAPCE_TAB_ACTIVE_FOREGROUND
+                            } else {
+                                LapceTheme::LAPCE_TAB_INACTIVE_FOREGROUND
+                            },
+                        )
                        .clone(),
                )
                .build()
@ -520,6 +529,12 @@ fn layout(
    fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, _env: &Env) {
        let size = ctx.size();

+        ctx.fill(
+            size.to_rect(),
+            data.config
+                .get_color_unchecked(LapceTheme::LAPCE_TAB_INACTIVE_BACKGROUND),
+        );
+
        for (tab_idx, tab_rect) in self.rects.iter().enumerate() {
            tab_rect.paint(ctx, data, self.widget_id, tab_idx, size, self.mouse_pos);
        }
--- a/lapce-ui/src/find.rs
+++ b/lapce-ui/src/find.rs
@ -287,7 +287,7 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, env: &Env) {
                ctx.fill(
                    &icon.rect,
                    data.config
-                        .get_color_unchecked(LapceTheme::LAPCE_ACTIVE_TAB),
+                        .get_color_unchecked(LapceTheme::LAPCE_TAB_ACTIVE_UNDERLINE),
                );
            } else if icon.rect.contains(self.mouse_pos)
                && icon.icon != LapceIcons::SEARCH_CASE_SENSITIVE
--- a/lapce-ui/src/plugin.rs
+++ b/lapce-ui/src/plugin.rs
@ -6,10 +6,10 @@
        PietTextLayout, Text, TextAttribute, TextLayout as TextLayoutTrait,
        TextLayoutBuilder,
    },
-    ArcStr, BoxConstraints, Color, Command, Cursor, Env, Event, EventCtx,
-    FontDescriptor, FontWeight, LayoutCtx, LifeCycle, LifeCycleCtx, MouseEvent,
-    PaintCtx, Point, Rect, RenderContext, Size, Target, TextLayout, UpdateCtx,
-    Widget, WidgetExt, WidgetId,
+    ArcStr, BoxConstraints, Command, Cursor, Env, Event, EventCtx, FontDescriptor,
+    FontWeight, LayoutCtx, LifeCycle, LifeCycleCtx, MouseEvent, PaintCtx, Point,
+    Rect, RenderContext, Size, Target, TextLayout, UpdateCtx, Widget, WidgetExt,
+    WidgetId,
 };
 use lapce_core::command::FocusCommand;
 use lapce_data::{
@ -172,7 +172,11 @@ fn paint_plugin(
            .new_text_layout(display_name.to_string())
            .font(config.ui.font_family(), config.ui.font_size() as f64)
            .default_attribute(TextAttribute::Weight(FontWeight::BOLD))
-            .text_color(config.get_color_unchecked(LapceTheme::EDITOR_FOCUS).clone())
+            .text_color(
+                config
+                    .get_color_unchecked(LapceTheme::LAPCE_PLUGIN_NAME)
+                    .clone(),
+            )
            .build()
            .unwrap();
        ctx.draw_text(
@ -187,7 +191,7 @@ fn paint_plugin(
            .font(config.ui.font_family(), config.ui.font_size() as f64)
            .text_color(
                config
-                    .get_color_unchecked(LapceTheme::EDITOR_FOREGROUND)
+                    .get_color_unchecked(LapceTheme::LAPCE_PLUGIN_DESCRIPTION)
                    .clone(),
            )
            .build()
@ -212,7 +216,7 @@ fn paint_plugin(
                .font(config.ui.font_family(), config.ui.font_size() as f64)
                .text_color(
                    config
-                        .get_color_unchecked(LapceTheme::EDITOR_FOREGROUND)
+                        .get_color_unchecked(LapceTheme::LAPCE_PLUGIN_DESCRIPTION)
                        .clone(),
                )
                .build()
@ -240,7 +244,7 @@ fn paint_plugin(
            .font(config.ui.font_family(), config.ui.font_size() as f64)
            .text_color(
                config
-                    .get_color_unchecked(LapceTheme::EDITOR_FOREGROUND)
+                    .get_color_unchecked(LapceTheme::LAPCE_PLUGIN_AUTHOR)
                    .clone(),
            )
            .build()
@ -263,7 +267,9 @@ fn paint_plugin(
                .font(config.ui.font_family(), config.ui.font_size() as f64)
                .text_color(
                    config
-                        .get_color_unchecked(LapceTheme::EDITOR_BACKGROUND)
+                        .get_color_unchecked(
+                            LapceTheme::LAPCE_BUTTON_PRIMARY_FOREGROUND,
+                        )
                        .clone(),
                )
                .build()
@ -272,12 +278,16 @@ fn paint_plugin(
            let text_padding = 5.0;
            let x = size.width - text_size.width - text_padding * 2.0 - padding;
            let y = y + self.line_height * 2.0;
-            let color = Color::rgb8(80, 161, 79);
            let rect =
                Size::new(text_size.width + text_padding * 2.0, self.line_height)
                    .to_rect()
                    .with_origin(Point::new(x, y));
-            ctx.fill(rect, &color);
+            ctx.fill(
+                rect,
+                config.get_color_unchecked(
+                    LapceTheme::LAPCE_BUTTON_PRIMARY_BACKGROUND,
+                ),
+            );
            ctx.draw_text(
                &text_layout,
                Point::new(
@ -789,7 +799,7 @@ fn layout(
                    .default_attribute(TextAttribute::Weight(FontWeight::BOLD))
                    .text_color(
                        data.config
-                            .get_color_unchecked(LapceTheme::EDITOR_FOCUS)
+                            .get_color_unchecked(LapceTheme::LAPCE_PLUGIN_NAME)
                            .clone(),
                    )
                    .build()
@ -804,7 +814,9 @@ fn layout(
                    )
                    .text_color(
                        data.config
-                            .get_color_unchecked(LapceTheme::EDITOR_FOREGROUND)
+                            .get_color_unchecked(
+                                LapceTheme::LAPCE_PLUGIN_DESCRIPTION,
+                            )
                            .clone(),
                    )
                    .build()
@ -819,7 +831,7 @@ fn layout(
                    )
                    .text_color(
                        data.config
-                            .get_color_unchecked(LapceTheme::EDITOR_FOREGROUND)
+                            .get_color_unchecked(LapceTheme::LAPCE_PLUGIN_AUTHOR)
                            .clone(),
                    )
                    .build()
@ -966,7 +978,9 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, _env: &Env) {
                )
                .text_color(
                    data.config
-                        .get_color_unchecked(LapceTheme::EDITOR_BACKGROUND)
+                        .get_color_unchecked(
+                            LapceTheme::LAPCE_BUTTON_PRIMARY_FOREGROUND,
+                        )
                        .clone(),
                )
                .build()
@ -983,7 +997,12 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, _env: &Env) {
                    button_y + self.line_height / 2.0,
                ))
                .inflate(0.0, self.line_height / 2.0);
-            ctx.fill(rect, &Color::rgb8(80, 161, 79));
+            ctx.fill(
+                rect,
+                data.config.get_color_unchecked(
+                    LapceTheme::LAPCE_BUTTON_PRIMARY_BACKGROUND,
+                ),
+            );
            self.status_rect = rect;
            ctx.draw_text(
                &button_text_layout,
--- a/lapce-ui/src/search.rs
+++ b/lapce-ui/src/search.rs
@ -240,7 +240,7 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, env: &Env) {
                ctx.fill(
                    &icon.rect,
                    data.config
-                        .get_color_unchecked(LapceTheme::LAPCE_ACTIVE_TAB),
+                        .get_color_unchecked(LapceTheme::LAPCE_TAB_ACTIVE_UNDERLINE),
                );
            } else if icon.rect.contains(self.mouse_pos)
                && icon.icon != LapceIcons::SEARCH_CASE_SENSITIVE
--- a/lapce-ui/src/settings.rs
+++ b/lapce-ui/src/settings.rs
@ -1557,7 +1557,7 @@ fn layout(
                }
            };
            if changed {
-                let x = input.layout_rect().x1 + 10.0;
+                let x = input.layout_rect().x1 + input.layout_rect().height() + 15.0;
                let y0 = input.layout_rect().y0;
                let y1 = input.layout_rect().y1;
                let rect = Rect::new(x, y0, x + reset_size.width + 20.0, y1);
@ -1593,15 +1593,57 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, env: &Env) {

        for (i, input) in self.inputs.iter_mut().enumerate() {
            let text_layout = &self.text_layouts.as_ref().unwrap()[i];
+            let layout_rect = input.layout_rect();
            ctx.draw_text(
                text_layout,
                Point::new(
                    0.0,
-                    input.layout_rect().y0
-                        + text_layout.y_offset(input.layout_rect().height()),
+                    layout_rect.y0 + text_layout.y_offset(layout_rect.height()),
                ),
            );
            input.paint(ctx, data, env);
+            let preview_color_text = text_layout.text();
+            let preview_color = match self.kind {
+                ThemeKind::Base => data
+                    .config
+                    .color
+                    .base
+                    .get(preview_color_text)
+                    .unwrap_or_else(|| {
+                        data.config
+                            .get_color_unchecked(LapceTheme::EDITOR_BACKGROUND)
+                    }),
+                ThemeKind::UI => {
+                    data.config.color.ui.get(preview_color_text).unwrap_or_else(
+                        || {
+                            data.config
+                                .get_color_unchecked(LapceTheme::EDITOR_BACKGROUND)
+                        },
+                    )
+                }
+                ThemeKind::Syntax => data
+                    .config
+                    .color
+                    .syntax
+                    .get(preview_color_text)
+                    .unwrap_or_else(|| {
+                        data.config
+                            .get_color_unchecked(LapceTheme::EDITOR_BACKGROUND)
+                    }),
+            };
+            let color_rect = Rect::new(
+                layout_rect.x1 + 5.0,
+                layout_rect.y0,
+                layout_rect.x1 + 5.0 + layout_rect.height(),
+                layout_rect.y1,
+            )
+            .inflate(-0.5, -0.5);
+            ctx.stroke(
+                color_rect,
+                data.config.get_color_unchecked(LapceTheme::LAPCE_BORDER),
+                1.0,
+            );
+            ctx.fill(color_rect.inflate(-0.5, -0.5), preview_color);
        }

        let reset_text = ctx
--- a/lapce-ui/src/source_control.rs
+++ b/lapce-ui/src/source_control.rs
@ -1,11 +1,10 @@
-use std::{path::PathBuf, sync::Arc};
+use std::sync::Arc;

 use druid::{
-    kurbo::BezPath,
    piet::{Text, TextLayout as PietTextLayout, TextLayoutBuilder},
    BoxConstraints, Command, Env, Event, EventCtx, LayoutCtx, LifeCycle,
-    LifeCycleCtx, MouseButton, PaintCtx, Point, RenderContext, Size, Target,
-    UpdateCtx, Widget, WidgetExt, WidgetId,
+    LifeCycleCtx, MouseButton, MouseEvent, PaintCtx, Point, Rect, RenderContext,
+    Size, Target, UpdateCtx, Widget, WidgetExt, WidgetId,
 };
 use lapce_data::{
    command::{
@ -85,7 +84,9 @@ pub fn new_source_control_panel(data: &LapceTabData) -> LapcePanel {

 struct SourceControlFileList {
    widget_id: WidgetId,
+    mouse_pos: Option<Point>,
    mouse_down: Option<usize>,
+    line_rects: Vec<Rect>,
    line_height: f64,
 }

@ -93,7 +94,9 @@ impl SourceControlFileList {
    pub fn new(widget_id: WidgetId) -> Self {
        Self {
            widget_id,
+            mouse_pos: None,
            mouse_down: None,
+            line_rects: vec![],
            line_height: 25.0,
        }
    }
@ -105,6 +108,15 @@ pub fn request_focus(&self, ctx: &mut EventCtx, data: &mut LapceTabData) {
        data.focus_area = FocusArea::Panel(PanelKind::SourceControl);
        data.focus = Arc::new(self.widget_id);
    }
+
+    fn icon_hit_test(&self, mouse_event: &MouseEvent) -> bool {
+        for rect in &self.line_rects {
+            if rect.contains(mouse_event.pos) {
+                return true;
+            }
+        }
+        false
+    }
 }

 impl Widget<LapceTabData> for SourceControlFileList {
@ -120,8 +132,14 @@ fn event(
        env: &Env,
    ) {
        match event {
-            Event::MouseMove(_mouse_event) => {
+            Event::MouseMove(mouse_event) => {
+                ctx.set_handled();
+                self.mouse_pos = Some(mouse_event.pos);
+                if self.icon_hit_test(mouse_event) {
                    ctx.set_cursor(&druid::Cursor::Pointer);
+                } else {
+                    ctx.clear_cursor();
+                }
            }
            Event::MouseUp(mouse_event) => {
                let y = mouse_event.pos.y;
@ -325,19 +343,35 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, _env: &Env) {
        let rect = ctx.region().bounding_box();
        let start_line = (rect.y0 / self.line_height).floor() as usize;
        let end_line = (rect.y1 / self.line_height).ceil() as usize;
+        self.line_rects = vec![];
        for line in start_line..end_line {
            if line >= diffs.len() {
                break;
            }
            let y = self.line_height * line as f64;
+
+            let current_line = Size::new(ctx.size().width, self.line_height)
+                .to_rect()
+                .with_origin(Point::new(0.0, y));
+            self.line_rects.push(current_line);
+            if let Some(mouse_pos) = self.mouse_pos {
+                if current_line.contains(mouse_pos) {
+                    ctx.fill(
+                        current_line,
+                        data.config.get_color_unchecked(LapceTheme::PANEL_CURRENT),
+                    );
+                }
+            }
+
            let (diff, checked) = diffs[line].clone();
-            let mut path: PathBuf = diff.path().clone();
+            let mut path = diff.path().clone();
            if let Some(workspace_path) = data.workspace.path.as_ref() {
                path = path
                    .strip_prefix(workspace_path)
                    .unwrap_or(&path)
                    .to_path_buf();
            }
+
            {
                let width = 13.0;
                let height = 13.0;
@ -346,26 +380,28 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, _env: &Env) {
                    (self.line_height - height) / 2.0 + y,
                );
                let rect = Size::new(width, height).to_rect().with_origin(origin);
-                ctx.stroke(
-                    rect,
-                    data.config
-                        .get_color_unchecked(LapceTheme::LAPCE_ICON_ACTIVE),
-                    1.0,
-                );

                if checked {
-                    let mut path = BezPath::new();
-                    path.move_to((origin.x + 3.0, origin.y + 7.0));
-                    path.line_to((origin.x + 6.0, origin.y + 9.5));
-                    path.line_to((origin.x + 10.0, origin.y + 3.0));
-                    ctx.stroke(
-                        path,
+                    ctx.draw_svg(
+                        &data.config.ui_svg(LapceIcons::SCM_CHANGE_ADD),
+                        rect,
+                        Some(
                            data.config
                                .get_color_unchecked(LapceTheme::LAPCE_ICON_ACTIVE),
-                        2.0,
+                        ),
+                    );
+                } else {
+                    ctx.draw_svg(
+                        &data.config.ui_svg(LapceIcons::SCM_CHANGE_REMOVE),
+                        rect,
+                        Some(
+                            data.config
+                                .get_color_unchecked(LapceTheme::LAPCE_ICON_ACTIVE),
+                        ),
                    );
                }
            }
+
            let svg_size = data.config.ui.icon_size() as f64;
            let (svg, svg_color) = data.config.file_svg(&path);
            let rect =
@ -459,7 +495,6 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, _env: &Env) {
            };
            let svg = data.config.ui_svg(svg);

-            let svg_size = 15.0;
            let rect =
                Size::new(svg_size, svg_size)
                    .to_rect()
@ -468,7 +503,7 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, _env: &Env) {
                        line as f64 * self.line_height
                            + (self.line_height - svg_size) / 2.0,
                    ));
-            ctx.draw_svg(&svg, rect, Some(&color.clone().with_alpha(0.9)));
+            ctx.draw_svg(&svg, rect, Some(color));
        }
    }
 }
--- a/lapce-ui/src/status.rs
+++ b/lapce-ui/src/status.rs
@ -440,9 +440,11 @@ fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, _env: &druid::Env)
        for progress in data.progresses.iter() {
            let mut text = progress.title.clone();
            if let Some(message) = progress.message.as_ref() {
+                if text.len() + message.len() < 48 {
                    text += ": ";
                    text += message;
                }
+            }
            let text_layout = ctx
                .text()
                .new_text_layout(text)
--- a/lapce-ui/src/tab.rs
+++ b/lapce-ui/src/tab.rs
@ -505,7 +505,7 @@ fn paint_drag_on_panel(&self, ctx: &mut PaintCtx, data: &LapceTabData) {
                ctx.fill(
                    rect,
                    data.config.get_color_unchecked(
-                        LapceTheme::EDITOR_DRAG_DROP_BACKGROUND,
+                        LapceTheme::EDITOR_DRAG_DROP_TAB_BACKGROUND,
                    ),
                );
                break;
				`@ -0,0 +1 @@`
				`<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg>`