feat: UI overhaul

assets/images/icon.svg

@@ -1,203 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="512"
-   height="512"
-   viewBox="0 0 512 512"
-   version="1.1"
-   id="svg1"
-   sodipodi:docname="icon.svg"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="px"
-     inkscape:zoom="1.1020922"
-     inkscape:cx="188.27826"
-     inkscape:cy="204.15715"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1">
-    <inkscape:path-effect
-       effect="fillet_chamfer"
-       id="path-effect2"
-       is_visible="true"
-       lpeversion="1"
-       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
-       radius="0"
-       unit="px"
-       method="auto"
-       mode="F"
-       chamfer_steps="1"
-       flexible="false"
-       use_knot_distance="true"
-       apply_no_radius="true"
-       apply_with_radius="true"
-       only_selected="false"
-       hide_knots="false" />
-    <inkscape:path-effect
-       effect="fillet_chamfer"
-       id="path-effect1"
-       is_visible="true"
-       lpeversion="1"
-       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
-       radius="0"
-       unit="px"
-       method="auto"
-       mode="F"
-       chamfer_steps="1"
-       flexible="false"
-       use_knot_distance="true"
-       apply_no_radius="true"
-       apply_with_radius="true"
-       only_selected="false"
-       hide_knots="false" />
-  </defs>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <rect
-       style="display:inline;fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-       id="rect1"
-       width="512"
-       height="512"
-       x="0"
-       y="0"
-       sodipodi:insensitive="true"
-       inkscape:label="background"
-       ry="128.00018"
-       sodipodi:type="rect"
-       rx="129.98714" />
-    <g
-       id="g17"
-       inkscape:label="logo"
-       transform="translate(8)">
-      <g
-         id="g8"
-         inkscape:label="ring">
-        <g
-           id="g7"
-           inkscape:label="back">
-          <circle
-             style="fill:#d97706;fill-opacity:1;stroke:#d97706;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1"
-             cx="224"
-             cy="256"
-             r="128"
-             inkscape:label="ring back" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:21.8936;stroke-dasharray:none;stroke-opacity:1"
-             id="rect2"
-             width="48"
-             height="288"
-             x="224"
-             y="112"
-             inkscape:label="rect2" />
-        </g>
-        <g
-           id="g1"
-           transform="translate(-4.163147,-0.69235229)"
-           inkscape:label="front">
-          <circle
-             style="fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1-5-2"
-             cx="276.16315"
-             cy="256.69235"
-             r="128" />
-          <circle
-             style="fill:none;fill-opacity:1;stroke:#fbbf24;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1-5"
-             cx="276.16315"
-             cy="256.69235"
-             r="128" />
-        </g>
-      </g>
-      <g
-         id="g16"
-         inkscape:label="tick"
-         transform="translate(16.000231,-8.3918418e-5)">
-        <g
-           id="g6"
-           transform="rotate(45,-57.96574,415.4208)"
-           style="fill:#d97706;fill-opacity:1;stroke:none;stroke-opacity:1"
-           inkscape:label="back">
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect9"
-             width="32.000458"
-             height="32"
-             x="273.94067"
-             y="210.74516"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect8"
-             width="32.000458"
-             height="32"
-             x="206.05841"
-             y="233.37257"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect7"
-             height="16"
-             x="228.686"
-             y="285.255"
-             width="32"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect5"
-             width="64"
-             height="32"
-             x="0"
-             y="100" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
-             id="rect6"
-             width="32"
-             height="96"
-             x="32"
-             y="36" />
-        </g>
-        <g
-           id="g4"
-           transform="rotate(45,-41.965512,454.04877)"
-           style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-opacity:1"
-           inkscape:label="front">
-          <rect
-             style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect3"
-             width="64"
-             height="32"
-             x="0"
-             y="100" />
-          <rect
-             style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
-             id="rect4"
-             width="32"
-             height="96"
-             x="32"
-             y="36" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

assets/manifest.json

@@ -3,8 +3,8 @@
   "short_name": "Todo Baggins",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#27272a",
