Updated implementation of theme configuration from user preferences, applied to title.

void-fe/src/components/void_buttons.rs

@@ -7,7 +7,8 @@ use dioxus_router::Link;
 pub fn BackToHomePage(cx: Scope) -> Element {
     #[cfg(any(target_family = "windows", target_family = "unix"))]
     return cx.render(rsx!{
-        a {href: "/",
+        a { class: "flex justify-center p-4 text-xl text-center ring-2",
+            href: "/",
             p {
                 "Back to the homepage"
             }
@@ -15,7 +16,8 @@ pub fn BackToHomePage(cx: Scope) -> Element {
     });
     #[cfg(target_family = "wasm")]
     return cx.render(rsx!{
-        Link { to: "/",
+        Link { class: "flex justify-center p-4 text-xl text-center ring-2",
+            to: "/",
             p {
                 "Back to the homepage"
             }
@@ -30,13 +32,15 @@ pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
     let slug_ref = slug.as_str();
     #[cfg(any(target_family = "windows", target_family = "unix"))]
     return cx.render(rsx!{
-        a { href: "{slug_ref}",
+        a { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2",
+            href: "{slug_ref}",
             "{title_ref}"
         }
     });
     #[cfg(target_family = "wasm")]
     return cx.render(rsx!{
-        Link { to: "{slug_ref}",
+        Link { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2",
+            to: "{slug_ref}",
             div {
                 dangerous_inner_html: "{title_ref}",
             }

void-fe/src/components/void_content.rs

@@ -6,7 +6,7 @@ pub fn RenderContent(cx: Scope<ContentProps>) -> Element {
     let content = &cx.props.content;
     #[cfg(any(target_family = "windows", target_family = "unix"))]
     return cx.render(rsx!{
-        div { class: "flex p-4 ml-2 mr-2 ring-4",
+        div { class: "flex p-4 md:pl-8 md:pr-8 ml-2 mr-2 text-lg text-center ring-4",
             "{content}",
         }
     });

void-fe/src/components/void_footer.rs

@@ -9,9 +9,9 @@ pub fn Footer(cx: Scope) -> Element {
 
 fn MutantStandardFooter(cx: Scope) -> Element {
     cx.render(rsx!{
-        div {
+        div { class: "p-4 flex flex-col space-y-4 mx-auto max-w-full justify-center ring-4",
             NavigationButton { title: "⚙️".to_string(), slug: "/settings".to_string() }
-            div {
+            div { class: "flex mx-auto max-w-full justify-center text-md text-center",
                 "This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
             }
         }

void-fe/src/components/void_page.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 pub fn PageBase<'a>(cx: Scope<'a, PageChildren<'a>>) -> Element {
     cx.render(rsx!{
         // div { class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light let button_classes hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue hover:animate-yip transition", hidden: true }
-        div {
+        div { class: "min-h-screen",
             div { class: "container space-y-4 mx-auto p-4",
                 &cx.props.children
             }

void-fe/src/components/void_poem.rs

@@ -48,7 +48,7 @@ pub fn PoemContent(cx: Scope<PoemData>) -> Element {
     #[cfg(any(target_family = "unix", target_family = "windows"))]
     return cx.render(rsx! {
         div { class: "flex p-2 mx-auto max-w-full justify-center",
-            details { class: "group p-4 max-w-fit space-y-4",
+            details { class: "group p-4 max-w-fit space-y-4 ring-4",
                 summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 ring-2",
                 }
                 div { class: "font-nerd flex flex-col space-y-4 py-4", "{content}{creation_date}"

void-fe/src/components/void_title.rs

@@ -1,12 +1,14 @@
 use crate::utils::prop_structs::TitleProps;
+use super::super::utils::user_prefs::ThemedComponent;
 use dioxus::prelude::*;
 
 pub fn Title(cx: Scope<TitleProps>) -> Element {
     let user_prefs = cx.props.user_prefs.clone();
+    let title_classes = user_prefs.get_theme_classes(ThemedComponent::Card);
     let title = cx.props.title.clone();
     let is_html = cx.props.is_html;
     cx.render(rsx!{
-        div { class: "p-4 ring-4",
+        div { class: "p-4 ring-4 {title_classes}",
             span { class: "flex flex-row mx-auto max-w-full justify-center text-xl text-center",
                 TitleHtml { title: title, is_html: is_html, user_prefs: user_prefs }
             }

void-fe/src/lib.rs

@@ -64,10 +64,20 @@ pub mod void_app {
     /// Renders the app and returns the rendered Element.
     pub fn HomePage(cx: Scope<UserPrefs>) -> Element {
         let user_prefs = cx.props.clone();
-        let (user_theme, user_font) = user_prefs.get_prefs(false);
+        let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
         let title = "A Letter to the Void".to_string();
         cx.render(rsx!{
-            // div { class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light let button_classes hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue hover:animate-yip transition", hidden: true }
+            // class: "bg-alice-werefox-grey-light dark:bg-alice-werefox-grey"
+            // class: "bg-alice-werefox-grey"
+            // class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
+            // class: "dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light"
+            // class: "bg-alice-werefox-grey-dark ring-alice-werefox-red text-alice-werefox-grey-light"
+            // class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
+            // class: "hover:text-alice-werefox-blue-dark"
+            // class: "hover:ring-alice-werefox-blue dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red"
+            // class: "bg-alice-werefox-grey-dark ring-alice-werefox-red"
+            // class: "dark:text-alice-werefox-grey-light dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue"
+            // class: "text-alice-werefox-grey-light hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue"
             div { class: "{user_theme} {user_font}",
                 PageBase {
                     Title { title: title, is_html: false, user_prefs: user_prefs }
@@ -86,7 +96,7 @@ pub mod void_app {
     /// Renders the app and returns the rendered Element.
     pub fn PoemListPage(cx: Scope<UserPrefs>) -> Element {
         let user_prefs = cx.props.clone();
-        let (user_theme, user_font) = user_prefs.get_prefs(false);
+        let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
         cx.render(rsx! {
             div { class: "{user_theme} {user_font}",
                 PageBase {
@@ -102,7 +112,7 @@ pub mod void_app {
 
     pub fn PoemPage(cx: Scope<PoemRequest>) -> Element {
         let user_prefs = cx.props.user_prefs.clone();
-        let (user_theme, user_font) = user_prefs.get_prefs(false);
+        let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
         #[cfg(any(target_family = "unix", target_family = "windows"))]
         let slug = cx.props.slug.clone();
         #[cfg(target_family = "wasm")]
@@ -131,7 +141,7 @@ pub mod void_app {
 
     pub fn SettingsPage(cx: Scope<UserPrefs>) -> Element {
         let user_prefs = cx.props.clone();
-        let (user_theme, user_font) = user_prefs.get_prefs(false);
+        let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
         cx.render(rsx! {
             div { class: "{user_theme} {user_font}",
                 PageBase {

void-fe/src/utils/user_prefs.rs

@@ -19,19 +19,95 @@ pub enum FontPref {
     OpenDyslexic,
 }
 
+pub enum ThemedComponent {
+    Page,
+    Card,
+    Button,
+}
+
 impl UserPrefs {
+    // TailwindCSS has a difficult time determining which classes we'll need for our site,
+    // the easiest way to fix this is to simply list all of them our in commented out class
+    // attributes, so all of these we *will* use, and TailwindCSS will know to compile them.
+    // class: "bg-alice-werefox-grey-light dark:bg-alice-werefox-grey"
+    // class: "bg-alice-werefox-grey"
+    // class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
+    // class: "dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light"
+    // class: "bg-alice-werefox-grey-dark ring-alice-werefox-red text-alice-werefox-grey-light"
+    // class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
+    // class: "hover:text-alice-werefox-blue-dark"
+    // class: "hover:ring-alice-werefox-blue dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red"
+    // class: "bg-alice-werefox-grey-dark ring-alice-werefox-red"
+    // class: "dark:text-alice-werefox-grey-light dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue"
+    // class: "text-alice-werefox-grey-light hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue"
+
+    const PAGE_CLASSES: &str = "bg-alice-werefox-grey-light dark:bg-alice-werefox-grey";
+    const CARD_CLASSES: &str = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light";
+    const BUTTON_CLASSES: &str = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue";
+
     pub fn new(theme: ThemePref, font: FontPref) -> UserPrefs {
-        UserPrefs {
+        UserPrefs { theme, font }
-            theme,
+    }
-            font,
+
+    // I'm really about to write a ceil() function because I refuse to force devs to use Nightly
+    fn ceil(n: usize) -> usize {
+        if n.rem_euclid(2) == 0 {
+            n / 2
+        } else {
+            n - 1 / 2
         }
     }
 
-    pub fn get_theme(&self, is_button: bool) -> String {
+    pub fn get_theme_classes(&self, component: ThemedComponent) -> String {
         match &self.theme {
-            ThemePref::Light => Self::light_theme_classes(is_button),
+            ThemePref::Light => match component {
-            ThemePref::Dark => Self::dark_theme_classes(is_button),
+                ThemedComponent::Page => Self::PAGE_CLASSES
-            ThemePref::Auto => Self::auto_theme_classes(is_button),
+                    .split_at(Self::ceil(Self::PAGE_CLASSES.len() / 2))
+                    .0
+                    .to_string(),
+                ThemedComponent::Card => Self::CARD_CLASSES
+                    .split_at(Self::ceil(Self::CARD_CLASSES.len() / 2))
+                    .0
+                    .to_string(),
+                ThemedComponent::Button => Self::BUTTON_CLASSES
+                    .split_at(Self::ceil(Self::BUTTON_CLASSES.len() / 2))
+                    .0
+                    .to_string(),
+            },
+            ThemePref::Dark => match component {
+                ThemedComponent::Page => {
+                    let remove_dark_tags = Self::PAGE_CLASSES.split("dark:").collect::<String>();
+                    let split_whitespace = remove_dark_tags.as_str().split(" ");
+                    let split_whitespace_length = split_whitespace.clone().count();
+                    split_whitespace
+                        .skip(Self::ceil(split_whitespace_length / 2))
+                        .map(|e| format!("{e} "))
+                        .collect::<String>()
+                }
+                ThemedComponent::Card => {
+                    let remove_dark_tags = Self::CARD_CLASSES.split("dark:").collect::<String>();
+                    let split_whitespace = remove_dark_tags.as_str().split(" ");
+                    let split_whitespace_length = split_whitespace.clone().count();
+                    split_whitespace
+                        .skip(Self::ceil(split_whitespace_length / 2))
+                        .map(|e| format!("{e} "))
+                        .collect::<String>()
+                }
+                ThemedComponent::Button => {
+                    let remove_dark_tags = Self::BUTTON_CLASSES.split("dark:").collect::<String>();
+                    let split_whitespace = remove_dark_tags.as_str().split(" ");
+                    let split_whitespace_length = split_whitespace.clone().count();
+                    split_whitespace
+                        .skip(Self::ceil(split_whitespace_length / 2))
+                        .map(|e| format!("{e} "))
+                        .collect::<String>()
+                }
+            },
+            ThemePref::Auto => match component {
+                ThemedComponent::Page => Self::PAGE_CLASSES.to_string(),
+                ThemedComponent::Card => Self::CARD_CLASSES.to_string(),
+                ThemedComponent::Button => Self::BUTTON_CLASSES.to_string(),
+            },
         }
     }
 
@@ -50,8 +126,8 @@ impl UserPrefs {
         self.font = font;
     }
 
-    pub fn get_prefs(&self, is_button: bool) -> (String, String) {
+    pub fn get_prefs(&self, component: ThemedComponent) -> (String, String) {
-        let theme = self.get_theme(is_button).clone();
+        let theme = self.get_theme_classes(component).clone();
         let font = self.get_font().clone();
         (theme, font)
     }
@@ -60,37 +136,4 @@ impl UserPrefs {
         self.theme = prefs.theme;
         self.font = prefs.font;
     }
-
-    fn light_theme_classes(is_button: bool) -> String {
-        let base_classes = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
-            .to_string();
-        let button_classes = "hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue hover:animate-yip transition".to_string();
-        if is_button {
-            return format!("{base_classes} {button_classes}");
-        }
-        base_classes
-    }
-    fn dark_theme_classes(is_button: bool) -> String {
-        let base_classes =
-            "bg-alice-werefox-grey-dark ring-alice-werefox-red text-alice-werefox-grey-light"
-                .to_string();
-        let button_classes = "hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue hover:animate-yip transition".to_string();
-        if is_button {
-            return format!("{base_classes} {button_classes}");
-        }
-        base_classes
-    }
-    fn auto_theme_classes(is_button: bool) -> String {
-        format!(
-            "{} {}",
-            Self::light_theme_classes(is_button)
-                .split(" ")
-                .map(|c| if c == "transition" { "".to_string() } else { format!("{c} ") })
-                .collect::<String>(),
-            Self::dark_theme_classes(is_button)
-                .split(" ")
-                .map(|c| format!(" dark:{c}"))
-                .collect::<String>()
-        )
-    }
 }