refact css sytem

frontend/src/components/AddressForm.jsx

@@ -37,7 +37,7 @@ export default function AddressForm({ onSubmit }) {
                 placeholder="Treasury, Cold Wallet, etc."
             />
 
-            <Button type="submit" disabled={!canSubmit}>
+            <Button type="submit" disabled={!canSubmit} className="mt-md">
                 Add Address
             </Button>
         </form>

frontend/src/components/AlertForm.css

@@ -0,0 +1,7 @@
+.alert-form__options {
+  margin-bottom: 1rem;
+}
+
+.alert-form__radio {
+  display: block;
+}

frontend/src/components/AlertForm.jsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Input from "./Input";
 import Button from "./Button";
+import "./AlertForm.css";
 
 const ALERT_TYPES = [
     { value: "incoming_tx", label: "Incoming transaction" },
@@ -36,9 +37,9 @@ export default function AlertForm({ onSubmit }) {
 
     return (
         <form onSubmit={handleSubmit}>
-            <div style={{ marginBottom: "1rem" }}>
+            <div className="alert-form__options">
                 {ALERT_TYPES.map((opt) => (
-                    <label key={opt.value} style={{ display: "block" }}>
+                    <label key={opt.value} className="alert-form__radio">
                         <input
                             type="radio"
                             name="alertType"

frontend/src/components/Button.css

@@ -0,0 +1,14 @@
+.btn {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-text);
+  transition: opacity 0.15s ease;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

frontend/src/components/Button.jsx

@@ -1,20 +1,19 @@
+import "./Button.css";
+
 export default function Button({
     children,
     onClick,
     disabled = false,
     type = "button",
+    variant = "primary",
+    className = "",
 }) {
     return (
         <button
             type={type}
             onClick={onClick}
             disabled={disabled}
-            style={{
-                padding: "0.5rem 1rem",
-                fontSize: "1rem",
-                cursor: disabled ? "not-allowed" : "pointer",
-                opacity: disabled ? 0.6 : 1,
-            }}
+            className={`btn btn--${variant} ${className}`}
         >
             {children}
         </button>

frontend/src/components/Input.css

@@ -0,0 +1,21 @@
+.input__label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.9rem;
+}
+
+.input__control {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+}
+
+.input__control:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}

frontend/src/components/Input.jsx

@@ -1,3 +1,5 @@
+import "./Input.css";
+
 export default function Input({
     label,
     type = "text",
@@ -7,12 +9,12 @@ export default function Input({
     step,
     min,
     disabled = false,
+    required = false,
+    className = "",
 }) {
     return (
-        <label style={{ display: "block", marginBottom: "1rem" }}>
-            <div style={{ marginBottom: "0.25rem", fontSize: "0.9rem" }}>
-                {label}
-            </div>
+        <label className={`form-field ${className}`}>
+            <div className="input__label">{label}</div>
             <input
                 type={type}
                 value={value}
@@ -20,12 +22,9 @@ export default function Input({
                 step={step}
                 min={min}
                 disabled={disabled}
+                required={required}
                 onChange={(e) => onChange(e.target.value)}
-                style={{
-                    width: "100%",
-                    padding: "0.5rem",
-                    fontSize: "1rem",
-                }}
+                className="input__control"
             />
         </label>
     );

frontend/src/components/Navbar.css

@@ -0,0 +1,56 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  margin-bottom: 1.5rem;
+  background-color: var(--color-bg);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.navbar__brand {
+  font-weight: 700;
+  font-size: 1.4rem;
+  color: var(--color-brand);
+  margin-right: 2rem;
+  letter-spacing: 0.5px;
+}
+
+.navbar__links {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.navbar__link {
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  font-size: 1.425rem;
+  font-weight: 200;
+  color: var(--color-text-subtle);
+  background-color: transparent;
+  transition: all 0.15s ease;
+}
+
+.navbar__link--active {
+  font-weight: 600;
+  color: var(--color-text);
+  background-color: var(--color-bg-card);
+}
+
+.navbar__user {
+  font-size: 1.275rem;
+  color: #777;
+}
+
+.navbar__logout {
+  padding: 0.4rem 1rem;
+  font-size: 1.275rem;
+  font-weight: 400;
+  background-color: transparent;
+  color: var(--color-text-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}

frontend/src/components/Navbar.jsx

@@ -1,5 +1,6 @@
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import "./Navbar.css";
 
 const navLinks = [
   { to: "/addresses", label: "Addresses" },
@@ -14,43 +15,17 @@ export default function Navbar() {
   if (!currentUser) return null;
 
   return (
-    <nav style={{
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      padding: "1rem 2rem",
-      marginBottom: "1.5rem",
-      backgroundColor: "#1a1a1a",
-      borderBottom: "1px solid #333",
-    }}>
-      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-        <span style={{
-          fontWeight: 700,
-          fontSize: "1.4rem",
-          color: "#e62525",
-          marginRight: "2rem",
-          letterSpacing: "0.5px",
-        }}>
-          Koin Ping
-        </span>
-
-        <div style={{ display: "flex", gap: "0.25rem" }}>
+    <nav className="navbar">
+      <div className="flex flex--center gap-sm">
+        <span className="navbar__brand">Koin Ping</span>
+        <div className="navbar__links">
           {navLinks.map(({ to, label }) => {
             const isActive = location.pathname === to;
             return (
               <Link
                 key={to}
                 to={to}
-                style={{
-                  padding: "0.5rem 1.25rem",
-                  borderRadius: "6px",
-                  textDecoration: "none",
-                  fontSize: "1.425rem",
-                  fontWeight: isActive ? 600 : 200,
-                  color: isActive ? "#fff" : "#999",
-                  backgroundColor: isActive ? "#333" : "transparent",
-                  transition: "all 0.15s ease",
-                }}
+                className={`navbar__link ${isActive ? "navbar__link--active" : ""}`}
               >
                 {label}
               </Link>
@@ -59,24 +34,9 @@ export default function Navbar() {
         </div>
       </div>
 
-      <div style={{ display: "flex", alignItems: "center", gap: "1.25rem" }}>
-        <span style={{ fontSize: "1.275rem", color: "#777" }}>
-          {currentUser.email}
-        </span>
-        <button
-          onClick={logout}
-          style={{
-            padding: "0.4rem 1rem",
-            fontSize: "1.275rem",
-            fontWeight: 400,
-            backgroundColor: "transparent",
-            color: "#999",
-            border: "1px solid #444",
-            borderRadius: "6px",
-            cursor: "pointer",
-            transition: "all 0.15s ease",
-          }}
-        >
+      <div className="flex flex--center gap-lg">
+        <span className="navbar__user">{currentUser.email}</span>
+        <button onClick={logout} className="navbar__logout">
           Logout
         </button>
       </div>