improved color scheme

blurthing/src/application.rs

@@ -208,25 +208,12 @@ impl Application for BlurThing {
     }
 
     fn view(&self) -> Element<Self::Message> {
-        let left: Element<Self::Message> = if let Some((_, img)) = &self.computed {
-            let handle = iced::widget::image::Handle::from_pixels(
-                img.width(),
-                img.height(),
-                img.to_rgba8().to_vec(),
-            );
-
-            Image::new(handle).into()
-        } else {
-            let text = Text::new("No image loaded").size(24);
-            text.into()
-        };
-
         let right = Column::new()
             .push(Container::new(self.header()).width(Length::Fill))
             .push(Scrollable::new(self.controls()).height(Length::Fill))
             .push(Container::new(self.footer()));
 
-        Row::new().push(left).push(right).into()
+        Row::new().push(self.preview()).push(right).into()
     }
 }
 
@@ -327,6 +314,31 @@ impl BlurThing {
 //
 
 impl BlurThing {
+    fn preview(&self) -> Element<Message> {
+        if let Some((_, img)) = &self.computed {
+            let handle = iced::widget::image::Handle::from_pixels(
+                img.width(),
+                img.height(),
+                img.to_rgba8().to_vec(),
+            );
+
+            Image::new(handle).into()
+        } else {
+            Container::new(
+                Text::new("Press on \"Select File\" or drop an image here to get started")
+                    .width(Length::Fill)
+                    .height(Length::Fill)
+                    .horizontal_alignment(Horizontal::Center)
+                    .vertical_alignment(Vertical::Center),
+            )
+            .style(styles::Container::Medium)
+            .height(Length::Fixed(PREVIEW_SIZE as f32))
+            .width(Length::Fixed(PREVIEW_SIZE as f32))
+            .padding(32)
+            .into()
+        }
+    }
+
     fn header(&self) -> Element<Message> {
         MouseArea::new(
             Column::new()
@@ -341,39 +353,59 @@ impl BlurThing {
     fn controls(&self) -> Element<Message> {
         let x_components = Column::new()
             .push(Text::new("X Components"))
-            .push(Text::new("Number of samples in the horizontal axis").size(12))
+            .push(
+                Text::new("Number of samples in the horizontal axis")
+                    .style(styles::Text::Subtle)
+                    .size(12),
+            )
             .push(
                 Slider::new(1..=8, self.params.components.0, Message::UpX)
                     .on_release(Message::SaveParameters),
             );
 
         let y_components = Column::new()
             .push(Text::new("Y Components"))
-            .push(Text::new("Number of samples in the vertical axis").size(12))
+            .push(
+                Text::new("Number of samples in the vertical axis")
+                    .style(styles::Text::Subtle)
+                    .size(12),
+            )
             .push(
                 Slider::new(1..=8, self.params.components.1, Message::UpY)
                     .on_release(Message::SaveParameters),
             );
 
         let smoothness = Column::new()
             .push(Text::new("Smoothness"))
-            .push(Text::new("Amount of blur applied before the hash is computed").size(12))
+            .push(
+                Text::new("Amount of blur applied before the hash is computed")
+                    .style(styles::Text::Subtle)
+                    .size(12),
+            )
             .push(
                 Slider::new(0..=32, self.params.blur, Message::UpBlur)
                     .on_release(Message::SaveParameters),
             );
 
         let hue_rotation = Column::new()
             .push(Text::new("Hue Rotation"))
-            .push(Text::new("How much to rotate the hue of the image (color shift)").size(12))
+            .push(
+                Text::new("How much to rotate the hue of the image (color shift)")
+                    .style(styles::Text::Subtle)
+                    .size(12),
+            )
             .push(
                 Slider::new(-180..=180, self.params.hue_rotate, Message::UpHue)
                     .on_release(Message::SaveParameters),
             );
 
         let brightness = Column::new()
             .push(Text::new("Brightness"))
-            .push(Text::new("Adjusts the overall lightness or darkness of the image").size(12))
+            .push(
+                Text::new("Adjusts the overall lightness or darkness of the image")
+                    .style(styles::Text::Subtle)
+                    .size(12),
+            )
             .push(
                 Slider::new(-100..=100, self.params.brightness, Message::UpBrightness)
                     .on_release(Message::SaveParameters),
@@ -385,6 +417,7 @@ impl BlurThing {
                 Text::new(
                     "Modifies the difference between the darkest and lightest parts of the image",
                 )
+                .style(styles::Text::Subtle)
                 .size(12),
             )
             .push(

blurthing/src/main.rs

@@ -13,7 +13,7 @@ mod widgets;
 
 pub fn main() -> iced::Result {
     let window = window::Settings {
-        size: Size::new(1024.0, PREVIEW_SIZE as f32),
+        size: Size::new(PREVIEW_SIZE as f32 * 2.0, PREVIEW_SIZE as f32),
         resizable: false,
         ..Default::default()
     };

blurthing/src/styles/button.rs

@@ -1,5 +1,5 @@
 use iced::widget::button::{Appearance, StyleSheet};
-use iced::{color, Background, Border, Shadow};
+use iced::{color, Border, Color, Shadow};
 
 use super::Theme;
 
@@ -43,7 +43,32 @@ impl StyleSheet for Theme {
     }
 
     fn disabled(&self, style: &Self::Style) -> Appearance {
-        self.active(style) // TODO
+        let base = self.active(style);
+
+        let background = match style {
+            Button::Default => self.palette.base_disabled.into(),
+            Button::Primary => self.palette.primary_disabled.into(),
+        };
+
+        Appearance {
+            background: Some(background),
+            text_color: match style {
+                Button::Default => self.palette.base_content_disabled,
+                Button::Primary => self.palette.primary_content_disabled,
+            },
+            border: Border {
+                color: match style {
+                    Button::Default => self.palette.base_200,
+                    Button::Primary => self.palette.primary_100,
+                },
+                ..base.border
+            },
+            shadow: Shadow {
+                color: Color::TRANSPARENT,
+                ..Default::default()
+            },
+            ..base
+        }
     }
 
     fn hovered(&self, style: &Self::Style) -> Appearance {

blurthing/src/styles/container.rs

@@ -2,12 +2,24 @@ use iced::widget::container::{Appearance, StyleSheet};
 
 use super::Theme;
 
+#[derive(Debug, Clone, Copy, Default)]
+pub enum Container {
+    #[default]
+    Light,
+    Medium,
+}
+
 impl StyleSheet for Theme {
-    type Style = ();
+    type Style = Container;
+
+    fn appearance(&self, style: &Self::Style) -> Appearance {
+        let background = match style {
+            Container::Light => self.palette.base_100.into(),
+            Container::Medium => self.palette.base_200.into(),
+        };
 
-    fn appearance(&self, _style: &Self::Style) -> Appearance {
         Appearance {
-            background: Some(self.palette.base_100.into()),
+            background: Some(background),
             ..Default::default()
         }
     }

blurthing/src/styles/mod.rs

@@ -9,6 +9,8 @@ mod text_input;
 use iced::{color, Color};
 
 pub use button::Button;
+pub use container::Container;
+pub use text::Text;
 
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub struct Palette {
@@ -19,33 +21,41 @@ pub struct Palette {
     pub base_200: Color,
     pub base_300: Color,
     pub base_400: Color,
-    pub base_500: Color,
+    pub base_disabled: Color,
     pub base_content: Color,
+    pub base_content_subtle: Color,
+    pub base_content_disabled: Color,
 
     pub primary_100: Color,
     pub primary_200: Color,
     pub primary_300: Color,
     pub primary_500: Color,
+    pub primary_disabled: Color,
     pub primary_content: Color,
+    pub primary_content_disabled: Color,
 }
 
 impl Palette {
     pub const DARK: Self = Self {
-        background: color!(0x060606),
+        background: color!(0x0a0a0a),
         foreground: color!(0xd6d6d6),
 
         base_100: color!(0x121212),
         base_200: color!(0x1e1e1e),
         base_300: color!(0x2b2b2b),
         base_400: color!(0x383838),
-        base_500: color!(0x454545),
+        base_disabled: color!(0x121212),
         base_content: color!(0xd6d6d6),
+        base_content_subtle: color!(0x8c8c8c),
+        base_content_disabled: color!(0x2b2b2b),
 
         primary_100: color!(0x297aa3),
         primary_200: color!(0x2e8ab8),
         primary_300: color!(0x3399cc),
         primary_500: color!(0x5cadd6),
+        primary_disabled: color!(0x0c2531),
         primary_content: color!(0xffffff),
+        primary_content_disabled: color!(0x297aa3),
     };
 }
 

blurthing/src/styles/scrollable.rs

@@ -10,15 +10,11 @@ impl StyleSheet for Theme {
         Appearance {
             container: Default::default(),
             scrollbar: Scrollbar {
-                background: None,
+                background: Some(self.palette.base_100.into()),
                 border: Border::default(),
                 scroller: Scroller {
-                    color: self.palette.base_300,
-                    border: Border {
-                        color: self.palette.base_500,
-                        width: 1.0,
-                        radius: 4.0.into(),
-                    },
+                    color: self.palette.base_200,
+                    border: Default::default(),
                 },
             },
             gap: None,
@@ -32,9 +28,9 @@ impl StyleSheet for Theme {
             scrollbar: Scrollbar {
                 scroller: Scroller {
                     color: if is_mouse_over_scrollbar {
-                        self.palette.base_400
-                    } else {
                         self.palette.base_300
+                    } else {
+                        self.palette.base_200
                     },
                     ..base.scrollbar.scroller
                 },
@@ -51,7 +47,7 @@ impl StyleSheet for Theme {
         Appearance {
             scrollbar: Scrollbar {
                 scroller: Scroller {
-                    color: self.palette.base_500,
+                    color: self.palette.base_400,
                     ..base.scrollbar.scroller
                 },
                 ..base.scrollbar

blurthing/src/styles/slider.rs

@@ -46,7 +46,7 @@ impl StyleSheet for Theme {
 
         Appearance {
             rail: Rail {
-                colors: (self.palette.primary_500, self.palette.base_500),
+                colors: (self.palette.primary_500, self.palette.base_400),
                 ..base.rail
             },
             ..base

blurthing/src/styles/text.rs

@@ -2,10 +2,22 @@ use iced::widget::text::{Appearance, StyleSheet};
 
 use super::Theme;
 
+#[derive(Debug, Clone, Copy, Default)]
+pub enum Text {
+    #[default]
+    Regular,
+    Subtle,
+}
+
 impl StyleSheet for Theme {
-    type Style = ();
+    type Style = Text;
 
-    fn appearance(&self, _style: Self::Style) -> Appearance {
-        Default::default()
+    fn appearance(&self, style: Self::Style) -> Appearance {
+        Appearance {
+            color: match style {
+                Text::Regular => None,
+                Text::Subtle => Some(self.palette.base_content_subtle),
+            },
+        }
     }
 }

blurthing/src/styles/text_input.rs

@@ -1,5 +1,5 @@
 use iced::widget::text_input::{Appearance, StyleSheet};
-use iced::{Background, Border, Color};
+use iced::{Border, Color};
 
 use super::Theme;
 
@@ -20,7 +20,11 @@ impl StyleSheet for Theme {
 
     fn disabled(&self, _style: &Self::Style) -> Appearance {
         Appearance {
-            background: self.palette.base_300.into(), // TODO: change
+            background: self.palette.base_disabled.into(),
+            border: Border {
+                color: self.palette.base_200,
+                ..self.active(_style).border
+            },
             ..self.active(_style)
         }
     }
@@ -42,7 +46,7 @@ impl StyleSheet for Theme {
     }
 
     fn disabled_color(&self, _style: &Self::Style) -> Color {
-        self.palette.base_400 // todo change
+        self.palette.base_content_disabled
     }
 
     fn placeholder_color(&self, _style: &Self::Style) -> Color {