+  "background_color": "#101828",
-  "theme_color": "#27272a",
+  "theme_color": "#b89a2e",
   "icons": [
     {
       "src": "/assets/images/icon.png",

assets/styles/input_range.css

@@ -8,56 +8,37 @@ input[type="range"] {
   background: transparent;
 }
 
-input[type="range"]::-moz-range-thumb {
+input[type="range"]::-moz-range-thumb,
+input[type="range"]::-webkit-slider-thumb {
   width: 1.25rem;
   height: 1.25rem;
-  background: rgba(228 228 231);
+  background: var(--color-gray-400);
+  filter: drop-shadow(0 var(--spacing) 0 var(--color-gray-500));
   border: 0;
   border-radius: 0.5rem;
+  cursor: pointer;
 }
 
-input[type="range"]::-moz-range-progress {
+input[type="range"]::-webkit-slider-thumb {
-  background: #525259;
+  position: relative;
+  top: -9px;
+}
+
+input[type="range"]::-moz-range-track,
+input[type="range"]::-webkit-slider-runnable-track {
+  background: var(--color-gray-800-muted);
   height: 0.5rem;
+  filter: drop-shadow(
+    0 calc(0px - var(--spacing)) 0 var(--color-gray-900-muted)
+  );
   border-radius: 0.25rem;
 }
 
 input[type="range"]::-moz-range-track {
-  background: rgba(39 39 42 / 50%);
+  transform: translateY(3px);
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-moz-range-progress {
-  background: #2d2d31;
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-moz-range-track {
-  background: rgba(113 113 122 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  width: 1.25rem;
-  height: 1.25rem;
-  background: rgba(228 228 231);
-  border: 0;
-  border-radius: 0.5rem;
-  position: relative;
-  top: -0.4rem;
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
-  background: rgba(39 39 42 / 50%);
+  position: relative;
-  height: 0.5rem;
+  top: 3px;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-webkit-slider-runnable-track {
-  background: rgba(39 39 42 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
 }

assets/styles/select_arrow.css

@@ -0,0 +1,7 @@
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%239ca3af' d='M300.3 440.8C312.9 451 331.4 450.3 343.1 438.6L471.1 310.6C480.3 301.4 483 287.7 478 275.7C473 263.7 461.4 256 448.5 256L192.5 256C179.6 256 167.9 263.8 162.9 275.8C157.9 287.8 160.7 301.5 169.9 310.6L297.9 438.6L300.3 440.8z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 2rem;
+  background-position: right 0.5rem center;
+}

src/components/app.rs

@@ -1,4 +1,5 @@
 use crate::internationalization::get_language_identifier;
+
 use crate::route::Route;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
@@ -15,6 +16,7 @@ static FONTS_DIRECTORY: Asset = asset!(
 const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
 const INPUT_NUMBER_ARROWS_CSS: Asset = asset!("/assets/styles/input_number_arrows.css");
 const INPUT_RANGE_CSS: Asset = asset!("/assets/styles/input_range.css");
+const SELECT_ARROW_CSS: Asset = asset!("/assets/styles/select_arrow.css");
 const MANIFEST: Asset = asset!("/assets/manifest.json");
 
 #[component]
@@ -36,10 +38,11 @@ pub(crate) fn App() -> Element {
         document::Stylesheet { href: TAILWIND_CSS }
         document::Stylesheet { href: INPUT_NUMBER_ARROWS_CSS }
         document::Stylesheet { href: INPUT_RANGE_CSS }
+        document::Stylesheet { href: SELECT_ARROW_CSS }
         document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" }
 
         div {
-            class: "min-h-screen pt-4 pb-36 flex flex-col text-zinc-200 bg-zinc-800",
+            class: "min-h-screen py-4 flex flex-col text-gray-300 bg-gray-900",
             Router::<Route> {}
         }
     }

src/components/bottom_panel.rs

@@ -1,78 +1,22 @@
-use crate::components::error_boundary_message::ErrorBoundaryMessage;
 use crate::components::navigation::Navigation;
-use crate::components::project_form::ProjectForm;
-use crate::components::task_form::TaskForm;
-use crate::models::project::Project;
-use crate::models::task::Task;
-use crate::route::Route;
 use dioxus::prelude::*;
 
 #[component]
-pub(crate) fn BottomPanel(display_form: Signal<bool>) -> Element {
+pub(crate) fn BottomPanel() -> Element {
-    // A signal for delaying the application of styles.
-    #[allow(clippy::redundant_closure)]
-    let mut expanded = use_signal(|| display_form());
     let navigation_expanded = use_signal(|| false);
-    let current_route = use_route();
-
-    let mut project_being_edited = use_context::<Signal<Option<Project>>>();
-    let mut task_being_edited = use_context::<Signal<Option<Task>>>();
-
-    use_effect(use_reactive(&display_form, move |display_form| {
-        if display_form() {
-            expanded.set(true);
-        } else {
-            spawn(async move {
-                // Necessary for a smooth – not instant – height transition.
-                #[cfg(not(feature = "server"))]
-                async_std::task::sleep(std::time::Duration::from_millis(500)).await;
-                /* The check is necessary for the situation when the user expands the panel while
-                it is being closed. */
-                if !display_form() {
-                    expanded.set(false);
-                }
-            });
-        }
-    }));
 
     rsx! {
         div {
             class: format!(
-                "flex flex-col pointer-events-auto bg-zinc-700/50 rounded-t-xl border-t-zinc-600 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
+                "flex flex-col pointer-events-auto bg-gray-800 transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
-                match (display_form(), current_route, navigation_expanded()) {
+                if navigation_expanded() {
-                    (false, _, false) => "h-[64px]",
+                    "h-[130px]"
-                    (false, _, true) => "h-[130px]",
+                } else {
-                    (true, Route::ProjectsPage, _) => "h-[130px]",
+                    "h-[66px]"
-                    (true, _, _) => "h-[506px]",
                 }
             ),
-            if expanded() {
-                ErrorBoundaryMessage {
-                    match current_route {
-                        Route::ProjectsPage => rsx! {
-                            ProjectForm {
-                                project: project_being_edited(),
-                                on_successful_submit: move |_| {
-                                    display_form.set(false);
-                                    project_being_edited.set(None);
-                                }
-                            }
-                        },
-                        _ => rsx! {
-                            TaskForm {
-                                task: task_being_edited(),
-                                on_successful_submit: move |_| {
-                                    display_form.set(false);
-                                    task_being_edited.set(None);
-                                }
-                            }
-                        }
-                    }
-                }
-            } else {
             Navigation {
-                    expanded: navigation_expanded,
+                is_expanded: navigation_expanded,
-                }
             }
         }
     }

src/components/button_primary.rs

@@ -0,0 +1,29 @@
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn ButtonPrimary(
+    class: Option<String>,
+    children: Element,
+    #[props(extends = GlobalAttributes, extends = button)] attributes: Vec<Attribute>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
+    onclick: Option<Callback<Event<MouseData>>>,
+) -> Element {
+    rsx! {
+        button {
+            class: format!(
+                "cursor-pointer pb-[6px] hover:pb-[7px] active:pb-[2px] mt-[1px] hover:mt-0 active:mt-[5px] hover:*:drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] active:*:drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] transition-all duration-150 {}",
+                class.unwrap_or("".to_owned())
+            ),
+            onclick: move |event| {
+                if let Some(onclick) = onclick {
+                    onclick.call(event);
+                }
+            },
+            ..attributes,
+            div {
+                class: "py-3.5 px-4 flex flex-row justify-center items-center bg-amber-300-muted drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] text-amber-700-muted rounded-xl transition-all duration-150",
+                {children}
+            }
+        }
+    }
+}

src/components/button_secondary.rs

@@ -0,0 +1,29 @@
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn ButtonSecondary(
+    class: Option<String>,
+    children: Element,
+    #[props(extends = GlobalAttributes, extends = button)] attributes: Vec<Attribute>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
+    onclick: Option<Callback<Event<MouseData>>>,
+) -> Element {
+    rsx! {
+        button {
+            class: format!(
+                "cursor-pointer pb-[6px] hover:pb-[7px] active:pb-[2px] mt-[1px] hover:mt-0 active:mt-[5px] hover:*:drop-shadow-[0_7px_0_var(--color-gray-800)] active:*:drop-shadow-[0_2px_0_var(--color-gray-800)] transition-all duration-150 {}",
+                class.unwrap_or("".to_owned())
+            ),
+            onclick: move |event| {
+                if let Some(onclick) = onclick {
+                    onclick.call(event);
+                }
+            },
+            ..attributes,
+            div {
+                class: "py-3.5 px-4 flex flex-row justify-center items-center bg-gray-600 drop-shadow-[0_6px_0_var(--color-gray-800)] rounded-xl transition-all duration-150",
+                {children}
+            }
+        }
+    }
+}

src/components/category_calendar_task_list.rs

@@ -28,11 +28,12 @@ pub(crate) fn CategoryCalendarTaskList() -> Element {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                        class: "px-7 flex flex-row items-center gap-2 font-bold",
+                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         div {
                             class: "pt-1",
                             {
-                                date_current.format_localized(t!(
+                                date_current.format_localized(
+                                    t!(
                                         if date_current.year() == Local::now().year() {
                                             "date-weekday-format"
                                         } else {

src/components/category_input.rs

@@ -1,10 +1,11 @@
+use crate::components::select_button::SelectButton;
 use crate::models::category::Category;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
-use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
 use dioxus_free_icons::icons::fa_solid_icons::{
-    FaCalendarDays, FaForward, FaHourglassHalf, FaInbox, FaQuestion, FaWater,
+    FaCalendarDays, FaHourglassHalf, FaInbox, FaSignsPost, FaWater,
 };
 
 #[component]
@@ -14,105 +15,51 @@ pub(crate) fn CategoryInput(
 ) -> Element {
     rsx! {
         div {
-            class: format!("flex flex-row gap-2 {}", class.unwrap_or("")),
+            class: format!("grid grid-cols-3 gap-3 {}", class.unwrap_or("")),
-            button {
+            SelectButton {
-                r#type: "button",
+                icon: FaLightbulb,
-                class: format!(
+                is_selected: matches!(selected_category(), Category::SomedayMaybe),
-                    "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
+                on_select: move |_| {
-                    if selected_category() == Category::SomedayMaybe { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
                     selected_category.set(Category::SomedayMaybe);
-                },
-                Icon {
-                    icon: FaQuestion,
-                    height: 16,
-                    width: 16
                 }
-            },
+            }
-            button {
+            SelectButton {
-                r#type: "button",
-                class: format!(
-                    "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
-                    if selected_category() == Category::LongTerm { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
-                    selected_category.set(Category::LongTerm);
-                },
-                Icon {
                 icon: FaWater,
-                    height: 16,
+                is_selected: matches!(selected_category(), Category::LongTerm),
-                    width: 16
+                on_select: move |_| {
+                    selected_category.set(Category::LongTerm);
                 }
-            },
+            }
-            button {
+            SelectButton {
-                r#type: "button",
-                class: format!(
-                    "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
-                    if let Category::WaitingFor(_) = selected_category() { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
-                    selected_category.set(Category::WaitingFor(String::new()));
-                },
-                Icon {
                 icon: FaHourglassHalf,
-                    height: 16,
+                is_selected: matches!(selected_category(), Category::WaitingFor(_)),
-                    width: 16
+                on_select: move |_| {
+                    selected_category.set(Category::WaitingFor(String::new()));
                 }
-            },
+            }
-            button {
+            SelectButton {
-                r#type: "button",
+                icon: FaSignsPost,
-                class: format!(
+                is_selected: matches!(selected_category(), Category::NextSteps),
-                    "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
+                on_select: move |_| {
-                    if selected_category() == Category::NextSteps { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
                     selected_category.set(Category::NextSteps);
-                },
-                Icon {
-                    icon: FaForward,
-                    height: 16,
-                    width: 16
                 }
-            },
+            }
-            button {
+            SelectButton {
-                r#type: "button",
+                icon: FaCalendarDays,
-                class: format!(
+                is_selected: matches!(selected_category(), Category::Calendar { .. }),
-                    "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
+                on_select: move |_| {
-                    if let Category::Calendar { .. } = selected_category() { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
                     selected_category.set(Category::Calendar {
                         date: chrono::Local::now().date_naive(),
                         reoccurrence: None,
                         time: None,
                     });
-                },
-                Icon {
-                    icon: FaCalendarDays,
-                    height: 16,
-                    width: 16
                 }
-            },
+            }
-            button {
+            SelectButton {
-                r#type: "button",
-                class: format!(
-                    "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
-                    if selected_category() == Category::Inbox { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
-                    selected_category.set(Category::Inbox);
-                },
-                Icon {
                 icon: FaInbox,
-                    height: 16,
+                is_selected: matches!(selected_category(), Category::Inbox),
-                    width: 16
+                on_select: move |_| {
+                    selected_category.set(Category::Inbox);
                 }
             }
         }

src/components/category_today_task_list.rs

@@ -46,12 +46,13 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
     rsx! {
         div {
             class: "pt-4 flex flex-col gap-8",
+            if !long_term_tasks.is_empty() {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                    class: "px-7 flex flex-row items-center gap-2 font-bold",
+                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         Icon {
-                        class: "mx-1",
+                            class: "mx-1.5",
                             icon: FaWater
                         }
                         div {
@@ -62,13 +63,14 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
                         tasks: long_term_tasks
                     }
                 }
+            }
             if !overdue_tasks.is_empty() {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                        class: "px-7 flex flex-row items-center gap-2 font-bold",
+                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         Icon {
-                            class: "mx-1",
+                            class: "mx-1.25",
                             height: 22,
                             width: 22,
                             icon: FaCalendarXmark
@@ -86,9 +88,9 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
             div {
                 class: "flex flex-col gap-4",
                 div {
-                    class: "px-7 flex flex-row items-center gap-2 font-bold",
+                    class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
                     Icon {
-                        class: "mx-1",
+                        class: "mx-1.25",
                         height: 22,
                         width: 22,
                         icon: FaCalendarCheck

src/components/create_button.rs

@@ -0,0 +1,31 @@
+use crate::components::project_form::PROJECT_BEING_EDITED;
+use crate::components::{button_primary::ButtonPrimary, task_form::TASK_BEING_EDITED};
+use crate::route::Route;
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, icons::fa_solid_icons::FaGavel};
+
+#[component]
+pub(crate) fn CreateButton() -> Element {
+    let navigator = use_navigator();
+    let current_route = use_route();
+    rsx! {
+        ButtonPrimary {
+            class: "pointer-events-auto m-4 self-end *:rounded-full! *:p-4",
+            onclick: move |_| {
+                *TASK_BEING_EDITED.write() = None;
+                *PROJECT_BEING_EDITED.write() = None;
+                navigator.push(
+                    match current_route {
+                        Route::ProjectsPage => Route::ProjectFormPage,
+                        _ => Route::TaskFormPage,
+                    }
+                );
+            },
+            Icon {
+                icon: FaGavel,
+                height: 24,
+                width: 24
+            }
+        }
+    }
+}

src/components/error_boundary_message.rs

@@ -14,6 +14,7 @@ pub(crate) fn ErrorBoundaryMessage(children: Element, class: Option<String>) ->
                         class: "grow flex flex-col justify-center items-center",
                         div {
                             Icon {
+                                class: "text-gray-500",
                                 icon: FaTriangleExclamation,
                                 height: 32,
                                 width: 32

src/components/form_open_button.rs

@@ -1,39 +0,0 @@
-use crate::models::project::Project;
-use crate::models::task::Task;
-use dioxus::prelude::*;
-use dioxus_free_icons::{
-    Icon,
-    icons::fa_solid_icons::{FaPlus, FaXmark},
-};
-
-#[component]
-pub(crate) fn FormOpenButton(opened: Signal<bool>) -> Element {
-    let mut project_being_edited = use_context::<Signal<Option<Project>>>();
-    let mut task_being_edited = use_context::<Signal<Option<Task>>>();
-
-    rsx! {
-        button {
-            class: "pointer-events-auto m-4 py-4 px-5 self-end text-center bg-zinc-300/50 rounded-xl border-t-zinc-200 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] text-2xl text-zinc-200 cursor-pointer",
-            onclick: move |_| {
-                if opened() {
-                    project_being_edited.set(None);
-                    task_being_edited.set(None);
-                }
-                opened.set(!opened());
-            },
-            if opened() {
-                Icon {
-                    icon: FaXmark,
-                    height: 24,
-                    width: 24
-                }
-            } else {
-                Icon {
-                    icon: FaPlus,
-                    height: 24,
-                    width: 24
-                }
-            }
-        }
-    }
-}

src/components/input.rs

@@ -0,0 +1,47 @@
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn Input(
+    class: Option<String>,
+    name: String,
+    r#type: String,
+    id: Option<String>,
+    #[props(extends = GlobalAttributes, extends = input)] attributes: Vec<Attribute>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/5271 gets resolved.
+    autofocus: Option<bool>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
+    oninput: Option<Callback<Event<FormData>>>,
+    onchange: Option<Callback<Event<FormData>>>,
+) -> Element {
+    rsx! {
+        input {
+            class: format!(
+                "pt-3 pb-2.25 {} bg-gray-800-muted enabled:hover:bg-gray-800 enabled:focus:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl outline-0 {} transition-all duration-150 {}",
+                match r#type.as_str() {
+                    "date" => "ps-3.25 pe-3",
+                    _ => "px-4"
+                },
+                match r#type.as_str() {
+                    "text" | "number" => "",
+                    _ => "enabled:cursor-pointer"
+                },
+                class.unwrap_or("".to_owned())
+            ),
+            name: name.clone(),
+            r#type,
+            id: id.unwrap_or(format!("input_{}", name)),
+            autofocus,
+            oninput: move |event| {
+                if let Some(oninput) = oninput {
+                    oninput.call(event);
+                }
+            },
+            onchange: move |event| {
+                if let Some(onchange) = oninput {
+                    onchange.call(event);
+                }
+            },
+            ..attributes
+        }
+    }
+}

src/components/input_label.rs

@@ -0,0 +1,21 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};
+
+#[component]
+pub(crate) fn InputLabel<I: IconShape + Clone + PartialEq + 'static>(
+    icon: I,
+    r#for: Option<String>,
+) -> Element {
+    rsx! {
+        label {
+            r#for,
+            class: "mt-0.5 min-w-7 flex flex-row justify-center items-center",
+            Icon {
+                class: "text-gray-600",
+                icon,
+                height: 16,
+                width: 16
+            }
+        }
+    }
+}

src/components/mod.rs

@@ -1,16 +1,21 @@
 pub(crate) mod app;
 pub(crate) mod bottom_panel;
+pub(crate) mod button_primary;
+pub(crate) mod button_secondary;
 pub(crate) mod category_calendar_task_list;
 pub(crate) mod category_input;
 pub(crate) mod category_today_task_list;
+pub(crate) mod create_button;
 pub(crate) mod error_boundary_message;
-pub(crate) mod form_open_button;
+pub(crate) mod input;
+pub(crate) mod input_label;
 pub(crate) mod navigation;
 pub(crate) mod navigation_item;
 pub(crate) mod project_form;
 pub(crate) mod project_list;
 pub(crate) mod project_select;
-pub(crate) mod reoccurrence_input;
+pub(crate) mod reoccurrence_interval_input;
+pub(crate) mod select_button;
 pub(crate) mod sticky_bottom;
 pub(crate) mod subtasks_form;
 pub(crate) mod task_form;

src/components/navigation.rs

@@ -2,32 +2,37 @@ use crate::components::navigation_item::NavigationItem;
 use crate::route::Route;
 use dioxus::prelude::*;
 use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
 use dioxus_free_icons::icons::fa_solid_icons::{
-    FaBars, FaCalendarDay, FaCalendarDays, FaCheck, FaForward, FaHourglassHalf, FaInbox, FaList,
+    FaBars, FaCalendarDay, FaCalendarDays, FaHourglassHalf, FaInbox, FaList, FaSignsPost,
-    FaQuestion, FaTrashCan,
+    FaTrashCan, FaVolcano,
 };
 
 #[component]
-pub(crate) fn Navigation(expanded: Signal<bool>) -> Element {
+pub(crate) fn Navigation(is_expanded: Signal<bool>) -> Element {
     rsx! {
         div {
             class: "grid grid-cols-5 justify-stretch",
             button {
                 class: format!(
-                    "py-5 flex flex-row justify-center items-center {} cursor-pointer",
+                    "py-2 flex flex-row justify-center items-center cursor-pointer",
-                    if expanded() { "text-zinc-200" }
+                ),
-                    else { "text-zinc-500" }
+                onclick: move |_| is_expanded.set(!is_expanded()),
+                div {
+                    class: format!("pt-2.5 px-4 {} transition-all duration-150",
+                        if is_expanded() { "pb-2 mt-1 bg-gray-900 text-gray-400 rounded-xl drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-950)]" }
+                        else { "pb-3 bg-gray-800 rounded-xl drop-shadow-[0_0_0_var(--color-gray-950)] text-gray-600" }
                     ),
-                onclick: move |_| expanded.set(!expanded()),
                     Icon {
                         icon: FaBars,
                         height: 24,
                         width: 24
                     }
+                }
             },
             NavigationItem {
                 route: Route::CategoryNextStepsPage,
-                icon: FaForward
+                icon: FaSignsPost
             },
             NavigationItem {
                 route: Route::CategoryCalendarPage,
@@ -41,7 +46,7 @@ pub(crate) fn Navigation(expanded: Signal<bool>) -> Element {
                 route: Route::CategoryInboxPage,
                 icon: FaInbox
             },
-            {if expanded() {
+            {if is_expanded() {
                 rsx! {
                     NavigationItem {
                         route: Route::ProjectsPage,
@@ -53,11 +58,11 @@ pub(crate) fn Navigation(expanded: Signal<bool>) -> Element {
                     },
                     NavigationItem {
                         route: Route::CategoryDonePage,
-                        icon: FaCheck
+                        icon: FaVolcano
                     },
                     NavigationItem {
                         route: Route::CategorySomedayMaybePage,
-                        icon: FaQuestion
+                        icon: FaLightbulb
                     },
                     NavigationItem {
                         route: Route::CategoryWaitingForPage,

src/components/navigation_item.rs

@@ -13,9 +13,12 @@ pub(crate) fn NavigationItem<I: IconShape + Clone + PartialEq + 'static>(
         Link {
             to: route.clone(),
             class: format!(
-                "py-5 flex flex-row justify-center items-center {}",
+                "py-2.5 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400",
-                if current_route == route { "text-zinc-200" }
+            ),
-                else { "text-zinc-500" }
+            div {
+                class: format!("pt-2.5 px-4 {} transition-all duration-150",
+                    if current_route == route { "pb-2 mt-1 bg-gray-900 text-gray-400 rounded-xl drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-950)]" }
+                    else { "pb-3 bg-gray-800 rounded-xl drop-shadow-[0_0_0_var(--color-gray-950)] text-gray-600" }
                 ),
                 Icon {
                     icon,
@@ -24,4 +27,5 @@ pub(crate) fn NavigationItem<I: IconShape + Clone + PartialEq + 'static>(
                 }
             }
         }
+    }
 }

src/components/project_form.rs

@@ -1,66 +1,78 @@
+use crate::components::button_primary::ButtonPrimary;
+use crate::components::button_secondary::ButtonSecondary;
+use crate::components::input::Input;
+use crate::components::input_label::InputLabel;
 use crate::models::project::Project;
 use crate::server::projects::{create_project, delete_project, edit_project};
 use dioxus::core_macro::{component, rsx};
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
 use dioxus_free_icons::Icon;
-use dioxus_free_icons::icons::fa_solid_icons::{FaFloppyDisk, FaPenClip, FaTrashCan};
+use dioxus_free_icons::icons::fa_solid_icons::{FaFeatherPointed, FaStamp, FaTrashCan, FaXmark};
+
+pub(crate) static PROJECT_BEING_EDITED: GlobalSignal<Option<Project>> = Signal::global(|| None);
 
 #[component]
-pub(crate) fn ProjectForm(
+pub(crate) fn ProjectForm() -> Element {
-    project: Option<Project>,
+    let navigator = use_navigator();
-    on_successful_submit: EventHandler<()>,
+    let project = PROJECT_BEING_EDITED();
-) -> Element {
     let project_for_submit = project.clone();
     rsx! {
         form {
+            class: "px-4 flex flex-col gap-4",
             onsubmit: move |event| {
                 event.prevent_default();
                 let project = project_for_submit.clone();
                 async move {
                     let new_project = event.parsed_values().unwrap();
-                    if let Some(project) = project {
+                    let result = if let Some(project) = project {
-                        let _ = edit_project(project.id, new_project).await;
+                        edit_project(project.id, new_project).await
                     } else {
-                        let _ = create_project(new_project).await;
+                        create_project(new_project).await
+                    };
+                    if result.is_ok() {
+                        navigator.go_back();
                     }
-                    on_successful_submit.call(());
                 }
             },
-            class: "p-4 flex flex-col gap-4",
+            id: "form_project",
             div {
                 class: "flex flex-row items-center gap-3",
-                label {
+                InputLabel {
-                    r#for: "input_title",
+                    icon: FaFeatherPointed,
-                    class: "flex flex-row justify-center items-center min-w-6",
+                    r#for: "input_title"
-                    Icon {
-                        class: "text-zinc-400/50",
-                        icon: FaPenClip,
-                        height: 16,
-                        width: 16
                 }
-                }
+                Input {
-                input {
+                    class: "grow",
                     name: "title",
                     required: true,
-                    initial_value: project.as_ref().map(|project| project.title.to_owned()),
                     r#type: "text",
-                    class: "py-2 px-3 grow bg-zinc-800/50 rounded-lg",
+                    initial_value: project.as_ref().map(|project| project.title.to_owned()),
-                    id: "input_title"
+                }
             }
         }
         div {
-                class: "flex flex-row justify-between mt-auto",
+            class: "px-4 grid grid-cols-3 gap-3 mt-auto",
-                button {
+            ButtonSecondary {
                 r#type: "button",
-                    class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
+                class: "grow",
-                    onclick: move |_| {
+                onclick: {
+                    let project = project.clone();
+                    move |_| {
                         let project = project.clone();
                         async move {
                             if let Some(project) = project {
-                                let _ = delete_project(project.id).await;
+                                let result = delete_project(project.id).await;
+                                if result.is_ok() {
+                                    /* TODO: Might not work on mobile due to
+                                    https://dioxuslabs.com/learn/0.7/essentials/router/navigation#history-buttons.
+                                    */
+                                    navigator.go_back();
+                                }
+                            } else {
+                                navigator.go_back();
+                            }
                         }
-                            on_successful_submit.call(());
                     }
                 },
                 Icon {
@@ -69,16 +81,35 @@ pub(crate) fn ProjectForm(
                     width: 16
                 }
             }
-                button {
+            if project.is_some() {
-                    r#type: "submit",
+                div {
-                    class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
+                    class: "grow flex flex-col items-stretch",
+                    GoBackButton {
+                        ButtonSecondary {
+                            /* TODO: Replace w-full` with proper flexbox styling once
+                            https://github.com/DioxusLabs/dioxus/issues/5269 is solved. */
+                            class: "w-full",
+                            r#type: "button",
                             Icon {
-                        icon: FaFloppyDisk,
+                                icon: FaXmark,
                                 height: 16,
                                 width: 16
                             }
                         }
                     }
                 }
+            } else {
+                div {}
+            }
+            ButtonPrimary {
+                form: "form_project",
+                r#type: "submit",
+                Icon {
+                    icon: FaStamp,
+                    height: 16,
+                    width: 16
+                }
+            }
+        }
     }
 }

src/components/project_list.rs

@@ -1,24 +1,22 @@
-use crate::{hooks::use_projects, models::project::Project};
+use crate::route::Route;
+use crate::{components::project_form::PROJECT_BEING_EDITED, hooks::use_projects};
 use dioxus::prelude::*;
 
 #[component]
 pub(crate) fn ProjectList() -> Element {
+    let navigator = use_navigator();
     let projects = use_projects()?;
-    let mut project_being_edited = use_context::<Signal<Option<Project>>>();
-
     rsx! {
         div {
             class: "flex flex-col",
             for project in projects {
                 div {
+                    class: "px-7 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer",
                     key: "{project.id}",
-                    class: format!(
+                    onclick: move |_| {
-                        "px-7 py-4 select-none {} text-pretty wrap-anywhere",
+                        *PROJECT_BEING_EDITED.write() = Some(project.clone());
-                        if project_being_edited().is_some_and(|p| p.id == project.id) {
+                        navigator.push(Route::ProjectFormPage);
-                            "bg-zinc-700"
+                    },
-                        } else { "" }
-                    ),
-                    onclick: move |_| project_being_edited.set(Some(project.clone())),
                     {project.title.clone()}
                 }
             }

src/components/project_select.rs

@@ -10,8 +10,8 @@ pub(crate) fn ProjectSelect(initial_selected_id: Option<i32>) -> Element {
     rsx! {
         select {
             name: "project_id",
-            class: "px-3.5 py-2.5 bg-zinc-800/50 rounded-lg grow cursor-pointer",
+            class: "px-4 pt-3 pb-2.25 bg-gray-800-muted enabled:hover:bg-gray-800 enabled:active:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl grow cursor-pointer",
-            id: "input_project",
+            id: "input_project_id",
             option {
                 value: 0,
                 {t!("none")}

src/components/reoccurrence_input.rs

@@ -1,86 +0,0 @@
-use crate::models::category::ReoccurrenceInterval;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-use dioxus_free_icons::Icon;
-use dioxus_free_icons::icons::fa_solid_icons::{FaBan, FaEarthEurope, FaMoon, FaSun};
-
-#[component]
-pub(crate) fn ReoccurrenceIntervalInput(
-    reoccurrence_interval: Signal<Option<ReoccurrenceInterval>>,
-    class_buttons: Option<&'static str>,
-) -> Element {
-    rsx! {
-        button {
-            r#type: "button",
-            class: format!(
-                "py-2 flex flex-row justify-center items-center rounded-lg {} {} cursor-pointer",
-                class_buttons.unwrap_or(""),
-                if reoccurrence_interval().is_none() { "bg-zinc-500/50" }
-                else { "bg-zinc-800/50" }
-            ),
-            onclick: move |_| {
-                reoccurrence_interval.set(None);
-            },
-            Icon {
-                icon: FaBan,
-                height: 16,
-                width: 16
-            }
-        },
-        button {
-            r#type: "button",
-            class: format!(
-                "py-2 flex flex-row justify-center items-center rounded-lg {} {} cursor-pointer",
-                class_buttons.unwrap_or(""),
-                if let Some(ReoccurrenceInterval::Day) = reoccurrence_interval()
-                { "bg-zinc-500/50" }
-                else { "bg-zinc-800/50" }
-            ),
-            onclick: move |_| {
-                reoccurrence_interval.set(Some(ReoccurrenceInterval::Day))
-            },
-            Icon {
-                icon: FaSun,
-                height: 16,
-                width: 16
-            }
-        },
-        button {
-            r#type: "button",
-            class: format!(
-                "py-2 flex flex-row justify-center items-center rounded-lg {} {} cursor-pointer",
-                class_buttons.unwrap_or(""),
-                if let Some(ReoccurrenceInterval::Month) = reoccurrence_interval()
-                { "bg-zinc-500/50" }
-                else { "bg-zinc-800/50" }
-            ),
-            onclick: move |_| {
-                reoccurrence_interval.set(Some(ReoccurrenceInterval::Month))
-            },
-            Icon {
-                icon: FaMoon,
-                height: 16,
-                width: 16
-            }
-        },
-        button {
-            r#type: "button",
-            class: format!(
-                "py-2 flex flex-row justify-center items-center rounded-lg {} {} cursor-pointer",
-                class_buttons.unwrap_or(""),
-                if let Some(ReoccurrenceInterval::Year) = reoccurrence_interval()
-                { "bg-zinc-500/50" }
-                else { "bg-zinc-800/50" }
-            ),
-            onclick: move |_| {
-                reoccurrence_interval.set(Some(ReoccurrenceInterval::Year))
-            },
-            Icon {
-                icon: FaEarthEurope,
-                height: 16,
-                width: 16
-            }
-        }
-    }
-}

src/components/reoccurrence_interval_input.rs

@@ -0,0 +1,44 @@
+use crate::components::select_button::SelectButton;
+use crate::models::category::ReoccurrenceInterval;
+use dioxus::core_macro::rsx;
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_solid_icons::{FaBan, FaEarthEurope, FaMoon, FaSun};
+
+#[component]
+pub(crate) fn ReoccurrenceIntervalInput(
+    reoccurrence_interval: Signal<Option<ReoccurrenceInterval>>,
+    class_buttons: Option<&'static str>,
+) -> Element {
+    rsx! {
+        // TODO: Abstract into SelectButton. Make it sank into the surface by default, like other inputs (abstract those too haha), and rise it up on selection (rationale: it will influence what is on the surface).
+        SelectButton {
+            icon: FaBan,
+            is_selected: reoccurrence_interval().is_none(),
+            on_select: move |_| {
+                reoccurrence_interval.set(None);
+            }
+        }
+        SelectButton {
+            icon: FaSun,
+            is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Day)),
+            on_select: move |_| {
+                reoccurrence_interval.set(Some(ReoccurrenceInterval::Day))
+            }
+        }
+        SelectButton {
+            icon: FaMoon,
+            is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Month)),
+            on_select: move |_| {
+                reoccurrence_interval.set(Some(ReoccurrenceInterval::Month));
+            }
+        }
+        SelectButton {
+            icon: FaEarthEurope,
+            is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Year)),
+            on_select: move |_| {
+                reoccurrence_interval.set(Some(ReoccurrenceInterval::Year));
+            }
+        }
+    }
+}

src/components/select_button.rs

@@ -0,0 +1,28 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};
+
+#[component]
+pub(crate) fn SelectButton<I: IconShape + Clone + PartialEq + 'static>(
+    icon: I,
+    is_selected: bool,
+    on_select: Callback,
+) -> Element {
+    rsx! {
+        button {
+            r#type: "button",
+            class: format!(
+                "pt-4.5 flex flex-row justify-center items-center {} rounded-xl transition-all duration-150",
+                if is_selected { "pb-3.75 bg-gray-900 drop-shadow-[0_0_0_var(--color-gray-900-muted)]" }
+                else { "pb-2.75 mt-1 bg-gray-800-muted hover:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] text-gray-400 cursor-pointer" }
+            ),
+            onclick: move |_| {
+                on_select.call(());
+            },
+            Icon {
+                icon,
+                height: 16,
+                width: 16
+            }
+        },
+    }
+}

src/components/subtasks_form.rs

@@ -1,3 +1,6 @@
+use crate::components::button_secondary::ButtonSecondary;
+use crate::components::input::Input;
+use crate::components::input_label::InputLabel;
 use crate::hooks::use_subtasks_of_task;
 use crate::models::subtask::NewSubtask;
 use crate::models::task::Task;
@@ -6,14 +9,15 @@ use dioxus::core_macro::{component, rsx};
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
 use dioxus_free_icons::Icon;
-use dioxus_free_icons::icons::fa_regular_icons::FaSquare;
+use dioxus_free_icons::icons::fa_solid_icons::{FaGavel, FaListCheck, FaTrashCan};
-use dioxus_free_icons::icons::fa_solid_icons::{FaListCheck, FaPlus, FaSquareCheck, FaTrashCan};
 
 #[component]
 pub(crate) fn SubtasksForm(task: Task) -> Element {
     let subtasks = use_subtasks_of_task(task.id)?;
     let mut new_title = use_signal(String::new);
     rsx! {
+        div {
+            class: "flex flex-col gap-3",
             form {
                 class: "flex flex-row items-center gap-3",
                 onsubmit: move |event| {
@@ -22,7 +26,7 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
                     async move {
                         let new_subtask = NewSubtask {
                             task_id: task.id,
-                        title: event.get("title").first().cloned().and_then(|value| match value {
+                            title: event.get("new_title").first().cloned().and_then(|value| match value {
                                 FormValue::Text(value) => Some(value),
                                 FormValue::File(_) => None
                             }).unwrap(),
@@ -32,32 +36,24 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
                         new_title.set(String::new());
                     }
                 },
-            label {
+                InputLabel {
-                r#for: "input_new_title",
-                class: "min-w-6 flex flex-row justify-center items-center",
-                Icon {
-                    class: "text-zinc-400/50",
                     icon: FaListCheck,
-                    height: 16,
+                    r#for: "input_new_title"
-                    width: 16
-                }
                 }
                 div {
-                class: "grow grid grid-cols-6 gap-2",
+                    class: "grow flex flex-row items-end gap-3",
-                input {
+                    Input {
-                    name: "title",
+                        class: "grow",
+                        name: "new_title",
+                        r#type: "text",
                         required: true,
                         value: new_title,
-                    r#type: "text",
+                        onchange: move |event: Event<FormData>| new_title.set(event.value())
-                    class: "grow py-2 px-3 col-span-5 bg-zinc-800/50 rounded-lg",
-                    id: "input_new_title",
-                    onchange: move |event| new_title.set(event.value())
                     }
-                button {
+                    ButtonSecondary {
                         r#type: "submit",
-                    class: "py-2 col-span-1 flex flex-row justify-center items-center bg-zinc-800/50 rounded-lg cursor-pointer",
                         Icon {
-                        icon: FaPlus,
+                            icon: FaGavel,
                             height: 16,
                             width: 16
                         }
@@ -69,7 +65,7 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
                     key: "{subtask.id}",
                     class: "flex flex-row items-center gap-3",
                     button {
-                    class: "min-w-6 flex flex-row justify-center items-center text-zinc-400/50 cursor-pointer",
+                        class: "mt-1.5 hover:mt-1 hover:pb-0.5 min-w-7 cursor-pointer transition-all duration-150",
                         onclick: {
                             let subtask = subtask.clone();
                             move |_| {
@@ -87,26 +83,18 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
                                 }
                             }
                         },
-                    if subtask.is_completed {
+                        div {
-                        Icon {
+                            class: format!("grow h-7 w-7 mb-[4px] drop-shadow-[0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800)] rounded-full {}",
-                            icon: FaSquareCheck,
+                                if subtask.is_completed {"bg-gray-600"} else {"border-3 border-gray-600"}
-                            height: 24,
+                            )
-                            width: 24
-                        }
-                    } else {
-                        Icon {
-                            icon: FaSquare,
-                            height: 24,
-                            width: 24
-                        }
                         }
                     }
                     div {
-                    class: "grow grid grid-cols-6 gap-2",
+                        class: "grow flex flex-row items-end gap-3",
-                    input {
+                        Input {
+                            class: "grow",
+                            name: "title_edit_{subtask.id}",
                             r#type: "text",
-                        class: "grow py-2 px-3 col-span-5 bg-zinc-800/50 rounded-lg",
-                        id: "input_title_{subtask.id}",
                             initial_value: subtask.title.clone(),
                             onchange: {
                                 let subtask = subtask.clone();
@@ -130,9 +118,8 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
                                 }
                             }
                         }
-                    button {
+                        ButtonSecondary {
                             r#type: "button",
-                        class: "py-2 flex flex-row justify-center items-center col-span-1 bg-zinc-800/50 rounded-lg cursor-pointer",
                             onclick: {
                                 let subtask = subtask.clone();
                                 move |_| {
@@ -152,4 +139,5 @@ pub(crate) fn SubtasksForm(task: Task) -> Element {
                 }
             }
         }
+    }
 }

src/components/task_form.rs

@@ -1,11 +1,14 @@
+use crate::components::button_primary::ButtonPrimary;
+use crate::components::button_secondary::ButtonSecondary;
 use crate::components::category_input::CategoryInput;
+use crate::components::input::Input;
+use crate::components::input_label::InputLabel;
 use crate::components::project_select::ProjectSelect;
-use crate::components::reoccurrence_input::ReoccurrenceIntervalInput;
+use crate::components::reoccurrence_interval_input::ReoccurrenceIntervalInput;
 use crate::components::subtasks_form::SubtasksForm;
 use crate::models::category::{CalendarTime, Category, Reoccurrence};
 use crate::models::task::NewTask;
 use crate::models::task::Task;
-use crate::route::Route;
 use crate::server::tasks::{create_task, delete_task, edit_task};
 use chrono::Duration;
 use dioxus::core_macro::{component, rsx};
@@ -13,8 +16,8 @@ use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
 use dioxus_free_icons::Icon;
 use dioxus_free_icons::icons::fa_solid_icons::{
-    FaBell, FaBomb, FaClock, FaFloppyDisk, FaHourglassEnd, FaLayerGroup, FaList, FaPenClip,
+    FaBell, FaBomb, FaClock, FaFeatherPointed, FaHourglassEnd, FaList, FaRepeat, FaScroll, FaStamp,
-    FaRepeat, FaTrashCan,
+    FaTrashCan, FaXmark,
 };
 use dioxus_i18n::t;
 use serde::{Deserialize, Serialize};
@@ -51,24 +54,19 @@ struct InputData {
     project_id: Option<String>,
 }
 
+pub(crate) static TASK_BEING_EDITED: GlobalSignal<Option<Task>> = Signal::global(|| None);
+pub(crate) static LATEST_VISITED_CATEGORY: GlobalSignal<Category> =
+    Signal::global(|| Category::Inbox);
+
 #[component]
-pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()>) -> Element {
+pub(crate) fn TaskForm() -> Element {
-    let route = use_route::<Route>();
+    let navigator = use_navigator();
+    let task = TASK_BEING_EDITED();
     let selected_category = use_signal(|| {
         if let Some(task) = &task {
             task.category.clone()
         } else {
-            match route {
+            LATEST_VISITED_CATEGORY()
-                Route::CategorySomedayMaybePage => Category::SomedayMaybe,
-                Route::CategoryWaitingForPage => Category::WaitingFor(String::new()),
-                Route::CategoryNextStepsPage => Category::NextSteps,
-                Route::CategoryCalendarPage | Route::CategoryTodayPage => Category::Calendar {
-                    date: chrono::Local::now().date_naive(),
-                    reoccurrence: None,
-                    time: None,
-                },
-                _ => Category::Inbox,
-            }
         }
     });
     let category_calendar_reoccurrence_interval = use_signal(|| {
@@ -108,9 +106,9 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
 
     rsx! {
         div {
-            class: "p-4 flex flex-col gap-4",
+            class: "grow px-4 flex flex-col gap-6.5",
             form {
-                class: "flex flex-col gap-4",
+                class: "flex flex-col gap-8",
                 id: "form_task",
                 onsubmit: move |event| {
                     event.prevent_default();
@@ -152,56 +150,45 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                             project_id: input_data.project_id
                                 .and_then(|deadline| deadline.parse().ok()).filter(|&id| id > 0),
                         };
-                        if let Some(task) = task {
+                        let result = if let Some(task) = task {
-                            let _ = edit_task(task.id, new_task).await;
+                            edit_task(task.id, new_task).await
                         } else {
-                            let _ = create_task(new_task).await;
+                            create_task(new_task).await
+                        };
+                        if result.is_ok() {
+                            navigator.go_back();
                         }
-                        on_successful_submit.call(());
                     }
                 },
                 div {
                     class: "flex flex-row items-center gap-3",
-                    label {
+                    InputLabel {
                         r#for: "input_title",
-                        class: "min-w-6 flex flex-row justify-center items-center",
+                        icon: FaFeatherPointed
-                        Icon {
-                            class: "text-zinc-400/50",
-                            icon: FaPenClip,
-                            height: 16,
-                            width: 16
-                        }
                     },
-                    input {
+                    Input {
+                        class: "grow",
                         name: "title",
                         required: true,
                         initial_value: task.as_ref().map(|task| task.title.clone()),
                         r#type: "text",
-                        class: "py-2 px-3 grow bg-zinc-800/50 rounded-lg",
+                        autofocus: true
-                        id: "input_title"
+                    }
-                    },
                 },
                 div {
                     class: "flex flex-row items-center gap-3",
-                    label {
+                    InputLabel {
-                        r#for: "input_project",
+                        r#for: "input_project_id",
-                        class: "min-w-6 flex flex-row justify-center items-center",
+                        icon: FaList
-                        Icon {
-                            class: "text-zinc-400/50",
-                            icon: FaList,
-                            height: 16,
-                            width: 16
-                        }
                     },
                     SuspenseBoundary {
                         fallback: |_| {
                             rsx ! {
                                 select {
-                                    class: "px-3.5 py-2.5 bg-zinc-800/50 rounded-lg grow cursor-pointer",
+                                    class: "px-4 pt-3 pb-2.25 bg-gray-800-muted drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl grow cursor-pointer",
                                     option {
-                                        value: 0,
+                                        value: 0
-                                        {t!("none")}
+                                    }
-                                    },
                                 }
                             }
                         },
@@ -212,98 +199,69 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                 },
                 div {
                     class: "flex flex-row items-center gap-3",
-                    label {
+                    InputLabel {
-                        r#for: "input_deadline",
-                        class: "min-w-6 flex flex-row justify-center items-center",
-                        Icon {
-                            class: "text-zinc-400/50",
                         icon: FaBomb,
-                            height: 16,
+                        r#for: "input_deadline"
-                            width: 16
-                        }
                     },
-                    input {
+                    Input {
                         name: "deadline",
                         initial_value: task.as_ref().and_then(|task| task.deadline)
                             .map(|deadline| deadline.format("%Y-%m-%d").to_string()),
                         r#type: "date",
-                        class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow basis-0 cursor-pointer",
+                        class: "grow basis-0"
-                        id: "input_deadline"
                     }
                 },
                 div {
                     class: "flex flex-row items-center gap-3",
-                    label {
+                    InputLabel {
-                        class: "min-w-6 flex flex-row justify-center items-center",
+                        icon: FaScroll
-                        Icon {
-                            class: "text-zinc-400/50",
-                            icon: FaLayerGroup,
-                            height: 16,
-                            width: 16
-                        }
                     },
                     CategoryInput {
-                        selected_category: selected_category,
+                        class: "grow",
-                        class: "grow"
+                        selected_category: selected_category
                     }
                 }
                 match selected_category() {
                     Category::WaitingFor(waiting_for) => rsx! {
                         div {
                             class: "flex flex-row items-center gap-3",
-                            label {
+                            InputLabel {
-                                r#for: "input_waiting_for",
-                                class: "min-w-6 flex flex-row justify-center items-center",
-                                Icon {
-                                    class: "text-zinc-400/50",
                                 icon: FaHourglassEnd,
-                                    height: 16,
+                                r#for: "input_category_waiting_for",
-                                    width: 16
-                                }
                             },
-                            input {
+                            Input {
+                                class: "grow",
                                 name: "category_waiting_for",
                                 required: true,
                                 initial_value: waiting_for,
                                 r#type: "text",
-                                class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow",
+                            }
-                                id: "input_category_waiting_for"
-                            },
                         }
                     },
                     Category::Calendar { date, reoccurrence, time } => rsx! {
                         div {
                             class: "flex flex-row items-center gap-3",
-                            label {
+                            InputLabel {
-                                r#for: "input_category_calendar_date",
-                                class: "min-w-6 flex flex-row justify-center items-center",
-                                Icon {
-                                    class: "text-zinc-400/50",
                                 icon: FaClock,
-                                    height: 16,
+                                r#for: "input_category_calendar_date"
-                                    width: 16
-                                }
                             },
                             div {
-                                class: "grow flex flex-row gap-2",
+                                class: "grow flex flex-row gap-3",
-                                input {
+                                Input {
-                                    r#type: "date",
+                                    class: "grow",
                                     name: "category_calendar_date",
+                                    r#type: "date",
                                     required: true,
                                     initial_value: date.format("%Y-%m-%d").to_string(),
-                                    class:
-                                        "py-2 px-3 bg-zinc-800/50 rounded-lg grow cursor-pointer",
-                                    id: "input_category_calendar_date"
                                 },
-                                input {
+                                Input {
-                                    r#type: "time",
+                                    class: "grow",
                                     name: "category_calendar_time",
+                                    r#type: "time",
                                     initial_value: time.map(|calendar_time|
                                         calendar_time.time.format("%H:%M").to_string()
                                     ),
-                                    class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow cursor-pointer",
+                                    oninput: move |event: Event<FormData>| {
-                                    id: "input_category_calendar_time",
-                                    oninput: move |event| {
                                         category_calendar_has_time.set(!event.value().is_empty());
                                     }
                                 }
@@ -311,60 +269,46 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                         },
                         div {
                             class: "flex flex-row items-center gap-3",
-                            label {
+                            InputLabel {
-                                r#for: "category_calendar_reoccurrence_length",
-                                class: "min-w-6 flex flex-row justify-center items-center",
-                                Icon {
-                                    class: "text-zinc-400/50",
                                 icon: FaRepeat,
-                                    height: 16,
+                                r#for: "category_calendar_reoccurrence_length"
-                                    width: 16
-                                }
                             },
                             div {
-                                class: "grow grid grid-cols-6 gap-2",
+                                class: "grow grid grid-cols-5 items-end gap-3",
                                 ReoccurrenceIntervalInput {
                                     reoccurrence_interval: category_calendar_reoccurrence_interval
                                 },
-                                input {
+                                Input {
+                                    class: "text-right",
                                     r#type: "number",
                                     inputmode: "numeric",
                                     name: "category_calendar_reoccurrence_length",
                                     disabled: category_calendar_reoccurrence_interval().is_none(),
                                     required: true,
-                                    min: 1,
+                                    min: "1",
                                     initial_value: category_calendar_reoccurrence_interval().map_or(
                                         String::new(),
                                         |_| reoccurrence.map_or(1, |reoccurrence|
                                             reoccurrence.length).to_string()
-                                    ),
+                                    )
-                                    class: "py-2 px-3 bg-zinc-800/50 rounded-lg col-span-2 text-right",
-                                    id: "category_calendar_reoccurrence_length"
                                 }
                             }
                         },
                         if category_calendar_has_time() {
                             div {
                                 class: "flex flex-row items-center gap-3",
-                                label {
+                                InputLabel {
-                                    r#for: "category_calendar_reminder_offset_index",
+                                    r#for: "input_category_calendar_reminder_offset_index",
-                                    class: "min-w-6 flex flex-row justify-center items-center",
+                                    icon: FaBell
-                                    Icon {
-                                        class: "text-zinc-400/50",
-                                        icon: FaBell,
-                                        height: 16,
-                                        width: 16
-                                    }
                                 },
                                 input {
-                                    r#type: "range",
+                                    class: "grow",
                                     name: "category_calendar_reminder_offset_index",
+                                    r#type: "range",
                                     min: 0,
                                     max: REMINDER_OFFSETS.len() as i64 - 1,
                                     initial_value: category_calendar_reminder_offset_index()
                                         .to_string(),
-                                    class: "grow input-range-reverse cursor-pointer",
-                                    id: "category_calendar_has_reminder",
                                     oninput: move |event| {
                                         category_calendar_reminder_offset_index.set(
                                             event.value().parse().unwrap()
@@ -372,8 +316,8 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                                     }
                                 },
                                 label {
-                                    r#for: "category_calendar_reminder_offset_index",
                                     class: "pr-3 min-w-16 text-right",
+                                    r#for: "category_calendar_reminder_offset_index",
                                     {REMINDER_OFFSETS[category_calendar_reminder_offset_index()]
                                         .map(
                                             |offset| if offset.num_hours() < 1 {
@@ -399,17 +343,20 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                     }
                 }
             }
+        }
         div {
-                class: "flex flex-row justify-between mt-auto",
+            class: "px-4 grid grid-cols-3 gap-3 mt-auto",
-                button {
+            ButtonSecondary {
                 r#type: "button",
-                    class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
+                class: "grow",
-                    onclick: move |_| {
+                onclick: {
+                    let task = task.clone();
+                    move |_| {
                         let task = task.clone();
                         async move {
                             if let Some(task) = task {
-                                if let Category::Trash = task.category {
+                                let result = if let Category::Trash = task.category {
-                                    let _ = delete_task(task.id).await;
+                                    delete_task(task.id).await
                                 } else {
                                     let new_task = NewTask {
                                         title: task.title.to_owned(),
@@ -417,10 +364,18 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                                         category: Category::Trash,
                                         project_id: task.project_id
                                     };
-                                    let _ = edit_task(task.id, new_task).await;
+                                    edit_task(task.id, new_task).await.map(|_| ())
+                                };
+                                if result.is_ok() {
+                                    /* TODO: Might not work on mobile due to
+                                    https://dioxuslabs.com/learn/0.7/essentials/router/navigation#history-buttons.
+                                    */
+                                    navigator.go_back();
+                                }
+                            } else {
+                                navigator.go_back();
                             }
                         }
-                            on_successful_submit.call(());
                     }
                 },
                 Icon {
@@ -429,17 +384,35 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                     width: 16
                 }
             }
-                button {
+            if task.is_some() {
-                    form: "form_task",
+                div {
-                    r#type: "submit",
+                    class: "grow flex flex-col items-stretch",
-                    class: "py-3 px-4 flex flex-row justify-center items-center bg-zinc-300/50 rounded-lg cursor-pointer",
+                    GoBackButton {
+                        ButtonSecondary {
+                            /* TODO: Replace w-full` with proper flexbox styling once
+                            https://github.com/DioxusLabs/dioxus/issues/5269 is solved. */
+                            class: "w-full",
+                            r#type: "button",
                             Icon {
-                        icon: FaFloppyDisk,
+                                icon: FaXmark,
                                 height: 16,
                                 width: 16
                             }
                         }
                     }
                 }
+            } else {
+                div {}
+            }
+            ButtonPrimary {
+                form: "form_task",
+                r#type: "submit",
+                Icon {
+                    icon: FaStamp,
+                    height: 16,
+                    width: 16
+                }
+            }
+        }
     }
 }

src/components/task_list.rs

@@ -1,17 +1,16 @@
+use crate::components::task_form::TASK_BEING_EDITED;
 use crate::components::task_list_item::TaskListItem;
 use crate::models::category::Category;
-use crate::models::task::{Task, TaskWithSubtasks};
+use crate::models::task::TaskWithSubtasks;
+use crate::route::Route;
 use crate::server::tasks::complete_task;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
-use dioxus_free_icons::Icon;
-use dioxus_free_icons::icons::fa_regular_icons::FaSquare;
-use dioxus_free_icons::icons::fa_solid_icons::FaSquareCheck;
 
 #[component]
 pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>) -> Element {
-    let mut task_being_edited = use_context::<Signal<Option<Task>>>();
+    let navigator = use_navigator();
     rsx! {
         div {
             class: format!("flex flex-col {}", class.unwrap_or("")),
@@ -19,28 +18,32 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
                 div {
                     key: "{task.task.id}",
                     class: format!(
-                        "px-7 pt-4.25 {} flex flex-row items-start gap-4 select-none {}",
+                        "px-7 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150",
                         if task.task.deadline.is_some() || !task.subtasks.is_empty() {
                             "pb-0.25"
                         } else if let Category::Calendar { time, .. } = &task.task.category {
                             if time.is_some() {
                                 "pb-0.25"
                             } else {
-                                "pb-4.25"
+                                "pb-3.75"
                             }
                         } else {
-                            "pb-4.25"
+                            "pb-3.75"
                         },
-                        if task_being_edited().is_some_and(|t| t.id == task.task.id) {
-                            "bg-zinc-700"
-                        } else { "" }
                     ),
                     onclick: {
                         let task = task.clone();
-                        move |_| task_being_edited.set(Some(task.task.clone()))
+                        move |_| {
+                            *TASK_BEING_EDITED.write() = Some(task.task.clone());
+                            navigator.push(Route::TaskFormPage);
+                        }
                     },
                     button {
-                        class: "text-zinc-500",
+                        class: format!(
+                            "mt-0.5 hover:mt-0 hover:pb-0.5 transition-all duration-150 cursor-pointer {}",
+                            if let Category::Done = task.task.category { "pointer-events-none" }
+                            else { "" }
+                        ),
                         onclick: {
                             move |event: Event<MouseData>| {
                                 // To prevent editing the task.
@@ -50,21 +53,18 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
                                 }
                             }
                         },
+                        div {
+                            class: format!("h-8 w-8 rounded-full {}",
                                 if let Category::Done = task.task.category {
-                            Icon {
+                                    "mt-[3px] mb-[2px] bg-amber-300-muted"
-                                icon: FaSquareCheck,
-                                height: 30,
-                                width: 30
-                            }
                                 } else {
-                            Icon {
+                                    "mb-[5px] border-3 border-amber-300-muted drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)]"
-                                class: "cursor-pointer",
-                                icon: FaSquare,
-                                height: 30,
-                                width: 30
                                 }
+                            )
                         }
                     },
+                    div {
+                        class: "mt-1.5",
                         TaskListItem {
                             task: task.clone()
                         }
@@ -72,4 +72,5 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
                 }
             }
         }
+    }
 }

src/components/task_list_item.rs

@@ -25,7 +25,7 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
                 class: "flex flex-row gap-4",
                 if let Some(deadline) = task.task.deadline {
                     div {
-                        class: "flex flex-row items-center gap-1 text-sm text-zinc-400",
+                        class: "flex flex-row items-center gap-1 text-sm text-gray-500",
                         Icon {
                             icon: FaBomb,
                             height: 14,
@@ -76,7 +76,7 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
                 if let Category::Calendar { time, .. } = task.task.category {
                     if let Some(calendar_time) = time {
                         div {
-                            class: "flex flex-row items-center gap-1 text-sm text-zinc-400",
+                            class: "flex flex-row items-center gap-1 text-sm text-gray-500",
                             Icon {
                                 icon: FaClock,
                                 height: 14,
@@ -91,7 +91,7 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
                 }
                 if !task.subtasks.is_empty() {
                     div {
-                        class: "flex flex-row items-center gap-1 text-sm text-zinc-400",
+                        class: "flex flex-row items-center gap-1 text-sm text-gray-500",
                         Icon {
                             icon: FaListCheck,
                             height: 14,

src/layouts/main.rs

@@ -1,50 +0,0 @@
-use crate::components::bottom_panel::BottomPanel;
-use crate::components::form_open_button::FormOpenButton;
-use crate::components::sticky_bottom::StickyBottom;
-use crate::models::project::Project;
-use crate::models::task::Task;
-use crate::route::Route;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-use dioxus_free_icons::Icon;
-use dioxus_free_icons::icons::fa_solid_icons::FaCog;
-
-#[component]
-pub(crate) fn Main() -> Element {
-    let mut display_form = use_signal(|| false);
-    let project_being_edited =
-        use_context_provider::<Signal<Option<Project>>>(|| Signal::new(None));
-    let task_being_edited = use_context_provider::<Signal<Option<Task>>>(|| Signal::new(None));
-
-    use_effect(move || {
-        display_form.set(project_being_edited().is_some() || task_being_edited().is_some());
-    });
-
-    rsx! {
-        SuspenseBoundary {
-            fallback: |_| {
-                rsx! {
-                    div {
-                        class: "grow flex flex-col justify-center items-center",
-                        Icon {
-                            class: "animate-[spin_2000ms_linear_infinite]",
-                            icon: FaCog,
-                            height: 32,
-                            width: 32
-                        }
-                    }
-                }
-            },
-            Outlet::<Route> {}
-        }
-        StickyBottom {
-            FormOpenButton {
-                opened: display_form,
-            }
-            BottomPanel {
-                display_form: display_form,
-            }
-        }
-    }
-}

src/layouts/mod.rs

@@ -1,2 +1,2 @@
-mod main;
+pub(crate) mod navigation;
-pub(crate) use main::Main;
+pub(crate) mod suspense;

src/layouts/navigation.rs

@@ -0,0 +1,38 @@
+use crate::components::bottom_panel::BottomPanel;
+use crate::components::create_button::CreateButton;
+use crate::components::sticky_bottom::StickyBottom;
+use crate::components::task_form::LATEST_VISITED_CATEGORY;
+use crate::models::category::Category;
+use crate::route::Route;
+use dioxus::core_macro::rsx;
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn Navigation() -> Element {
+    let current_route = use_route();
+    use_effect(use_reactive(&current_route, move |current_route| {
+        *LATEST_VISITED_CATEGORY.write() = match current_route {
+            Route::CategorySomedayMaybePage => Category::SomedayMaybe,
+            Route::CategoryWaitingForPage => Category::WaitingFor(String::new()),
+            Route::CategoryNextStepsPage => Category::NextSteps,
+            Route::CategoryCalendarPage | Route::CategoryTodayPage => Category::Calendar {
+                date: chrono::Local::now().date_naive(),
+                reoccurrence: None,
+                time: None,
+            },
+            _ => Category::Inbox,
+        };
+    }));
+
+    rsx! {
+        div {
+            class: "grow flex flex-col pb-36",
+            Outlet::<Route> {}
+        }
+        StickyBottom {
+            CreateButton {},
+            BottomPanel {}
+        }
+    }
+}

src/layouts/suspense.rs

@@ -0,0 +1,28 @@
+use crate::route::Route;
+use dioxus::core_macro::rsx;
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_solid_icons::FaCog;
+
+#[component]
+pub(crate) fn Suspense() -> Element {
+    rsx! {
+        SuspenseBoundary {
+            fallback: |_| {
+                rsx! {
+                    div {
+                        class: "grow flex flex-col justify-center items-center",
+                        Icon {
+                            class: "text-gray-500 animate-[spin_3000ms_linear_infinite]",
+                            icon: FaCog,
+                            height: 32,
+                            width: 32
+                        }
+                    }
+                }
+            },
+            Outlet::<Route> {}
+        }
+    }
+}

src/route/mod.rs

@@ -8,7 +8,9 @@ use crate::views::category_today_page::CategoryTodayPage;
 use crate::views::category_trash_page::CategoryTrashPage;
 use crate::views::category_waiting_for_page::CategoryWaitingForPage;
 use crate::views::not_found_page::NotFoundPage;
+use crate::views::project_form_page::ProjectFormPage;
 use crate::views::projects_page::ProjectsPage;
+use crate::views::task_form_page::TaskFormPage;
 use dioxus::prelude::*;
 
 // All variants have the same postfix because they have to match the component names.
@@ -16,8 +18,8 @@ use dioxus::prelude::*;
 #[derive(Clone, Routable, Debug, PartialEq)]
 #[rustfmt::skip]
 pub(crate) enum Route {
-    #[layout(layouts::Main)]
+    #[layout(layouts::navigation::Navigation)]
-        #[redirect("/", || Route::CategoryTodayPage {})]
+        #[layout(layouts::suspense::Suspense)]
             #[route("/today")]
             CategoryTodayPage,
             #[route("/inbox")]
@@ -37,6 +39,13 @@ pub(crate) enum Route {
             #[route("/projects")]
             ProjectsPage,
         #[end_layout]
+    #[end_layout]
+    #[layout(layouts::suspense::Suspense)]
+        #[route("/task")]
+        TaskFormPage,
+        #[route("/project")]
+        ProjectFormPage,
+    #[end_layout]
     #[redirect("/", || Route::CategoryTodayPage)]
     #[route("/:..route")]
     NotFoundPage {

src/views/category_page.rs

@@ -11,8 +11,7 @@ pub(crate) fn CategoryPage(category: Category) -> Element {
 
     rsx! {
         TaskList {
-            tasks: tasks.clone(),
+            tasks: tasks.clone()
-            class: "pb-36"
         }
     }
 }

src/views/mod.rs

@@ -8,4 +8,6 @@ pub(crate) mod category_today_page;
 pub(crate) mod category_trash_page;
 pub(crate) mod category_waiting_for_page;
 pub(crate) mod not_found_page;
+pub(crate) mod project_form_page;
 pub(crate) mod projects_page;
+pub(crate) mod task_form_page;

src/views/project_form_page.rs

@@ -0,0 +1,12 @@
+use crate::components::{error_boundary_message::ErrorBoundaryMessage, project_form::ProjectForm};
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn ProjectFormPage() -> Element {
+    rsx! {
+        ErrorBoundaryMessage {
+            class: "grow py-4 flex flex-col gap-12",
+            ProjectForm {}
+        }
+    }
+}

src/views/task_form_page.rs

@@ -0,0 +1,12 @@
+use crate::components::{error_boundary_message::ErrorBoundaryMessage, task_form::TaskForm};
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn TaskFormPage() -> Element {
+    rsx! {
+        ErrorBoundaryMessage {
+            class: "grow py-4 flex flex-col gap-12",
+            TaskForm {}
+        }
+    }
+}

tailwind.css

@@ -20,4 +20,8 @@
 /* stylelint-disable-next-line */
 @theme {
   --font-sans: "Inter", "sans";
+  --color-amber-300-muted: #b89a2e;
+  --color-amber-700-muted: #80390b;
+  --color-gray-800-muted: #141d2d;
+  --color-gray-900-muted: #0b111f;
 }