From 0232b9f19847057b937c3ca45bcc0479cb893a59 Mon Sep 17 00:00:00 2001
From: veer-asbytes <veerpratap@gobazzinga.io>
Date: Sat, 14 Sep 2024 18:59:13 +0530
Subject: [PATCH] wallet-page design updates

---
 ssr/src/page/wallet/mod.rs | 43 +++++++++++++++++++-------------------
 ssr/src/page/wallet/txn.rs | 10 ++++-----
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/ssr/src/page/wallet/mod.rs b/ssr/src/page/wallet/mod.rs
index 50a6742e..a287edcb 100644
--- a/ssr/src/page/wallet/mod.rs
+++ b/ssr/src/page/wallet/mod.rs
@@ -26,14 +26,14 @@ fn ProfileGreeter(details: ProfileDetails) -> impl IntoView {
     view! {
         <div class="flex flex-col">
             <span class="text-white/50 text-md">Welcome!</span>
-            <span class="text-white text-lg md:text-xl truncate">
+            <span class="text-lg text-white md:text-xl truncate bg-white/15" >
                 // TEMP: Workaround for hydration bug until leptos 0.7
                 // class=("md:w-5/12", move || !is_connected())
                 {details.display_name_or_fallback()}
             </span>
         </div>
-        <div class="w-16 aspect-square overflow-clip justify-self-end rounded-full">
-            <img class="h-full w-full object-cover" src=details.profile_pic_or_random()/>
+        <div class="justify-self-end w-16 rounded-full aspect-square overflow-clip">
+            <img class="object-cover w-full h-full" src=details.profile_pic_or_random()/>
         </div>
     }
 }
@@ -43,9 +43,9 @@ fn FallbackGreeter() -> impl IntoView {
     view! {
         <div class="flex flex-col">
             <span class="text-white/50 text-md">Welcome!</span>
-            <div class="w-3/4 rounded-full py-2 bg-white/40 animate-pulse"></div>
+            <div class="py-2 w-3/4 rounded-full animate-pulse bg-white/40"></div>
         </div>
-        <div class="w-16 aspect-square overflow-clip rounded-full justify-self-end bg-white/40 animate-pulse"></div>
+        <div class="justify-self-end w-16 rounded-full animate-pulse aspect-square overflow-clip bg-white/40"></div>
     }
 }
 
@@ -53,7 +53,7 @@ const RECENT_TXN_CNT: usize = 10;
 
 #[component]
 fn BalanceFallback() -> impl IntoView {
-    view! { <div class="w-1/4 rounded-full py-3 mt-1 bg-white/30 animate-pulse"></div> }
+    view! { <div class="py-3 mt-1 w-1/4 rounded-full animate-pulse bg-white/30"></div> }
 }
 
 #[component]
