styles: working on making it look just right

src/components/action_bar.rs

@@ -1,4 +1,7 @@
-use iced::{Element, Length, widget::{container, pick_list, row}};
+use iced::{
+  Background, Element, Length, Padding, Theme,
+  widget::{container, pick_list, row},
+};
 
 use crate::message::{FileAction, Message, ViewAction};
 
@@ -6,12 +9,20 @@ pub fn view(
   selected_file_action: Option<FileAction>,
   selected_view_action: Option<ViewAction>,
 ) -> Element<'static, Message> {
+  let pick_list_padding = Padding {
+    left: 4.0,
+    right: 4.0,
+    top: 2.0,
+    bottom: 2.0,
+  };
 
   let file_menu = pick_list(
     FileAction::ALL,
     selected_file_action,
     Message::FileActionSelected,
   )
+  .padding(pick_list_padding)
+  .style(pick_list_style)
   .placeholder("File");
 
   let view_menu = pick_list(
@@ -19,11 +30,30 @@ pub fn view(
     selected_view_action,
     Message::ViewActionSelected,
   )
+  .padding(pick_list_padding)
+  .style(pick_list_style)
   .placeholder("View");
 
-    container(
+  container(row![file_menu, view_menu].spacing(10))
-        row![file_menu, view_menu].spacing(10)
+    .style(|theme: &Theme| {
-    )
+      let base = container::Style::default();
+
+      container::Style {
+        background: container::primary(theme).background,
+        ..base
+      }
+    })
+    .padding(5)
     .width(Length::Fill)
     .into()
 }
+
+fn pick_list_style(theme: &Theme, status: pick_list::Status) -> pick_list::Style {
+  let base = pick_list::default(theme, status);
+
+  pick_list::Style {
+    placeholder_color: base.text_color,
+    background: Background::Color(theme.palette().primary),
+    ..base
+  }
+}

src/components/editor.rs

@@ -1,5 +1,5 @@
 use iced::{
-  Element, Length, Theme, highlighter,
+  Element, Length, Theme, border, highlighter,
   widget::{container, markdown, row, text_editor},
 };
 
