Merge pull request #1976 from bluewave-labs/fix/UI-fixes

Fix/UI fixes

src/Components/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx

@@ -10,7 +10,6 @@ import {
   Box,
   Tabs,
   Tab,
-  CircularProgress
 } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import TabPanel from "./TabPanel";
@@ -311,7 +310,7 @@ const NotificationIntegrationModal = ({
           sx={{ 
             width: 'auto', 
             minWidth: theme.spacing(60), 
-            px: theme.spacing(8) 
+            px: theme.spacing(8)
           }}
         >
           {t('commonSave')}

src/Components/NotificationIntegrationModal/Hooks/useNotification.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { toast } from 'react-toastify';
 import { useTranslation } from "react-i18next";
 import { networkService } from '../../../Utils/NetworkService'; 
+import { createToast } from '../../../Utils/toastUtils';
 
 // Define constants for notification types to avoid magic values
 const NOTIFICATION_TYPES = {
@@ -84,7 +84,10 @@ const useNotifications = () => {
 
     // If validation fails, show error and return
     if (isValid === false) {
-      toast.error(errorMessage);
+      createToast({
+        body: errorMessage,
+        variant: "error"
+      });
       setLoading(false);
       return;
     }
@@ -96,13 +99,19 @@ const useNotifications = () => {
       });
       
       if (response.data.success === true) {
-        toast.success(t('notifications.testSuccess'));
+        createToast({
+          body: t('notifications.testSuccess'),
+          variant: "info"
+        });
       } else {
         throw new Error(response.data.msg || t('notifications.testFailed'));
       }
     } catch (error) {
       const errorMsg = error.response?.data?.msg || error.message || t('notifications.networkError');
-      toast.error(`${t('notifications.testFailed')}: ${errorMsg}`);
+      createToast({
+        body: `${t('notifications.testFailed')}: ${errorMsg}`,
+        variant: "error"
+      });
       setError(errorMsg);
     } finally {
       setLoading(false);

src/Utils/Theme/globalTheme.js

@@ -122,7 +122,7 @@ const baseTheme = (palette) => ({
 							props: { variant: 'text', color: 'info' },
 							style: {
 							  textDecoration: 'underline',
-							  color: theme.palette.text.primary,
+							  color: theme.palette.primary.contrastText,
 							  padding: 0,
 							  margin: 0,
 							  fontSize: typographyLevels.m,
@@ -133,10 +133,11 @@ const baseTheme = (palette) => ({
 								textDecoration: 'underline'
 							  },
 							  "&.Mui-disabled": {
-								backgroundColor: theme.palette.secondary.main,
-								color: theme.palette.primary.contrastText,
+								backgroundColor: 'transparent',
+								color: theme.palette.text.primary,
+								opacity: 0.5,  
 								"&.MuiButton-text": {
-									backgroundColor: 'transparent'
+								  backgroundColor: 'transparent'
 								}
 							  },
 							  minWidth: 0,
@@ -554,9 +555,6 @@ const baseTheme = (palette) => ({
 			styleOverrides: {
 				root: ({ theme }) => ({
 					backgroundColor: theme.palette.primary.main,
-					"& .MuiButton-root": {
-						color: theme.palette.primary.contrastText,
-					},
 				}),
 			},
 		},

src/locales/gb.json

@@ -147,17 +147,23 @@
     "enableNotifications": "Enable {{platform}} notifications",
     "testNotification": "Test notification",
     "addOrEditNotifications": "Add or edit notifications",
+    "testSuccess": "Test notification sent successfully!",
+    "testFailed": "Failed to send test notification",
+    "unsupportedType": "Unsupported notification type",
+    "networkError": "Network error occurred",
     "slack": {
       "label": "Slack",
       "description": "To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.",
       "webhookLabel": "Webhook URL",
-      "webhookPlaceholder": "https://hooks.slack.com/services/..."
+      "webhookPlaceholder": "https://hooks.slack.com/services/...",
+      "webhookRequired": "Slack webhook URL is required"
     },
     "discord": {
       "label": "Discord",
       "description": "To send data to a Discord channel from Checkmate via Discord notifications using webhooks, you can use Discord's incoming Webhooks feature.",
       "webhookLabel": "Discord Webhook URL",
-      "webhookPlaceholder": "https://discord.com/api/webhooks/..."
+      "webhookPlaceholder": "https://discord.com/api/webhooks/...",
+      "webhookRequired": "Discord webhook URL is required"
     },
     "telegram": {
       "label": "Telegram",
@@ -165,13 +171,15 @@
       "tokenLabel": "Your bot token",
       "tokenPlaceholder": "123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11",
       "chatIdLabel": "Your Chat ID",
-      "chatIdPlaceholder": "-1001234567890"
+      "chatIdPlaceholder": "-1001234567890",
+      "fieldsRequired": "Telegram token and chat ID are required"
     },
     "webhook": {
       "label": "Webhooks",
       "description": "You can set up a custom webhook to receive notifications when incidents occur.",
       "urlLabel": "Webhook URL",
-      "urlPlaceholder": "https://your-server.com/webhook"
+      "urlPlaceholder": "https://your-server.com/webhook",
+      "urlRequired": "Webhook URL is required"
     },
     "testNotificationDevelop": "Test notification 2",
     "integrationButton": "Notification Integration"