feat: implement faucet page improvements

- Add FaucetDescription component for improved faucet information display
- Add label for network selection dropdown to improve accessibility
- Update footer titles and button/text styles for better color contrast
- Improve layout and spacing for balance components
- Update placeholder text in FaucetInput for clarity
- Run linter and fix formatting issues

Author: barbaraperic

src/faucet/views/components/balance.rs

@@ -7,8 +7,8 @@ use crate::utils::format::format_balance;
 #[component]
 pub fn FaucetBalance(faucet: RwSignal<FaucetController>) -> impl IntoView {
     view! {
-        <div>
-            <h3 class="title">Faucet Balance:</h3>
+        <div class="balance-content">
+            <strong class="title">Faucet Balance:</strong>
             <Transition fallback=move || {
                 view! { <p>Loading faucet balance...</p> }
             }>
@@ -38,8 +38,8 @@ pub fn FaucetBalance(faucet: RwSignal<FaucetController>) -> impl IntoView {
 #[component]
 pub fn TargetBalance(faucet: RwSignal<FaucetController>) -> impl IntoView {
     view! {
-        <div>
-            <h3 class="title">Target Balance:</h3>
+        <div class="balance-content">
+            <strong class="title">Target Balance:</strong>
             <Transition fallback=move || view! { <p>Loading target balance...</p> }>
                 <p class="balance">
                     {move || format_balance(&faucet.get().get_target_balance(), &faucet.get().get_fil_unit())}

src/faucet/views/components/faucet_description.rs

@@ -0,0 +1,27 @@
+use crate::utils::format::format_balance;
+use fvm_shared::econ::TokenAmount;
+use leptos::prelude::*;
+use leptos::{component, view, IntoView};
+
+#[component]
+pub fn FaucetDescription(
+    drip_amount: TokenAmount,
+    token_unit: String,
+    rate_limit_seconds: i64,
+) -> impl IntoView {
+    view! {
+        <div class="description">
+            <p>
+                "This faucet distributes " {format_balance(&drip_amount, &token_unit)}
+                " per request and is rate-limited to one request per " {rate_limit_seconds}
+                " seconds per address. Each wallet address is subject to a daily cap, and exceeding this limit may result in temporary restrictions."
+            </p>
+            <p>
+                "Farming, abuse, or automated requests are strictly prohibited and will lead to stricter rate limits, temporary suspensions, or permanent bans."
+            </p>
+            <p>
+                "Faucet funds are limited and may run out. Refills are not guaranteed and occur periodically based on availability."
+            </p>
+        </div>
+    }
+}

src/faucet/views/components/layout.rs

@@ -19,7 +19,7 @@ pub fn Footer() -> impl IntoView {
         <footer class="footer">
             <div class="footer-content">
                 <div class="footer-section">
-                    <h3 class="footer-title">Learn More</h3>
+                    <strong class="footer-title">Learn More</strong>
                     <ul class="footer-links">
                         <li>
                             <a
@@ -36,7 +36,7 @@ pub fn Footer() -> impl IntoView {
                 </div>
 
                 <div class="footer-section">
-                    <h3 class="footer-title">Feedback & Support</h3>
+                    <strong class="footer-title">Feedback & Support</strong>
                     <ul class="footer-links">
                         <li>
                             <a
@@ -75,7 +75,7 @@ pub fn Footer() -> impl IntoView {
             <div class="footer-bottom">
                 <span>
                     <a
-                        class="text-green-600"
+                        class="text-green-700"
                         target="_blank"
                         rel="noopener noreferrer"
                         href="https://github.com/ChainSafe/forest-explorer"

src/faucet/views/components/mod.rs

@@ -1,5 +1,6 @@
 pub mod alert;
 pub mod balance;
+pub mod faucet_description;
 pub mod icons;
 pub mod layout;
 pub mod nav;

src/faucet/views/faucets/calibnet.rs

@@ -1,6 +1,6 @@
 use super::Faucet;
 use crate::faucet::constants::FaucetInfo;
-use crate::utils::format::format_balance;
+use crate::faucet::views::components::faucet_description::FaucetDescription;
 use crate::utils::rpc_context::{Provider, RpcContext};
 use leptos::prelude::*;
 use leptos::{component, view, IntoView};
@@ -24,11 +24,11 @@ pub fn Faucet_Calibnet() -> impl IntoView {
         <h1 class="header">"🧪 Filecoin Calibnet Faucet"</h1>
         <div class="main-container">
             <Faucet faucet_info=FaucetInfo::CalibnetFIL />
-            <div class="description">
-                "This faucet distributes " {format_balance(drip_amount, token_unit)}
-                " per request. It is rate-limited to 1 request per " {rate_limit_seconds}
-                " seconds. Farming is discouraged and will result in more stringent rate limiting in the future and/or permanent bans."
-            </div>
+            <FaucetDescription
+                drip_amount=drip_amount.clone()
+                token_unit=token_unit.to_string()
+                rate_limit_seconds=rate_limit_seconds
+            />
         </div>
     }
 }

src/faucet/views/faucets/mainnet.rs

@@ -1,6 +1,6 @@
 use super::Faucet;
 use crate::faucet::constants::FaucetInfo;
-use crate::utils::format::format_balance;
+use crate::faucet::views::components::faucet_description::FaucetDescription;
 use crate::utils::rpc_context::{Provider, RpcContext};
 use leptos::prelude::*;
 use leptos::{component, view, IntoView};
@@ -22,11 +22,11 @@ pub fn Faucet_Mainnet() -> impl IntoView {
         <h1 class="header">"🌐 Filecoin Mainnet Faucet"</h1>
         <div class="main-container">
             <Faucet faucet_info=FaucetInfo::MainnetFIL />
-            <div class="description">
-                "This faucet distributes " {format_balance(drip_amount, token_unit)}
-                " per request. It is rate-limited to 1 request per " {rate_limit_seconds}
-                " seconds. Farming is discouraged and will result in more stringent rate limiting in the future and/or permanent bans or service termination. Faucet funds are limited and may run out. They are replenished periodically."
-            </div>
+            <FaucetDescription
+                drip_amount=drip_amount.clone()
+                token_unit=token_unit.to_string()
+                rate_limit_seconds=rate_limit_seconds
+            />
         </div>
     }
 }

src/faucet/views/faucets/mod.rs

@@ -131,7 +131,7 @@ pub fn Faucet(faucet_info: FaucetInfo) -> impl IntoView {
                 ().into_any()
             }
         }}
-        <div>
+        <div class="faucet-section">
             <FaucetInput faucet=faucet />
             <div class="balance-container">
                 <FaucetBalance faucet=faucet />

src/faucet/views/home.rs

@@ -5,6 +5,7 @@ use crate::utils::rpc_context::{Provider, RpcContext};
 use fvm_shared::address::Network;
 use leptos::prelude::*;
 use leptos::{component, leptos_dom::helpers::event_target_value, view, IntoView};
+use leptos_meta::Title;
 
 #[component]
 fn FaucetOverview() -> impl IntoView {
@@ -76,7 +77,11 @@ fn NetworkSelection(
     view! {
         <div class="network-selector">
             <div class="dropdown">
+                <label for="network-select" class="sr-only">
+                    Select Network
+                </label>
                 <select
+                    id="network-select"
                     on:change=move |ev| {
                         rpc_context.set(event_target_value(&ev).parse().expect("predefined values, must succeed"))
                     }
@@ -130,6 +135,7 @@ pub fn Explorer() -> impl IntoView {
 
     view! {
         <main class="main-container">
+            <Title text="Filecoin Forest Explorer Faucet" />
             <Header />
             <FaucetOverview />
             <NetworkSelection rpc_context=rpc_context network_name=network_name network_version=network_version />

style/tailwind.css

@@ -18,11 +18,17 @@
     .faucet-list-items {
         @apply grid grid-cols-1 gap-6 text-center;
     }
+    .faucet-section {
+        @apply flex flex-col gap-8;
+    }
     .input-container {
-        @apply my-4 flex;
+        @apply flex;
     }
     .balance-container {
-        @apply flex justify-between my-4;
+        @apply flex justify-between;
+    }
+    .balance-content {
+        @apply flex flex-col gap-4 justify-between;
     }
     .transaction-container {
         @apply mt-4 space-y-2;
@@ -67,10 +73,10 @@
         @apply text-gray-600;
     }
     .link-text {
-        @apply text-blue-500 hover:text-blue-600;
+        @apply text-blue-700 hover:text-blue-700;
     }
     .description {
-        @apply text-center mt-4;
+        @apply text-center text-pretty space-y-4 max-w-2xl mx-auto;
     }
     .balance {
         @apply text-xl;
@@ -82,7 +88,7 @@
         @apply text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl text-center;
     }
     .footer {
-        @apply grid gap-8 text-center pt-6 border-t border-gray-200 max-h-80;
+        @apply grid gap-10 text-center pt-6 border-t border-gray-200 max-h-80;
     }
     .footer-content {
         @apply grid grid-cols-1 md:grid-cols-2 gap-6 w-4/5 mx-auto;
@@ -97,22 +103,22 @@
         @apply space-y-4;
     }
     .footer-links:hover {
-        @apply text-blue-600;
+        @apply text-blue-700;
     }
     .footer-bottom {
         @apply flex justify-center items-center;
     }
     .btn {
-        @apply block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg;
+        @apply block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded;
     }
     .btn-enabled {
-        @apply bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-r;
+        @apply bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-r;
     }
     .btn-disabled {
-        @apply bg-gray-400 text-white font-bold py-2 px-4 rounded-r;
+        @apply bg-gray-500 text-white font-bold py-2 px-4 rounded-r;
     }
     .btn-topup {
-        @apply block bg-orange-500 hover:bg-orange-600 text-white font-bold text-sm py-1 px-2 rounded;
+        @apply block bg-orange-800 hover:bg-orange-900 text-white font-bold py-2 px-4 rounded cursor-pointer;
     }
     .dropdown {
         @apply relative w-64;
@@ -127,7 +133,7 @@
         @apply h-5 w-5 text-green-500 mr-2 flex-shrink-0;
     }
     .lighting-icon {
-        @apply h-5 w-5 text-blue-500 mr-2 flex-shrink-0;
+        @apply h-5 w-5 text-blue-700 mr-2 flex-shrink-0;
     }
     .close-icon {
         @apply fill-current h-6 w-6 text-red-500;