@@ -9,9 +9,24 @@ pub fn view<'a>(file: &'a File, mode: Mode, font_size: u32) -> Element<'a, Messa
   match mode {
     Mode::Edit => {
       let editor = text_editor(file.content())
-        .highlight(file.extension().unwrap_or("txt"), highlighter::Theme::Base16Ocean)
+        .highlight(
+          file.extension().unwrap_or("txt"),
+          highlighter::Theme::Base16Ocean,
+        )
+        .padding(10)
         .size(font_size)
         .height(Length::Fill)
+        .style(|theme: &Theme, status: text_editor::Status| {
+          let base = text_editor::default(theme, status);
+
+          text_editor::Style {
+            border: border::Border {
+              width: 0.0,
+              ..Default::default()
+            },
+            ..base
+          }
+        })
         .on_action(Message::Edit);
 
       container(row![editor]).height(Length::Fill).into()

src/components/status_bar.rs

@@ -1,16 +1,26 @@
-use iced::widget::{container, row, text};
-use iced::{Element, Length};
 use crate::file::File;
+use iced::widget::{container, row, text};
+use iced::{Element, Length, Padding, Theme};
 
 pub fn view(file: &File) -> Element<'_, crate::Message> {
-    let path_text = text(file.path_summary());
+  let path_text = text(file.path_summary()).size(12);
-    let cursor_text = text(file.position_summary());
+  let cursor_text = text(file.position_summary()).size(12);
 
-    container(
+  container(row![cursor_text, path_text].spacing(20))
-        row![cursor_text, path_text]
+    .style(|theme: &Theme| {
-            .spacing(20)
+      let base = container::Style::default();
-    )
+
+      container::Style {
+        background: container::primary(theme).background,
+        ..base
+      }
+    })
     .width(Length::Fill)
-    .padding(5)
+    .padding(Padding {
+      left: 20.0,
+      right: 20.0,
+      top: 5.0,
+      bottom: 5.0,
+    })
     .into()
 }

src/components/tabs.rs

@@ -1,6 +1,6 @@
 use crate::file::File;
 use crate::message::{FileAction, Message};
-use iced::{Background, Border, Theme, border};
+use iced::{Background, Border, Padding, Theme, border};
 use iced::{
   Element,
   widget::{button, container, row, scrollable, text},
@@ -12,30 +12,62 @@ pub fn view<'a>(files: &'a [File], active_index: usize) -> Element<'a, Message>
 
     let label = text(file.display_name());
     let close_btn =
-            button(text("x")).on_press(Message::FileActionSelected(FileAction::Close(Some(index))));
+      button(text("x")).padding(1).on_press(Message::FileActionSelected(FileAction::Close(Some(index))));
 
-        button(row![label, close_btn].spacing(5))
+    button(
+      row![label, close_btn]
+        .spacing(5)
+        .align_y(iced::Alignment::Center),
+    )
     .on_press(Message::SwitchTab(index))
-            .padding(5)
+    .padding(Padding {
-            .style(move |theme: &Theme, status| {
+      top: 5.0,
+      bottom: 5.0,
+      left: 10.0,
+      right: 10.0,
+    })
+    .style(move |theme: &Theme, status: button::Status| {
       let base = button::primary(theme, status);
+
       let button_background = if is_focused {
-                    base.background
+        Some(Background::Color(theme.palette().primary))
       } else {
         Some(Background::Color(theme.palette().background))
       };
 
-                button::Style {
+      let button_style = button::Style {
         background: button_background,
         border: Border {
           radius: border::radius(0).top_left(10).top_right(10),
           ..base.border
         },
         ..base
+      };
+
+      match status {
+        button::Status::Hovered => button::Style {
+          background: Some(Background::Color(theme.palette().primary)),
+          ..button_style
+        },
+        _ => button_style,
       }
     })
     .into()
   });
 
-    scrollable(container(row(tabs).spacing(2))).into()
+  scrollable(container(row(tabs)).padding(Padding {
+    top: 5.0,
+    left: 5.0,
+    right: 5.0,
+    bottom: 0.0,
+  }))
+  .direction(scrollable::Direction::Horizontal(
+    scrollable::Scrollbar::new().spacing(1)
+  ))
+  .style(|theme: &Theme, status: scrollable::Status| {
+    let mut style = scrollable::default(theme, status);
+    style.horizontal_rail.background = Some(Background::Color(theme.palette().primary));
+    style
+  })
+  .into()
 }

src/main.rs

@@ -7,9 +7,10 @@ mod key_bindings;
 mod message;
 mod state;
 
-use iced::Theme;
+use iced::theme::Palette;
 use iced::widget::column;
 use iced::window::icon;
+use iced::{Color, Theme};
 use iced::{Element, Subscription, Task, event};
 use iced::{keyboard, window};
 
@@ -26,9 +27,7 @@ pub fn main() -> iced::Result {
       ..Default::default()
     })
     .window(window::Settings {
-            icon: Some(
+      icon: Some(icon::from_file_data(constants::ICON_BYTES, None).expect("Failed to load icon")),
-                icon::from_file_data(constants::ICON_BYTES, None).expect("Failed to load icon"),
-            ),
       ..window::Settings::default()
     })
     .run()
@@ -59,7 +58,6 @@ fn view(state: &State) -> Element<'_, Message> {
     components::editor::view(current_file, state.mode(), state.font_size()),
     components::status_bar::view(current_file),
   ]
-    .padding(10)
   .into()
 }
 
@@ -81,5 +79,15 @@ fn subscription(_state: &State) -> Subscription<Message> {
 }
 
 fn theme(_state: &State) -> Theme {
-    Theme::Dark
+  Theme::custom(
+    "Win11 Dark",
+    Palette {
+      background: Color::from_rgb8(0x20, 0x20, 0x20),
+      text: Color::from_rgb8(0xF2, 0xF2, 0xF2),
+      primary: Color::from_rgb8(0x2C, 0x2C, 0x2C),
+      success: Color::from_rgb8(0x4C, 0xC3, 0x8A),
+      warning: Color::from_rgb8(0xF5, 0xC8, 0x4B),
+      danger: Color::from_rgb8(0xE8, 0x6A, 0x6A),
+    },
+  )
 }