Skip to content

Commit

Permalink
Merge pull request #73 from Kodylow/tailwind-stuff
Browse files Browse the repository at this point in the history
Tailwind improvements
  • Loading branch information
elsirion authored May 25, 2024
2 parents 0c6a1e1 + 6c6e6ad commit 45e07ac
Show file tree
Hide file tree
Showing 13 changed files with 144 additions and 65 deletions.
35 changes: 30 additions & 5 deletions index.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,52 @@
@tailwind components;
@tailwind utilities;


@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('./assets/fonts/SpaceGrotesk-Variable.ttf') format('truetype');
src: url("./assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
}

@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('./assets/fonts/Inter-Variable.ttf') format('truetype');
src: url("./assets/fonts/Inter-Variable.ttf") format("truetype");
}

@layer components {
@layer base {
h1 {
@apply text-2xl md:text-4xl lg:text-5xl;
}
h2 {
@apply text-xl md:text-3xl lg:text-4xl;
}
h3 {
@apply text-lg md:text-2xl lg:text-3xl;
}
h4 {
@apply text-base md:text-xl lg:text-2xl;
}
h5 {
@apply text-sm md:text-lg lg:text-xl;
}
h6 {
@apply text-xs md:text-base lg:text-lg;
}
p {
@apply text-base md:text-lg;
}

button {
@apply text-lg md:text-xl lg:text-2xl;
}
}

@layer components {
.ease {
@apply transition duration-300 ease-in-out;
}

}
10 changes: 7 additions & 3 deletions src/components/app.rs
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ use leptos_meta::{Link, Meta, Title};
use tracing::info;

use crate::client::ClientRpc;
use crate::components::create_wallet::CreateWallet;
use crate::components::service_worker::ServiceWorker;
use crate::components::{Footer, Joined, Logo, SubmitForm, WalletSelector};
use crate::context::provide_client_context;
Expand Down Expand Up @@ -72,7 +73,7 @@ pub fn App() -> impl IntoView {

<div class="h-[100dvh]">
<div class="mx-auto w-full h-full flex flex-col min-w-[400px] lg:max-w-[600px] p-6">
<header class="flex justify-center mb-20">
<header class="flex justify-center mb-6 md:mb-20">
<Logo class="bg-red border-1 border-blue"/>
</header>
<main class="w-full pb-24 flex-grow ">
Expand All @@ -88,6 +89,9 @@ pub fn App() -> impl IntoView {
available=wallets
on_select=move |wallet_name| select_wallet_action.dispatch(wallet_name)
/>
<CreateWallet
on_select=move |wallet_name| select_wallet_action.dispatch(wallet_name)
/>
}.into_view()
} else {
empty_view().into_view()
Expand All @@ -100,7 +104,7 @@ pub fn App() -> impl IntoView {
when=show_join
fallback=|| empty_view()
>
<h1 class="font-heading text-gray-900 text-4xl font-semibold mb-6">"Join a Federation"</h1>
<h1 class="font-heading text-gray-900 font-semibold mb-6">"Join a Federation"</h1>
<SubmitForm
description="Enter invite code (i.e. fed11jpr3lgm8t…) to join a Federation".into()
on_submit=move |value| join_action.dispatch(value)
Expand All @@ -114,7 +118,7 @@ pub fn App() -> impl IntoView {
when=show_join_error
fallback=|| empty_view()
>
{move || view!{<div class="text-body text-md mt-4"><span class="text-red-500">{
{move || view!{<div class="text-body mt-4"><span class="text-red-500">{
format!("✗ Failed to join federation: {:?}", join_action.value().with(|r| {
match r {
Some(Err(e)) =>anyhow!("{:?}", e),
Expand Down
4 changes: 2 additions & 2 deletions src/components/balance.rs
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ pub fn Balance(#[prop(optional, into)] class: String) -> impl IntoView {

view! {
<div class=class>
<h2 class="text-xl leading-tight w-full font-body font-semibold pb-4 mb-4 text-gray-400 border-b-2 border-gray-200">"Balance"</h2>
<h3 class="text-4xl">{balance}</h3>
<h2 class="text-lg md:text-xl leading-tight w-full font-body font-semibold md:pb-4 mb-4 text-gray-400 border-b-2 border-gray-200">"Balance"</h2>
<h3 class="text-xl md:text-4xl">{balance}</h3>
</div>
}
}
2 changes: 1 addition & 1 deletion src/components/copyable_text.rs
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ pub fn CopyableText(
let copy = copy.clone();
move |_| copy(text.get().as_str())
}
class="w-full py-3 text-xl bg-blue-500 hover:enabled:bg-blue-600
class="w-full py-3 bg-blue-500 hover:enabled:bg-blue-600
text-white font-semibold font-body rounded-lg cursor-pointer enabled:ease disabled:opacity-70
disabled:cursor-not-allowed hover:enabled:shadow-lg"
>
Expand Down
44 changes: 44 additions & 0 deletions src/components/create_wallet.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
use leptos::*;

use crate::components::SubmitForm;
use crate::utils::empty_view;

#[component]
pub fn CreateWallet<F>(on_select: F) -> impl IntoView
where
F: Fn(String) + 'static + Copy,
{
let (loading, set_loading) = create_signal(false);
let (show_create_wallet_form, set_show_create_wallet_form) = create_signal(false);
let select = move |name: String| {
set_loading.set(true);
on_select(name);
};

view! {
<div class="flex justify-center">
<Show when=move || !show_create_wallet_form.get() fallback=|| empty_view() >
<button
class="mt-4 px-4 py-2 bg-blue-500 text-white font-bold rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline min-w-[200px]"
on:click=move |_| {
set_show_create_wallet_form.set(true);
}
>
"Create a new wallet"
</button>
</Show>
<Show when=move || show_create_wallet_form.get() fallback=|| empty_view() >
<SubmitForm
description="Enter a name for the new wallet".into()
on_submit=move |name| {
set_show_create_wallet_form.set(false);
select(name);
}
placeholder="Wallet Name".into()
submit_label="Create".into()
loading=loading
/>
</Show>
</div>
}
}
2 changes: 1 addition & 1 deletion src/components/footer.rs
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ use crate::components::LogoFedimint;
pub fn Footer(version: &'static str, #[prop(optional, into)] class: String) -> impl IntoView {
let version_prefix: &'static str = &version[..7];
view! {
<div class={format!("flex justify-center items-center text-body text-sm text-gray-500 {class}")}>
<div class={format!("flex justify-center items-center text-body text-gray-500 {class}")}>
"Webimint version "
<a
class="text-gray-950 font-mono mx-1"
Expand Down
51 changes: 27 additions & 24 deletions src/components/joined.rs
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ pub fn Joined() -> impl IntoView {
];

view! {
<h1 class="font-heading text-gray-900 text-4xl font-semibold">{federation_label}</h1>
<h1 class="font-heading text-gray-900 font-semibold">{federation_label}</h1>
<Balance class="my-12" />
<Menu
items=menu_items
Expand All @@ -81,29 +81,32 @@ where
let (tab, set_tab) = create_signal(initial_item);

view! {
<ul class="my-12 w-full flex flex-row">
{
items.iter().enumerate().map(|(i, item)| {
view! {
<li class="flex-1">
<button
on:click=move |_| {
set_tab.set(i);
on_tab_change();
}
class={move || format!("my-2 block w-full text-center
border-b-2 py-4 ease font-body font-semibold
text-xl leading-tight hover:text-blue-500 {active}",
active = if tab.get() == i {"text-blue-400 border-blue-400"}
else {"text-gray-400 border-gray-200 hover:border-gray-700"})}
>
{ item.title.to_owned() }
</button>
</li>
}
}).collect_view()
}
</ul>
<ul class="my-12 w-full flex flex-row flex-wrap">
{
items.iter().enumerate().map(|(i, item)| {
view! {
<li class="flex-1 md:flex-auto">
<button
on:click=move |_| {
set_tab.set(i);
on_tab_change();
}
class={move || format!("my-2 block w-full text-center
border-b-2 py-1 md:py-4 ease font-body font-semibold
text-xs md:text-xl leading-tight hover:text-blue-500 {active}",
active = if tab.get() == i {"text-blue-400 border-blue-400"}
else {"text-gray-400 border-gray-200 hover:border-gray-700"})}
>
{ match (i, item.title.as_str()) {
(4, "LN Receive") => "LN Rec.".to_string(),
(_, title) => title.to_string(),
} }
</button>
</li>
}
}).collect_view()
}
</ul>
{
items.iter().enumerate().map(|(i, item)| {
let view = item.view.to_owned();
Expand Down
4 changes: 2 additions & 2 deletions src/components/ln_receive_form.rs
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ where
<input
type="number"
placeholder="Amount msat"
class="my-4 w-full text-xl font-body text-gray-600 border-gray-400 placeholder:text-gray-400 ring-0 focus:border-blue-400 focus:ring-0"
class="my-4 w-full font-body text-gray-600 border-gray-400 placeholder:text-gray-400 ring-0 focus:border-blue-400 focus:ring-0"
on:input=move |ev| {
set_amount.set(event_target_value(&ev));
}
Expand All @@ -57,7 +57,7 @@ where
<input
type="text"
placeholder="Description"
class="my-4 w-full text-xl font-body text-gray-600 border-gray-400 placeholder:text-gray-400 ring-0 focus:border-blue-400 focus:ring-0"
class="my-4 w-full font-body text-gray-600 border-gray-400 placeholder:text-gray-400 ring-0 focus:border-blue-400 focus:ring-0"
on:input=move |ev| {
set_description.set(event_target_value(&ev));
}
Expand Down
1 change: 1 addition & 0 deletions src/components/mod.rs
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ pub mod alerts;
pub mod app;
pub mod balance;
pub mod copyable_text;
pub mod create_wallet;
pub mod footer;
pub mod joined;
pub mod ln_receive_form;
Expand Down
2 changes: 1 addition & 1 deletion src/components/receive_ecash.rs
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ pub fn ReceiveEcash() -> impl IntoView {
{move ||
if let Some(result) = submit_action.value().get() {
view!(
<div class="text-body text-md mt-4">{
<div class="text-body mt-4">{
match result {
Err(error) => view!(<span class="text-red-500">{format!("✗ Failed to redeem e-cash: {error}")}</span>),
Ok(value) => view!(<span class="text-green-600">{format!("✓ Redeemed {:?} msat", value.msats)}</span>)
Expand Down
2 changes: 1 addition & 1 deletion src/components/send_ln.rs
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ pub fn SendLn() -> impl IntoView {
{move ||
if let Some(result) = submit_action.value().get() {
view!(
<div class="text-body text-md mt-4">{
<div class="text-body mt-4">{
match result {
Err(error) => view!(<span class="text-red-500">{format!("✗ Failed to send invoice {error}")}</span>),
Ok(_) => view!(<span class="text-green-600">"✓ Invoice successfully sent"</span>)
Expand Down
2 changes: 1 addition & 1 deletion src/components/submit_button.rs
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ where

<button
on:click=on_click
class={move || format!("py-4 px-6 text-2xl flex items-center justify-center bg-blue-500 hover:enabled:bg-blue-600 text-white font-semibold font-body rounded-lg cursor-pointer enabled:ease disabled:opacity-70 disabled:cursor-not-allowed hover:enabled:shadow-lg {class}")}
class={move || format!("py-4 px-6 flex items-center justify-center bg-blue-500 hover:enabled:bg-blue-600 text-white font-semibold font-body rounded-lg cursor-pointer enabled:ease disabled:opacity-70 disabled:cursor-not-allowed hover:enabled:shadow-lg {class}")}
disabled=move || disabled.get()
>
{children()}
Expand Down
50 changes: 26 additions & 24 deletions src/components/wallet_selector.rs
Original file line number Diff line number Diff line change
@@ -1,59 +1,61 @@
use leptos::*;

use super::{NoteBlock, SubmitForm, WarningBlock};
use super::{NoteBlock, WarningBlock};
use crate::utils::empty_view;

#[component]
pub fn WalletSelector<F>(available: Vec<String>, on_select: F) -> impl IntoView
where
F: Fn(String) + 'static + Copy,
{
let (loading, set_loading) = create_signal(false);
let (_, set_loading) = create_signal(false);
let select = move |name: String| {
set_loading.set(true);
on_select(name);
};

let available_clone = available.clone();
let wallets_available = move || available_clone.len() > 0;

const MAX_NAME_LEN: usize = 20;

let available_list = available
.into_iter()
.map(|name| {
let select_name = name.clone();
let abbreviated_name = if name.len() > MAX_NAME_LEN {
let part_len = MAX_NAME_LEN / 2 - 1;
format!("{}...{}", &name[..part_len], &name[name.len() - part_len..])
} else {
name.clone()
};
view! {
<li>
<a
class="text-xl underline"
href="#"
<button
class="px-4 w-4/5 py-2 bg-blue-400 text-white font-bold rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline min-w-[200px]"
on:click=move |ev| {
ev.prevent_default();
select(select_name.clone());
}
>
{name}
</a>
</li>
{abbreviated_name}
</button>
}
})
.collect::<Vec<_>>();

view! {
<NoteBlock class="mb-8">
<NoteBlock class="mb-8">
"To switch wallets after selecting one just reload the web app."
</NoteBlock>
<WarningBlock class="mb-8">
"Webimint is a highly experimental Fedimint wallet, use at your own risk.
It's currently compatible with the 0.2 release of Fedimint."
"Webimint is a highly experimental Fedimint wallet, use at your own risk."
</WarningBlock>

<h1 class="font-heading text-gray-900 text-4xl font-semibold mb-6">"Select a wallet:"</h1>
<ul class="mb-6 list-disc">
{ available_list }
</ul>

<SubmitForm
description="… or create a new one".into()
on_submit=select
placeholder="Wallet Name".into()
submit_label="Create".into()
loading=loading
/>
<Show when=wallets_available fallback=|| empty_view() >
<h1 class="font-heading text-gray-900 font-semibold mb-6">"Select a wallet:"</h1>
</Show>
<div class="flex flex-col items-center mb-6 gap-y-4">
{ available_list }
</div>
}
}

0 comments on commit 45e07ac

Please sign in to comment.