chore+fix: (1/n) address UI feedback

ssr/src/app.rs

@@ -117,7 +117,7 @@ pub fn App() -> impl IntoView {
 
         // content for this welcome page
         <Router fallback=|| view! { <NotFound/> }.into_view()>
-            <main>
+            <main class="w-dvw h-dvh">
                 <Routes>
                     // auth redirect routes exist outside main context
                     <GoogleAuthRedirectHandlerRoute/>
@@ -143,7 +143,6 @@ pub fn App() -> impl IntoView {
                         <Route path="/logout" view=Logout/>
                     </Route>
                 </Routes>
-
             </main>
             <nav>
                 <NavBar/>

ssr/src/component/loading.rs

@@ -4,7 +4,7 @@ use leptos::*;
 pub fn Loading(text: String, children: Children) -> impl IntoView {
     view! {
         {children()}
-        <div class="h-dvh w-dvw bg-black flex flex-col justify-center items-center gap-10">
+        <div class="h-full w-full bg-black flex flex-col justify-center items-center gap-10">
             <img class="h-56 w-56 object-contain animate-pulse" src="/img/logo.webp"/>
             <span class="text-2xl text-white/60">{text}</span>
         </div>

ssr/src/component/nav.rs

@@ -17,20 +17,19 @@ fn NavIcon(
                 when=move || cur_selected() == idx
                 fallback=move || {
                     view! {
-                        <div class="py-3">
-                            <Icon icon=icon class="text-white h-6 w-6"/>
+                        <div class="py-5">
+                            <Icon icon=icon class="text-white text-2xl md:text-3xl"/>
                         </div>
                     }
                 }
             >
 
-                <div class="py-3 border-t-2 border-t-pink-500">
+                <div class="py-5 border-t-2 border-t-pink-500">
                     <Icon
                         icon=filled_icon.unwrap_or(icon)
-                        class="text-white aspect-square h-6 w-6"
+                        class="text-white aspect-square text-2xl md:text-3xl"
                     />
                 </div>
-            // <div class="absolute bottom-0 bg-primary-600 py-1 w-6 blur-md"></div>
             </Show>
         </a>
     }
@@ -44,20 +43,19 @@ fn TrophyIcon(idx: usize, cur_selected: Memo<usize>) -> impl IntoView {
                 when=move || cur_selected() == idx
                 fallback=move || {
                     view! {
-                        <div class="py-3">
-                            <Icon icon=TrophySymbol class="text-white fill-none h-6 w-6"/>
+                        <div class="py-5">
+                            <Icon icon=TrophySymbol class="text-white fill-none text-2xl md:text-3xl"/>
                         </div>
                     }
                 }
             >
 
-                <div class="py-3 border-t-2 border-t-pink-500">
+                <div class="py-5 border-t-2 border-t-pink-500">
                     <Icon
                         icon=TrophySymbolFilled
-                        class="text-white fill-none aspect-square h-6 w-6"
+                        class="text-white fill-none aspect-square text-2xl md:text-3xl"
                     />
                 </div>
-            // <div class="absolute bottom-0 bg-primary-600 py-1 w-6 blur-md"></div>
             </Show>
         </a>
     }
@@ -66,7 +64,7 @@ fn TrophyIcon(idx: usize, cur_selected: Memo<usize>) -> impl IntoView {
 #[component]
 fn UploadIcon(idx: usize, cur_selected: Memo<usize>) -> impl IntoView {
     view! {
-        <a href="/upload" class="flex items-center justify-center rounded-fullt text-white">
+        <a href="/upload" class="flex items-center justify-center rounded-full text-white">
             <Show
                 when=move || cur_selected() == idx
                 fallback=move || {
@@ -112,27 +110,9 @@ pub fn NavBar() -> impl IntoView {
             _ => 4,
         }
     });
-    let bg_color = move || {
-        if cur_selected() == 0
-            || cur_location
-                .pathname
-                .get()
-                .as_str()
-                .starts_with("/your-profile")
-        {
-            "bg-transparent"
-        } else {
-            "bg-black"
-        }
-    };
 
     view! {
-        <div class=move || {
-            format!(
-                "flex flex-row justify-between px-6 py-2 w-full {} fixed left-0 bottom-0 z-50",
-                bg_color(),
-            )
-        }>
+        <div class="fixed z-50 bottom-0 left-0 flex flex-row justify-between px-6 items-center w-full bg-black/80">
             <NavIcon
                 idx=0
                 href=home_path

ssr/src/component/overlay.rs

@@ -24,7 +24,7 @@ pub fn ShadowOverlay(
                     #[cfg(not(feature = "hydrate"))] { |_| () }
                 }
 
-                class="flex cursor-pointer modal-bg w-dvw h-dvh fixed left-0 top-0 bg-black/60 z-[99] justify-center items-center overflow-hidden"
+                class="flex cursor-pointer modal-bg w-full h-full fixed left-0 top-0 bg-black/60 z-[99] justify-center items-center overflow-hidden"
             >
                 {children()}
             </div>

ssr/src/component/scrolling_post_view.rs

@@ -28,7 +28,7 @@ pub fn ScrollingPostView<F: Fn() -> V + Clone + 'static, V>(
         <div class="h-full w-full overflow-hidden overflow-y-auto">
             <div
                 _ref=scroll_root
-                class="snap-mandatory snap-y overflow-y-scroll h-dvh w-dvw bg-black"
+                class="snap-mandatory snap-y overflow-y-scroll h-full w-full bg-black"
                 style:scroll-snap-points-y="repeat(100vh)"
             >
 

ssr/src/component/video_player.rs

@@ -19,7 +19,7 @@ pub fn VideoPlayer(
             />
             <video
                 _ref=node_ref
-                class="object-contain h-dvh max-h-dvh cursor-pointer"
+                class="object-contain h-full max-h-full cursor-pointer"
                 poster=view_bg_url
                 src=view_video_url
                 loop

ssr/src/page/account_transfer.rs

@@ -54,7 +54,7 @@ fn PrincipalInfoView() -> impl IntoView {
 #[component]
 pub fn AccountTransfer() -> impl IntoView {
     view! {
-        <div class="flex flex-col items-center min-w-dvw min-h-dvh bg-black pt-2 pb-12 gap-6">
+        <div class="flex flex-col items-center min-w-full min-h-full bg-black pt-2 pb-12 gap-6">
             <Title justify_center=false>
                 <div class="flex flex-row justify-between">
                     <BackButton fallback="/menu".to_string()/>

ssr/src/page/err.rs

@@ -43,7 +43,7 @@ pub fn ErrorView(#[prop(into)] error: MaybeSignal<String>) -> impl IntoView {
     };
 
     view! {
-        <div class="flex flex-col w-dvw h-dvh bg-black justify-center items-center">
+        <div class="flex flex-col w-full h-full bg-black justify-center items-center">
             <img src="/img/error-logo.svg"/>
             <h1 class="p-2 text-2xl md:text-3xl font-bold text-white">"oh no!"</h1>
             <div class="text-center text-xs md:text-sm text-white/60 w-full md:w-2/3 lg:w-1/3 resize-none px-8 mb-4">

ssr/src/page/google_redirect.rs

@@ -47,7 +47,7 @@ pub fn IdentitySender(identity_res: GoogleAuthMessage) -> impl IntoView {
     });
 
     view! {
-        <div class="h-dvh w-dvw bg-black flex flex-col justify-center items-center gap-10">
+        <div class="h-full w-full bg-black flex flex-col justify-center items-center gap-10">
             <img class="h-56 w-56 object-contain animate-pulse" src="/img/logo.webp"/>
             <span class="text-2xl text-white/60">Good things come to those who wait...</span>
         </div>

ssr/src/page/leaderboard.rs

@@ -5,7 +5,7 @@ use leptos_icons::*;
 #[component]
 pub fn Leaderboard() -> impl IntoView {
     view! {
-        <div class="flex flex-col bg-black items-center gap-4 justify-center w-dvw h-dvh">
+        <div class="flex flex-col bg-black items-center gap-4 justify-center w-full h-full">
             <Icon class="w-36 h-36" icon=ComingSoonGraphic/>
             <span class="text-white text-xl">Coming Soon</span>
         </div>