css trick

Updated the README to clarify features and improve readability.

README.md

@@ -5,7 +5,6 @@ A lightweight on-chain monitoring and alerting system designed to give users sit
 
 Koin Ping observes on-chain activity and notifies users when predefined conditions are met. It does not execute transactions, manage wallets, or speculate on prices.
 
-
 ## Getting Started
 
 ### Prerequisites
@@ -46,16 +45,16 @@ cd frontend && npm run dev
 ```
 
 The API listens on `http://localhost:3001` and the frontend on
-`http://localhost:3000` by default.
+`http://localhost:3000` by default for development.
 
 ## Rationale
 
-Crypto users who hold or actively monitor addresses need a lightweight, reliable
+Crypto users may actively monitor addresses with webhooks integrating popular 
-way to know when on-chain activity occurs without polling block explorers
+messaging platforms: Discord, Slack, Telegram.
-manually. Koin Ping fills that gap: it watches a set of Ethereum addresses,
+This lightweight, reliable framework makes instant awareness of on-chain 
-evaluates configurable alert rules (incoming transactions, outgoing
+activity trivial, without polling block explorers manually. Koin Ping watches 
-transactions, large transfers, balance thresholds), and notifies the user
+addresses, evaluates configurable alert rules (incoming transactions, outgoing 
-through Discord webhooks.
+transactions, "large" transfers, balance thresholds), and sends notifications.
 
 ## Design
 
@@ -132,7 +131,7 @@ To receive alerts via Telegram, you need to create a bot and get your chat ID.
 
 4. In the JSON response, find the `"chat"` object — the `"id"` field is your **Chat ID** (a numeric value).
 
-   > **Tip:** If the `"result"` array is empty, make sure you sent a message to your bot first, then refresh the page.
+   > **Tip:** If the `'result"` array is empty, make sure you sent a message to your bot first, then refresh the page.
 
 #### 3. Save in Koin Ping
 
@@ -153,3 +152,5 @@ MIT. See [LICENSE](LICENSE).
 ## Author
 
 Steven Jannette
+
+

frontend/src/components/Navbar.jsx

@@ -26,8 +26,8 @@ export default function Navbar() {
       <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
         <span style={{
           fontWeight: 700,
-          fontSize: "1.1rem",
+          fontSize: "1.4rem",
-          color: "#fff",
+          color: "#e62525",
           marginRight: "2rem",
           letterSpacing: "0.5px",
         }}>

frontend/src/pages/Login.css

@@ -0,0 +1,88 @@
+.login-page {
+  min-height: 100vh;
+  background-image: url(/ping.png);
+  background-size: 67%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.login-card {
+  max-width: 400px;
+  margin: 20px auto;
+  padding: 2rem;
+  padding-top: 8rem;
+  border: 1px solid #333;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.login-heading {
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.login-brand {
+  color: #e62525;
+}
+
+.login-error {
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  background-color: #ff000020;
+  border: 1px solid #ff0000;
+  border-radius: 4px;
+  color: #ff6666;
+}
+
+.login-field {
+  margin-bottom: 1rem;
+}
+
+.login-field-last {
+  margin-bottom: 1.5rem;
+}
+
+.login-label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.login-input {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1.2rem;
+  background-color: #242424;
+  border: 1px solid #444;
+  border-radius: 4px;
+  color: white;
+}
+
+.login-button {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1.2rem;
+  background-color: #0066cc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.login-button:disabled {
+  background-color: #333;
+  cursor: not-allowed;
+}
+
+.login-footer {
+  margin-top: 1.5rem;
+  text-align: center;
+}
+
+.login-footer-text {
+  color: #b3b3b3;
+}
+
+.login-signup-link {
+  color: #0066cc;
+  text-decoration: none;
+}

frontend/src/pages/Login.jsx

@@ -1,14 +1,10 @@
-/**
- * Login Page
- *
- * Allows existing users to sign in with email and password
- */
-
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import "./Login.css";
 
 export default function Login() {
+  const [isVisible, setIsVisible] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
@@ -39,37 +35,25 @@ export default function Login() {
   }
 
   return (
+    <div className="login-page">
       <div
-            style={{
+        className="login-card"
-                maxWidth: "400px",
+        onMouseEnter={() => setIsVisible(true)}
-                margin: "4rem auto",
-                padding: "2rem",
-                border: "1px solid #333",
-                borderRadius: "8px",
-            }}
       >
-            <h1 style={{ marginBottom: "2rem", textAlign: "center" }}>
+        <h1 className="login-heading">
-                Koin Ping - Login
+          <span className="login-brand">Koin Ping</span> - Login
         </h1>
 
+        <div style={{ visibility: isVisible ? 'visible' : 'hidden' }}>
           {error && (
-                <div
+            <div className="login-error">
-                    style={{
-                        padding: "0.75rem",
-                        marginBottom: "1rem",
-                        backgroundColor: "#ff000020",
-                        border: "1px solid #ff0000",
-                        borderRadius: "4px",
-                        color: "#ff6666",
-                    }}
-                >
               {error}
             </div>
           )}
 
           <form onSubmit={handleSubmit}>
-                <div style={{ marginBottom: "1rem" }}>
+            <div className="login-field">
-                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
+              <label className="login-label">
                 Email
               </label>
               <input
@@ -77,21 +61,13 @@ export default function Login() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 disabled={loading}
-                        style={{
+                className="login-input"
-                            width: "100%",
-                            padding: "0.5rem",
-                            fontSize: "1rem",
-                            backgroundColor: "#242424",
-                            border: "1px solid #444",
-                            borderRadius: "4px",
-                            color: "white",
-                        }}
                 required
               />
             </div>
 
-                <div style={{ marginBottom: "1.5rem" }}>
+            <div className="login-field-last">
-                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
+              <label className="login-label">
                 Password
               </label>
               <input
@@ -99,15 +75,7 @@ export default function Login() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 disabled={loading}
-                        style={{
+                className="login-input"
-                            width: "100%",
-                            padding: "0.5rem",
-                            fontSize: "1rem",
-                            backgroundColor: "#242424",
-                            border: "1px solid #444",
-                            borderRadius: "4px",
-                            color: "white",
-                        }}
                 required
               />
             </div>
@@ -115,32 +83,25 @@ export default function Login() {
             <button
               type="submit"
               disabled={loading}
-                    style={{
+              className="login-button"
-                        width: "100%",
-                        padding: "0.75rem",
-                        fontSize: "1rem",
-                        backgroundColor: loading ? "#333" : "#0066cc",
-                        color: "white",
-                        border: "none",
-                        borderRadius: "4px",
-                        cursor: loading ? "not-allowed" : "pointer",
-                    }}
             >
               {loading ? "Logging in..." : "Log In"}
             </button>
           </form>
 
-            <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
+          <div className="login-footer">
-                <p style={{ color: "#b3b3b3" }}>
+            <p className="login-footer-text">
               Don't have an account?{" "}
               <Link
                 to="/signup"
-                        style={{ color: "#0066cc", textDecoration: "none" }}
+                className="login-signup-link"
               >
                 Sign up here
               </Link>
             </p>
           </div>
         </div>
+      </div>
+    </div>
   );
 }