From 90d7f0200aa4852fc1ab3911547fe4193c97fe13 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Mon, 4 Mar 2024 17:42:17 +0530
Subject: [PATCH] FE: updated routes and modal for create alert css (#4602)

* refactor: updated routes and modal for create alert css

* refactor: button color changed

* refactor: redirect old routes to new routes
---
 frontend/public/locales/en/titles.json        |  4 +-
 frontend/src/AppRoutes/routes.ts              |  4 ++
 frontend/src/constants/routes.ts              |  4 +-
 .../FormAlertRules/FormAlertRules.styles.scss | 45 +++++++++++++++++++
 .../src/container/FormAlertRules/index.tsx    |  3 ++
 5 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/container/FormAlertRules/FormAlertRules.styles.scss

diff --git a/frontend/public/locales/en/titles.json b/frontend/public/locales/en/titles.json
index 85da13a12a..204ce0c479 100644
--- a/frontend/public/locales/en/titles.json
+++ b/frontend/public/locales/en/titles.json
@@ -40,8 +40,8 @@
 	"LIST_LICENSES": "SigNoz | List of Licenses",
 	"WORKSPACE_LOCKED": "SigNoz | Workspace Locked",
 	"SUPPORT": "SigNoz | Support",
-	"LOGS_SAVE_VIEWS": "SigNoz | Logs Save Views",
-	"TRACES_SAVE_VIEWS": "SigNoz | Traces Save Views",
+	"LOGS_SAVE_VIEWS": "SigNoz | Logs Saved Views",
+	"TRACES_SAVE_VIEWS": "SigNoz | Traces Saved Views",
 	"DEFAULT": "Open source Observability Platform | SigNoz",
 	"SHORTCUTS": "SigNoz | Shortcuts"
 }
diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts
index c0332448e7..1115360883 100644
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -358,6 +358,8 @@ export const oldRoutes = [
 	'/logs/old-logs-explorer',
 	'/logs-explorer',
 	'/logs-explorer/live',
+	'/logs-save-views',
+	'/traces-save-views',
 	'/settings/api-keys',
 ];
 
@@ -366,6 +368,8 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/logs/old-logs-explorer': '/logs/old-logs-explorer',
 	'/logs-explorer': '/logs/logs-explorer',
 	'/logs-explorer/live': '/logs/logs-explorer/live',
+	'/logs-save-views': '/logs/saved-views',
+	'/traces-save-views': '/traces/saved-views',
 	'/settings/api-keys': '/settings/access-tokens',
 };
 
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 2f7c650912..afa2b60dd2 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -42,8 +42,8 @@ const ROUTES = {
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/billing',
 	SUPPORT: '/support',
-	LOGS_SAVE_VIEWS: '/logs-save-views',
-	TRACES_SAVE_VIEWS: '/traces-save-views',
+	LOGS_SAVE_VIEWS: '/logs/saved-views',
+	TRACES_SAVE_VIEWS: '/traces/saved-views',
 	WORKSPACE_LOCKED: '/workspace-locked',
 	SHORTCUTS: '/shortcuts',
 } as const;
diff --git a/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss b/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
new file mode 100644
index 0000000000..4ebb81c146
--- /dev/null
+++ b/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
@@ -0,0 +1,45 @@
+.create-alert-modal {
+   .ant-modal-content {
+        background-color: var(--bg-ink-300);
+        .ant-modal-confirm-title {
+            color: var(--bg-vanilla-100);
+        }
+
+        .ant-modal-confirm-content {
+            .ant-typography {
+                color: var(--bg-vanilla-100);
+            }
+        }
+
+        .ant-modal-confirm-btns {
+            button:nth-of-type(1) {
+                background-color: var(--bg-slate-400);
+                border: none;
+                color: var(--bg-vanilla-100);
+            }
+        }
+   } 
+}
+
+.lightMode {
+    .ant-modal-content {
+        background-color: var(--bg-vanilla-100);
+        .ant-modal-confirm-title {
+            color: var(--bg-ink-500);
+        }
+
+        .ant-modal-confirm-content {
+            .ant-typography {
+                color: var(--bg-ink-500);
+            }
+        }
+
+        .ant-modal-confirm-btns {
+            button:nth-of-type(1) {
+                background-color: var(--bg-vanilla-300);
+                border: none;
+                color: var(--bg-ink-500);
+            }
+        }
+   }  
+}
\ No newline at end of file
diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx
index 9fbafc14ff..09d4a957a7 100644
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -1,3 +1,5 @@
+import './FormAlertRules.styles.scss';
+
 import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
 import {
 	Col,
@@ -373,6 +375,7 @@ function FormAlertRules({
 			centered: true,
 			content,
 			onOk: saveRule,
+			className: 'create-alert-modal',
 		});
 	}, [t, saveRule, currentQuery]);