Skip to content

Commit e6fd205

Browse files
PratikTomarPratikTomar
committed
Feature : Issue-62 | Dark Mode | Made Sidebar boxes more compatible with Dark Mode
1 parent 0a1a743 commit e6fd205

13 files changed

+215
-215
lines changed

‎src/App.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1955,46 +1955,46 @@ function App() {
19551955
<div
19561956
key={i}
19571957
onClick={() => setSelectedRoleBindingIndex(i)}
1958-
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
1958+
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
19591959
${isSelected
19601960
? rb.isClusterRoleBinding
1961-
? 'border-blue-500 bg-blue-50 shadow-md'
1962-
: 'border-purple-500 bg-purple-50 shadow-md'
1963-
: 'border-gray-200 bg-white hover:border-blue-300'}
1961+
? 'border-blue-500 bg-blue-50 shadow-md dark:border-blue-600 dark:bg-blue-600 dark:shadow-blue-600'
1962+
: 'border-purple-500 bg-purple-50 shadow-md dark:border-purple-600 dark:bg-purple-600 dark:shadow-purple-600'
1963+
: 'border-gray-200 bg-white hover:border-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-blue-300 dark:hover:bg-gray-600'}
19641964
`}
19651965
tabIndex={0}
19661966
aria-label={`RoleBinding ${rb.name || '(no name)'}`}
19671967
>
19681968
<div className="flex items-center space-x-2 min-w-0 flex-1 mb-1 justify-between">
19691969
<div className="flex items-center space-x-2 min-w-0">
19701970
<div className="flex-shrink-0">
1971-
<div className={`w-7 h-7 rounded-full flex items-center justify-center border ${rb.isClusterRoleBinding ? 'bg-blue-100 border-blue-300' : 'bg-purple-100 border-purple-300'}`}>
1971+
<div className={`w-7 h-7 rounded-full flex items-center justify-center border ${rb.isClusterRoleBinding ? 'bg-blue-100 border-blue-300 dark:border-blue-600 dark:bg-blue-600 dark:shadow-blue-600' : 'bg-purple-100 border-purple-300 dark:border-purple-600 dark:bg-purple-600 dark:shadow-purple-600'}`}>
19721972
{rb.isClusterRoleBinding ? (
1973-
<Key className="w-4 h-4 text-blue-600" />
1973+
<Key className="w-4 h-4 text-blue-600 dark:text-blue-300" />
19741974
) : (
1975-
<Key className="w-4 h-4 text-purple-600" />
1975+
<Key className="w-4 h-4 text-purple-600 dark:text-purple-300" />
19761976
)}
19771977
</div>
19781978
</div>
19791979
<h4
1980-
className="text-base font-bold text-gray-900 truncate group-hover:text-blue-700"
1980+
className="text-base font-bold text-gray-900 truncate group-hover:text-blue-700 dark:text-gray-100 dark:group-hover:text-blue-400"
19811981
title={rb.name || '(no name)'}
19821982
>
1983-
{rb.name || <span className="italic text-gray-400">(no name)</span>}
1983+
{rb.name || <span className="italic text-gray-400 dark:text-gray-300">(no name)</span>}
19841984
</h4>
19851985
</div>
19861986
<div className="flex items-center space-x-1 flex-shrink-0 ml-2">
19871987
{deleteRoleBindingConfirm === i ? (
19881988
<div className="flex items-center space-x-1" onClick={e => e.stopPropagation()}>
19891989
<button
19901990
onClick={e => { e.stopPropagation(); setDeleteRoleBindingConfirm(null); }}
1991-
className="px-1.5 py-0.5 text-[10px] bg-gray-100 text-gray-600 rounded hover:bg-gray-200 transition-colors duration-200"
1991+
className="px-1.5 py-0.5 text-[10px] bg-gray-100 text-gray-600 rounded hover:bg-gray-200 transition-colors duration-200 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300"
19921992
>
19931993
Cancel
19941994
</button>
19951995
<button
19961996
onClick={e => { e.stopPropagation(); handleDeleteRoleBinding(i); setDeleteRoleBindingConfirm(null); }}
1997-
className="px-1.5 py-0.5 text-[10px] bg-red-600 text-white rounded hover:bg-red-700 transition-colors duration-200 flex items-center space-x-1"
1997+
className="px-1.5 py-0.5 text-[10px] bg-red-600 text-white rounded hover:bg-red-700 transition-colors duration-200 flex items-center space-x-1 dark:bg-red-700 dark:hover:bg-red-800"
19981998
>
19991999
<AlertTriangle className="w-3 h-3" />
20002000
<span>Delete</span>
@@ -2004,23 +2004,23 @@ function App() {
20042004
<>
20052005
<button
20062006
onClick={e => { e.stopPropagation(); handleEditRoleBinding(i); }}
2007-
className="p-1 text-gray-400 hover:text-blue-600 rounded transition-colors duration-200"
2007+
className="p-1 text-gray-400 hover:text-blue-600 rounded transition-colors duration-200 dark:text-gray-300 dark:hover:text-blue-400"
20082008
title="Edit RoleBinding"
20092009
aria-label="Edit RoleBinding"
20102010
>
20112011
<Settings className="w-4 h-4" />
20122012
</button>
20132013
<button
20142014
onClick={e => { e.stopPropagation(); handleDuplicateRoleBinding(i); }}
2015-
className="p-1 text-gray-400 hover:text-green-600 rounded transition-colors duration-200"
2015+
className="p-1 text-gray-400 hover:text-green-600 rounded transition-colors duration-200 dark:text-gray-300 dark:hover:text-green-400"
20162016
title="Duplicate RoleBinding"
20172017
aria-label="Duplicate RoleBinding"
20182018
>
20192019
<Copy className="w-4 h-4" />
20202020
</button>
20212021
<button
20222022
onClick={e => { e.stopPropagation(); setDeleteRoleBindingConfirm(i); }}
2023-
className="p-1 text-gray-400 hover:text-red-600 rounded transition-colors duration-200"
2023+
className="p-1 text-gray-400 hover:text-red-600 rounded transition-colors duration-200 dark:text-gray-300 dark:hover:text-red-400"
20242024
title="Delete RoleBinding"
20252025
aria-label="Delete RoleBinding"
20262026
>
@@ -2031,14 +2031,14 @@ function App() {
20312031
</div>
20322032
</div>
20332033
<div className="pl-9">
2034-
<div className="flex items-center space-x-1 text-[11px] text-gray-500 font-medium mb-0.5">
2034+
<div className="flex items-center space-x-1 text-[11px] text-gray-500 dark:text-gray-300 font-medium mb-0.5">
20352035
<span>{rb.isClusterRoleBinding ? 'ClusterRoleBinding' : 'RoleBinding'}</span>
20362036
<span>•</span>
20372037
<span>{rb.subjects.length} subj</span>
20382038
</div>
2039-
<div className="flex items-center space-x-1 text-[11px] text-gray-600 mb-0.5">
2039+
<div className="flex items-center space-x-1 text-[11px] text-gray-600 dark:text-gray-300 mb-0.5">
20402040
<span className="truncate" title={`Role: ${rb.roleRef.name} (${rb.roleRef.kind})`}>
2041-
<span className="font-semibold">Role:</span> {rb.roleRef.name} <span className="text-gray-400">({rb.roleRef.kind})</span>
2041+
<span className="font-semibold">Role:</span> {rb.roleRef.name} <span className="text-gray-400 dark:text-gray-300">({rb.roleRef.kind})</span>
20422042
</span>
20432043
{!rb.isClusterRoleBinding && rb.namespace && <>
20442044
<span>•</span>
@@ -2047,16 +2047,16 @@ function App() {
20472047
</div>
20482048
<div className="flex items-center space-x-1">
20492049
{!rb.isClusterRoleBinding && (
2050-
<span className="px-1.5 py-0.5 bg-purple-100 text-purple-800 rounded text-[10px] font-semibold tracking-wide border border-purple-200">{rb.namespace}</span>
2050+
<span className="px-1.5 py-0.5 bg-purple-100 text-purple-800 rounded text-[10px] font-semibold tracking-wide border border-purple-200 dark:bg-purple-600 dark:text-purple-100 ">{rb.namespace}</span>
20512051
)}
20522052
{rb.isClusterRoleBinding && (
2053-
<span className="px-1.5 py-0.5 bg-blue-100 text-blue-800 rounded text-[10px] font-semibold tracking-wide border border-blue-200">cluster-wide</span>
2053+
<span className="px-1.5 py-0.5 bg-blue-100 text-blue-800 rounded text-[10px] font-semibold tracking-wide border border-blue-200 dark:bg-blue-600 dark:text-blue-100">cluster-wide</span>
20542054
)}
20552055
</div>
20562056
</div>
20572057
{/* Delete confirmation warning */}
20582058
{deleteRoleBindingConfirm === i && (
2059-
<div className="mt-1 p-1 bg-red-50 border border-red-200 rounded text-[10px] text-red-700">
2059+
<div className="mt-1 p-1 bg-red-50 border border-red-200 rounded text-[10px] text-red-700 dark:bg-red-600 dark:text-red-100">
20602060
<div className="flex items-center space-x-1 mb-1">
20612061
<AlertTriangle className="w-3 h-3" />
20622062
<span className="font-medium">Are you sure?</span>
@@ -2226,7 +2226,7 @@ function App() {
22262226
<button
22272227
type="button"
22282228
onClick={() => setShowForm(false)}
2229-
className="px-6 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
2229+
className="px-6 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-500"
22302230
>
22312231
Cancel
22322232
</button>

‎src/components/ClusterRolesList.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,11 @@ export function ClusterRolesList({
5050
if (clusterRoles.length === 0) {
5151
return (
5252
<div className="p-6 text-center">
53-
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
54-
<Shield className="w-8 h-8 text-gray-400" />
53+
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4 dark:bg-gray-700">
54+
<Shield className="w-8 h-8 text-gray-400 dark:text-gray-100" />
5555
</div>
56-
<h3 className="text-lg font-medium text-gray-900 mb-2">No ClusterRoles</h3>
57-
<p className="text-sm text-gray-500 mb-4">
56+
<h3 className="text-lg font-medium text-gray-900 mb-2 dark:text-gray-100">No ClusterRoles</h3>
57+
<p className="text-sm text-gray-500 mb-4 dark:text-gray-400">
5858
Create cluster-wide RBAC ClusterRoles to manage permissions across your entire cluster
5959
</p>
6060
</div>
@@ -69,25 +69,25 @@ export function ClusterRolesList({
6969
onClick={() => onSelect(index)}
7070
className={`p-3 border rounded-lg cursor-pointer transition-all duration-200 hover:shadow-md ${
7171
selectedIndex === index
72-
? 'border-orange-300 bg-orange-50 shadow-sm'
73-
: 'border-gray-200 bg-white hover:border-gray-300'
72+
? 'border-orange-300 bg-orange-50 shadow-sm dark:border-orange-400 dark:bg-orange-700 dark:shadow-orange-400'
73+
: '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'
7474
}`}
7575
>
7676
<div className="flex items-start justify-between">
7777
<div className="flex items-start space-x-3 min-w-0 flex-1">
7878
<div className="flex-shrink-0 mt-0.5">
79-
<Shield className="w-4 h-4 text-orange-600" />
79+
<Shield className="w-4 h-4 text-orange-600 dark:text-orange-400" />
8080
</div>
8181
<div className="min-w-0 flex-1">
8282
<div className="flex items-center space-x-2 mb-1">
83-
<h4 className="text-sm font-medium text-gray-900 truncate">
83+
<h4 className="text-sm font-medium text-gray-900 truncate dark:text-gray-100">
8484
{clusterRole.metadata.name}
8585
</h4>
86-
<span className="px-2 py-1 bg-orange-100 text-orange-800 rounded text-xs font-medium">
86+
<span className="px-2 py-1 bg-orange-100 text-orange-800 rounded text-xs font-medium dark:bg-orange-600 dark:text-orange-100">
8787
cluster-wide
8888
</span>
8989
</div>
90-
<div className="flex items-center space-x-4 text-xs text-gray-500">
90+
<div className="flex items-center space-x-4 text-xs text-gray-500 dark:text-gray-300">
9191
<div className="flex items-center space-x-1">
9292
<Users className="w-3 h-3" />
9393
<span>{clusterRole.rules.length} rule{clusterRole.rules.length !== 1 ? 's' : ''}</span>
@@ -103,14 +103,14 @@ export function ClusterRolesList({
103103
{/* API Groups Preview */}
104104
{clusterRole.rules.length > 0 && (
105105
<div className="mt-2">
106-
<div className="text-xs text-gray-500 mb-1">API Groups:</div>
106+
<div className="text-xs text-gray-500 mb-1 dark:text-gray-300">API Groups:</div>
107107
<div className="flex flex-wrap gap-1">
108108
{Array.from(new Set(clusterRole.rules.flatMap(rule => rule.apiGroups)))
109109
.slice(0, 3)
110110
.map((apiGroup, idx) => (
111111
<span
112112
key={idx}
113-
className="px-1.5 py-0.5 bg-gray-100 text-gray-700 rounded text-xs"
113+
className="px-1.5 py-0.5 bg-gray-100 text-gray-700 rounded text-xs dark:bg-gray-600 dark:text-gray-100"
114114
>
115115
{apiGroup === '' ? 'core' : apiGroup}
116116
</span>
@@ -146,14 +146,14 @@ export function ClusterRolesList({
146146
<div className="flex items-center space-x-1" onClick={(e) => e.stopPropagation()}>
147147
<button
148148
onClick={(e) => handleConfirmDelete(clusterRole.metadata.name, e)}
149-
className="p-1.5 text-white bg-red-600 hover:bg-red-700 rounded transition-colors"
149+
className="p-1.5 text-white bg-red-600 hover:bg-red-700 rounded transition-colors dark:bg-red-700 dark:hover:bg-red-800"
150150
title="Confirm delete"
151151
>
152152
<Trash2 className="w-3.5 h-3.5" />
153153
</button>
154154
<button
155155
onClick={handleCancelDelete}
156-
className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
156+
className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors dark:bg-gray-600 dark:hover:bg-gray-500"
157157
title="Cancel delete"
158158
>
159159
<AlertTriangle className="w-3.5 h-3.5" />
@@ -162,7 +162,7 @@ export function ClusterRolesList({
162162
) : (
163163
<button
164164
onClick={(e) => handleDeleteClick(clusterRole.metadata.name, e)}
165-
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
165+
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors dark:bg-gray-600 dark:hover:bg-gray-500"
166166
title="Delete ClusterRole"
167167
>
168168
<Trash2 className="w-3.5 h-3.5" />

0 commit comments

Comments
 (0)