Fix: Improve service dialog theme support

application/src/components/services/add-service/ServiceBasicFields.tsx

@@ -20,7 +20,6 @@ export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
             <FormControl>
               <Input 
                 placeholder="Service Name" 
-                className="bg-black border-gray-700" 
                 {...field} 
               />
             </FormControl>
@@ -38,7 +37,6 @@ export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
             <FormControl>
               <Input 
                 placeholder="https://example.com" 
-                className="bg-black border-gray-700" 
                 {...field}
                 onChange={(e) => {
                   console.log("URL field changed:", e.target.value);
@@ -52,4 +50,4 @@ export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
       />
     </>
   );
-}
+}

application/src/components/services/add-service/ServiceConfigFields.tsx

@@ -21,7 +21,6 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
               <Input 
                 type="number" 
                 placeholder="60" 
-                className="bg-black border-gray-700" 
                 {...field} 
               />
             </FormControl>
@@ -39,7 +38,6 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
               <Input 
                 type="number" 
                 placeholder="3" 
-                className="bg-black border-gray-700" 
                 {...field} 
               />
             </FormControl>
@@ -48,4 +46,4 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
       />
     </>
   );
-}
+}

application/src/components/services/add-service/ServiceFormActions.tsx

@@ -28,14 +28,12 @@ export function ServiceFormActions({
         onClick={handleCancel}
         variant="outline"
         disabled={isSubmitting}
-        className="border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
       >
         Cancel
       </Button>
       <Button 
         type="submit" 
         disabled={isSubmitting}
-        className="bg-primary text-primary-foreground hover:bg-primary/90"
       >
         {isSubmitting ? (
           <>
@@ -48,4 +46,4 @@ export function ServiceFormActions({
       </Button>
     </div>
   );
-}
+}

application/src/components/services/add-service/ServiceNotificationFields.tsx

@@ -82,10 +82,10 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
                   }} 
                   value={displayValue}
                 >
-                  <SelectTrigger className="bg-black border-gray-700">
+                  <SelectTrigger>
                     <SelectValue placeholder="Select a notification channel" />
                   </SelectTrigger>
-                  <SelectContent className="bg-gray-900 text-white border-gray-700">
+                  <SelectContent>
                     <SelectItem value="none">None</SelectItem>
                     {alertConfigs.map((config) => (
                       <SelectItem key={config.id} value={config.id || ""}>
@@ -119,10 +119,10 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
                   }} 
                   value={displayValue}
                 >
-                  <SelectTrigger className="bg-black border-gray-700">
+                  <SelectTrigger>
                     <SelectValue placeholder="Select an alert template" />
                   </SelectTrigger>
-                  <SelectContent className="bg-gray-900 text-white border-gray-700">
+                  <SelectContent>
                     <SelectItem value="default">Default</SelectItem>
                     {templates?.map((template) => (
                       <SelectItem key={template.id} value={template.id}>

application/src/components/services/add-service/ServiceTypeField.tsx

@@ -22,7 +22,7 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
               onValueChange={field.onChange} 
               defaultValue={field.value}
             >
-              <SelectTrigger className="bg-black border-gray-700">
+              <SelectTrigger>
                 <SelectValue>
                   {field.value === "http" && (
                     <div className="flex items-center gap-2">
@@ -33,14 +33,14 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
                   {field.value !== "http" && "Select a service type"}
                 </SelectValue>
               </SelectTrigger>
-              <SelectContent className="bg-gray-900 text-white border-gray-700">
+              <SelectContent>
                 <SelectItem value="http">
                   <div className="flex flex-col">
                     <div className="flex items-center gap-2">
                       <Globe className="w-4 h-4" />
                       <span>HTTP/S</span>
                     </div>
-                    <p className="text-xs text-gray-400 mt-1">
+                    <p className="text-xs text-muted-foreground mt-1">
                       Monitor websites and REST APIs with HTTP/HTTPS protocol
                     </p>
                   </div>
@@ -55,4 +55,4 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
       )}
     />
   );
-}
+}