Merge pull request #252 from go-bazzinga/fix/alignment-on-menu-page

fix alignment on menu page
yral-dapp · Jul 24, 2024 · 10ec981 · 10ec981
2 parents e08a7aa + 697486f
commit 10ec981
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/auth/server_impl/store/redis_kv.rs b/src/auth/server_impl/store/redis_kv.rs
@@ -24,7 +24,7 @@ impl KVStore for RedisKV {
 
     async fn write(&self, key: String, value: String) -> Result<(), KVError> {
         let mut con = self.0.get().await?;
-        con.hset(key, AUTH_FIELD, value).await?;
+        con.hset::<_, _, _, ()>(key, AUTH_FIELD, value).await?;
         Ok(())
     }
 }
diff --git a/src/page/menu.rs b/src/page/menu.rs
@@ -65,10 +65,10 @@ fn MenuFooter() -> impl IntoView {
 #[component]
 fn ProfileLoading() -> impl IntoView {
     view! {
-        <div class="w-48 md:w-36 lg:w-24 aspect-square overflow-clip rounded-full bg-white/20 animate-pulse"></div>
-        <div class="flex flex-col gap-2 animate-pulse">
-            <div class="w-64 h-4 bg-white/20 rounded-full"></div>
-            <div class="w-48 h-3 bg-white/20 rounded-full"></div>
+        <div class="basis-4/12 aspect-square overflow-clip rounded-full bg-white/20 animate-pulse"></div>
+        <div class="basis-8/12 flex flex-col gap-2 animate-pulse">
+            <div class="w-full h-4 bg-white/20 rounded-full"></div>
+            <div class="w-full h-4 bg-white/20 rounded-full"></div>
         </div>
     }
 }
@@ -77,12 +77,14 @@ fn ProfileLoading() -> impl IntoView {
 fn ProfileLoaded(user_details: ProfileDetails) -> impl IntoView {
     let (is_connected, _) = account_connected_reader();
     view! {
-        <div class="w-48 md:w-36 lg:w-24 aspect-square overflow-clip rounded-full">
+        <div class="basis-4/12 aspect-square overflow-clip rounded-full">
             <img class="h-full w-full object-cover" src=user_details.profile_pic_or_random()/>
         </div>
-        <div class="flex flex-col"
+        <div
+            class="flex flex-col basis-8/12"
             class=("w-12/12", move || !is_connected())
-            class=("sm:w-5/12", move || !is_connected())>
+            class=("sm:w-5/12", move || !is_connected())
+        >
             <span class="text-white text-ellipsis line-clamp-1 text-xl">
                 {user_details.display_name_or_fallback()}
             </span>
@@ -148,7 +150,7 @@ pub fn Menu() -> impl IntoView {
                     </div>
                 </Title>
                 <div class="flex flex-col items-center w-full gap-4">
-                    <div class="flex flex-row justify-center gap-4 items-center px-4">
+                    <div class="flex flex-row w-full max-w-lg justify-center gap-4 items-center px-4">
                         <ProfileInfo/>
                     </div>
                     <Show when=move || !is_connected()>
@@ -163,7 +165,11 @@ pub fn Menu() -> impl IntoView {
             </div>
             <div class="flex flex-col py-12 px-8 gap-8 w-full text-lg">
                 <NsfwToggle/>
-                <MenuItem href="/account-transfer" text="HotorNot Account Transfer" icon=icondata::FaMoneyBillTransferSolid/>
+                <MenuItem
+                    href="/account-transfer"
+                    text="HotorNot Account Transfer"
+                    icon=icondata::FaMoneyBillTransferSolid
+                />
                 <MenuItem href="/refer-earn" text="Refer & Earn" icon=icondata::AiGiftFilled/>
                 <MenuItem
                     href=social::TELEGRAM