chore: updated styles for dashboard creation modal

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.styles.scss

@@ -68,7 +68,7 @@
 				.template-list-item {
 					display: flex;
 					gap: 8px;
-					padding: 4px 12px;
+					padding: 8px 12px;
 					align-items: center;
 					cursor: pointer;
 					height: 32px;
@@ -76,8 +76,10 @@
 
 					.template-icon {
 						display: flex;
-						height: 14px;
-						width: 14px;
+						height: 20px;
+						width: 20px;
+						border-radius: 2px;
+						padding: 4px;
 						align-items: center;
 						justify-content: center;
 					}
@@ -97,6 +99,17 @@
 					&.active {
 						border-radius: 3px;
 						background: rgba(171, 189, 255, 0.08);
+						position: relative;
+
+						&::before {
+							content: '';
+							position: absolute;
+							top: 0;
+							bottom: 0;
+							left: 0;
+							width: 2px;
+							background: var(--bg-robin-500);
+						}
 					}
 				}
 			}
@@ -159,18 +172,38 @@
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				margin: 24px;
+				padding: 16px;
 				height: calc(100% - 144px);
 				position: relative;
 
-				img {
+				&-container {
+					position: relative;
 					width: 100%;
 					max-width: 100%;
-					padding: 24px;
+					padding: 48px 24px;
+					border-radius: 4px;
 					border: 1px solid var(--bg-ink-50);
-					background: var(--bg-ink-300);
+					background: linear-gradient(98.66deg, #7a97fa 4.42%, #f977ff 96.6%);
 					max-height: 100%;
+
+					&::before {
+						content: '';
+						position: absolute;
+						inset: 0;
+						background: url('/public/Images/grains.png');
+						background-size: contain;
+						background-repeat: repeat;
+						opacity: 0.1;
+					}
+				}
+
+				img {
+					position: relative;
+					width: 100%;
+					max-width: 100%;
+					max-height: 540px;
 					object-fit: contain;
+					border-radius: 4px;
 				}
 			}
 		}

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import './DashboardTemplatesModal.styles.scss';
 
+import { Color } from '@signozhq/design-tokens';
 import { Button, Input, Modal, Typography } from 'antd';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';
@@ -16,7 +17,14 @@ import NginxIcon from 'assets/CustomIcons/NginxIcon';
 import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
 import RedisIcon from 'assets/CustomIcons/RedisIcon';
 import cx from 'classnames';
-import { ConciergeBell, DraftingCompass, Drill, Plus, X } from 'lucide-react';
+import {
+	ConciergeBell,
+	DraftingCompass,
+	Drill,
+	Plus,
+	Search,
+	X,
+} from 'lucide-react';
 import { ChangeEvent, useState } from 'react';
 import { DashboardTemplate } from 'types/api/dashboard/getAll';
 
