feat: update `iced`, make designer view more usable

3 files changed, 55 insertions, 24 deletions

diff --git a/src/main.rs b/src/main.rs
index 3895dbc..d58329a 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -54,12 +54,18 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
         rt.block_on(Config::load())
     };
 
-    iced::application(App::title, App::update, App::view)
-        .font(icon::FONT)
-        .theme(|state| state.theme.value().clone())
-        .subscription(App::subscription)
-        .antialiasing(true)
-        .run_with(move || App::new(config_load))?;
+    iced::application(
+        move || App::new(config_load.clone()),
+        App::update,
+        App::view,
+    )
+    .title(App::title)
+    .font(icon::FONT)
+    .theme(|state| state.theme.value().clone())
+    .subscription(App::subscription)
+    .antialiasing(true)
+    .run()?;
+
     Ok(())
 }
 
diff --git a/src/panes/designer_view.rs b/src/panes/designer_view.rs
index 6340f73..69ff750 100644
--- a/src/panes/designer_view.rs
+++ b/src/panes/designer_view.rs
@@ -1,16 +1,29 @@
-use iced::widget::{Space, button, container, pane_grid, row, text, themer};
+use iced::widget::{
+    Space, button, center, container, pane_grid, responsive, row, text, themer,
+};
 use iced::{Alignment, Element, Length};
 
 use super::style;
 use crate::types::{DesignerPane, Message, RenderedElement};
 
 pub fn view<'a>(
-    element_tree: Option<&RenderedElement>,
+    element_tree: Option<&'a RenderedElement>,
     designer_theme: iced::Theme,
     is_focused: bool,
 ) -> pane_grid::Content<'a, Message> {
     let el_tree: Element<'a, Message> = match element_tree {
-        Some(tree) => tree.clone().into(),
+        Some(tree) => responsive(|size| {
+            center(
+                container(tree.clone())
+                    .style(|theme| {
+                        container::background(theme.palette().background)
+                    })
+                    .height(size.height * 0.5)
+                    .width(size.height * 0.8),
+            )
+            .into()
+        })
+        .into(),
         None => text("Open a project or begin creating one").into(),
     };
     let content = container(themer(designer_theme, el_tree))
diff --git a/src/types/rendered_element.rs b/src/types/rendered_element.rs
index 77b76e4..bd8187e 100755
--- a/src/types/rendered_element.rs
+++ b/src/types/rendered_element.rs
@@ -340,15 +340,19 @@ impl<'a> From<RenderedElement> for Element<'a, Message> {
             ElementName::Container => if child_elements.len() == 1 {
                 widget::container(child_elements[0].clone())
             } else {
-                widget::container("New Container")
-                    .padding(20)
-                    .style(|theme| widget::container::Style {
-                        border: iced::border::rounded(4).color(
-                            theme.extended_palette().background.strongest.text,
-                        ),
+                widget::container("New Container").style(
+                    |theme: &iced::Theme| widget::container::Style {
+                        border: iced::Border {
+                            color: theme.palette().text,
+
+                            width: 2.0,
+                            radius: 4.into(),
+                        },
                         ..Default::default()
-                    })
+                    },
+                )
             }
+            .padding(20)
             .apply_options(copy.options)
             .into(),
             ElementName::Row => {
@@ -356,6 +360,7 @@ impl<'a> From<RenderedElement> for Element<'a, Message> {
                     widget::Row::with_children(
                         child_elements.into_iter().map(Into::into),
                     )
+                    .padding(20)
                     .apply_options(copy.options)
                     .into()
                 } else {
@@ -364,10 +369,13 @@ impl<'a> From<RenderedElement> for Element<'a, Message> {
                             .padding(20)
                             .apply_options(copy.options),
                     )
-                    .style(|theme| widget::container::Style {
-                        border: iced::border::rounded(4).color(
-                            theme.extended_palette().background.strongest.text,
-                        ),
+                    .style(|theme: &iced::Theme| widget::container::Style {
+                        border: iced::Border {
+                            color: theme.palette().text,
+
+                            width: 2.0,
+                            radius: 4.into(),
+                        },
                         ..Default::default()
                     })
                     .into()
@@ -378,6 +386,7 @@ impl<'a> From<RenderedElement> for Element<'a, Message> {
                     widget::Column::with_children(
                         child_elements.into_iter().map(Into::into),
                     )
+                    .padding(20)
                     .apply_options(copy.options)
                     .into()
                 } else {
@@ -386,10 +395,13 @@ impl<'a> From<RenderedElement> for Element<'a, Message> {
                             .padding(20)
                             .apply_options(copy.options),
                     )
-                    .style(|theme| widget::container::Style {
-                        border: iced::border::rounded(4).color(
-                            theme.extended_palette().background.strongest.text,
-                        ),
+                    .style(|theme: &iced::Theme| widget::container::Style {
+                        border: iced::Border {
+                            color: theme.palette().text,
+
+                            width: 2.0,
+                            radius: 4.into(),
+                        },
                         ..Default::default()
                     })
                     .into()