Merge pull request #120 from picture-pro/visual-tweaks

feat: add settings button to homepage
picture-pro · Apr 10, 2024 · 867fcd4 · 867fcd4
2 parents 1cd7c34 + e4c4609
commit 867fcd4
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 60 deletions.
diff --git a/crates/site-app/src/components/gallery.rs b/crates/site-app/src/components/gallery.rs
@@ -2,6 +2,7 @@ use leptos::*;
 
 use crate::components::photo_group::PhotoGroup;
 
+#[allow(unused)]
 #[component]
 pub fn Gallery() -> impl IntoView {
   let Some(user) = crate::authenticated_user() else {

diff --git a/crates/site-app/src/components/photo_group.rs b/crates/site-app/src/components/photo_group.rs
@@ -62,7 +62,10 @@ pub fn PhotoGroup(
         "col-start-1 col-span-1 row-start-1 flex flex-col justify-center xs:px-4 {adjusted_for_action}",
         adjusted_for_action = if !read_only { "row-span-1 sm:row-span-2" } else { "row-span-2" },
       )}>
-        <crate::components::photo_deck::PhotoDeck ids={group.photos.clone()} />
+        <crate::components::photo_deck::PhotoDeck
+          ids={group.photos.clone()}
+          size=crate::components::photo::PhotoSize::FitsWithinSquare(200)
+        />
       </div>
       <div class="col-start-2 col-span-1 row-start-1 row-span-1 flex flex-row justify-between gap-4">
         { status_element }

diff --git a/crates/site-app/src/pages/dashboard/mod.rs b/crates/site-app/src/pages/dashboard/mod.rs
@@ -22,7 +22,7 @@ pub fn DashboardPage() -> impl IntoView {
       <p class="text-4xl font-semibold tracking-tight">"Private Session Photos"</p>
       <div class="flex flex-col lg:flex-row-reverse items-stretch lg:justify-between gap-4 items-start">
         <crate::components::photo_upload::PhotoUpload />
-        <crate::components::gallery::Gallery />
+        // <crate::components::gallery::Gallery />
       </div>
     </PageWrapper>
   }

diff --git a/crates/site-app/src/pages/home_page.rs b/crates/site-app/src/pages/home_page.rs
@@ -56,38 +56,48 @@ fn ColoredBoxHero() -> impl IntoView {
   let authenticated = crate::utils::authenticated_user().is_some();
 
   view! {
-    <div class="grid gap-4 grid-cols-2 grid-rows-2 w-full">
-      <ColoredBox
-        border_color="border-orange-700"
-        bg_color="bg-orange-500/20"
-        text_color="text-orange-200/80"
-        title="Private Session"
-        description="Separate subjects, separate customers."
-        href={if authenticated { Some("/dashboard") } else { Some("/login?next=/dashboard") } }
-      />
-      <ColoredBox
-        border_color="border-green-700"
-        bg_color="bg-green-500/20"
-        text_color="text-green-200/80"
-        title="Public Session"
-        description="Share with everyone, sell to everyone."
-        href={if authenticated { None } else { Some("/login") } }
-      />
-      <ColoredBox
-        border_color="border-blue-700"
-        bg_color="bg-blue-500/20"
-        text_color="text-blue-200/80"
-        title="Discover"
-        description="Discover photos from around the world."
-        href={if authenticated { None } else { Some("/login") } }
-      />
+    <div class="flex flex-col gap-4">
+      <div class="grid gap-4 grid-cols-2 grid-rows-2 w-full">
+        <ColoredBox
+          border_color="border-orange-700"
+          bg_color="bg-orange-500/20"
+          text_color="text-orange-200/80"
+          title="Private Session"
+          description="Separate subjects, separate customers."
+          href={if authenticated { Some("/dashboard") } else { Some("/login?next=/dashboard") } }
+        />
+        <ColoredBox
+          border_color="border-green-700"
+          bg_color="bg-green-500/20"
+          text_color="text-green-200/80"
+          title="Public Session"
+          description="Share with everyone, sell to everyone."
+          href={if authenticated { None } else { Some("/login") } }
+        />
+        <ColoredBox
+          border_color="border-blue-700"
+          bg_color="bg-blue-500/20"
+          text_color="text-blue-200/80"
+          title="Discover"
+          description="Discover photos from around the world."
+          href={if authenticated { None } else { Some("/login") } }
+        />
+        <ColoredBox
+          border_color="border-purple-700"
+          bg_color="bg-purple-500/20"
+          text_color="text-purple-200/80"
+          title="School Event"
+          description="Share photos from school events."
+          href={if authenticated { None } else { Some("/login") } }
+        />
+      </div>
       <ColoredBox
-        border_color="border-purple-700"
-        bg_color="bg-purple-500/20"
-        text_color="text-purple-200/80"
-        title="School Event"
-        description="Share photos from school events."
-        href={if authenticated { None } else { Some("/login") } }
+        border_color="border-slate-700"
+        bg_color="bg-slate-500/20"
+        text_color="text-slate-200/80"
+        title="Settings Event"
+        description="Change essential settings and preferences."
+        href={None}
       />
     </div>
   }

diff --git a/crates/site-app/src/pages/purchase.rs b/crates/site-app/src/pages/purchase.rs
@@ -162,12 +162,12 @@ fn PhotoPurchaseOptions(group: core_types::PhotoGroup) -> impl IntoView {
     }
     core_types::PhotoGroupStatus::OwnershipForSale { digital_price } => {
       vec![
-        PurchaseOption {
-          title: "Ownership",
-          desc:  "Own the digital rights to this photo. You'll recieve an \
-                  email with a link to download the full resolution photo.",
-          price: Some(digital_price.0),
-        },
+        // PurchaseOption {
+        //   title: "Ownership",
+        //   desc:  "Own the digital rights to this photo. You'll recieve an \
+        //           email with a link to download the full resolution photo.",
+        //   price: Some(digital_price.0),
+        // },
         PurchaseOption {
           title: "Prints",
           desc:  "Order physical prints of this photo. Includes digital \

diff --git a/crates/site-app/src/pages/qr_code.rs b/crates/site-app/src/pages/qr_code.rs
@@ -1,22 +1,8 @@
 use leptos::*;
 use leptos_router::use_params_map;
 
-use crate::pages::SmallPageWrapper;
-
 #[component]
 pub fn QrCodePage() -> impl IntoView {
-  view! {
-    <InnerQrCodePage wrapper_class="md:hidden" inner_class="border rounded-box" theme_override=Some("black") />
-    <InnerQrCodePage wrapper_class="max-md:hidden" />
-  }
-}
-
-#[component]
-pub fn InnerQrCodePage(
-  #[prop(default = "")] wrapper_class: &'static str,
-  #[prop(default = "")] inner_class: &'static str,
-  #[prop(default = None)] theme_override: Option<&'static str>,
-) -> impl IntoView {
   let params = use_params_map();
   let id = params().get("id").cloned();
 
@@ -37,16 +23,18 @@ pub fn InnerQrCodePage(
   };
 
   view! {
-    <SmallPageWrapper extra_class=wrapper_class theme_override=theme_override>
-      <div class={format!("d-card-body gap-4 {}", inner_class)}>
+    <div
+      class="flex-1 flex flex-col justify-center items-center h-full"
+    >
+      <div class="bg-base-100 max-w-md flex flex-col p-8 gap-4 rounded-lg shadow-xl">
         {photo_deck_element}
-        <div class="flex flex-row items-center gap-4">
-          <a href="/dashboard" class="d-btn d-btn-primary w-full h-full flex-1">"Back to Dashboard"</a>
+        <div class="flex flex-row items-center gap-4 h-24 items-stretch">
+          <a href="/dashboard" class="flex-1 h-full d-btn d-btn-primary text-xl">"Retake"</a>
           <QrCode data=url class="rounded-box border shadow size-24 flex-1" />
-          <a href={format!("/photo/{}", id)} class="d-btn w-full h-full flex-1">"Purchase Page"</a>
+          <a href={format!("/photo/{}", id)} class="flex-1 h-full d-btn text-xl">"Delete"</a>
         </div>
       </div>
-    </SmallPageWrapper>
+    </div>
   }
 }
 
@@ -90,7 +78,7 @@ pub fn PhotoDeckWrapper(
         match r {
           Ok(Some(photo_group)) => view! {
             <div class="flex flex-row justify-center">
-              <crate::components::photo_deck::PhotoDeck ids={photo_group.photos.clone()} size={crate::components::photo::PhotoSize::FitsWithinSquare(320)} />
+              <crate::components::photo_deck::PhotoDeck ids={photo_group.photos.clone()} size={crate::components::photo::PhotoSize::FitsWithinSquare(400)} />
             </div>
           }.into_view(),
           Ok(None) => view! {