matous-volf/todo-baggins
1
1
Fork 0
Code Issues 27 Pull Requests Actions Projects 1 Activity

Compare commits

base: matous-volf:a6711b3e47f8b97772755b1a30ce2cc2ed107fb6
Branches Tags
matous-volf:main matous-volf:temp-android-build matous-volf:2
...
compare: matous-volf:eb6f7e7a1c65af28119d48257ab4f80d04e107e0
Branches Tags
matous-volf:main matous-volf:temp-android-build matous-volf:2

1 Commits
a6711b3e47 ... eb6f7e7a1c

Author SHA1 Message Date
Matouš Volf
eb6f7e7a1c feat: UI overhaul
Some checks failed
actionlint check / actionlint check (pull_request) Successful in 6s
Details
conventional pull request title check / conventional pull request title check (pull_request) Successful in 6s
Details
conventional commit messages check / conventional commit messages check (pull_request) Successful in 8s
Details
dotenv-linter check / dotenv-linter check (pull_request) Successful in 10s
Details
GitLeaks check / GitLeaks check (pull_request) Successful in 13s
Details
hadolint check / hadolint check (pull_request) Successful in 18s
Details
Prettier check / Prettier check (pull_request) Successful in 41s
Details
htmlhint check / htmlhint check (pull_request) Successful in 57s
Details
markdownlint check / markdownlint check (pull_request) Successful in 50s
Details
checkov check / checkov check (pull_request) Successful in 1m38s
Details
ShellCheck check / ShellCheck check (pull_request) Successful in 32s
Details
Stylelint check / Stylelint check (pull_request) Successful in 32s
Details
yamllint check / yamllint check (pull_request) Successful in 31s
Details
Rust check / Rust check (pull_request) Has been cancelled
Details
2026-01-29 15:10:06 +01:00
41 changed files with 839 additions and 994 deletions
Expand all files Collapse all files

BIN
assets/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/images/icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 38 KiB

203
assets/images/icon.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

4
assets/manifest.json
View File

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

57
assets/styles/input_range.css
View File

@@ -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 {
background: #525259;
input[type="range"]::-webkit-slider-thumb {
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%);
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;
transform: translateY(3px);
}
input[type="range"]::-webkit-slider-runnable-track {
background: rgba(39 39 42 / 50%);
height: 0.5rem;
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;
position: relative;
top: 3px;
}

7
assets/styles/select_arrow.css Normal file
View File

@@ -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;
}

5
src/components/app.rs
View File

@@ -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> {}
}
}

70
src/components/bottom_panel.rs
View File

@@ -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 {
// A signal for delaying the application of styles.
#[allow(clippy::redundant_closure)]
let mut expanded = use_signal(|| display_form());
pub(crate) fn BottomPanel() -> Element {
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 {}",
match (display_form(), current_route, navigation_expanded()) {
(false, _, false) => "h-[64px]",
(false, _, true) => "h-[130px]",
(true, Route::ProjectsPage, _) => "h-[130px]",
(true, _, _) => "h-[506px]",
"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 {}",
if navigation_expanded() {
"h-[130px]"
} else {
"h-[66px]"
}
),
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,
}
}
}

29
src/components/button_primary.rs Normal file
View File

@@ -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}
}
}
}
}

29
src/components/button_secondary.rs Normal file
View File

@@ -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}
}
}
}
}

5
src/components/category_calendar_task_list.rs
View File

@@ -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 {

119
src/components/category_input.rs
View File

@@ -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("")),
button {
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::SomedayMaybe { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
class: format!("grid grid-cols-3 gap-3 {}", class.unwrap_or("")),
SelectButton {
icon: FaLightbulb,
is_selected: matches!(selected_category(), Category::SomedayMaybe),
on_select: move |_| {
selected_category.set(Category::SomedayMaybe);
},
Icon {
icon: FaQuestion,
height: 16,
width: 16
}
},
button {
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 {
}
SelectButton {
icon: FaWater,
height: 16,
width: 16
is_selected: matches!(selected_category(), Category::LongTerm),
on_select: move |_| {
selected_category.set(Category::LongTerm);
}
},
button {
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 {
}
SelectButton {
icon: FaHourglassHalf,
height: 16,
width: 16
is_selected: matches!(selected_category(), Category::WaitingFor(_)),
on_select: move |_| {
selected_category.set(Category::WaitingFor(String::new()));
}
},
button {
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::NextSteps { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
}
SelectButton {
icon: FaSignsPost,
is_selected: matches!(selected_category(), Category::NextSteps),
on_select: move |_| {
selected_category.set(Category::NextSteps);
},
Icon {
icon: FaForward,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"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" }
),
onclick: move |_| {
}
SelectButton {
icon: FaCalendarDays,
is_selected: matches!(selected_category(), Category::Calendar { .. }),
on_select: move |_| {
selected_category.set(Category::Calendar {
date: chrono::Local::now().date_naive(),
reoccurrence: None,
time: None,
});
},
Icon {
icon: FaCalendarDays,
height: 16,
width: 16
}
},
button {
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 {
}
SelectButton {
icon: FaInbox,
height: 16,
width: 16
is_selected: matches!(selected_category(), Category::Inbox),
on_select: move |_| {
selected_category.set(Category::Inbox);
}
}
}

14
src/components/category_today_task_list.rs
View File

@@ -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

31
src/components/create_button.rs Normal file
View File

@@ -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
}
}
}
}

1
src/components/error_boundary_message.rs
View File

@@ -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

39
src/components/form_open_button.rs
View File

@@ -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
}
}
}
}
}

