refactor: remove themer

Cargo.toml

@@ -23,12 +23,12 @@ strip = "debuginfo"
 yew = { version = "0.21.0", features = ["csr"] }
 yew-router = "0.18.0"
 stylist = { version = "0.13.0", features = ["yew_integration"] }
-themer = { git = "https://github.com/simbleau/themer", version = "0.3" }
 hex_color = "3.0.0"
 url = "2.5.0"
 wasm-bindgen = "0.2.92"
 gloo-utils = "0.2.0"
 gloo-timers = "0.3.0"
+gloo-storage = "0.3.0"
 serde = "1.0.198"
 console_error_panic_hook = "0.1.7"
 log = "0.4.17"

src/header.rs → src/components/desktop_header.rs

@@ -1,8 +1,8 @@
-use crate::{components::ThemeSwitcher, navigation::Navigation};
+use crate::components::{Navigation, ThemeSwitcher};
 use stylist::yew::styled_component;
 use yew::prelude::*;
 
-#[styled_component(Header)]
+#[styled_component(DesktopHeader)]
 pub fn view() -> Html {
     let header_css = css! {
         margin-bottom: 20px;

src/components/email_button.rs

@@ -1,9 +1,8 @@
 use crate::{
     components::{Icon, IconMask},
-    style::themes::ThemeChoice,
+    hooks::use_theme,
 };
 use stylist::yew::{styled_component, use_media_query};
-use themer::yew::use_theme;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq, Eq)]
@@ -20,7 +19,7 @@ pub fn EmailButton(props: &EmailButtonProps) -> Html {
     const BORDER_WIDTH: &str = "3px";
 
     let is_mobile = use_media_query("(max-width: 768px)");
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
     let email = use_state(|| "".to_string());
     let visible = use_state(|| false);
 

src/footer.rs → src/components/footer.rs

@@ -1,14 +1,13 @@
 use crate::{
     components::{ExternalLink, Icon, IconMask},
-    style::themes::ThemeChoice,
+    hooks::use_theme,
 };
 use stylist::yew::styled_component;
-use themer::yew::use_theme;
 use yew::prelude::*;
 
 #[styled_component(Footer)]
 pub fn view() -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     let footer_css = css! {
         margin-top: 20px;

src/components/icons/icon.rs

@@ -1,8 +1,7 @@
 use super::IconMask;
-use crate::style::themes::ThemeChoice;
+use crate::hooks::use_theme;
 use hex_color::HexColor;
 use stylist::css;
-use themer::yew::use_theme;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
@@ -21,7 +20,7 @@ pub struct Props {
 
 #[function_component(Icon)]
 pub fn icon(props: &Props) -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     let icon_style = css! {
         height: 0.8rem;

src/components/iframe.rs

@@ -1,11 +1,9 @@
+use crate::{components::Spinner, hooks::use_theme};
 use stylist::yew::styled_component;
-use themer::yew::use_theme;
 use wasm_bindgen::JsCast;
 use web_sys::Element;
 use yew::prelude::*;
 
-use crate::{components::Spinner, style::themes::ThemeChoice};
-
 #[derive(Properties, PartialEq)]
 pub struct IFrameProps {
     pub class: Option<Classes>,
@@ -14,7 +12,7 @@ pub struct IFrameProps {
 
 #[styled_component(IFrame)]
 pub fn view(props: &IFrameProps) -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     pub const BORDER_WIDTH: &str = "3px";
     pub const BORDER_RADIUS: &str = "10px";

src/components/links/external_link.rs

@@ -1,16 +1,18 @@
 use crate::{
     components::{Icon, IconMask},
-    style::themes::ThemeChoice,
+    hooks::use_theme,
 };
 use stylist::yew::styled_component;
-use themer::yew::use_theme;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
 pub struct ExternalLinkProps {
-    #[prop_or(AttrValue::Static("#"))]
     pub to: AttrValue,
     #[prop_or_default]
+    pub target: Option<AttrValue>,
+    #[prop_or_default]
+    pub download: Option<AttrValue>,
+    #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
     pub icon: Option<IconMask>,
@@ -20,7 +22,7 @@ pub struct ExternalLinkProps {
 
 #[styled_component(ExternalLink)]
 pub fn view(props: &ExternalLinkProps) -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     let hitbox_style = css! {
         & {
@@ -42,7 +44,7 @@ pub fn view(props: &ExternalLinkProps) -> Html {
 
     html! {
         <div class={classes!(hitbox_style, props.class.clone())}>
-            <a href={ props.to.clone() } class={link_css} >
+            <a href={ props.to.clone() } class={link_css} target={props.target.clone()} download={props.download.clone()}>
                 if let Some(mask) = props.icon {
                     <Icon
                         data_aui_id="linkicon"

src/components/links/internal_link.rs

@@ -1,9 +1,8 @@
 use crate::{
     components::{Icon, IconMask},
-    style::themes::ThemeChoice,
+    hooks::use_theme,
 };
 use stylist::yew::styled_component;
-use themer::yew::use_theme;
 use yew::prelude::*;
 use yew_router::prelude::*;
 
@@ -26,7 +25,7 @@ pub fn view<Route>(props: &RouterLinkProps<Route>) -> Html
 where
     Route: Routable + 'static,
 {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     let hitbox_style = css! {
         & {

src/components/mod.rs

@@ -27,3 +27,12 @@ pub use spinner::Spinner;
 
 mod email_button;
 pub use email_button::EmailButton;
+
+mod footer;
+pub use footer::Footer;
+
+mod desktop_header;
+pub use desktop_header::DesktopHeader;
+
+mod navigation;
+pub use navigation::Navigation;

src/components/nav_link.rs

@@ -1,10 +1,9 @@
 use crate::{
     components::{ExternalLink, InternalLink},
+    hooks::use_theme,
     router::Route,
-    style::themes::ThemeChoice,
 };
 use stylist::yew::styled_component;
-use themer::yew::use_theme;
 use yew::prelude::*;
 
 #[derive(PartialEq)]
@@ -21,7 +20,7 @@ pub struct Props {
 
 #[styled_component]
 pub fn NavLink(props: &Props) -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     let link_css = css! {
         & > a > span > #underline {

src/components/pfp.rs

@@ -1,6 +1,5 @@
-use crate::style::themes::ThemeChoice;
+use crate::hooks::use_theme;
 use stylist::yew::styled_component;
-use themer::yew::use_theme;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
@@ -10,7 +9,7 @@ pub struct ProfilePictureProps {
 
 #[styled_component]
 pub fn ProfilePicture(props: &ProfilePictureProps) -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     const BORDER_WIDTH: &str = "3px";
 

src/components/spinner.rs

@@ -1,6 +1,5 @@
-use crate::style::themes::ThemeChoice;
+use crate::hooks::use_theme;
 use stylist::yew::styled_component;
-use themer::yew::use_theme;
 use yew::prelude::*;
 
 const R: f32 = 10.0;
@@ -9,7 +8,7 @@ pub const SPINNER_SIZE: f32 = 50.0;
 
 #[styled_component(Spinner)]
 pub fn view() -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     let spinner = css! {
             align-items:center;

src/components/tap_target.rs

@@ -1,10 +1,9 @@
 use crate::{
     components::{Icon, IconMask},
-    style::themes::ThemeChoice,
+    hooks::use_theme,
 };
 use hex_color::HexColor;
 use stylist::{css, yew::use_media_query};
-use themer::yew::use_theme;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
@@ -22,7 +21,7 @@ pub struct Props {
 
 #[function_component(TapTarget)]
 pub fn view(props: &Props) -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
 
     let is_mobile = use_media_query("(max-width: 992px)");
     let (size, fg_size) = if is_mobile {

src/components/theme_switcher.rs

@@ -1,14 +1,14 @@
 use crate::{
     components::{IconMask, TapTarget},
+    hooks::{use_theme, BrowserPreference},
     style::themes::ThemeChoice,
 };
 use log::info;
-use themer::{browser::BrowserPreference, yew::use_theme};
 use yew::prelude::*;
 
 #[function_component(ThemeSwitcher)]
 pub fn view() -> Html {
-    let theme = use_theme::<ThemeChoice>();
+    let theme = use_theme();
     let onclick = {
         let theme = theme.clone();
         Callback::from(move |_| {

src/hooks/mod.rs

@@ -0,0 +1,2 @@
+mod use_theme;
+pub use use_theme::{use_theme, BrowserPreference, ThemeProvider};