From 44ff1517d12fe8c6a9c0bd9d7160f806d9f96177 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Fri, 1 Mar 2024 15:20:21 +0530
Subject: [PATCH] fix: update date picker styles (#4635)

---
 .../CustomTimePickerPopoverContent.tsx               | 11 +++++++++--
 .../DateTimeSelectionV2.styles.scss                  | 12 +++++++++---
 .../container/TopNav/DateTimeSelectionV2/config.ts   |  2 +-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx b/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
index 3141158f7f..8fafe40b00 100644
--- a/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
@@ -112,7 +112,14 @@ function CustomTimePickerPopoverContent({
 					</Button>
 				))}
 			</div>
-			<div className="relative-date-time">
+			<div
+				className={cx(
+					'relative-date-time',
+					selectedTime === 'custom' || customDateTimeVisible
+						? 'date-picker'
+						: 'relative-times',
+				)}
+			>
 				{selectedTime === 'custom' || customDateTimeVisible ? (
 					<RangePicker
 						disabledDate={disabledDate}
@@ -124,7 +131,7 @@ function CustomTimePickerPopoverContent({
 						})}
 					/>
 				) : (
-					<div>
+					<div className="relative-times-container">
 						<div className="time-heading">RELATIVE TIMES</div>
 						<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
 					</div>
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss b/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
index 73688ad109..d02df41929 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
@@ -58,8 +58,6 @@
 
 .date-time-root {
 	.ant-popover-inner {
-		width: 532px;
-		min-height: 334px;
 		border-radius: 4px !important;
 		border: 1px solid var(--bg-slate-400);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2) !important;
@@ -129,12 +127,20 @@
 	}
 
 	.relative-date-time {
-		width: 307px;
 		display: flex;
 		flex-direction: column;
 		gap: 35px;
 		padding: 13px 14px;
 
+		&.date-picker {
+			width: 340px;
+			height: 380px;
+		}
+
+		&.relative-times {
+			width: 320px;
+		}
+
 		.relative-date-time-section {
 			display: flex;
 			gap: 6px;
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
index becd3fed7b..383b9eef2c 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
@@ -53,7 +53,7 @@ export const Options: Option[] = [
 	{ value: '1day', label: 'Last 1 day' },
 	{ value: '3days', label: 'Last 3 days' },
 	{ value: '1week', label: 'Last 1 week' },
-	{ value: 'custom', label: 'Custom...' },
+	{ value: 'custom', label: 'Custom' },
 ];
 
 export interface Option {