53
src/components/input.rs Normal file
View File

@@ -0,0 +1,53 @@
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!(
/* `w-full` is required for the Chromium renderer to allow the input to shrink
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"
},
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)),
oninput: move |event| {
if let Some(oninput) = oninput {
oninput.call(event);
}
},
onchange: move |event| {
if let Some(onchange) = oninput {
onchange.call(event);
}
},
onmounted: move |element| async move {
if let Some(true) = autofocus {
let _ = element.set_focus(true).await;
}
},
..attributes
}
}
}

21
src/components/input_label.rs Normal file
View File

@@ -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
}
}
}
}

9
src/components/mod.rs
View File

@@ -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;

27
src/components/navigation.rs
View File

@@ -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,
FaQuestion, FaTrashCan,
FaBars, FaCalendarDay, FaCalendarDays, FaHourglassHalf, FaInbox, FaList, FaSignsPost,
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",
if expanded() { "text-zinc-200" }
else { "text-zinc-500" }
"py-2 flex flex-row justify-center items-center cursor-pointer",
),
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,

10
src/components/navigation_item.rs
View File

@@ -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 {}",
if current_route == route { "text-zinc-200" }
else { "text-zinc-500" }
"py-2.5 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400",
),
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>(
}
}
}
}
}

94
src/components/project_form.rs
View File

@@ -1,66 +1,75 @@
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(
project: Option<Project>,
on_successful_submit: EventHandler<()>,
) -> Element {
pub(crate) fn ProjectForm() -> Element {
let navigator = use_navigator();
let project = PROJECT_BEING_EDITED();
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 _ = edit_project(project.id, new_project).await;
let result = if let Some(project) = project {
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 {
r#for: "input_title",
class: "flex flex-row justify-center items-center min-w-6",
Icon {
class: "text-zinc-400/50",
icon: FaPenClip,
height: 16,
width: 16
InputLabel {
icon: FaFeatherPointed,
r#for: "input_title"
}
}
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",
id: "input_title"
initial_value: project.as_ref().map(|project| project.title.to_owned()),
}
}
}
div {
class: "flex flex-row justify-between mt-auto",
button {
class: "px-4 grid grid-cols-3 gap-3 mt-auto",
ButtonSecondary {
r#type: "button",
class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
onclick: move |_| {
class: "grow",
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() {
navigator.go_back();
}
} else {
navigator.go_back();
}
}
on_successful_submit.call(());
}
},
Icon {
@@ -69,16 +78,35 @@ pub(crate) fn ProjectForm(
width: 16
}
}
button {
r#type: "submit",
class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
if project.is_some() {
div {
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
}
}
}
}
}

18
src/components/project_list.rs
View File

@@ -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!(
"px-7 py-4 select-none {} text-pretty wrap-anywhere",
if project_being_edited().is_some_and(|p| p.id == project.id) {
"bg-zinc-700"
} else { "" }
),
onclick: move |_| project_being_edited.set(Some(project.clone())),
onclick: move |_| {
*PROJECT_BEING_EDITED.write() = Some(project.clone());
navigator.push(Route::ProjectFormPage);
},
{project.title.clone()}
}
}

4
src/components/project_select.rs
View File

@@ -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",
id: "input_project",
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",
id: "input_project_id",
option {
value: 0,
{t!("none")}

86
src/components/reoccurrence_input.rs
View File

@@ -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
}
}
}
}

43
src/components/reoccurrence_interval_input.rs Normal file
View File

@@ -0,0 +1,43 @@
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! {
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));
}
}
}
}

28
src/components/select_button.rs Normal file
View File

@@ -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
}
},
}
}

68
src/components/subtasks_form.rs
View File

@@ -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::{FaListCheck, FaPlus, FaSquareCheck, FaTrashCan};
use dioxus_free_icons::icons::fa_solid_icons::{FaGavel, FaListCheck, 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 {
r#for: "input_new_title",
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
InputLabel {
icon: FaListCheck,
height: 16,
width: 16
}
r#for: "input_new_title"
}
div {
class: "grow grid grid-cols-6 gap-2",
input {
name: "title",
class: "grow flex flex-row items-end gap-3",
Input {
class: "grow",
name: "new_title",
r#type: "text",
required: true,
value: new_title,
r#type: "text",
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())
onchange: move |event: Event<FormData>| 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 {
Icon {
icon: FaSquareCheck,
height: 24,
width: 24
}
} else {
Icon {
icon: FaSquare,
height: 24,
width: 24
}
div {
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 {}",
if subtask.is_completed {"bg-gray-600"} else {"border-3 border-gray-600"}
)
}
}
div {
class: "grow grid grid-cols-6 gap-2",
input {
class: "grow flex flex-row items-end gap-3",
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 {
}
}
}
}
}

250
src/components/task_form.rs
View File

@@ -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,
FaRepeat, FaTrashCan,
FaBell, FaBomb, FaClock, FaFeatherPointed, FaHourglassEnd, FaList, FaRepeat, FaScroll, FaStamp,
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 {
let route = use_route::<Route>();
pub(crate) fn TaskForm() -> Element {
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 {
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,
}
LATEST_VISITED_CATEGORY()
}
});
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 _ = edit_task(task.id, new_task).await;
let result = if let Some(task) = task {
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 {
class: "text-zinc-400/50",
icon: FaPenClip,
height: 16,
width: 16
}
icon: FaFeatherPointed
},
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",
id: "input_title"
},
autofocus: task.is_none()
}
},
div {
class: "flex flex-row items-center gap-3",
label {
r#for: "input_project",
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaList,
height: 16,
width: 16
}
InputLabel {
r#for: "input_project_id",
icon: FaList
},
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,
{t!("none")}
},
value: 0
}
}
}
},
@@ -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 {
r#for: "input_deadline",
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
InputLabel {
icon: FaBomb,
height: 16,
width: 16
}
r#for: "input_deadline"
},
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",
id: "input_deadline"
class: "grow basis-0"
}
},
div {
class: "flex flex-row items-center gap-3",
label {
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaLayerGroup,
height: 16,
width: 16
}
InputLabel {
icon: FaScroll
},
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 {
r#for: "input_waiting_for",
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
InputLabel {
icon: FaHourglassEnd,
height: 16,
width: 16
}
r#for: "input_category_waiting_for",
},
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 {
r#for: "input_category_calendar_date",
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
InputLabel {
icon: FaClock,
height: 16,
width: 16
}
r#for: "input_category_calendar_date"
},
div {
class: "grow flex flex-row gap-2",
input {
r#type: "date",
class: "grow grid grid-cols-7 gap-3",
Input {
class: "grow col-span-4",
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 {
r#type: "time",
Input {
class: "grow col-span-3",
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",
id: "input_category_calendar_time",
oninput: move |event| {
oninput: move |event: Event<FormData>| {
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 {
r#for: "category_calendar_reoccurrence_length",
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
InputLabel {
icon: FaRepeat,
height: 16,
width: 16
}
r#for: "category_calendar_reoccurrence_length"
},
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 {
r#for: "category_calendar_reminder_offset_index",
class: "min-w-6 flex flex-row justify-center items-center",
Icon {
class: "text-zinc-400/50",
icon: FaBell,
height: 16,
width: 16
}
InputLabel {
r#for: "input_category_calendar_reminder_offset_index",
icon: FaBell
},
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",
button {
class: "px-4 grid grid-cols-3 gap-3 mt-auto",
ButtonSecondary {
r#type: "button",
class: "py-3 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
onclick: move |_| {
class: "grow",
onclick: {
let task = task.clone();
move |_| {
let task = task.clone();
async move {
if let Some(task) = task {
if let Category::Trash = task.category {
let _ = delete_task(task.id).await;
let result = if let Category::Trash = task.category {
delete_task(task.id).await
} else {
let new_task = NewTask {
title: task.title.to_owned(),
@@ -417,10 +364,15 @@ 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() {
navigator.go_back();
}
} else {
navigator.go_back();
}
}
on_successful_submit.call(());
}
},
Icon {
@@ -429,17 +381,35 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
width: 16
}
}
button {
form: "form_task",
r#type: "submit",
class: "py-3 px-4 flex flex-row justify-center items-center bg-zinc-300/50 rounded-lg cursor-pointer",
if task.is_some() {
div {
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_task",
r#type: "submit",
Icon {
icon: FaStamp,
height: 16,
width: 16
}
}
}
}
}

47
src/components/task_list.rs
View File

@@ -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 {
icon: FaSquareCheck,
height: 30,
width: 30
}
"mt-[3px] mb-[2px] bg-amber-300-muted"
} else {
Icon {
class: "cursor-pointer",
icon: FaSquare,
height: 30,
width: 30
"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)]"
}
)
}
},
div {
class: "mt-1.5",
TaskListItem {
task: task.clone()
}
@@ -72,4 +72,5 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
}
}
}
}
}

6
src/components/task_list_item.rs
View File

@@ -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,

50
src/layouts/main.rs
View File

@@ -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,
}
}
}
}

4
src/layouts/mod.rs
View File

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

38
src/layouts/navigation.rs Normal file
View File

@@ -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 {}
}
}
}

28
src/layouts/suspense.rs Normal file
View File

@@ -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> {}
}
}
}

13
src/route/mod.rs
View File

@@ -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)]
#[redirect("/", || Route::CategoryTodayPage {})]
#[layout(layouts::navigation::Navigation)]
#[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 {

3
src/views/category_page.rs
View File

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

2
src/views/mod.rs
View File

@@ -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;

12
src/views/project_form_page.rs Normal file
View File

@@ -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 {}
}
}
}

12
src/views/task_form_page.rs Normal file
View File

@@ -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 {}
}
}
}

4
tailwind.css
View File

@@ -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;
}