feat: added wrapper for blacked out qr page

picture-pro · Feb 28, 2024 · 7053131 · 7053131
1 parent d4b1226
commit 7053131
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
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",