From d4235ef2ab3ab2b643f55d21b5189a0e35d30a7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matou=C5=A1=20Volf?= Date: Sat, 24 Jan 2026 17:39:48 +0100 Subject: [PATCH] feat: update Font Awesome to 7.1.0 --- Cargo.lock | 9 ++ Cargo.toml | 5 + src/components/app.rs | 1 - src/components/bottom_panel.rs | 2 +- src/components/category_calendar_task_list.rs | 2 +- src/components/category_input.rs | 52 ++++++---- src/components/category_today_task_list.rs | 32 +++--- src/components/error_boundary_message.rs | 8 +- src/components/form_open_button.rs | 20 +++- src/components/navigation.rs | 49 ++++------ src/components/navigation_item.rs | 14 ++- src/components/project_form.rs | 27 ++++-- src/components/project_list.rs | 2 +- src/components/reoccurrence_input.rs | 34 ++++--- src/components/subtasks_form.rs | 52 ++++++---- src/components/task_form.rs | 97 +++++++++++++------ src/components/task_list.rs | 38 +++++--- src/components/task_list_item.rs | 36 ++++--- src/layouts/main.rs | 11 ++- 19 files changed, 315 insertions(+), 176 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index d1bff8f..8a7b955 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1299,6 +1299,14 @@ dependencies = [ "tracing", ] +[[package]] +name = "dioxus-free-icons" +version = "0.10.0" +source = "git+https://github.com/matous-volf/dioxus-free-icons?rev=6488400003a3d6829e771a84a565c5c5f08a9aa0#6488400003a3d6829e771a84a565c5c5f08a9aa0" +dependencies = [ + "dioxus", +] + [[package]] name = "dioxus-fullstack" version = "0.7.3" @@ -5440,6 +5448,7 @@ dependencies = [ "diesel", "diesel_migrations", "dioxus", + "dioxus-free-icons", "dioxus-html", "dioxus-i18n", "feruca", diff --git a/Cargo.toml b/Cargo.toml index fe6a2a7..18c840c 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -38,6 +38,11 @@ async-std = { version = "1.13.2", optional = true } dioxus-i18n = "0.5.1" voca_rs = "1.15.2" load-dotenv = "0.1.2" +# TODO: Switch to upstream once it merges the changes. +dioxus-free-icons = { git = "https://github.com/matous-volf/dioxus-free-icons", rev = "6488400003a3d6829e771a84a565c5c5f08a9aa0", features = [ + "font-awesome-regular", + "font-awesome-solid", +] } [features] default = ["web"] diff --git a/src/components/app.rs b/src/components/app.rs index 85a80de..553ee51 100644 --- a/src/components/app.rs +++ b/src/components/app.rs @@ -37,7 +37,6 @@ pub(crate) fn App() -> Element { document::Stylesheet { href: INPUT_NUMBER_ARROWS_CSS } document::Stylesheet { href: INPUT_RANGE_CSS } document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" } - document::Script { src: "https://kit.fontawesome.com/3c1b409f8f.js" } div { class: "min-h-screen pt-4 pb-36 flex flex-col text-zinc-200 bg-zinc-800", diff --git a/src/components/bottom_panel.rs b/src/components/bottom_panel.rs index 507b3ba..7738415 100644 --- a/src/components/bottom_panel.rs +++ b/src/components/bottom_panel.rs @@ -40,7 +40,7 @@ pub(crate) fn BottomPanel(display_form: Signal) -> Element { 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 {}", match (display_form(), current_route, navigation_expanded()) { - (false, _, false) => "h-[66px]", + (false, _, false) => "h-[64px]", (false, _, true) => "h-[130px]", (true, Route::ProjectsPage, _) => "h-[130px]", (true, _, _) => "h-[506px]", diff --git a/src/components/category_calendar_task_list.rs b/src/components/category_calendar_task_list.rs index 8ddb407..5a61335 100644 --- a/src/components/category_calendar_task_list.rs +++ b/src/components/category_calendar_task_list.rs @@ -28,7 +28,7 @@ pub(crate) fn CategoryCalendarTaskList() -> Element { div { class: "flex flex-col gap-4", div { - class: "px-8 flex flex-row items-center gap-2 font-bold", + class: "px-7 flex flex-row items-center gap-2 font-bold", div { class: "pt-1", { diff --git a/src/components/category_input.rs b/src/components/category_input.rs index 4f0cb95..b86f805 100644 --- a/src/components/category_input.rs +++ b/src/components/category_input.rs @@ -2,6 +2,10 @@ 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_solid_icons::{ + FaCalendarDays, FaForward, FaHourglassHalf, FaInbox, FaQuestion, FaWater, +}; #[component] pub(crate) fn CategoryInput( @@ -14,63 +18,71 @@ pub(crate) fn CategoryInput( button { r#type: "button", class: format!( - "py-2 rounded-lg grow basis-0 {} cursor-pointer", + "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer", if selected_category() == Category::SomedayMaybe { "bg-zinc-500/50" } else { "bg-zinc-800/50" } ), onclick: move |_| { selected_category.set(Category::SomedayMaybe); }, - i { - class: "fa-solid fa-question" + Icon { + icon: FaQuestion, + height: 16, + width: 16 } }, button { r#type: "button", class: format!( - "py-2 rounded-lg grow basis-0 {} cursor-pointer", + "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); }, - i { - class: "fa-solid fa-water" + Icon { + icon: FaWater, + height: 16, + width: 16 } }, button { r#type: "button", class: format!( - "py-2 rounded-lg grow basis-0 {} cursor-pointer", + "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())); }, - i { - class: "fa-solid fa-hourglass-half" + Icon { + icon: FaHourglassHalf, + height: 16, + width: 16 } }, button { r#type: "button", class: format!( - "py-2 rounded-lg grow basis-0 {} cursor-pointer", + "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer", if selected_category() == Category::NextSteps { "bg-zinc-500/50" } else { "bg-zinc-800/50" } ), onclick: move |_| { selected_category.set(Category::NextSteps); }, - i { - class: "fa-solid fa-forward" + Icon { + icon: FaForward, + height: 16, + width: 16 } }, button { r#type: "button", class: format!( - "py-2 rounded-lg grow basis-0 {} cursor-pointer", + "py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer", if let Category::Calendar { .. } = selected_category() { "bg-zinc-500/50" } else { "bg-zinc-800/50" } ), @@ -81,22 +93,26 @@ pub(crate) fn CategoryInput( time: None, }); }, - i { - class: "fa-solid fa-calendar-days" + Icon { + icon: FaCalendarDays, + height: 16, + width: 16 } }, button { r#type: "button", class: format!( - "py-2 rounded-lg grow basis-0 {} cursor-pointer", + "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); }, - i { - class: "fa-solid fa-inbox" + Icon { + icon: FaInbox, + height: 16, + width: 16 } } } diff --git a/src/components/category_today_task_list.rs b/src/components/category_today_task_list.rs index 49e992f..f7e42c8 100644 --- a/src/components/category_today_task_list.rs +++ b/src/components/category_today_task_list.rs @@ -6,6 +6,8 @@ use crate::models::category::Category; use crate::models::task::TaskWithSubtasks; use chrono::Local; use dioxus::prelude::*; +use dioxus_free_icons::Icon; +use dioxus_free_icons::icons::fa_solid_icons::{FaCalendarCheck, FaCalendarXmark, FaWater}; use dioxus_i18n::t; use dioxus_i18n::use_i18n::i18n; use voca_rs::Voca; @@ -48,12 +50,12 @@ pub(crate) fn CategoryTodayTaskList() -> Element { div { class: "flex flex-col gap-4", div { - class: "px-8 flex flex-row items-center gap-2 font-bold", - i { - class: "fa-solid fa-water text-xl w-6 text-center" + class: "px-7 flex flex-row items-center gap-2 font-bold", + Icon { + class: "mx-1", + icon: FaWater } div { - class: "mt-1", {t!("long-term")._upper_first()} } } @@ -62,7 +64,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element { div { key: "{task.task.id}", class: format!( - "px-8 pt-5 {} flex flex-row gap-4", + "px-7 pt-5 {} flex flex-row gap-4", if task.task.deadline.is_some() { "pb-0.5" } else { @@ -80,12 +82,14 @@ pub(crate) fn CategoryTodayTaskList() -> Element { div { class: "flex flex-col gap-4", div { - class: "px-8 flex flex-row items-center gap-2 font-bold", - i { - class: "fa-solid fa-calendar-xmark text-xl w-6 text-center" + class: "px-7 flex flex-row items-center gap-2 font-bold", + Icon { + class: "mx-1", + height: 22, + width: 22, + icon: FaCalendarXmark } div { - class: "mt-1", {t!("overdue")._upper_first()} } } @@ -98,12 +102,14 @@ pub(crate) fn CategoryTodayTaskList() -> Element { div { class: "flex flex-col gap-4", div { - class: "px-8 flex flex-row items-center gap-2 font-bold", - i { - class: "fa-solid fa-calendar-check text-xl w-6 text-center" + class: "px-7 flex flex-row items-center gap-2 font-bold", + Icon { + class: "mx-1", + height: 22, + width: 22, + icon: FaCalendarCheck } div { - class: "mt-1", { let format = t!("date-weekday-format"); let today_date = today_date.format_localized( diff --git a/src/components/error_boundary_message.rs b/src/components/error_boundary_message.rs index ddd0b97..4beb4d4 100644 --- a/src/components/error_boundary_message.rs +++ b/src/components/error_boundary_message.rs @@ -1,6 +1,8 @@ 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::FaTriangleExclamation; #[component] pub(crate) fn ErrorBoundaryMessage(children: Element, class: Option) -> Element { @@ -11,8 +13,10 @@ pub(crate) fn ErrorBoundaryMessage(children: Element, class: Option) -> div { class: "grow flex flex-col justify-center items-center", div { - i { - class: "text-3xl fa-solid fa-triangle-exclamation" + Icon { + icon: FaTriangleExclamation, + height: 32, + width: 32 } } } diff --git a/src/components/form_open_button.rs b/src/components/form_open_button.rs index b63a1c6..253e1c4 100644 --- a/src/components/form_open_button.rs +++ b/src/components/form_open_button.rs @@ -1,6 +1,10 @@ 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) -> Element { @@ -9,7 +13,7 @@ pub(crate) fn FormOpenButton(opened: Signal) -> Element { rsx! { button { - class: "pointer-events-auto m-4 py-3 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", + 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); @@ -17,8 +21,18 @@ pub(crate) fn FormOpenButton(opened: Signal) -> Element { } opened.set(!opened()); }, - i { - class: format!("min-w-6 fa-solid {}", if opened() { "fa-xmark" } else { "fa-plus" }), + if opened() { + Icon { + icon: FaXmark, + height: 24, + width: 24 + } + } else { + Icon { + icon: FaPlus, + height: 24, + width: 24 + } } } } diff --git a/src/components/navigation.rs b/src/components/navigation.rs index 03ebc0d..1ad630a 100644 --- a/src/components/navigation.rs +++ b/src/components/navigation.rs @@ -1,6 +1,11 @@ use crate::components::navigation_item::NavigationItem; use crate::route::Route; use dioxus::prelude::*; +use dioxus_free_icons::Icon; +use dioxus_free_icons::icons::fa_solid_icons::{ + FaBars, FaCalendarDay, FaCalendarDays, FaCheck, FaForward, FaHourglassHalf, FaInbox, FaList, + FaTrashCan, FaWater, +}; #[component] pub(crate) fn Navigation(expanded: Signal) -> Element { @@ -9,70 +14,54 @@ pub(crate) fn Navigation(expanded: Signal) -> Element { class: "grid grid-cols-5 justify-stretch", button { class: format!( - "py-4 text-center text-2xl {} cursor-pointer", + "py-5 flex flex-row justify-center items-center {} cursor-pointer", if expanded() { "text-zinc-200" } else { "text-zinc-500" } ), onclick: move |_| expanded.set(!expanded()), - i { - class: "fa-solid fa-bars" + Icon { + icon: FaBars, + height: 24, + width: 24 } }, NavigationItem { route: Route::CategoryNextStepsPage, - i { - class: "fa-solid fa-forward" - } + icon: FaForward }, NavigationItem { route: Route::CategoryCalendarPage, - i { - class: "fa-solid fa-calendar-days" - } + icon: FaCalendarDays }, NavigationItem { route: Route::CategoryTodayPage, - i { - class: "fa-solid fa-calendar-day" - } + icon: FaCalendarDay }, NavigationItem { route: Route::CategoryInboxPage, - i { - class: "fa-solid fa-inbox" - } + icon: FaInbox }, {if expanded() { rsx! { NavigationItem { route: Route::ProjectsPage, - i { - class: "fa-solid fa-list" - } + icon: FaList }, NavigationItem { route: Route::CategoryTrashPage, - i { - class: "fa-solid fa-trash-can" - } + icon: FaTrashCan }, NavigationItem { route: Route::CategoryDonePage, - i { - class: "fa-solid fa-check" - } + icon: FaCheck }, NavigationItem { route: Route::CategoryLongTermPage, - i { - class: "fa-solid fa-water" - } + icon: FaWater }, NavigationItem { route: Route::CategoryWaitingForPage, - i { - class: "fa-solid fa-hourglass-half" - } + icon: FaHourglassHalf } } } else { VNode::empty() }} diff --git a/src/components/navigation_item.rs b/src/components/navigation_item.rs index f966e66..39c139e 100644 --- a/src/components/navigation_item.rs +++ b/src/components/navigation_item.rs @@ -1,19 +1,27 @@ use crate::route::Route; use dioxus::prelude::*; +use dioxus_free_icons::{Icon, IconShape}; #[component] -pub(crate) fn NavigationItem(route: Route, children: Element) -> Element { +pub(crate) fn NavigationItem( + route: Route, + icon: I, +) -> Element { let current_route = use_route::(); rsx! { Link { to: route.clone(), class: format!( - "py-4 text-center text-2xl {}", + "py-5 flex flex-row justify-center items-center {}", if current_route == route { "text-zinc-200" } else { "text-zinc-500" } ), - children + Icon { + icon, + height: 24, + width: 24 + } } } } diff --git a/src/components/project_form.rs b/src/components/project_form.rs index 31050d6..07a2206 100644 --- a/src/components/project_form.rs +++ b/src/components/project_form.rs @@ -3,6 +3,8 @@ 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}; #[component] pub(crate) fn ProjectForm( @@ -30,9 +32,12 @@ pub(crate) fn ProjectForm( class: "flex flex-row items-center gap-3", label { r#for: "input_title", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-pen-clip text-zinc-400/50" + class: "flex flex-row justify-center items-center min-w-6", + Icon { + class: "text-zinc-400/50", + icon: FaPenClip, + height: 16, + width: 16 } } input { @@ -48,7 +53,7 @@ pub(crate) fn ProjectForm( class: "flex flex-row justify-between mt-auto", button { r#type: "button", - class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer", + class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer", onclick: move |_| { let project = project.clone(); async move { @@ -58,15 +63,19 @@ pub(crate) fn ProjectForm( on_successful_submit.call(()); } }, - i { - class: "fa-solid fa-trash-can" + Icon { + icon: FaTrashCan, + height: 16, + width: 16 } } button { r#type: "submit", - class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer", - i { - class: "fa-solid fa-floppy-disk" + class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer", + Icon { + icon: FaFloppyDisk, + height: 16, + width: 16 } } } diff --git a/src/components/project_list.rs b/src/components/project_list.rs index e550e98..cd85a79 100644 --- a/src/components/project_list.rs +++ b/src/components/project_list.rs @@ -13,7 +13,7 @@ pub(crate) fn ProjectList() -> Element { div { key: "{project.id}", class: format!( - "px-8 py-4 select-none {}", + "px-7 py-4 select-none {}", if project_being_edited().is_some_and(|p| p.id == project.id) { "bg-zinc-700" } else { "" } diff --git a/src/components/reoccurrence_input.rs b/src/components/reoccurrence_input.rs index e38dbe6..9f84b86 100644 --- a/src/components/reoccurrence_input.rs +++ b/src/components/reoccurrence_input.rs @@ -2,6 +2,8 @@ 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( @@ -12,7 +14,7 @@ pub(crate) fn ReoccurrenceIntervalInput( button { r#type: "button", class: format!( - "py-2 rounded-lg {} {} cursor-pointer", + "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" } @@ -20,14 +22,16 @@ pub(crate) fn ReoccurrenceIntervalInput( onclick: move |_| { reoccurrence_interval.set(None); }, - i { - class: "fa-solid fa-ban" + Icon { + icon: FaBan, + height: 16, + width: 16 } }, button { r#type: "button", class: format!( - "py-2 rounded-lg {} {} cursor-pointer", + "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" } @@ -36,14 +40,16 @@ pub(crate) fn ReoccurrenceIntervalInput( onclick: move |_| { reoccurrence_interval.set(Some(ReoccurrenceInterval::Day)) }, - i { - class: "fa-solid fa-sun" + Icon { + icon: FaSun, + height: 16, + width: 16 } }, button { r#type: "button", class: format!( - "py-2 rounded-lg {} {} cursor-pointer", + "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" } @@ -52,14 +58,16 @@ pub(crate) fn ReoccurrenceIntervalInput( onclick: move |_| { reoccurrence_interval.set(Some(ReoccurrenceInterval::Month)) }, - i { - class: "fa-solid fa-moon" + Icon { + icon: FaMoon, + height: 16, + width: 16 } }, button { r#type: "button", class: format!( - "py-2 rounded-lg {} {} cursor-pointer", + "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" } @@ -68,8 +76,10 @@ pub(crate) fn ReoccurrenceIntervalInput( onclick: move |_| { reoccurrence_interval.set(Some(ReoccurrenceInterval::Year)) }, - i { - class: "fa-solid fa-earth-europe" + Icon { + icon: FaEarthEurope, + height: 16, + width: 16 } } } diff --git a/src/components/subtasks_form.rs b/src/components/subtasks_form.rs index e488014..5aea500 100644 --- a/src/components/subtasks_form.rs +++ b/src/components/subtasks_form.rs @@ -5,6 +5,9 @@ use crate::server::subtasks::{create_subtask, delete_subtask, edit_subtask}; 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::{FaListCheck, FaPlus, FaSquareCheck, FaTrashCan}; #[component] pub(crate) fn SubtasksForm(task: Task) -> Element { @@ -31,9 +34,12 @@ pub(crate) fn SubtasksForm(task: Task) -> Element { }, label { r#for: "input_new_title", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-list-check text-zinc-400/50" + class: "min-w-6 flex flex-row justify-center items-center", + Icon { + class: "text-zinc-400/50", + icon: FaListCheck, + height: 16, + width: 16 } } div { @@ -49,9 +55,11 @@ pub(crate) fn SubtasksForm(task: Task) -> Element { } button { r#type: "submit", - class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg", - i { - class: "fa-solid fa-plus" + class: "py-2 col-span-1 flex flex-row justify-center items-center bg-zinc-800/50 rounded-lg", + Icon { + icon: FaPlus, + height: 16, + width: 16 } } } @@ -60,15 +68,8 @@ pub(crate) fn SubtasksForm(task: Task) -> Element { div { key: "{subtask.id}", class: "flex flex-row items-center gap-3", - i { - class: format!( - "{} min-w-6 text-center text-2xl text-zinc-400/50", - if subtask.is_completed { - "fa solid fa-square-check" - } else { - "fa-regular fa-square" - } - ), + button { + class: "min-w-6 flex flex-row justify-center items-center text-zinc-400/50", onclick: { let subtask = subtask.clone(); move |_| { @@ -85,6 +86,19 @@ pub(crate) fn SubtasksForm(task: Task) -> Element { ).await; } } + }, + if subtask.is_completed { + Icon { + icon: FaSquareCheck, + height: 24, + width: 24 + } + } else { + Icon { + icon: FaSquare, + height: 24, + width: 24 + } } } div { @@ -118,7 +132,7 @@ pub(crate) fn SubtasksForm(task: Task) -> Element { } button { r#type: "button", - class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg", + class: "py-2 flex flex-row justify-center items-center col-span-1 bg-zinc-800/50 rounded-lg", onclick: { let subtask = subtask.clone(); move |_| { @@ -128,8 +142,10 @@ pub(crate) fn SubtasksForm(task: Task) -> Element { } } }, - i { - class: "fa-solid fa-trash-can" + Icon { + icon: FaTrashCan, + height: 16, + width: 16 } } } diff --git a/src/components/task_form.rs b/src/components/task_form.rs index ae3937d..7e5564a 100644 --- a/src/components/task_form.rs +++ b/src/components/task_form.rs @@ -11,6 +11,11 @@ use chrono::Duration; 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::{ + FaBell, FaBomb, FaClock, FaFloppyDisk, FaHourglassEnd, FaLayerGroup, FaList, FaPenClip, + FaRepeat, FaTrashCan, +}; use dioxus_i18n::t; use serde::{Deserialize, Serialize}; @@ -160,10 +165,13 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() class: "flex flex-row items-center gap-3", label { r#for: "input_title", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-pen-clip text-zinc-400/50" - }, + class: "min-w-6 flex flex-row justify-center items-center", + Icon { + class: "text-zinc-400/50", + icon: FaPenClip, + height: 16, + width: 16 + } }, input { name: "title", @@ -178,9 +186,12 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() class: "flex flex-row items-center gap-3", label { r#for: "input_project", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-list text-zinc-400/50" + class: "min-w-6 flex flex-row justify-center items-center", + Icon { + class: "text-zinc-400/50", + icon: FaList, + height: 16, + width: 16 } }, SuspenseBoundary { @@ -204,9 +215,12 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() class: "flex flex-row items-center gap-3", label { r#for: "input_deadline", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-bomb text-zinc-400/50" + class: "min-w-6 flex flex-row justify-center items-center", + Icon { + class: "text-zinc-400/50", + icon: FaBomb, + height: 16, + width: 16 } }, input { @@ -221,9 +235,12 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() div { class: "flex flex-row items-center gap-3", label { - class: "min-w-6 text-center", - i { - class: "fa-solid fa-layer-group text-zinc-400/50" + class: "min-w-6 flex flex-row justify-center items-center", + Icon { + class: "text-zinc-400/50", + icon: FaLayerGroup, + height: 16, + width: 16 } }, CategoryInput { @@ -236,10 +253,13 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() div { class: "flex flex-row items-center gap-3", label { - r#for: "input_deadline", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-hourglass-end text-zinc-400/50" + 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, + width: 16 } }, input { @@ -257,9 +277,12 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() class: "flex flex-row items-center gap-3", label { r#for: "input_category_calendar_date", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-clock text-zinc-400/50" + class: "min-w-6 flex flex-row justify-center items-center", + Icon { + class: "text-zinc-400/50", + icon: FaClock, + height: 16, + width: 16 } }, div { @@ -291,9 +314,12 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() class: "flex flex-row items-center gap-3", label { r#for: "category_calendar_reoccurrence_length", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-repeat text-zinc-400/50" + class: "min-w-6 flex flex-row justify-center items-center", + Icon { + class: "text-zinc-400/50", + icon: FaRepeat, + height: 16, + width: 16 } }, div { @@ -323,9 +349,12 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() class: "flex flex-row items-center gap-3", label { r#for: "category_calendar_reminder_offset_index", - class: "min-w-6 text-center", - i { - class: "fa-solid fa-bell text-zinc-400/50" + class: "min-w-6 flex flex-row justify-center items-center", + Icon { + class: "text-zinc-400/50", + icon: FaBell, + height: 16, + width: 16 } }, input { @@ -375,7 +404,7 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() class: "flex flex-row justify-between mt-auto", button { r#type: "button", - class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer", + class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer", onclick: move |_| { let task = task.clone(); async move { @@ -395,16 +424,20 @@ pub(crate) fn TaskForm(task: Option, on_successful_submit: EventHandler<() on_successful_submit.call(()); } }, - i { - class: "fa-solid fa-trash-can" + Icon { + icon: FaTrashCan, + height: 16, + width: 16 } } button { form: "form_task", r#type: "submit", - class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer", - i { - class: "fa-solid fa-floppy-disk" + class: "py-3 px-4 flex flex-row justify-center items-center bg-zinc-300/50 rounded-lg cursor-pointer", + Icon { + icon: FaFloppyDisk, + height: 16, + width: 16 } } } diff --git a/src/components/task_list.rs b/src/components/task_list.rs index b724852..98a4931 100644 --- a/src/components/task_list.rs +++ b/src/components/task_list.rs @@ -5,6 +5,9 @@ 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, class: Option<&'static str>) -> Element { @@ -16,17 +19,17 @@ pub(crate) fn TaskList(tasks: Vec, class: Option<&'static str> div { key: "{task.task.id}", class: format!( - "px-8 pt-4 {} flex flex-row gap-4 select-none {}", + "px-7 pt-4.25 {} flex flex-row items-start gap-4 select-none {}", if task.task.deadline.is_some() || !task.subtasks.is_empty() { - "pb-0.5" + "pb-0.25" } else if let Category::Calendar { time, .. } = &task.task.category { if time.is_some() { - "pb-0.5" + "pb-0.25" } else { - "pb-4" + "pb-4.25" } } else { - "pb-4" + "pb-4.25" }, if task_being_edited().is_some_and(|t| t.id == task.task.id) { "bg-zinc-700" @@ -36,15 +39,8 @@ pub(crate) fn TaskList(tasks: Vec, class: Option<&'static str> let task = task.clone(); move |_| task_being_edited.set(Some(task.task.clone())) }, - i { - class: format!( - "{} text-3xl align-middle h-9 text-zinc-500", - if let Category::Done = task.task.category { - "fa solid fa-square-check" - } else { - "fa-regular fa-square cursor-pointer" - } - ), + button { + class: "text-zinc-500", onclick: { move |event: Event| { // To prevent editing the task. @@ -53,6 +49,20 @@ pub(crate) fn TaskList(tasks: Vec, class: Option<&'static str> let _ = complete_task(task.task.id).await; } } + }, + if let Category::Done = task.task.category { + Icon { + icon: FaSquareCheck, + height: 30, + width: 30 + } + } else { + Icon { + class: "cursor-pointer", + icon: FaSquare, + height: 30, + width: 30 + } } }, TaskListItem { diff --git a/src/components/task_list_item.rs b/src/components/task_list_item.rs index 53b257e..e2c1b0b 100644 --- a/src/components/task_list_item.rs +++ b/src/components/task_list_item.rs @@ -5,6 +5,8 @@ use chrono::{Datelike, Local}; 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::{FaBomb, FaClock, FaListCheck}; use dioxus_i18n::prelude::i18n; use dioxus_i18n::t; use voca_rs::Voca; @@ -14,19 +16,21 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element { let today_date = Local::now().date_naive(); rsx! { div { - class: "flex flex-col", + class: "pt-0.75 flex flex-col", div { - class: "mt-1 grow font-medium", + class: "grow font-medium", {task.task.title} }, div { class: "flex flex-row gap-4", if let Some(deadline) = task.task.deadline { div { - class: "text-sm text-zinc-400", - i { - class: "fa-solid fa-bomb" - }, + class: "flex flex-row items-center gap-1 text-sm text-zinc-400", + Icon { + icon: FaBomb, + height: 14, + width: 14 + } { format!( " {}", @@ -72,10 +76,12 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element { if let Category::Calendar { time, .. } = task.task.category { if let Some(calendar_time) = time { div { - class: "text-sm text-zinc-400", - i { - class: "fa-solid fa-clock" - }, + class: "flex flex-row items-center gap-1 text-sm text-zinc-400", + Icon { + icon: FaClock, + height: 14, + width: 14 + } { let format = t!("time-format"); format!(" {}", calendar_time.time.format(format.as_str())) @@ -85,10 +91,12 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element { } if !task.subtasks.is_empty() { div { - class: "text-sm text-zinc-400", - i { - class: "fa-solid fa-list-check" - }, + class: "flex flex-row items-center gap-1 text-sm text-zinc-400", + Icon { + icon: FaListCheck, + height: 14, + width: 14 + } {format!( " {}/{}", task.subtasks.iter() diff --git a/src/layouts/main.rs b/src/layouts/main.rs index 030610a..f0800ad 100644 --- a/src/layouts/main.rs +++ b/src/layouts/main.rs @@ -7,6 +7,8 @@ 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 { @@ -25,10 +27,11 @@ pub(crate) fn Main() -> Element { rsx! { div { class: "grow flex flex-col justify-center items-center", - div { - i { - class: "text-3xl fa-solid fa-cog fa-spin" - } + Icon { + class: "animate-[spin_2000ms_linear_infinite]", + icon: FaCog, + height: 32, + width: 32 } } }