Looking usable

src/main.rs

@@ -1,5 +1,6 @@
-use iced::widget::{Column, Container, Id, TextInput, container, operation, stack, text};
-use iced::{Color, Element, Event, Task as Command};
+use iced::widget::{Column, Id, TextInput, column, container, operation, text, text_input};
+use iced::{Background, Color, Element, Event, Task as Command};
+use iced::{Border, color};
 use iced_layershell::application;
 use iced_layershell::reexport::Anchor;
 use iced_layershell::settings::{LayerShellSettings, Settings, StartMode};
@@ -131,39 +132,48 @@ fn update(state: &mut State, message: Message) -> Command<Message> {
     }
 }
 
-fn view(state: &State) -> Container<'_, Message> {
+fn view(state: &State) -> Element<'_, Message> {
     let input: TextInput<'_, Message> =
         TextInput::new("Type something here...", &state.current_message)
             .on_input(Message::TextInput)
             .on_submit(Message::TextSubmit)
             .id(state.input_id.clone());
 
+    let input = input.style(|_theme, _status| text_input::Style {
+        background: Background::Color(Color::TRANSPARENT),
+        border: Border::default(),
+        icon: Color::TRANSPARENT,
+        placeholder: color!(0xbbbbbb),
+        value: Color::WHITE,
+        selection: color!(0x0000ff),
+    });
+
     let content = Column::with_children(
         std::iter::once(input.into())
-            .chain(
-                state
-                    .history
-                    .iter()
-                    .rev()
-                    .map(|msg| text!("{}", msg.output).into()),
-            )
+            .chain(state.history.iter().rev().map(|msg| {
+                column![
+                    text!("{}", msg.promt).size(12).color(color!(0x999999)),
+                    text!(" {}", msg.output)
+                ]
+                .into()
+            }))
             .collect::<Vec<Element<_>>>(),
     );
 
-    let bg = container(iced::widget::Space::new())
+    container(content)
         .width(iced::Length::Fill)
         .height(iced::Length::Fill)
+        .padding(8.)
         .style(|_theme| container::Style {
+            text_color: Some(Color::WHITE),
             background: Some(iced::Background::Color(Color::from_rgba8(30, 30, 46, 0.75))),
+            border: iced::Border::default()
+                .rounded(15.)
+                .color(color!(0xaaaaff))
+                .width(2.),
             ..Default::default()
-        });
-
-    let layered = stack![bg, content];
-
-    container(layered).style(|_theme| container::Style {
-        text_color: Some(Color::WHITE),
-        ..Default::default()
-    })
+        })
+        .into()
 }
 
 fn style(_state: &State, theme: &iced::Theme) -> iced::theme::Style {