Merge pull request #53 from picture-pro/51-blackout-mobile-qr-page

51 blackout mobile qr page
picture-pro · Feb 28, 2024 · 41c0969 · 41c0969
2 parents 5812a5b + 6dd71b8
commit 41c0969
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 13 deletions.
diff --git a/crates/site-app/src/components/photo_upload.rs b/crates/site-app/src/components/photo_upload.rs
@@ -86,7 +86,7 @@ pub fn PhotoUpload() -> impl IntoView {
               set_logarithmic_price(event_target_value(&e).parse::<f32>().unwrap());
             }
             value={DEFAULT_PRICE.log10()}
-            prop:value=move || logarithmic_price()
+            prop:value=logarithmic_price
           />
           <p class="min-w-[4rem] text-right">{move || format!("${:.2}", price())}</p>
         </div>

diff --git a/crates/site-app/src/pages/mod.rs b/crates/site-app/src/pages/mod.rs
@@ -9,9 +9,16 @@ use leptos::*;
 use crate::components::basic::Link;
 
 #[component]
-pub fn SmallPageWrapper(children: Children) -> impl IntoView {
+pub fn SmallPageWrapper(
+  children: Children,
+  #[prop(default = "")] extra_class: &'static str,
+  #[prop(default = None)] theme_override: Option<&'static str>,
+) -> impl IntoView {
   view! {
-    <div class="flex-1 flex flex-col justify-center items-center h-full">
+    <div
+      class={format!("flex-1 flex flex-col justify-center items-center h-full {extra_class}")}
+      data-theme=theme_override
+    >
       <div class="d-card w-full max-w-sm bg-base-100 rounded-lg shadow-xl">
         {children()}
       </div>
@@ -29,15 +36,17 @@ pub fn PageWrapper(
   /// Whether the wrapper should appear "backed" like a card.
   #[prop(default = true)]
   backed: bool,
+  #[prop(default = "")] extra_class: &'static str,
+  #[prop(default = None)] theme_override: Option<&'static str>,
 ) -> impl IntoView {
   view! {
     <div class={format!(
       "flex-1 flex flex-col gap-4 md:container md:mx-auto my-8 {rounded}
-      {shadow} p-4 md:px-6 {bg_color} overflow-x-auto",
+      {shadow} p-4 md:px-6 {bg_color} overflow-x-auto {extra_class}",
       rounded = if backed { "md:rounded-xl" } else { "" },
       shadow = if backed { "shadow" } else { "" },
       bg_color = if backed { "bg-base-100" } else { "" },
-    )}>
+    )} data-theme=theme_override>
       {children()}
     </div>
   }

diff --git a/crates/site-app/src/pages/qr_code.rs b/crates/site-app/src/pages/qr_code.rs
@@ -4,7 +4,10 @@ use leptos_router::use_params_map;
 use crate::pages::SmallPageWrapper;
 
 #[component]
-pub fn QrCodePage() -> impl IntoView {
+pub fn InnerQrCodePage(
+  #[prop(default = "")] class: &'static str,
+  #[prop(default = None)] theme_override: Option<&'static str>,
+) -> impl IntoView {
   let params = use_params_map();
   let id = params().get("id").cloned();
 
@@ -16,7 +19,7 @@ pub fn QrCodePage() -> impl IntoView {
   );
 
   view! {
-    <SmallPageWrapper>
+    <SmallPageWrapper extra_class=class theme_override=theme_override>
       <div class="d-card-body gap-4">
         <p class="text-2xl font-semibold tracking-tight">"QR Code"</p>
         <QrCode data=url class="rounded-box border shadow" />
@@ -30,6 +33,14 @@ pub fn QrCodePage() -> impl IntoView {
   }
 }
 
+#[component]
+pub fn QrCodePage() -> impl IntoView {
+  view! {
+    <InnerQrCodePage class="md:hidden" theme_override=Some("black") />
+    <InnerQrCodePage class="max-md:hidden" />
+  }
+}
+
 #[component]
 pub fn QrCode(
   data: String,

diff --git a/crates/site-app/style/tailwind/tailwind.config.js b/crates/site-app/style/tailwind/tailwind.config.js
@@ -19,7 +19,6 @@ module.exports = {
       {
         wireframe: {
           "color-scheme": "light",
-          // "fontFamily": "Chalkboard,comic sans ms,'sans-serif'",
           "primary": "#b8b8b8",
           "secondary": "#b8b8b8",
           "accent": "#b8b8b8",
@@ -32,11 +31,22 @@ module.exports = {
           "success": "#008000",
           "warning": "#a6a659",
           "error": "#ff0000",
-          // "--rounded-box": "0.2rem",
-          // "--rounded-btn": "0.2rem",
-          // "--rounded-badge": "0.2rem",
-          // "--tab-radius": "0.2rem",
-        }
+        },
+        black: {
+          "color-scheme": "dark",
+          "primary": "#373737",
+          "secondary": "#373737",
+          "accent": "#373737",
+          "base-100": "#000000",
+          "base-200": "#141414",
+          "base-300": "#262626",
+          "base-content": "#d6d6d6",
+          "neutral": "#373737",
+          "info": "#0000ff",
+          "success": "#008000",
+          "warning": "#ffff00",
+          "error": "#ff0000",
+        },
       },
       "light",
       "dark",