@@ -162,7 +170,9 @@ export default function DashboardTemplatesModal({
 					<div className="new-dashboard-templates-list">
 						<Input
 							className="new-dashboard-templates-search"
-							placeholder="🔍 Search..."
+							placeholder="Search..."
+							size="middle"
+							prefix={<Search size={12} color={Color.TEXT_VANILLA_400} />}
 							onChange={handleDashboardTemplateSearch}
 						/>
 
@@ -212,10 +222,12 @@ export default function DashboardTemplatesModal({
 						</div>
 
 						<div className="template-preview-image">
-							<img
-								src={selectedDashboardTemplate.previewImage}
-								alt={`${selectedDashboardTemplate.name}-preview`}
-							/>
+							<div className="template-preview-image-container">
+								<img
+									src={selectedDashboardTemplate.previewImage}
+									alt={`${selectedDashboardTemplate.name}-preview`}
+								/>
+							</div>
 						</div>
 					</div>
 				</div>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -7,10 +7,9 @@ import './DashboardList.styles.scss';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
-	Dropdown,
 	Flex,
 	Input,
-	MenuProps,
+	// MenuProps,
 	Modal,
 	Popover,
 	Skeleton,
@@ -47,14 +46,14 @@ import {
 	Ellipsis,
 	EllipsisVertical,
 	Expand,
-	ExternalLink,
+	// ExternalLink,
 	FileJson,
-	Github,
+	// Github,
 	HdmiPort,
-	LayoutGrid,
+	// LayoutGrid,
 	Link2,
 	Plus,
-	Radius,
+	// Radius,
 	RotateCw,
 	Search,
 	SquareArrowOutUpRight,
@@ -71,7 +70,6 @@ import {
 	Key,
 	useCallback,
 	useEffect,
-	useMemo,
 	useRef,
 	useState,
 } from 'react';
@@ -597,61 +595,61 @@ function DashboardsList(): JSX.Element {
 		},
 	];
 
-	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuProps['items'] = [
-			{
-				label: (
-					<div
-						className="create-dashboard-menu-item"
-						onClick={(): void => onModalHandler(false)}
-					>
-						<Radius size={14} /> Import JSON
-					</div>
-				),
-				key: '1',
-			},
-			{
-				label: (
-					<a
-						href="https://signoz.io/docs/dashboards/dashboard-templates/overview/"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<Flex
-							justify="space-between"
-							align="center"
-							style={{ width: '100%' }}
-							gap="small"
-						>
-							<div className="create-dashboard-menu-item">
-								<Github size={14} /> View templates
-							</div>
-							<ExternalLink size={14} />
-						</Flex>
-					</a>
-				),
-				key: '2',
-			},
-		];
+	// const getCreateDashboardItems = useMemo(() => {
+	// 	const menuItems: MenuProps['items'] = [
+	// 		{
+	// 			label: (
+	// 				<div
+	// 					className="create-dashboard-menu-item"
+	// 					onClick={(): void => onModalHandler(false)}
+	// 				>
+	// 					<Radius size={14} /> Import JSON
+	// 				</div>
+	// 			),
+	// 			key: '1',
+	// 		},
+	// 		{
+	// 			label: (
+	// 				<a
+	// 					href="https://signoz.io/docs/dashboards/dashboard-templates/overview/"
+	// 					target="_blank"
+	// 					rel="noopener noreferrer"
+	// 				>
+	// 					<Flex
+	// 						justify="space-between"
+	// 						align="center"
+	// 						style={{ width: '100%' }}
+	// 						gap="small"
+	// 					>
+	// 						<div className="create-dashboard-menu-item">
+	// 							<Github size={14} /> View templates
+	// 						</div>
+	// 						<ExternalLink size={14} />
+	// 					</Flex>
+	// 				</a>
+	// 			),
+	// 			key: '2',
+	// 		},
+	// 	];
 
-		if (createNewDashboard) {
-			menuItems.unshift({
-				label: (
-					<div
-						className="create-dashboard-menu-item"
-						onClick={(): void => {
-							onNewDashboardHandler();
-						}}
-					>
-						<LayoutGrid size={14} /> Create dashboard
-					</div>
-				),
-				key: '0',
-			});
-		}
+	// 	if (createNewDashboard) {
+	// 		menuItems.unshift({
+	// 			label: (
+	// 				<div
+	// 					className="create-dashboard-menu-item"
+	// 					onClick={(): void => {
+	// 						onNewDashboardHandler();
+	// 					}}
+	// 				>
+	// 					<LayoutGrid size={14} /> Create dashboard
+	// 				</div>
+	// 			),
+	// 			key: '0',
+	// 		});
+	// 	}
 
-		return menuItems;
-	}, [createNewDashboard, onNewDashboardHandler]);
+	// 	return menuItems;
+	// }, [createNewDashboard, onNewDashboardHandler]);
 
 	const showPaginationItem = (total: number, range: number[]): JSX.Element => (
 		<>
@@ -763,23 +761,16 @@ function DashboardsList(): JSX.Element {
 
 						{createNewDashboard && (
 							<section className="actions">
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
-									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+								<Button
+									type="text"
+									className="new-dashboard"
+									icon={<Plus size={14} />}
+									onClick={(): void => {
+										logEvent('Dashboard List: New dashboard clicked', {});
+									}}
 								>
-									<Button
-										type="text"
-										className="new-dashboard"
-										icon={<Plus size={14} />}
-										onClick={(): void => {
-											logEvent('Dashboard List: New dashboard clicked', {});
-										}}
-									>
-										New Dashboard
-									</Button>
-								</Dropdown>
+									New Dashboard
+								</Button>
 								<Button
 									type="text"
 									className="learn-more"
@@ -807,23 +798,17 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
-									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+								<Button
+									type="primary"
+									className="periscope-btn primary btn"
+									icon={<Plus size={14} />}
+									onClick={(): void => {
+										logEvent('Dashboard List: New dashboard clicked', {});
+										setShowNewDashboardTemplatesModal(true);
+									}}
 								>
-									<Button
-										type="primary"
-										className="periscope-btn primary btn"
-										icon={<Plus size={14} />}
-										onClick={(): void => {
-											logEvent('Dashboard List: New dashboard clicked', {});
-										}}
-									>
-										New dashboard
-									</Button>
-								</Dropdown>
+									New dashboard
+								</Button>
 							)}
 						</div>