Skip to content

Commit 0a1a743

Browse files
PratikTomarPratikTomar
committed
Feature : Dark Mode | Project Setting dark Mode Enabled
1 parent 2dbaea7 commit 0a1a743

File tree

3 files changed

+80
-54
lines changed

3 files changed

+80
-54
lines changed

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1344,7 +1344,7 @@ function App() {
13441344
<span>Project Settings</span>
13451345
</button>
13461346
{Object.keys(projectSettings.globalLabels).length > 0 && (
1347-
<div className="mt-2 text-xs text-gray-600 text-center">
1347+
<div className="mt-2 text-xs text-gray-600 dark:text-gray-400 text-center">
13481348
{Object.keys(projectSettings.globalLabels).length} global label{Object.keys(projectSettings.globalLabels).length !== 1 ? 's' : ''} active
13491349
</div>
13501350
)}

‎src/components/DeploymentForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -803,7 +803,7 @@ export function DeploymentForm({ config, onChange, availableNamespaces, availabl
803803
{/* Secrets Selection */}
804804
{filteredSecrets.length > 0 && (
805805
<div className="space-y-4 sm:space-y-6">
806-
<div className="flex items-center space-x-2 text-base sm:text-lg font-semibold text-gray-900">
806+
<div className="flex items-center space-x-2 text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100">
807807
<Key className="w-4 sm:w-5 h-4 sm:h-5 text-orange-600" />
808808
<span>Secrets</span>
809809
</div>

‎src/components/ProjectSettingsManager.tsx‎

Lines changed: 78 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,11 @@ export function ProjectSettingsManager({
108108

109109
return (
110110
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
111-
<div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
111+
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
112112
{/* Header */}
113-
<div className="flex items-center justify-between p-6 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
113+
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
114114
<div className="flex items-center space-x-3">
115-
<div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
115+
<div className="w-10 h-10 bg-white/20 dark:bg-gray-800/30 rounded-lg flex items-center justify-center">
116116
<Settings className="w-6 h-6" />
117117
</div>
118118
<div>
@@ -131,74 +131,80 @@ export function ProjectSettingsManager({
131131
{/* Content */}
132132
<div className="flex-1 overflow-y-auto p-6 space-y-6">
133133
{/* Project Information */}
134-
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-200">
134+
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-200 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700">
135135
<div className="flex items-center space-x-2 mb-4">
136-
<FolderOpen className="w-5 h-5 text-blue-600" />
137-
<h4 className="text-lg font-semibold text-blue-900">Project Information</h4>
136+
<FolderOpen className="w-5 h-5 text-blue-600 dark:text-blue-400" />
137+
<h4 className="text-lg font-semibold text-blue-900 dark:text-blue-200">Project Information</h4>
138138
</div>
139139

140140
<div className="space-y-4">
141141
{/* Project Name */}
142142
<div>
143-
<label className="block text-sm font-medium text-gray-700 mb-2">
143+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
144144
Project Name *
145145
</label>
146146
<input
147147
type="text"
148148
value={settings.name}
149149
onChange={(e) => handleProjectNameChange(e.target.value)}
150150
onKeyPress={(e) => handleKeyPress(e, handleSave)}
151-
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
152-
errors.length > 0 ? 'border-red-300' : 'border-gray-300'
151+
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400 ${
152+
errors.length > 0 ? 'border-red-300 dark:border-red-500' : 'border-gray-300 dark:border-gray-700'
153153
}`}
154154
placeholder="my-awesome-project"
155155
/>
156156
{errors.length > 0 && (
157157
<div className="mt-2 space-y-1">
158158
{errors.map((error, index) => (
159-
<div key={index} className="flex items-center space-x-2 text-sm text-red-600">
159+
<div key={index} className="flex items-center space-x-2 text-sm text-red-600 dark:text-red-400">
160160
<AlertTriangle className="w-4 h-4" />
161161
<span>{error}</span>
162162
</div>
163163
))}
164164
</div>
165165
)}
166-
<p className="mt-1 text-xs text-gray-500">
166+
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
167167
This name will be used as a prefix for generated resource names and as a default label
168168
</p>
169169
</div>
170170

171171
{/* Project Description */}
172172
<div>
173-
<label className="block text-sm font-medium text-gray-700 mb-2">
173+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
174174
Description (Optional)
175175
</label>
176176
<textarea
177177
value={settings.description || ''}
178178
onChange={(e) => setSettings(prev => ({ ...prev, description: e.target.value }))}
179-
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
179+
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400"
180180
placeholder="Brief description of your project..."
181181
rows={3}
182182
/>
183183
</div>
184184
</div>
185185
</div>
186186

187-
{/* Global Labels */}
188-
<div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-6 border border-green-200">
187+
{/* Global Labels */}
188+
<div className="bg-gradient-to-r from-green-50 to-emerald-50
189+
rounded-lg p-6 border border-green-200
190+
dark:from-green-900 dark:to-emerald-900
191+
dark:border-green-700">
189192
<div className="flex items-center space-x-2 mb-4">
190-
<Tag className="w-5 h-5 text-green-600" />
191-
<h4 className="text-lg font-semibold text-green-900">Global Labels</h4>
193+
<Tag className="w-5 h-5 text-green-600 dark:text-green-400" />
194+
<h4 className="text-lg font-semibold text-green-900 dark:text-green-200">
195+
Global Labels
196+
</h4>
192197
</div>
193198

194-
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
199+
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4
200+
dark:bg-blue-900/30 dark:border-blue-700">
195201
<div className="flex items-start space-x-2">
196-
<Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
197-
<div className="text-sm text-blue-800">
202+
<Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5 dark:text-blue-400" />
203+
<div className="text-sm text-blue-800 dark:text-blue-200">
198204
<p className="font-medium mb-1">What are Global Labels?</p>
199205
<p>
200-
Global labels are automatically applied to all Kubernetes resources in your project.
201-
They help with organization, filtering, cost allocation, and automation. Common examples
206+
Global labels are automatically applied to all Kubernetes resources in your project.
207+
They help with organization, filtering, cost allocation, and automation. Common examples
202208
include environment, team, version, and component labels.
203209
</p>
204210
</div>
@@ -208,56 +214,67 @@ export function ProjectSettingsManager({
208214
{/* Add New Label */}
209215
<div className="mb-4">
210216
<div className="flex items-center justify-between mb-3">
211-
<label className="block text-sm font-medium text-gray-700">
217+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
212218
Add Global Label
213219
</label>
214220
<button
215221
onClick={addGlobalLabel}
216222
disabled={!newLabel.key || !newLabel.value}
217-
className="inline-flex items-center px-3 py-1 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
223+
className="inline-flex items-center px-3 py-1 bg-green-600 text-white rounded-lg
224+
hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
218225
>
219226
<Plus className="w-4 h-4 mr-1" />
220227
Add
221228
</button>
222229
</div>
223-
230+
224231
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
225232
<input
226233
type="text"
227234
value={newLabel.key}
228-
onChange={(e) => setNewLabel(prev => ({ ...prev, key: e.target.value }))}
235+
onChange={(e) => setNewLabel((prev) => ({ ...prev, key: e.target.value }))}
229236
onKeyPress={(e) => handleKeyPress(e, addGlobalLabel)}
230-
className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
237+
className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent
238+
border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-white
239+
dark:placeholder-gray-400"
231240
placeholder="Label key (e.g., app.kubernetes.io/component)"
232241
/>
233242
<input
234243
type="text"
235244
value={newLabel.value}
236-
onChange={(e) => setNewLabel(prev => ({ ...prev, value: e.target.value }))}
245+
onChange={(e) => setNewLabel((prev) => ({ ...prev, value: e.target.value }))}
237246
onKeyPress={(e) => handleKeyPress(e, addGlobalLabel)}
238-
className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
247+
className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent
248+
border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-white
249+
dark:placeholder-gray-400"
239250
placeholder="Label value (e.g., api)"
240251
/>
241252
</div>
242253
</div>
243254

244255
{/* Common Label Suggestions */}
245256
<div className="mb-4">
246-
<h5 className="text-sm font-medium text-gray-700 mb-2">Common Label Suggestions:</h5>
257+
<h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
258+
Common Label Suggestions:
259+
</h5>
247260
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
248261
{commonLabels.map((label, index) => (
249262
<button
250263
key={index}
251264
onClick={() => setNewLabel({ key: label.key, value: label.value })}
252-
className="text-left p-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200"
265+
className="text-left p-2 bg-white border border-gray-200 rounded-lg
266+
hover:bg-gray-50 transition-colors duration-200
267+
dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
253268
title={label.description}
254269
>
255270
<div className="text-sm">
256-
<span className="font-medium text-green-700">{label.key}</span>
257-
<span className="text-gray-500">: </span>
258-
<span className="text-gray-700">{label.value}</span>
271+
<span className="font-medium text-green-700 dark:text-green-400">{label.key}</span>
272+
<span className="text-gray-500 dark:text-gray-400">: </span>
273+
<span className="text-gray-700 dark:text-gray-400">{label.value}</span>
274+
</div>
275+
<div className="text-xs text-gray-500 mt-1 dark:text-gray-400">
276+
{label.description}
259277
</div>
260-
<div className="text-xs text-gray-500 mt-1">{label.description}</div>
261278
</button>
262279
))}
263280
</div>
@@ -266,21 +283,28 @@ export function ProjectSettingsManager({
266283
{/* Current Global Labels */}
267284
{Object.keys(settings.globalLabels).length > 0 && (
268285
<div>
269-
<h5 className="text-sm font-medium text-gray-700 mb-3">Current Global Labels:</h5>
286+
<h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
287+
Current Global Labels:
288+
</h5>
270289
<div className="space-y-2">
271290
{Object.entries(settings.globalLabels).map(([key, value]) => (
272-
<div key={key} className="flex items-center justify-between bg-white px-4 py-3 rounded-lg border border-gray-200">
291+
<div
292+
key={key}
293+
className="flex items-center justify-between bg-white px-4 py-3 rounded-lg
294+
border border-gray-200 dark:bg-gray-800 dark:border-gray-700"
295+
>
273296
<div className="flex items-center space-x-2">
274-
<Tag className="w-4 h-4 text-green-600" />
297+
<Tag className="w-4 h-4 text-green-600 dark:text-green-400" />
275298
<span className="text-sm">
276-
<span className="font-medium text-gray-900">{key}</span>
277-
<span className="text-gray-500">: </span>
278-
<span className="text-gray-700">{value}</span>
299+
<span className="font-medium text-gray-900 dark:text-gray-100">{key}</span>
300+
<span className="text-gray-500 dark:text-gray-400">: </span>
301+
<span className="text-gray-700 dark:text-gray-400">{value}</span>
279302
</span>
280303
</div>
281304
<button
282305
onClick={() => removeGlobalLabel(key)}
283-
className="text-gray-400 hover:text-red-600 transition-colors duration-200"
306+
className="text-gray-400 hover:text-red-600 transition-colors duration-200
307+
dark:text-gray-600 dark:hover:text-red-600"
284308
title="Remove label"
285309
>
286310
<Trash2 className="w-4 h-4" />
@@ -293,19 +317,21 @@ export function ProjectSettingsManager({
293317

294318
{Object.keys(settings.globalLabels).length === 0 && (
295319
<div className="text-center py-8">
296-
<Tag className="w-12 h-12 text-gray-400 mx-auto mb-4" />
297-
<h5 className="text-lg font-medium text-gray-900 mb-2">No Global Labels</h5>
298-
<p className="text-sm text-gray-500">
320+
<Tag className="w-12 h-12 text-gray-400 mx-auto mb-4 dark:text-gray-300" />
321+
<h5 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
322+
No Global Labels
323+
</h5>
324+
<p className="text-sm text-gray-500 dark:text-gray-400">
299325
Add global labels to automatically apply them to all your Kubernetes resources
300326
</p>
301327
</div>
302328
)}
303329
</div>
304330

305331
{/* Project Metadata */}
306-
<div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
307-
<h5 className="text-sm font-medium text-gray-700 mb-2">Project Metadata</h5>
308-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-gray-600">
332+
<div className="bg-gray-50 rounded-lg p-4 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
333+
<h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Metadata</h5>
334+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-gray-600 dark:text-gray-400">
309335
<div>
310336
<span className="font-medium">Created:</span> {new Date(settings.createdAt).toLocaleString()}
311337
</div>
@@ -317,21 +343,21 @@ export function ProjectSettingsManager({
317343
</div>
318344

319345
{/* Footer */}
320-
<div className="flex items-center justify-between p-6 border-t border-gray-200 bg-gray-50">
321-
<div className="text-sm text-gray-600">
346+
<div className="flex items-center justify-between p-6 border-t border-gray-200 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
347+
<div className="text-sm text-gray-600 dark:text-gray-400">
322348
<p>Global labels will be applied to all deployments, services, and other resources</p>
323349
</div>
324350
<div className="flex items-center space-x-3">
325351
<button
326352
onClick={onClose}
327-
className="px-6 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200"
353+
className="px-6 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200 dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:text-white"
328354
>
329355
Cancel
330356
</button>
331357
<button
332358
onClick={handleSave}
333359
disabled={!settings.name || errors.length > 0}
334-
className="inline-flex items-center px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 font-medium"
360+
className="inline-flex items-center px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 font-medium dark:bg-blue-700 dark:hover:bg-blue-800 dark:hover:text-white"
335361
>
336362
<Save className="w-4 h-4 mr-2" />
337363
Save Settings

0 commit comments

Comments
 (0)