Skip to content

Commit 44e4d3a

Browse files
same7ammarsame7ammar
authored
Merge pull request #63 from PratikTomar/feature/issue-62
Feature | Dark Mode For Application | Completed
2 parents a6df538 + e6fd205 commit 44e4d3a

33 files changed

+1068
-945
lines changed

‎src/App.tsx‎

Lines changed: 90 additions & 86 deletions
Large diffs are not rendered by default.

‎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" />

‎src/components/ConfigMapManager.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -135,17 +135,17 @@ export function ConfigMapManager({
135135
};
136136

137137
return (
138-
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
139-
<div className="bg-white rounded-xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col">
138+
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 dark:bg-opacity-80">
139+
<div className="bg-white rounded-xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col dark:bg-gray-900">
140140
{/* Header */}
141-
<div className="flex items-center justify-between p-6 border-b border-gray-200">
141+
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
142142
<div className="flex items-center space-x-3">
143143
<div className="w-10 h-10 bg-green-600 rounded-lg flex items-center justify-center">
144144
<FileText className="w-6 h-6 text-white" />
145145
</div>
146146
<div>
147-
<h3 className="text-xl font-semibold text-gray-900">ConfigMap Manager</h3>
148-
<p className="text-sm text-gray-500">Create and manage Kubernetes ConfigMaps</p>
147+
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">ConfigMap Manager</h3>
148+
<p className="text-sm text-gray-500 dark:text-gray-400">Create and manage Kubernetes ConfigMaps</p>
149149
</div>
150150
</div>
151151
<button
@@ -161,19 +161,19 @@ export function ConfigMapManager({
161161
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
162162
{/* Create New ConfigMap */}
163163
<div className="space-y-4">
164-
<h4 className="text-lg font-semibold text-gray-900">Create New ConfigMap</h4>
164+
<h4 className="text-lg font-semibold text-gray-900 dark:text-white">Create New ConfigMap</h4>
165165

166166
{/* ConfigMap Name */}
167167
<div>
168-
<label className="block text-sm font-medium text-gray-700 mb-2">
168+
<label className="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
169169
ConfigMap Name *
170170
</label>
171171
<input
172172
type="text"
173173
value={newConfigMap.name}
174174
onChange={(e) => handleConfigMapNameChange(e.target.value)}
175175
onKeyPress={(e) => handleKeyPress(e, handleCreateConfigMap)}
176-
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent ${
176+
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent dark:border-gray-600 dark:bg-gray-700 dark:text-white ${
177177
errors.length > 0 ? 'border-red-300' : 'border-gray-300'
178178
}`}
179179
placeholder="my-config"
@@ -192,13 +192,13 @@ export function ConfigMapManager({
192192

193193
{/* Namespace */}
194194
<div>
195-
<label className="block text-sm font-medium text-gray-700 mb-2">
195+
<label className="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
196196
Namespace
197197
</label>
198198
<select
199199
value={newConfigMap.namespace}
200200
onChange={(e) => setNewConfigMap(prev => ({ ...prev, namespace: e.target.value }))}
201-
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
201+
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent dark:border-gray-600 dark:bg-gray-700 dark:text-white"
202202
>
203203
{namespaces.map(namespace => (
204204
<option key={namespace} value={namespace}>
@@ -211,7 +211,7 @@ export function ConfigMapManager({
211211
{/* Data Entries */}
212212
<div>
213213
<div className="flex items-center justify-between mb-3">
214-
<label className="block text-sm font-medium text-gray-700">
214+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
215215
Data *
216216
</label>
217217
<button
@@ -229,13 +229,13 @@ export function ConfigMapManager({
229229
value={newDataEntry.key}
230230
onChange={(e) => setNewDataEntry(prev => ({ ...prev, key: e.target.value }))}
231231
onKeyPress={(e) => handleKeyPress(e, addDataEntry)}
232-
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
232+
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent dark:border-gray-600 dark:bg-gray-700 dark:text-white"
233233
placeholder="config.properties"
234234
/>
235235
<textarea
236236
value={newDataEntry.value}
237237
onChange={(e) => setNewDataEntry(prev => ({ ...prev, value: e.target.value }))}
238-
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
238+
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent dark:border-gray-600 dark:bg-gray-700 dark:text-white"
239239
placeholder="database.host=localhost"
240240
rows={2}
241241
/>
@@ -244,10 +244,10 @@ export function ConfigMapManager({
244244
{Object.entries(newConfigMap.data).length > 0 && (
245245
<div className="space-y-1 max-h-32 overflow-y-auto">
246246
{Object.entries(newConfigMap.data).map(([key, value]) => (
247-
<div key={key} className="flex items-start justify-between bg-gray-50 px-3 py-2 rounded-lg">
247+
<div key={key} className="flex items-start justify-between bg-gray-50 px-3 py-2 rounded-lg dark:bg-gray-700">
248248
<div className="min-w-0 flex-1">
249-
<div className="text-sm font-medium text-gray-900 truncate">{key}</div>
250-
<div className="text-xs text-gray-600 truncate">{value}</div>
249+
<div className="text-sm font-medium text-gray-900 truncate dark:text-white">{key}</div>
250+
<div className="text-xs text-gray-600 truncate dark:text-gray-400">{value}</div>
251251
</div>
252252
<button
253253
onClick={() => removeDataEntry(key)}
@@ -264,7 +264,7 @@ export function ConfigMapManager({
264264
{/* Labels */}
265265
<div>
266266
<div className="flex items-center justify-between mb-3">
267-
<label className="block text-sm font-medium text-gray-700">
267+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
268268
Labels (Optional)
269269
</label>
270270
<button
@@ -282,24 +282,24 @@ export function ConfigMapManager({
282282
value={newLabel.key}
283283
onChange={(e) => setNewLabel(prev => ({ ...prev, key: e.target.value }))}
284284
onKeyPress={(e) => handleKeyPress(e, addLabel)}
285-
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
285+
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent dark:border-gray-600 dark:bg-gray-700 dark:text-white"
286286
placeholder="key"
287287
/>
288288
<input
289289
type="text"
290290
value={newLabel.value}
291291
onChange={(e) => setNewLabel(prev => ({ ...prev, value: e.target.value }))}
292292
onKeyPress={(e) => handleKeyPress(e, addLabel)}
293-
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
293+
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent dark:border-gray-600 dark:bg-gray-700 dark:text-white"
294294
placeholder="value"
295295
/>
296296
</div>
297297

298298
{Object.entries(newConfigMap.labels).length > 0 && (
299299
<div className="space-y-1">
300300
{Object.entries(newConfigMap.labels).map(([key, value]) => (
301-
<div key={key} className="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-lg">
302-
<span className="text-sm text-gray-900">
301+
<div key={key} className="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-lg dark:bg-gray-700">
302+
<span className="text-sm text-gray-900 dark:text-white">
303303
<span className="font-medium">{key}</span>: {value}
304304
</span>
305305
<button
@@ -333,11 +333,11 @@ export function ConfigMapManager({
333333

334334
<div className="space-y-2 max-h-96 overflow-y-auto">
335335
{configMaps.map((configMap) => (
336-
<div key={configMap.name} className="bg-white rounded-lg p-4 border border-gray-200">
336+
<div key={configMap.name} className="bg-white rounded-lg p-4 border border-gray-200 dark:border-gray-700 dark:bg-gray-800">
337337
<div className="flex items-center justify-between mb-2">
338338
<div className="flex items-center space-x-2">
339339
<FileText className="w-4 h-4 text-green-600" />
340-
<span className="font-medium text-gray-900">{configMap.name}</span>
340+
<span className="font-medium text-gray-900 dark:text-white">{configMap.name}</span>
341341
<span className="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">
342342
{configMap.namespace}
343343
</span>
@@ -370,23 +370,23 @@ export function ConfigMapManager({
370370
</div>
371371
</div>
372372

373-
<div className="text-xs text-gray-500 mb-2">
373+
<div className="text-xs text-gray-500 mb-2 dark:text-gray-400">
374374
Created: {new Date(configMap.createdAt).toLocaleDateString()}
375375
</div>
376376

377377
{/* Data Preview */}
378378
{Object.keys(configMap.data).length > 0 && (
379379
<div className="mb-2">
380-
<div className="text-xs text-gray-600 mb-1">Data ({Object.keys(configMap.data).length} entries):</div>
380+
<div className="text-xs text-gray-600 mb-1 dark:text-gray-400">Data ({Object.keys(configMap.data).length} entries):</div>
381381
<div className="space-y-1 max-h-20 overflow-y-auto">
382382
{Object.entries(configMap.data).slice(0, 3).map(([key, value]) => (
383-
<div key={key} className="bg-gray-50 px-2 py-1 rounded text-xs">
384-
<span className="font-medium text-gray-700">{key}</span>
385-
<div className="text-gray-600 truncate">{value}</div>
383+
<div key={key} className="bg-gray-50 px-2 py-1 rounded text-xs dark:bg-gray-700">
384+
<span className="font-medium text-gray-700 dark:text-white">{key}</span>
385+
<div className="text-gray-600 truncate dark:text-gray-400">{value}</div>
386386
</div>
387387
))}
388388
{Object.keys(configMap.data).length > 3 && (
389-
<div className="text-xs text-gray-500 text-center">
389+
<div className="text-xs text-gray-500 text-center dark:text-gray-400">
390390
+{Object.keys(configMap.data).length - 3} more entries
391391
</div>
392392
)}
@@ -397,10 +397,10 @@ export function ConfigMapManager({
397397
{/* Labels */}
398398
{Object.keys(configMap.labels).length > 0 && (
399399
<div className="mb-2">
400-
<div className="text-xs text-gray-600 mb-1">Labels:</div>
400+
<div className="text-xs text-gray-600 mb-1 dark:text-gray-400">Labels:</div>
401401
<div className="flex flex-wrap gap-1">
402402
{Object.entries(configMap.labels).map(([key, value]) => (
403-
<span key={key} className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
403+
<span key={key} className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs dark:bg-blue-700 dark:text-white">
404404
{key}: {value}
405405
</span>
406406
))}
@@ -426,8 +426,8 @@ export function ConfigMapManager({
426426
{configMaps.length === 0 && (
427427
<div className="text-center py-8">
428428
<FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
429-
<h5 className="text-lg font-medium text-gray-900 mb-2">No ConfigMaps</h5>
430-
<p className="text-sm text-gray-500">
429+
<h5 className="text-lg font-medium text-gray-900 mb-2 dark:text-gray-100">No ConfigMaps</h5>
430+
<p className="text-sm text-gray-500 dark:text-gray-400">
431431
Create your first ConfigMap to store configuration data
432432
</p>
433433
</div>
@@ -438,7 +438,7 @@ export function ConfigMapManager({
438438
</div>
439439

440440
{/* Footer */}
441-
<div className="flex items-center justify-end p-6 border-t border-gray-200 bg-gray-50">
441+
<div className="flex items-center justify-end p-6 border-t border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900">
442442
<button
443443
onClick={onClose}
444444
className="px-6 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"

0 commit comments

Comments
 (0)