From 7e2636fbcae9bf0c2e5d0ddc1c9a5e1fd2e9029a Mon Sep 17 00:00:00 2001
From: cyrus <cyrus@zerolend.xyz>
Date: Wed, 28 Jan 2026 18:30:50 +0530
Subject: [PATCH] Remove all focus styling and outlines completely
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove all browser focus outlines globally with outline: none !important
- Remove all custom focus rings and box shadows from components
- Update global CSS to suppress all focus styling including box-shadow: none
- Remove focus ring styles from Home page action buttons
- Remove focus ring styles from SettingsMenuItem components
- Clean interaction with no visible focus styling on any elements

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../settings/components/SettingsMenuItem.tsx  |  2 +-
 src/index.css                                 | 30 ++++++++++++++++---
 src/pages/Home.tsx                            |  8 ++---
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/settings/components/SettingsMenuItem.tsx b/src/components/settings/components/SettingsMenuItem.tsx
index 950f423da..eef702cd2 100644
--- a/src/components/settings/components/SettingsMenuItem.tsx
+++ b/src/components/settings/components/SettingsMenuItem.tsx
@@ -31,7 +31,7 @@ const SettingsMenuItem = ({
   return (
     <button
       onClick={onClick}
-      className={`w-full flex items-center justify-between p-3 bg-black/50 ${borderClasses} hover:bg-stone-800/30 transition-all duration-200 text-left ${roundedClasses}`}
+      className={`w-full flex items-center justify-between p-3 bg-black/50 ${borderClasses} hover:bg-stone-800/30 transition-all duration-200 text-left ${roundedClasses} focus:outline-none`}
     >
       <div className={`w-5 h-5 opacity-60 flex-shrink-0 mr-3 ${iconColor}`}>
         {icon}
diff --git a/src/index.css b/src/index.css
index 8a4d0269f..ab4761341 100644
--- a/src/index.css
+++ b/src/index.css
@@ -83,9 +83,29 @@
     @apply text-lg lg:text-xl;
   }
 
-  /* Enhanced focus styles for accessibility and trust */
+  /* Complete focus outline suppression - no borders, no rings, no outlines */
+  * {
+    outline: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+  }
+
   *:focus {
-    @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-black;
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: inherit !important;
+  }
+
+  /* Specific overrides for common elements that might show blue outlines */
+  button:focus,
+  a:focus,
+  input:focus,
+  textarea:focus,
+  select:focus,
+  [role="button"]:focus,
+  [tabindex]:focus {
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: inherit !important;
   }
 
   /* Smooth scrolling */
@@ -103,7 +123,7 @@
     @apply px-4 py-2 rounded-lg;
     @apply transition-all duration-200 ease-in-out;
     @apply shadow-soft hover:shadow-medium;
-    @apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-black;
     @apply disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
@@ -112,7 +132,7 @@
     @apply text-white font-medium;
     @apply px-4 py-2 rounded-lg border border-stone-600;
     @apply transition-all duration-200 ease-in-out;
-    @apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-black;
   }
 
   .btn-success {
@@ -121,6 +141,7 @@
     @apply px-4 py-2 rounded-lg;
     @apply transition-all duration-200 ease-in-out;
     @apply shadow-soft hover:shadow-medium;
+    @apply focus:outline-none focus:ring-2 focus:ring-sage-500 focus:ring-offset-2 focus:ring-offset-black;
   }
 
   .btn-danger {
@@ -129,6 +150,7 @@
     @apply px-4 py-2 rounded-lg;
     @apply transition-all duration-200 ease-in-out;
     @apply shadow-soft hover:shadow-medium;
+    @apply focus:outline-none focus:ring-2 focus:ring-coral-500 focus:ring-offset-2 focus:ring-offset-black;
   }
 
   /* Card components for content organization */
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 33c0c7ed4..a104136bd 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -90,7 +90,7 @@ const Home = () => {
               {/* Settings */}
               <button
                 onClick={handleManageConnections}
-                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-stone-700 hover:bg-stone-800/30 transition-all duration-200 text-left first:rounded-t-3xl"
+                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-stone-700 hover:bg-stone-800/30 transition-all duration-200 text-left first:rounded-t-3xl focus:outline-none"
               >
                 <div className="flex-1">
                   <div className="font-medium text-sm mb-1">Settings</div>
@@ -105,7 +105,7 @@ const Home = () => {
               {/* View Encryption Key */}
               <button
                 onClick={handleViewEncryptionKey}
-                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-stone-700 hover:bg-stone-800/30 transition-all duration-200 text-left"
+                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-stone-700 hover:bg-stone-800/30 transition-all duration-200 text-left focus:outline-none"
               >
                 <div className="flex-1">
                   <div className="font-medium text-sm mb-1">View Encryption Key</div>
@@ -119,7 +119,7 @@ const Home = () => {
               {/* Delete All Data */}
               <button
                 onClick={handleDeleteAllData}
-                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-coral-500/30 hover:bg-stone-800/30 transition-all duration-200 text-left"
+                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-coral-500/30 hover:bg-stone-800/30 transition-all duration-200 text-left focus:outline-none"
               >
                 <div className="flex-1">
                   <div className="font-medium text-sm mb-1 text-coral-400">Delete All Data</div>
@@ -133,7 +133,7 @@ const Home = () => {
               {/* Logout */}
               <button
                 onClick={handleLogout}
-                className="w-full flex items-start justify-between p-3 bg-black/50 hover:bg-stone-800/30 transition-all duration-200 text-left last:rounded-b-3xl"
+                className="w-full flex items-start justify-between p-3 bg-black/50 hover:bg-stone-800/30 transition-all duration-200 text-left last:rounded-b-3xl focus:outline-none"
               >
                 <div className="flex-1">
                   <div className="font-medium text-sm mb-1 text-amber-400">Logout</div>