From 4ad8f73cbf2f647414e799370542041023631580 Mon Sep 17 00:00:00 2001
From: prasiddhi-105 <bhumimishra91@gmail.com>
Date: Sat, 18 Jul 2026 21:18:30 +0530
Subject: [PATCH] feat: complete reusable button component with pill-shaped
 variants #102

---
 frontend/src/App.tsx               | 80 ++++++++++++++++--------------
 frontend/src/components/Button.tsx | 73 +++++++++++++++++++++++++++
 frontend/src/index.css             | 14 ++++++
 3 files changed, 129 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/Button.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b91f402a..74727e1a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,9 +9,9 @@ import { AuthModal } from "./AuthModal";
 import { Footer } from "./Footer";
 import AnalysisSkeleton from "./components/AnalysisSkeleton/AnalysisSkeleton";
 import { InfoTooltip } from "./components/InfoTooltip";
+import { Button } from "./components/Button";
 
 type Theme = "light" | "dark";
-
 function getInitialTheme(): Theme {
   try {
     const saved = localStorage.getItem("theme");
@@ -178,7 +178,7 @@ function App() {
 
       if (user) {
         await fetchDbHistory(user.token);
-        }
+      }
       else {
         addEntry({
           score: res.data.score,
@@ -189,7 +189,7 @@ function App() {
           targetRole: targetRole,
           fileName: fileToAnalyze.name,
         });
-    }
+      }
     } catch (error: unknown) {
       console.error(error);
 
@@ -288,9 +288,9 @@ function App() {
     setHistoryOpen(false);
   };
   const handleLogout = () => {
-  logout();           
-  clearHistory();
-};
+    logout();
+    clearHistory();
+  };
   return (
     <>
       <HistorySidebar
@@ -304,27 +304,28 @@ function App() {
 
       <div className="container mt-5">
         <div className="main-card text-center">
-          {/* Theme toggle */}
-          <button
-            type="button"
-            className="app-btn theme-toggle-btn"
-            onClick={toggleTheme}
-            aria-label="Toggle theme"
-            aria-pressed={theme === "dark"}
-          >
-            {theme === "light" ? "🌙 Dark Mode" : "☀️ Light Mode"}
-          </button>
-
-          {/* Auth bar */}
-          <div className="auth-bar">
-            {user ? (
-              <>
-                <span className="auth-username">👤 {user.username}</span>
-                <button className="auth-bar-btn" onClick={handleLogout}>Logout</button>
-              </>
-            ) : (
-              <button className="auth-bar-btn" onClick={() => setShowAuthModal(true)}>🔐 Login / Sign Up</button>
-            )}
+          {/* Top Control Bar: Side-by-Side Theme & Auth Buttons */}
+          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: "12px", marginBottom: "24px" }}>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={toggleTheme}
+              aria-label="Toggle theme"
+              aria-pressed={theme === "dark"}
+            >
+              {theme === "light" ? "🌙 Dark Mode" : "☀️ Light Mode"}
+            </Button>
+
+            <div className="auth-bar" style={{ margin: 0 }}>
+              {user ? (
+                <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+                  <span className="auth-username" style={{ color: "#fff", fontSize: "var(--font-size-sm)" }}>👤 {user.username}</span>
+                  <Button variant="ghost" onClick={handleLogout}>Logout</Button>
+                </div>
+              ) : (
+                <Button variant="ghost" onClick={() => setShowAuthModal(true)}>🔐 Login / Sign Up</Button>
+              )}
+            </div>
           </div>
 
           {showAuthModal && (
@@ -337,7 +338,7 @@ function App() {
 
           <h1 className="mb-4">🚀 AI Resume Analyzer</h1>
 
-          {/* Role Selector Dropdown */}
+          {/* Role Selector Dropdown Container */}
           <div className="mb-4">
             <label htmlFor="roleSelect" style={{ marginRight: "10px", fontWeight: "600", color: "#fff" }}>
               Target Career Track:
@@ -346,7 +347,7 @@ function App() {
               id="roleSelect"
               value={targetRole}
               onChange={(e) => setTargetRole(e.target.value)}
-              style={{ padding: "6px 12px", borderRadius: "6px", border: "1px solid #ccc" }}
+              style={{ padding: "6px 12px", borderRadius: "var(--radius-sm)", border: "1px solid #ccc" }}
             >
               <option value="Frontend Developer">Frontend Developer</option>
               <option value="Backend Developer">Backend Developer</option>
@@ -354,7 +355,7 @@ function App() {
             </select>
           </div>
 
-          <div className="upload-box mb-3">
+          <div className="upload-box mb-4">
             <input
               type="file"
               id="fileUpload"
@@ -368,24 +369,27 @@ function App() {
             </label>
           </div>
 
-          <div style={{ display: "flex", gap: "12px", justifyContent: "center", alignItems: "center" }} className="mb-3">
-            <button
-              className="analyze-btn"
+          {/* Action Blocks: Primary Action stacked above Secondary Link */}
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }} className="mb-4">
+            <Button
+              variant="primary"
               onClick={uploadResume}
               disabled={loading}
             >
               {loading && analysisSource === "upload" ? "⏳ Extracting and analyzing resume text..." : "🚀 Analyze Resume"}
-            </button>
-            <button
-              className="secondary-btn"
+            </Button>
+            
+            <Button
+              variant="secondary"
               onClick={handleSampleResume}
               disabled={loading}
               type="button"
             >
-              {loading && analysisSource === "sample" ? "⏳ Loading Sample..." : "Try Sample Resume"}
-            </button>
+              {loading && analysisSource === "sample" ? "⏳ Loading Sample..." : "Or try with a sample resume"}
+            </Button>
           </div>
 
+
           {/* Loading skeleton — shown while the resume is being analyzed */}
           {loading && <AnalysisSkeleton />}
 
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
new file mode 100644
index 00000000..158173ec
--- /dev/null
+++ b/frontend/src/components/Button.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost";
+  children: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = "primary",
+  children,
+  className = "",
+  style,
+  disabled,
+  ...props
+}) => {
+  // Base structural styles shared across all buttons
+  const baseStyle: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: "600",
+    border: "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "all 0.2s ease",
+    opacity: disabled ? 0.6 : 1,
+  };
+
+  // Variant-specific styles mapping to our new scale and system tokens
+const variantStyles: Record<string, React.CSSProperties> = {
+    primary: {
+      padding: "12px 36px",
+      fontSize: "var(--font-size-base)",
+      backgroundColor: "#6366f1",
+      color: "#fff",
+      borderRadius: "9999px", 
+      boxShadow: "var(--shadow-card)",
+      width: "100%",
+      maxWidth: "280px"
+    },
+    secondary: {
+      background: "transparent",
+      color: "var(--btn-secondary-text)",
+      fontSize: "var(--font-size-sm)",
+      textDecoration: "underline",
+      marginTop: "8px",
+    },
+    ghost: {
+      padding: "8px 20px",
+      fontSize: "var(--font-size-sm)",
+      background: "rgba(255, 255, 255, 0.15)",
+      color: "#ffffff",
+      borderRadius: "9999px", /* Makes it a pill / capsule shape */
+      border: "1px solid rgba(255, 255, 255, 0.2)",
+    },
+  };
+
+  const combinedStyle = {
+    ...baseStyle,
+    ...variantStyles[variant],
+    ...style,
+  };
+
+ return (
+    <button
+      className={`app-btn-custom app-btn-custom--${variant} ${className}`}
+      style={combinedStyle}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 07975756..ef6e249d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -726,3 +726,17 @@ border:0;
     transform: translateX(-50%) translateY(-10px);
   }
 }
+/* Interactive states for our reusable Button component */
+.app-btn-custom:not(:disabled):hover {
+  filter: brightness(1.1);
+  transform: translateY(-1px);
+}
+
+.app-btn-custom:not(:disabled):active {
+  transform: translateY(0);
+}
+
+.app-btn-custom--secondary:hover {
+  color: #fff !important;
+  text-decoration: none !important;
+}
\ No newline at end of file