From 4d9f8a25cdda5ce81e16162f39a2bf3cb195ae9f Mon Sep 17 00:00:00 2001
From: Komal <157946119+komal-rs@users.noreply.github.com>
Date: Fri, 3 May 2024 09:50:03 +0530
Subject: [PATCH] link copied popup, like icon and icon sizes (#217)

* link copied popup

* icon dist
---
 Cargo.toml                    |  1 -
 src/page/post_view/overlay.rs | 30 +++++++++++++++++++++++-------
 src/page/refer_earn/mod.rs    | 12 ++++++++++++
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index c51457c3..da1c1776 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -250,4 +250,3 @@ lib-default-features = false
 #
 # Optional. Defaults to "release".
 lib-profile-release = "wasm-release"
-
diff --git a/src/page/post_view/overlay.rs b/src/page/post_view/overlay.rs
index 1bd3d81e..8227459e 100644
--- a/src/page/post_view/overlay.rs
+++ b/src/page/post_view/overlay.rs
@@ -7,6 +7,7 @@ use crate::{
         web::{copy_to_clipboard, share_url},
     },
 };
+use gloo::timers::callback::Timeout;
 use leptos::*;
 use leptos_icons::*;
 use leptos_use::use_window;
@@ -88,15 +89,15 @@ fn LikeAndAuthCanLoader(post: PostDetails) -> impl IntoView {
     let liking = like_toggle.pending();
 
     view! {
-        <div class="flex flex-col gap-1 items-center">
+        <div class="relative flex flex-col gap-1 items-center">
             <button
                 on:click=move |_| like_toggle.dispatch(())
-                class="drop-shadow-lg disabled:text-neutral-400 disabled:animate-pulse"
+                class="drop-shadow-lg"
                 disabled=move || liking() || liked.with(|l| l.is_none())
             >
                 <Icon class=icon_class style=icon_style icon=icondata::AiHeartFilled/>
             </button>
-            <span class="text-sm md:text-md">{likes}</span>
+            <span class="absolute -bottom-5 text-sm md:text-md">{likes}</span>
         </div>
         <WithAuthCans with=liked_fetch let:d>
             {move || liked.set(Some(d.1))}
@@ -107,6 +108,7 @@ fn LikeAndAuthCanLoader(post: PostDetails) -> impl IntoView {
 #[component]
 pub fn VideoDetailsOverlay(post: PostDetails) -> impl IntoView {
     let show_share = create_rw_signal(false);
+    let show_copied_popup = create_rw_signal(false);
     let base_url = || {
         use_window()
             .as_ref()
@@ -133,8 +135,14 @@ pub fn VideoDetailsOverlay(post: PostDetails) -> impl IntoView {
     let profile_url = format!("/profile/{}", post.poster_principal.to_text());
     let post_c = post.clone();
 
+    let click_copy = move |text: String| {
+        _ = copy_to_clipboard(&text);
+        show_copied_popup.set(true);
+        Timeout::new(1200, move || show_copied_popup.set(false)).forget();
+    };
+
     view! {
-        <div class="flex flex-row flex-nowrap justify-between items-end pb-16 px-2 md:px-6 w-full text-white absolute bottom-0 left-0 bg-transparent z-[4]">
+        <div class="flex flex-row flex-nowrap justify-between items-end pb-20 px-2 md:px-6 w-full text-white absolute bottom-0 left-0 bg-transparent z-[4]">
             <div class="flex flex-col gap-2 w-9/12">
                 <div class="flex flex-row items-center gap-2 min-w-0">
                     <a
@@ -155,13 +163,13 @@ pub fn VideoDetailsOverlay(post: PostDetails) -> impl IntoView {
                 </div>
                 <ExpandableText description=post.description/>
             </div>
-            <div class="flex flex-col gap-6 items-end w-3/12 text-4xl">
+            <div class="flex flex-col gap-8 pb-10 items-end w-3/12 text-4xl">
                 <a href="/refer-earn">
                     <Icon class="drop-shadow-lg" icon=icondata::AiGiftFilled/>
                 </a>
                 <LikeAndAuthCanLoader post=post_c/>
                 <button on:click=move |_| share()>
-                    <Icon class="drop-shadow-lg" icon=icondata::BsSendFill/>
+                    <Icon class="drop-shadow-lg" icon=icondata::RiSendPlaneBusinessFill/>
                 </button>
             </div>
         </div>
@@ -172,11 +180,19 @@ pub fn VideoDetailsOverlay(post: PostDetails) -> impl IntoView {
                     <p class="text-md max-w-full bg-white/10 rounded-full p-2 overflow-x-scroll whitespace-nowrap">
                         {video_url}
                     </p>
-                    <button on:click=move |_| _ = copy_to_clipboard(&video_url())>
+                    <button on:click=move |_| click_copy(video_url())>
                         <Icon class="text-xl" icon=icondata::FaCopyRegular/>
                     </button>
                 </div>
             </div>
+
+            <Show when=show_copied_popup>
+                <div class="flex flex-col justify-center items-center">
+                    <span class="absolute mt-80 flex flex-row justify-center items-center bg-white/90 rounded-md h-10 w-28 text-center shadow-lg">
+                        <p>Link Copied!</p>
+                    </span>
+                </div>
+            </Show>
         </Modal>
     }
 }
diff --git a/src/page/refer_earn/mod.rs b/src/page/refer_earn/mod.rs
index 1c588e46..051f0ab9 100644
--- a/src/page/refer_earn/mod.rs
+++ b/src/page/refer_earn/mod.rs
@@ -1,6 +1,7 @@
 mod history;
 
 use candid::Principal;
+use gloo::timers::callback::Timeout;
 use ic_agent::Identity;
 use leptos::*;
 use leptos_icons::*;
@@ -44,6 +45,7 @@ fn ReferLoaded(user_principal: Principal) -> impl IntoView {
         .unwrap_or_default();
 
     let (logged_in, _) = account_connected_reader();
+    let show_copied_popup = create_rw_signal(false);
 
     let click_copy = create_action(move |()| {
         let refer_link = refer_link.clone();
@@ -51,6 +53,9 @@ fn ReferLoaded(user_principal: Principal) -> impl IntoView {
             let _ = copy_to_clipboard(&refer_link);
 
             ReferShareLink.send_event(logged_in);
+
+            show_copied_popup.set(true);
+            Timeout::new(1200, move || show_copied_popup.set(false)).forget();
         }
     });
 
@@ -61,6 +66,13 @@ fn ReferLoaded(user_principal: Principal) -> impl IntoView {
                 <Icon class="text-xl" icon=icondata::FaCopyRegular/>
             </button>
         </div>
+        <Show when=show_copied_popup>
+            <div class="absolute flex flex-col justify-center items-center z-[4]">
+                <span class="absolute top-80 flex flex-row justify-center items-center bg-white/90 rounded-md h-10 w-28 text-center shadow-lg">
+                    <p class="text-black">Link Copied!</p>
+                </span>
+            </div>
+        </Show>
     }
 }