feat: UI overhaul

assets/styles/input_range.css

@@ -8,8 +8,7 @@ input[type="range"] {
   background: transparent;
 }
 
-input[type="range"]::-moz-range-thumb,
+input[type="range"]::-moz-range-thumb, input[type="range"]::-webkit-slider-thumb {
-input[type="range"]::-webkit-slider-thumb {
   width: 1.25rem;
   height: 1.25rem;
   background: var(--color-gray-400);
@@ -24,13 +23,10 @@ input[type="range"]::-webkit-slider-thumb {
   top: -9px;
 }
 
-input[type="range"]::-moz-range-track,
+input[type="range"]::-moz-range-track, input[type="range"]::-webkit-slider-runnable-track {
-input[type="range"]::-webkit-slider-runnable-track {
   background: var(--color-gray-800-muted);
   height: 0.5rem;
-  filter: drop-shadow(
+  filter: drop-shadow(0 calc(0px - var(--spacing)) 0 var(--color-gray-900-muted));
-    0 calc(0px - var(--spacing)) 0 var(--color-gray-900-muted)
-  );
   border-radius: 0.25rem;
 }
 

assets/styles/select_arrow.css

@@ -1,7 +1,9 @@
 select {
   appearance: none;
+  -webkit-appearance: none;
+  -moz-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;
+  background-position: right .5rem center;
 }

src/components/input.rs

@@ -16,9 +16,7 @@ pub(crate) fn Input(
     rsx! {
         input {
             class: format!(
-                /* `w-full` is required for the Chromium renderer to allow the input to shrink
+                "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 {}",
-                properly. */
-                "pt-3 pb-2.25 w-full {} 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"
@@ -32,6 +30,7 @@ pub(crate) fn Input(
             name: name.clone(),
             r#type,
             id: id.unwrap_or(format!("input_{}", name)),
+            autofocus,
             oninput: move |event| {
                 if let Some(oninput) = oninput {
                     oninput.call(event);
@@ -42,11 +41,6 @@ pub(crate) fn Input(
                     onchange.call(event);
                 }
             },
-            onmounted: move |element| async move {
-                if let Some(true) = autofocus {
-                    let _ = element.set_focus(true).await;
-                }
-            },
             ..attributes
         }
     }

src/components/project_form.rs

@@ -64,6 +64,9 @@ pub(crate) fn ProjectForm() -> Element {
                             if let Some(project) = project {
                                 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 {

src/components/project_select.rs

@@ -10,7 +10,7 @@ pub(crate) fn ProjectSelect(initial_selected_id: Option<i32>) -> Element {
     rsx! {
         select {
             name: "project_id",
-            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 transition-all duration-150",
+            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",
             option {
                 value: 0,

src/components/reoccurrence_interval_input.rs

@@ -11,6 +11,7 @@ pub(crate) fn ReoccurrenceIntervalInput(
     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(),

src/components/task_form.rs

@@ -172,7 +172,7 @@ pub(crate) fn TaskForm() -> Element {
                         required: true,
                         initial_value: task.as_ref().map(|task| task.title.clone()),
                         r#type: "text",
-                        autofocus: task.is_none()
+                        autofocus: true
                     }
                 },
                 div {
@@ -246,16 +246,16 @@ pub(crate) fn TaskForm() -> Element {
                                 r#for: "input_category_calendar_date"
                             },
                             div {
-                                class: "grow grid grid-cols-7 gap-3",
+                                class: "grow flex flex-row gap-3",
                                 Input {
-                                    class: "grow col-span-4",
+                                    class: "grow",
                                     name: "category_calendar_date",
                                     r#type: "date",
                                     required: true,
                                     initial_value: date.format("%Y-%m-%d").to_string(),
                                 },
                                 Input {
-                                    class: "grow col-span-3",
+                                    class: "grow",
                                     name: "category_calendar_time",
                                     r#type: "time",
                                     initial_value: time.map(|calendar_time|
@@ -367,6 +367,9 @@ pub(crate) fn TaskForm() -> Element {
                                     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 {