@@ -123,19 +123,19 @@ pub fn Wallet() -> impl IntoView {
 
     view! {
         <div>
-            <div class="top-0 bg-black text-white w-full items-center z-50 pt-4 pl-4">
+            <div class="top-0 z-50 items-center pt-4 pl-4 w-full text-white bg-black">
                 <div class="flex flex-row justify-start">
                     <BackButton fallback="/".to_string()/>
                 </div>
             </div>
-            <div class="flex flex-col w-dvw min-h-dvh bg-black gap-4 px-4 pt-4 pb-12">
+            <div class="flex flex-col gap-4 px-4 pt-4 pb-12 bg-black w-dvw min-h-dvh">
                 <div class="grid grid-cols-2 grid-rows-1 items-center w-full">
                     <AuthCansProvider fallback=FallbackGreeter let:cans>
                         <ProfileGreeter details=cans.profile_details()/>
                     </AuthCansProvider>
                 </div>
-                <div class="flex flex-col w-full items-center mt-6 text-white">
-                    <span class="text-md lg:text-lg uppercase">Your Coyns Balance</span>
+                <div class="flex flex-col items-center mt-6 w-full text-white">
+                    <span class="uppercase lg:text-lg text-md">Your Coyns Balance</span>
                     <Suspense fallback=BalanceFallback>
                         {move || {
                             let balance = try_or_redirect_opt!(balance_fetch() ?);
@@ -145,8 +145,8 @@ pub fn Wallet() -> impl IntoView {
                     </Suspense>
                 </div>
                 <Show when=move || !is_connected()>
-                    <div class="flex flex-col w-full py-5 items-center">
-                        <div class="flex flex-row w-9/12 md:w-5/12 items-center">
+                    <div class="flex flex-col items-center py-5 w-full">
+                        <div class="flex flex-row items-center w-9/12 md:w-5/12">
                             <ConnectLogin
                                 login_text="Login to claim your COYNs"
                                 cta_location="wallet"
@@ -154,10 +154,10 @@ pub fn Wallet() -> impl IntoView {
                         </div>
                     </div>
                 </Show>
-                <div class="flex flex-col w-full gap-2">
-                    <div class="flex flex-row w-full items-end justify-between">
-                        <span class="text-white text-sm md:text-md">My Tokens</span>
-                        <a href="/tokens" class="text-white/50 text-md md:text-lg">
+                <div class="flex flex-col gap-2 w-full">
+                    <div class="flex flex-row justify-between items-end w-full">
+                        <span class="text-sm text-white md:text-md">My Tokens</span>
+                        <a href="/tokens" class="md:text-lg text-white/50 text-md">
                             See All
                         </a>
                     </div>
@@ -165,14 +165,14 @@ pub fn Wallet() -> impl IntoView {
                         <TokensFetch/>
                     </div>
                 </div>
-                <div class="flex flex-col w-full gap-2">
-                    <div class="flex flex-row w-full items-end justify-between">
-                        <span class="text-white text-sm md:text-md">Recent Transactions</span>
-                        <a href="/transactions" class="text-white/50 text-md md:text-lg">
+                <div class="flex flex-col gap-2 w-full">
+                    <div class="flex flex-row justify-between items-end w-full">
+                        <span class="text-sm text-white md:text-md">Recent Transactions</span>
+                        <a href="/transactions" class="md:text-lg text-white/50 text-md">
                             See All
                         </a>
                     </div>
-                    <div class="flex flex-col divide-y divide-white/10">
+                    <div class="flex flex-col rounded-xl border-2 divide-y divide-white/10 border-neutral-700 bg-white/15">
                         <Suspense fallback=BulletLoader>
                             {move || {
                                 history_fetch()
@@ -191,6 +191,7 @@ pub fn Wallet() -> impl IntoView {
 
                         </Suspense>
                     </div>
+            <div class="flex justify-center items-center pb-8 text-white underline">Back to top</div>
                 </div>
             </div>
         </div>
diff --git a/ssr/src/page/wallet/txn.rs b/ssr/src/page/wallet/txn.rs
index d6a2622c..8a15d120 100644
--- a/ssr/src/page/wallet/txn.rs
+++ b/ssr/src/page/wallet/txn.rs
@@ -107,16 +107,16 @@ pub fn TxnView(info: TxnInfo, #[prop(optional)] _ref: NodeRef<html::Div>) -> imp
     );
 
     view! {
-        <div _ref=_ref class="grid grid-cols-2 grid-rows-1 w-full items-center py-4">
+        <div _ref=_ref class="grid grid-cols-2 grid-rows-1 items-center py-4 w-full">
             <div class="flex flex-row gap-2">
-                <div class="grid grid-cols-1 place-items-center place-content-center p-2 rounded-full text-primary-600 text-xl lg:text-2xl">
+                <div class="grid grid-cols-1 place-content-center place-items-center p-2 text-xl rounded-full lg:text-2xl text-primary-600">
                     <Icon icon=info.tag.icondata()/>
                 </div>
                 <div class="flex flex-col">
-                    <span class="text-md md:text-lg font-semibold text-white">
+                    <span class="font-semibold text-white md:text-lg text-md">
                         {info.tag.to_text()}
                     </span>
-                    <span class="text-sm md:text-md text-white/50">{info.amount} COYNs</span>
+                    <span class="text-sm text-white/50 md:text-md">{info.amount} COYNs</span>
                 </div>
             </div>
             <span class=move || {
@@ -125,7 +125,7 @@ pub fn TxnView(info: TxnInfo, #[prop(optional)] _ref: NodeRef<html::Div>) -> imp
                 } else {
                     "text-red-600 justify-self-end"
                 }
-            }>{bal_res} COYNs</span>
+            } style="padding-right: 10px;" >{bal_res} COYNs</span>
         </div>
     }
 }