Merge pull request #66 from PratikTomar/bugfix/issue-65-Keyboard-Navigation

Author: same7ammar

src/App.tsx

@@ -1238,7 +1238,7 @@ function App() {
             </div>
             {/* Mobile: Social + Actions grouped and centered, Desktop: inline */}
             <div className="flex flex-col items-center w-full sm:hidden">
-              <div className="w-full max-w-sm bg-gray-50 rounded-xl py-2 px-2 shadow-sm mt-2">
+              <div className="w-full max-w-sm bg-gray-50 rounded-xl py-2 px-2 shadow-sm mt-2 dark:bg-gray-800">
                 <div className="flex items-center justify-center space-x-2 mb-2">
                   <SocialShare />
                 </div>
@@ -1952,10 +1952,10 @@ function App() {
                           {roleBindings.map((rb, i) => {
                             const isSelected = selectedRoleBindingIndex === i;
                             return (
-                              <div
+                              <button
                                 key={i}
                                 onClick={() => setSelectedRoleBindingIndex(i)}
-                                className={`p-2 border rounded-lg cursor-pointer transition-all duration-200 hover:shadow-md  hover:bg-blue-50 focus-within:ring-2 focus-within:ring-blue-200 outline-none group 
+                                className={`p-2 border rounded-lg w-full text-left cursor-pointer transition-all duration-200 hover:shadow-md  hover:bg-blue-50 focus-within:ring-2 focus-within:ring-blue-200 outline-none group 
                                   ${isSelected
                                     ? rb.isClusterRoleBinding
                                       ? 'border-blue-500 bg-blue-50 shadow-md dark:border-blue-600 dark:bg-blue-600 dark:shadow-blue-600'
@@ -2064,7 +2064,7 @@ function App() {
                                     <div>This action cannot be undone.</div>
                                   </div>
                                 )}
-                              </div>
+                              </button>
                             );
                           })}
                         </div>

src/components/ConfigMapsList.tsx

@@ -64,9 +64,9 @@ export function ConfigMapsList({
   return (
     <div className="space-y-1 p-4">
       {configMaps.map((configMap, index) => (
-        <div
+        <button
           key={configMap.name}
-          className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
+          className={`p-3 rounded-lg border cursor-pointer transition-all w-full text-left duration-200 ${
             selectedIndex === index
               ? 'bg-green-50 border-green-200 ring-1 ring-green-200 dark:bg-green-700 dark:border-green-800 dark:ring-green-800'
               : 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600'
@@ -199,7 +199,7 @@ export function ConfigMapsList({
               </div>
             </div>
           )}
-        </div>
+        </button>
       ))}
     </div>
   );

src/components/DaemonSetsList.tsx

@@ -74,9 +74,9 @@ export function DaemonSetsList({
       {daemonSets.map((daemonSet, index) => {
         const summary = getDaemonSetSummary(daemonSet);
         return (
-          <div
+          <button
             key={index}
-            className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
+            className={`p-3 rounded-lg w-full text-left border cursor-pointer transition-all duration-200 ${
               selectedDaemonSet === index
                 ? 'bg-blue-50 border-blue-200 ring-1 ring-blue-200 dark:bg-blue-900 dark:border-blue-800 dark:ring-blue-800'
                 : 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
@@ -181,7 +181,7 @@ export function DaemonSetsList({
                 </div>
               </div>
             )}
-          </div>
+          </button>
         );
       })}
     </div>

src/components/DeploymentsList.tsx

@@ -61,7 +61,7 @@ export function DeploymentsList({
         const summary = getDeploymentSummary(deployment);
 
         return (
-          <div
+          <button
             key={index}
             className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 text-left w-full ${
               selectedIndex === index
@@ -170,7 +170,7 @@ export function DeploymentsList({
                 </div>
               </div>
             )}
-          </div>
+          </button>
         );
       })}
     </div>

src/components/DockerRunPopup.tsx

@@ -42,7 +42,7 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
       />
 
       {/* Popup Container */}
-      <div className="relative bg-white rounded-xl shadow-2xl w-full max-w-4xl mx-auto overflow-hidden max-h-[90vh] flex flex-col">
+      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-4xl mx-auto overflow-hidden max-h-[90vh] flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 text-white flex-shrink-0">
           <div className="flex items-center space-x-3 min-w-0 flex-1">
@@ -66,17 +66,17 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
         {/* Content */}
         <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4 sm:space-y-6">
           {/* Quick Start */}
-          <div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-3 sm:p-4 border border-green-200">
+          <div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-3 sm:p-4 border border-green-200 dark:bg-gradient-to-r dark:from-green-900 dark:to-emerald-900 dark:border-green-800">
             <div className="flex items-center space-x-2 mb-3">
               <Play className="w-4 h-4 sm:w-5 sm:h-5 text-green-600 flex-shrink-0" />
-              <h4 className="font-semibold text-green-900 text-sm sm:text-base">Quick Start</h4>
+              <h4 className="font-semibold text-green-900 text-sm sm:text-base dark:text-green-200">Quick Start</h4>
             </div>
-            <p className="text-xs sm:text-sm text-green-800 mb-3 sm:mb-4">
+            <p className="text-xs sm:text-sm text-green-800 mb-3 sm:mb-4 dark:text-green-200">
               Run this single command to pull and start Kube Composer locally in the background:
             </p>
 
             {/* Command Box */}
-            <div className="bg-gray-900 rounded-lg p-3 sm:p-4 relative">
+            <div className="bg-gray-900 rounded-lg p-3 sm:p-4 relative dark:bg-gray-800 dark:border-gray-700">
               <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2 space-y-2 sm:space-y-0">
                 <div className="flex items-center space-x-2">
                   <Terminal className="w-3 h-3 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" />
@@ -107,13 +107,13 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
           </div>
 
           {/* Step by Step Instructions */}
-          <div className="space-y-3 sm:space-y-4">
-            <h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base">
+          <div className="space-y-3 sm:space-y-4 dark:text-gray-200">
+            <h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base dark:text-gray-200">
               <span className="w-5 h-5 sm:w-6 sm:h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold flex-shrink-0">1</span>
               <span>Prerequisites</span>
             </h4>
             <div className="ml-6 sm:ml-8 space-y-2">
-              <p className="text-xs sm:text-sm text-gray-600">
+              <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-200">
                 Make sure you have Docker installed on your system:
               </p>
               <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
@@ -140,35 +140,35 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
               </div>
             </div>
 
-            <h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base">
+            <h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base dark:text-gray-200">
               <span className="w-5 h-5 sm:w-6 sm:h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold flex-shrink-0">2</span>
               <span>Run the Command</span>
             </h4>
             <div className="ml-6 sm:ml-8 space-y-2">
-              <p className="text-xs sm:text-sm text-gray-600">
+              <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-200">
                 Open your terminal and run the command above. This will:
               </p>
-              <ul className="text-xs sm:text-sm text-gray-600 space-y-1 list-disc list-inside ml-2 sm:ml-4">
+              <ul className="text-xs sm:text-sm text-gray-600 space-y-1 list-disc list-inside ml-2 sm:ml-4 dark:text-gray-200">
                 <li>Pull the latest Kube Composer Docker image</li>
                 <li>Start the container in detached mode (background)</li>
-                <li>Make it accessible at <code className="bg-gray-100 px-1 rounded text-xs">http://localhost:8080</code></li>
+                <li>Make it accessible at <code className="bg-gray-100 px-1 rounded text-xs dark:bg-gray-700">http://localhost:8080</code></li>
               </ul>
             </div>
 
-            <h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base">
+            <h4 className="font-semibold text-gray-900 flex items-center space-x-2 text-sm sm:text-base dark:text-gray-200">
               <span className="w-5 h-5 sm:w-6 sm:h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold flex-shrink-0">3</span>
               <span>Access the Application</span>
             </h4>
             <div className="ml-6 sm:ml-8 space-y-2">
-              <p className="text-xs sm:text-sm text-gray-600">
+              <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-200">
                 Once the container is running, open your browser and navigate to:
               </p>
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 dark:bg-blue-700 dark:border-blue-600">
                 <a
                   href="http://localhost:8080"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center space-x-2 text-blue-700 hover:text-blue-800 font-medium text-sm sm:text-base break-all"
+                  className="inline-flex items-center space-x-2 text-blue-700 hover:text-blue-800 font-medium text-sm sm:text-base break-all dark:text-blue-200"
                 >
                   <span>http://localhost:8080</span>
                   <ExternalLink className="w-3 h-3 sm:w-4 sm:h-4 flex-shrink-0" />
@@ -178,9 +178,9 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
           </div>
 
           {/* Benefits */}
-          <div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg p-3 sm:p-4 border border-purple-200">
-            <h4 className="font-semibold text-purple-900 mb-3 text-sm sm:text-base">Why Run Locally?</h4>
-            <ul className="text-xs sm:text-sm text-purple-800 space-y-1">
+          <div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg p-3 sm:p-4 border border-purple-200 dark:bg-gradient-to-r dark:from-purple-900 dark:to-indigo-900 dark:border-purple-800">
+            <h4 className="font-semibold text-purple-900 mb-3 text-sm sm:text-base dark:text-purple-200">Why Run Locally?</h4>
+            <ul className="text-xs sm:text-sm text-purple-800 space-y-1 dark:text-purple-200">
               <li>• <strong>Privacy:</strong> Your data never leaves your machine</li>
               <li>• <strong>Speed:</strong> No network latency, instant responses</li>
               <li>• <strong>Offline:</strong> Works without internet connection</li>
@@ -190,12 +190,12 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
         </div>
 
         {/* Footer */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-4 sm:p-6 border-t border-gray-200 bg-gray-50 space-y-3 sm:space-y-0 flex-shrink-0">
-          <div className="text-xs sm:text-sm text-gray-600">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-4 sm:p-6 border-t border-gray-200 bg-gray-50 dark:bg-gray-800 space-y-3 sm:space-y-0 flex-shrink-0">
+          <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-200">
             <p className="flex items-center">
               <Docker className="w-3 h-3 sm:w-4 sm:h-4 mr-2 text-blue-600 flex-shrink-0" />
               <span className="mr-1">Image:</span>
-              <code className="bg-gray-200 px-1 rounded text-xs break-all">same7ammar/kube-composer</code>
+              <code className="bg-gray-200 px-1 rounded text-xs break-all dark:bg-gray-700 dark:text-gray-200">same7ammar/kube-composer</code>
             </p>
           </div>
           <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-3">

src/components/NamespacesList.tsx

@@ -61,7 +61,7 @@ export function NamespacesList({
   return (
     <div className="space-y-1 p-4">
       {namespaces.map((namespace, index) => (
-        <div
+        <button
           key={namespace.name}
           className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
             selectedIndex === index
@@ -200,7 +200,7 @@ export function NamespacesList({
               </div>
             </div>
           )}
-        </div>
+        </button>
       ))}
 
       {namespaces.length === 0 && (

src/components/RolesList.tsx

@@ -64,10 +64,10 @@ export function RolesList({
   return (
     <div className="space-y-2 p-4">
       {roles.map((role, index) => (
-        <div
+        <button
           key={index}
           onClick={() => onSelect(index)}
-          className={`p-3 border rounded-lg cursor-pointer transition-all duration-200 hover:shadow-md ${
+          className={`p-3 border rounded-lg cursor-pointer transition-all w-full text-left duration-200 hover:shadow-md ${
             selectedIndex === index
               ? 'border-purple-300 bg-purple-50 shadow-sm dark:border-purple-800 dark:bg-purple-700 dark:shadow-sm'
               : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600'
@@ -170,7 +170,7 @@ export function RolesList({
               <div>This action cannot be undone.</div>
             </div>
           )}
-        </div>
+        </button>
       ))}
     </div>
   );

src/components/SecretsList.tsx

@@ -80,9 +80,9 @@ export function SecretsList({
   return (
     <div className="space-y-1 p-4">
       {secrets.map((secret, index) => (
-        <div
+        <button
           key={secret.name}
-          className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
+          className={`p-3 rounded-lg border cursor-pointer transition-all w-full text-left duration-200 ${
             selectedIndex === index
               ? 'bg-orange-50 border-orange-200 ring-1 ring-orange-200 dark:bg-orange-700 dark:border-orange-800 dark:ring-orange-800'
               : 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600'
@@ -224,7 +224,7 @@ export function SecretsList({
               </div>
             </div>
           )}
-        </div>
+        </button>
       ))}
     </div>
   );

src/components/ServiceAccountsList.tsx

@@ -65,9 +65,9 @@ export function ServiceAccountsList({
   return (
     <div className="space-y-3 p-4">
       {serviceAccounts.map((serviceAccount, index) => (
-        <div
+        <button
           key={`${serviceAccount.namespace}-${serviceAccount.name}`}
-          className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
+          className={`p-3 rounded-lg border cursor-pointer transition-all w-full text-left duration-200 ${
             selectedIndex === index
               ? 'bg-cyan-50 border-cyan-200 ring-1 ring-cyan-200 dark:bg-cyan-700 dark:border-cyan-600 dark:ring-cyan-600'
               : 'bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600'
@@ -233,7 +233,7 @@ export function ServiceAccountsList({
               </div>
             </div>
           )}
-        </div>
+        </button>
       ))}
     </div>
   );

src/components/VisualPreview.tsx

@@ -1759,9 +1759,9 @@ export function VisualPreview({
           )}
         </svg>
         {flowNodes.map(node => (
-          <div
+          <button
             key={node.id}
-            className={`absolute w-48 p-3 rounded-lg border-2 shadow-lg select-none cursor-pointer ${
+            className={`absolute w-48 p-3 text-left rounded-lg border-2 shadow-lg select-none cursor-pointer ${
               node.colorClass || getStatusColor(node.status)
             }`}
             style={{
@@ -1876,7 +1876,7 @@ export function VisualPreview({
                 )}
               </div>
             )}
-          </div>
+          </button>
         ))}
       </div>
       {/* YAML Modal */}