From 94a9a4daedc4b33f5e4bbc6bc6c89f35f4c580d8 Mon Sep 17 00:00:00 2001
From: Rashi Bajpai <bajpairashi1404@gmail.com>
Date: Thu, 28 May 2026 19:29:33 +0530
Subject: [PATCH 1/2] fix: improve Sign In button visibility on login page

---
 package.json              | 15 +------------
 src/pages/Login/Login.tsx | 47 +++++++++++++++++----------------------
 2 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 43ad31cc..b460dafb 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
@@ -14,12 +13,12 @@
     "docker:dev": "docker compose --profile dev up --build",
     "docker:prod": "docker compose --profile prod up -d --build"
   },
-
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
+    "@octokit/core": "^7.0.6",
     "@primer/octicons-react": "^19.25.0",
     "@vitejs/plugin-react": "^4.3.3",
     "axios": "^1.7.7",
@@ -37,7 +36,6 @@
     "recharts": "^3.8.1",
     "tailwindcss": "^3.4.14"
   },
-
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@testing-library/jest-dom": "^6.9.1",
@@ -49,33 +47,22 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-redux": "^7.1.34",
     "@types/react-router-dom": "^5.3.3",
-
     "@vitejs/plugin-react-swc": "^3.5.0",
-
     "autoprefixer": "^10.4.20",
     "bcryptjs": "^3.0.3",
-
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
-
     "express-session": "^1.18.2",
-
     "globals": "^15.11.0",
-
     "jasmine": "^5.13.0",
     "jasmine-spec-reporter": "^7.0.0",
-
     "jsdom": "^29.1.1",
-
     "passport": "^0.7.0",
     "passport-local": "^1.0.0",
-
     "supertest": "^7.2.2",
-
     "typescript-eslint": "^8.59.3",
-
     "vite": "^5.4.10",
     "vitest": "^4.1.6"
   }
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073e..cf0a68f1 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -49,11 +49,10 @@ const Login: React.FC = () => {
 
   return (
     <div
-      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${
-        mode === "dark"
-          ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
-          : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
-      }`}
+      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${mode === "dark"
+        ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
+        : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
+        }`}
     >
       {/* Animated background elements */}
       <div className="absolute inset-0">
@@ -70,11 +69,10 @@ const Login: React.FC = () => {
             <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
           </div>
 
-          <h1 className={`text-4xl font-bold bg-clip-text text-transparent mb-2 ${
-            mode === "dark"
-              ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300"
-              : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"
-          }`}>
+          <h1 className={`text-4xl font-bold bg-clip-text text-transparent mb-2 ${mode === "dark"
+            ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300"
+            : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"
+            }`}>
             GitHubTracker
           </h1>
           <p className={`${mode === "dark" ? "text-slate-300" : "text-gray-700"} text-lg font-medium`}>
@@ -98,11 +96,10 @@ const Login: React.FC = () => {
                 onChange={handleChange}
                 autoComplete="username"
                 required
-                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${
-                  mode === "dark"
-                    ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
-                    : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
-                }`}
+                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${mode === "dark"
+                  ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
+                  : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
+                  }`}
               />
             </div>
 
@@ -115,18 +112,17 @@ const Login: React.FC = () => {
                 value={formData.password}
                 onChange={handleChange}
                 required
-                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${
-                  mode === "dark"
-                    ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
-                    : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
-                }`}
+                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${mode === "dark"
+                  ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
+                  : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
+                  }`}
               />
             </div>
 
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold focus:ring-4 focus:ring-purple-500/50 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full bg-slate-100 text-slate-900 border-2 border-pink-300 py-4 px-6 rounded-2xl font-semibold shadow-sm focus:ring-4 focus:ring-slate-300 transition-all duration-300 hover:bg-slate-200 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isLoading ? "Signing in..." : "Sign In"}
             </button>
@@ -134,11 +130,10 @@ const Login: React.FC = () => {
 
           {/* Message */}
           {message && (
-            <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${
-              message === "Login successful"
-                ? "bg-green-500/20 text-green-300 border border-green-500/30"
-                : "bg-red-500/20 text-red-300 border border-red-500/30"
-            }`}>
+            <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${message === "Login successful"
+              ? "bg-green-500/20 text-green-300 border border-green-500/30"
+              : "bg-red-500/20 text-red-300 border border-red-500/30"
+              }`}>
               {message}
             </div>
           )}

From 6186460f06d474e6005884c8911219c9abec4228 Mon Sep 17 00:00:00 2001
From: Rashi Bajpai <bajpairashi1404@gmail.com>
Date: Thu, 28 May 2026 20:09:01 +0530
Subject: [PATCH 2/2] fix: improve Sign In button visibility on login page

---
 src/pages/Login/Login.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index cf0a68f1..44a45915 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -122,7 +122,10 @@ const Login: React.FC = () => {
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full bg-slate-100 text-slate-900 border-2 border-pink-300 py-4 px-6 rounded-2xl font-semibold shadow-sm focus:ring-4 focus:ring-slate-300 transition-all duration-300 hover:bg-slate-200 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+              className={`w-full border-2 py-4 px-6 rounded-2xl font-semibold shadow-sm transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed ${mode === "dark"
+                  ? "bg-slate-900 text-white border-pink-400 focus:ring-4 focus:ring-pink-500/20 hover:bg-slate-800 hover:shadow-md"
+                  : "bg-slate-100 text-slate-900 border-pink-300 focus:ring-4 focus:ring-pink-200 hover:bg-slate-200 hover:shadow-md"
+                }`}
             >
               {isLoading ? "Signing in..." : "Sign In"}
             </button>