Skip to content

Commit

Permalink
added colors and made non reactive components reactive
Browse files Browse the repository at this point in the history
  • Loading branch information
@joel-medicala-yral
joel-medicala-yral committed Dec 16, 2024
1 parent 0495f42 commit c5a7b03
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 44 deletions.
18 changes: 9 additions & 9 deletions ssr/src/component/buttons.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ pub fn HighlightedButton(
view! {
<button
on:click=on_click
disabled=disabled.get()
class=format!(
disabled=move ||disabled.get()
class=move || format!(
"w-full px-5 py-3 rounded-lg disabled:text-white/50 flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
if alt_style.get() {
"text-primary-600"
Expand All @@ -22,7 +22,7 @@ pub fn HighlightedButton(
},
classes,
)
style=format!(
style=move || format!(
"background: linear-gradient(73deg, {} );",
if disabled.get() {
"#DE98BE 0%, #E761A9 33%, #7B5369 100%"
Expand All @@ -49,8 +49,8 @@ pub fn HighlightedLinkButton(
view! {
<a
href=href
disabled=disabled.get()
class=format!(
disabled=move || disabled.get()
class=move ||format!(
"w-full px-5 py-3 rounded-lg {} disabled:text-white/50 flex items-center transition-all justify-center gap-8 font-kumbh font-bold {}",
if alt_style.get() {
"text-primary-600"
Expand All @@ -59,7 +59,7 @@ pub fn HighlightedLinkButton(
},
classes,
)
style=format!(
style=move || format!(
"background: linear-gradient(73deg, {} );",
if disabled.get() {
"#DE98BE 0%, #E761A9 33%, #7B5369 100%"
Expand All @@ -85,7 +85,7 @@ pub fn SecondaryHighlightedLinkButton(
view! {
<a
href=href
class=format!(
class=move || format!(
"rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
if alt_style.get() {
"bg-transparent text-white hover:bg-white/10 active:bg-white/5"
Expand All @@ -111,9 +111,9 @@ pub fn SecondaryHighlightedButton(
let on_click = move |_| on_click();
view! {
<button
disabled=disabled.get()
disabled=move || disabled.get()
on:click=on_click
class=format!(
class=move ||format!(
"rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
if alt_style.get() {
"bg-transparent text-white hover:bg-white/10 active:bg-white/5"
Expand Down
48 changes: 13 additions & 35 deletions ssr/src/page/icpump/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ use crate::utils::token::firestore::init_firebase;
use crate::utils::token::firestore::listen_to_documents;
use crate::utils::token::icpump::get_paginated_token_list;
use crate::utils::token::icpump::TokenListItem;
use crate::utils::web::copy_to_clipboard;

pub mod ai;

Expand Down Expand Up @@ -150,7 +149,7 @@ pub fn TokenCard(
view! {
<div
class:tada=is_new_token
class="flex flex-col gap-2 py-3 px-3 w-full text-xs rounded-lg transition-colors md:px-4 hover:bg-gradient-to-b group bg-[#131313] font-kumbh hover:from-[#626262] hover:to-[#3A3A3A]"
class="flex flex-col gap-2 py-3 px-3 w-full text-xs rounded-lg transition-colors md:px-4 hover:bg-gradient-to-b group bg-neutral-900/90 font-kumbh hover:from-neutral-600 hover:to-neutral-800"
>
<div class="flex gap-3 items-stretch">
<div
Expand Down Expand Up @@ -180,11 +179,11 @@ pub fn TokenCard(
<span class="font-medium shrink line-clamp-1">{details.name}</span>
<span class="font-bold shrink-0">{details.token_symbol}</span>
</div>
<span class="text-sm line-clamp-2 text-[#A0A1A6]">
<span class="text-sm line-clamp-2 text-neutral-400">
{details.description}
</span>
</div>
<div class="flex gap-2 justify-between items-center text-sm font-medium group-hover:text-white text-[#505156]">
<div class="flex gap-2 justify-between items-center text-sm font-medium group-hover:text-white text-neutral-600">
<span class="line-clamp-1">"Created by" {details.user_id}</span>
<span class="shrink-0">{details.formatted_created_at}</span>
</div>
Expand All @@ -201,11 +200,9 @@ pub fn TokenCard(
<ActionButton label="Airdrop".to_string() href="#".to_string() disabled=true>
<Icon class="w-full h-full" icon=AirdropIcon />
</ActionButton>
<ActionButtonWithHandler label="Share".to_string() disabled=true on_click=move || {
let _ = copy_to_clipboard(&format!("https://icpump.fun/token/info/{root}?airdrop_amt=100"));
}>
<ActionButton label="Share".to_string() disabled=true href="#".to_string()>
<Icon class="w-full h-full" icon=ShareIcon />
</ActionButtonWithHandler>
</ActionButton>
<ActionButton label="Details".to_string() href=details.link>
<Icon class="w-full h-full" icon=ChevronRightIcon />
</ActionButton>
Expand All @@ -217,9 +214,9 @@ pub fn TokenCard(
#[component]
pub fn PageSelector(page: RwSignal<u64>, end_of_list: RwSignal<bool>) -> impl IntoView {
view! {
<div class="flex gap-1 items-start text-sm font-medium text-[#A0A1A6]">
<div class="flex gap-1 items-start text-sm font-medium text-gray-400">
<button
class="flex justify-center items-center w-8 h-8 rounded-lg bg-[#3A3A3A]"
class="flex justify-center items-center w-8 h-8 rounded-lg bg-neutral-800"
on:click=move |_| {
page.update(|page| *page -= 1);
end_of_list.set(false);
Expand All @@ -228,14 +225,13 @@ pub fn PageSelector(page: RwSignal<u64>, end_of_list: RwSignal<bool>) -> impl In
>
<Icon class="w-4 h-4 rotate-180" icon=ChevronRightIcon />
</button>
<div class="w-8 h-8 rounded-lg flex items-center justify-center text-white bg-[#3D8EFF]">{page}</div>
<div class="w-8 h-8 rounded-lg flex items-center justify-center text-white bg-blue-500">{page}</div>
<button
class="flex justify-center items-center w-8 h-8 rounded-lg bg-[#3A3A3A]"
class="flex justify-center items-center w-8 h-8 rounded-lg bg-neutral-800"
on:click=move |_| {
page.update(|page| *page += 1);
}
disabled=move || end_of_list.get()
>
disabled=move || end_of_list.get()>
<Icon class="w-4 h-4" icon=ChevronRightIcon />
</button>
</div>
Expand All @@ -251,8 +247,9 @@ pub fn ActionButton(
) -> impl IntoView {
view! {
<a
href={if disabled {"#".to_string()}else{href}}
class=format!("flex flex-col gap-1 justify-center items-center text-xs transition-colors {}", if !disabled{"group-hover:text-white text-[#D4D4D4]"}else{"group-hover:cursor-default text-[#525252]"})
disabled=disabled
href=href
class=move || format!("flex flex-col gap-1 justify-center items-center text-xs transition-colors {}", if !disabled{"group-hover:text-white text-neutral-300"}else{"group-hover:cursor-default text-neutral-600"})
>
<div class="w-[1.875rem] h-[1.875rem]">{children()}</div>

Expand All @@ -261,25 +258,6 @@ pub fn ActionButton(
}
}

#[component]
pub fn ActionButtonWithHandler(
label: String,
children: Children,
#[prop(optional, default = false)] disabled: bool,
on_click: impl Fn() + 'static,
) -> impl IntoView {
view! {
<button
disabled
on:click=move |_| {if !disabled{on_click()}}
class=format!("flex flex-col gap-1 justify-center items-center text-xs transition-colors {}", if !disabled{"group-hover:text-white text-[#D4D4D4]"}else{"group-hover:cursor-default text-[#525252]"})
>
<div class="w-[1.875rem] h-[1.875rem]">{children()}</div>

<div>{label}</div>
</button>
}
}
#[component]
pub fn TelegramIcon(href: String, classes: String) -> impl IntoView {
view! {
Expand Down
1 change: 1 addition & 0 deletions ssr/src/utils/token/icpump.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ pub async fn get_paginated_token_list(page: u32) -> Result<Vec<TokenListItem>, S
#[cfg(not(feature = "firestore"))]
{
use crate::consts::ICPUMP_LISTING_PAGE_SIZE;
use candid::Principal;
let test_user_id = TokenListItem {
user_id: Principal::anonymous().to_text(),
name: "Test Token".to_string(),
Expand Down

0 comments on commit c5a7b03

Please sign in to comment.