From c4f9392aadba6e1f21fb9db4d0ffa3fd02ac46e3 Mon Sep 17 00:00:00 2001 From: Pratik Tomar Date: Sun, 10 Aug 2025 00:33:13 +0530 Subject: [PATCH] Issue - 65 | Keyboard Navigation | Accessbility of Application | Tab Focus was not going to boxes and made run locally modal dark mode compatible --- src/App.tsx | 8 ++--- src/components/ConfigMapsList.tsx | 6 ++-- src/components/DaemonSetsList.tsx | 6 ++-- src/components/DeploymentsList.tsx | 4 +-- src/components/DockerRunPopup.tsx | 44 +++++++++++++------------- src/components/NamespacesList.tsx | 4 +-- src/components/RolesList.tsx | 6 ++-- src/components/SecretsList.tsx | 6 ++-- src/components/ServiceAccountsList.tsx | 6 ++-- src/components/VisualPreview.tsx | 6 ++-- src/components/jobs/CronJobList.tsx | 6 ++-- src/components/jobs/JobList.tsx | 6 ++-- 12 files changed, 54 insertions(+), 54 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index bc9fdee..14a3552 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1238,7 +1238,7 @@ function App() { {/* Mobile: Social + Actions grouped and centered, Desktop: inline */}
-
+
@@ -1952,10 +1952,10 @@ function App() { {roleBindings.map((rb, i) => { const isSelected = selectedRoleBindingIndex === i; return ( -
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() {
This action cannot be undone.
)} -
+ ); })}
diff --git a/src/components/ConfigMapsList.tsx b/src/components/ConfigMapsList.tsx index 01f2808..e7a2626 100644 --- a/src/components/ConfigMapsList.tsx +++ b/src/components/ConfigMapsList.tsx @@ -64,9 +64,9 @@ export function ConfigMapsList({ return (
{configMaps.map((configMap, index) => ( -
)} -
+ ))}
); diff --git a/src/components/DaemonSetsList.tsx b/src/components/DaemonSetsList.tsx index 2a093bf..1a171b4 100644 --- a/src/components/DaemonSetsList.tsx +++ b/src/components/DaemonSetsList.tsx @@ -74,9 +74,9 @@ export function DaemonSetsList({ {daemonSets.map((daemonSet, index) => { const summary = getDaemonSetSummary(daemonSet); return ( -
)} - + ); })} diff --git a/src/components/DeploymentsList.tsx b/src/components/DeploymentsList.tsx index 5726f7a..829ba05 100644 --- a/src/components/DeploymentsList.tsx +++ b/src/components/DeploymentsList.tsx @@ -61,7 +61,7 @@ export function DeploymentsList({ const summary = getDeploymentSummary(deployment); return ( -
)} - + ); })} diff --git a/src/components/DockerRunPopup.tsx b/src/components/DockerRunPopup.tsx index ea77666..da4731c 100644 --- a/src/components/DockerRunPopup.tsx +++ b/src/components/DockerRunPopup.tsx @@ -42,7 +42,7 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) { /> {/* Popup Container */} -
+
{/* Header */}
@@ -66,17 +66,17 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) { {/* Content */}
{/* Quick Start */} -
+
-

Quick Start

+

Quick Start

-

+

Run this single command to pull and start Kube Composer locally in the background:

{/* Command Box */} -
+
@@ -107,13 +107,13 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
{/* Step by Step Instructions */} -
-

+
+

1 Prerequisites

-

+

Make sure you have Docker installed on your system:

@@ -140,35 +140,35 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
-

+

2 Run the Command

-

+

Open your terminal and run the command above. This will:

-
    +
    • Pull the latest Kube Composer Docker image
    • Start the container in detached mode (background)
      • -
    • Make it accessible at http://localhost:8080
      • +
    • Make it accessible at http://localhost:8080
-

+

3 Access the Application

-

+

Once the container is running, open your browser and navigate to:

-
+ {/* Benefits */} -
-

Why Run Locally?

-
    +
    +

    Why Run Locally?

    +
    • • Privacy: Your data never leaves your machine
    • • Speed: No network latency, instant responses
    • • Offline: Works without internet connection
      • @@ -190,12 +190,12 @@ export function DockerRunPopup({ isOpen, onClose }: DockerRunPopupProps) {
    {/* Footer */} -
    -
    +
    +

    Image: - same7ammar/kube-composer + same7ammar/kube-composer

    diff --git a/src/components/NamespacesList.tsx b/src/components/NamespacesList.tsx index ed375a7..a0138a2 100644 --- a/src/components/NamespacesList.tsx +++ b/src/components/NamespacesList.tsx @@ -61,7 +61,7 @@ export function NamespacesList({ return (
    {namespaces.map((namespace, index) => ( -
    )} -
    + ))} {namespaces.length === 0 && ( diff --git a/src/components/RolesList.tsx b/src/components/RolesList.tsx index d64c9ca..1eb0fa2 100644 --- a/src/components/RolesList.tsx +++ b/src/components/RolesList.tsx @@ -64,10 +64,10 @@ export function RolesList({ return (
    {roles.map((role, index) => ( -
    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({
    This action cannot be undone.
    )} -
    + ))}
    ); diff --git a/src/components/SecretsList.tsx b/src/components/SecretsList.tsx index 47c9398..9deffa9 100644 --- a/src/components/SecretsList.tsx +++ b/src/components/SecretsList.tsx @@ -80,9 +80,9 @@ export function SecretsList({ return (
    {secrets.map((secret, index) => ( -
    )} -
    + ))}
    ); diff --git a/src/components/ServiceAccountsList.tsx b/src/components/ServiceAccountsList.tsx index 12fa0d3..3fea01b 100644 --- a/src/components/ServiceAccountsList.tsx +++ b/src/components/ServiceAccountsList.tsx @@ -65,9 +65,9 @@ export function ServiceAccountsList({ return (
    {serviceAccounts.map((serviceAccount, index) => ( -
    )} -
    + ))}
    ); diff --git a/src/components/VisualPreview.tsx b/src/components/VisualPreview.tsx index 917b8cb..aed8b54 100644 --- a/src/components/VisualPreview.tsx +++ b/src/components/VisualPreview.tsx @@ -1759,9 +1759,9 @@ export function VisualPreview({ )} {flowNodes.map(node => ( -
    )} -
    + ))}
    {/* YAML Modal */} diff --git a/src/components/jobs/CronJobList.tsx b/src/components/jobs/CronJobList.tsx index bd4e777..2e24611 100644 --- a/src/components/jobs/CronJobList.tsx +++ b/src/components/jobs/CronJobList.tsx @@ -43,9 +43,9 @@ export const CronJobList: React.FC = ({ cronjobs, onDelete, on
    No CronJobs found.
    )} {cronjobs.map((cronjob, index) => ( -
    = ({ cronjobs, onDelete, on
    This action cannot be undone.
    )} -
+ ))}
); diff --git a/src/components/jobs/JobList.tsx b/src/components/jobs/JobList.tsx index 5c3f702..2626150 100644 --- a/src/components/jobs/JobList.tsx +++ b/src/components/jobs/JobList.tsx @@ -43,9 +43,9 @@ export const JobList: React.FC = ({ jobs, onDelete, onEdit, onView
No Jobs found.
)} {jobs.map((job, index) => ( -
= ({ jobs, onDelete, onEdit, onView
This action cannot be undone.
)} -
+ ))}
);