From d6cd15598880bf48e8fe52193a133472d3c887be Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Mon, 8 Apr 2024 10:52:58 +0530
Subject: [PATCH] feat: update styles for toolbar (#4824)

---
 .../ExplorerOptions.styles.scss               |  5 +--
 .../ExplorerOptions/ExplorerOptions.tsx       | 31 ++++++++++++++-----
 .../GridCardLayout/GridCardLayout.styles.scss |  8 ++++-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
index cddeb356b8..eb57c1e6df 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@@ -37,7 +37,6 @@
 	}
 }
 
-	
 .explorer-options {
 	position: fixed;
 	bottom: 24px;
@@ -78,11 +77,9 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			gap: 8px;
+			border: none;
 
 			border: 1px solid #1d2023;
-			color: #c0c1c3;
-			background-color: #161922;
 
 			box-shadow: none !important;
 
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
index ff186409e3..5c68bc8a0d 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -373,26 +373,41 @@ function ExplorerOptions({
 							onClick={handleSaveViewModalToggle}
 							className={isEditDeleteSupported ? '' : 'hidden'}
 							disabled={viewsIsLoading || isRefetching}
+							icon={<Disc3 size={16} />}
 						>
-							<Disc3 size={16} /> Save this view
+							Save this view
 						</Button>
 					</div>
 
 					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
 
 					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-						<Button disabled={disabled} shape="round" onClick={onCreateAlertsHandler}>
-							<ConciergeBell size={16} /> Create an Alert
+						<Button
+							disabled={disabled}
+							shape="round"
+							onClick={onCreateAlertsHandler}
+							icon={<ConciergeBell size={16} />}
+						>
+							Create an Alert
 						</Button>
 
-						<Button disabled={disabled} shape="round" onClick={onAddToDashboard}>
-							<Plus size={16} /> Add to Dashboard
+						<Button
+							type="primary"
+							disabled={disabled}
+							shape="round"
+							onClick={onAddToDashboard}
+							icon={<Plus size={16} />}
+						>
+							Add to Dashboard
 						</Button>
 
 						<Tooltip title="Hide">
-							<Button disabled={disabled} shape="circle" onClick={hideToolbar}>
-								<PanelBottomClose size={16} />
-							</Button>
+							<Button
+								disabled={disabled}
+								shape="circle"
+								onClick={hideToolbar}
+								icon={<PanelBottomClose size={16} />}
+							/>
 						</Tooltip>
 					</div>
 				</div>
diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
index 4b27dbda43..7aef8ee0f0 100644
--- a/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
@@ -5,6 +5,12 @@
 	.react-grid-layout {
 		border: none !important;
 		margin-top: 0;
+
+		.widget-graph-container {
+			&.graph {
+				height: 100%;
+			}
+		}
 	}
 }
 
@@ -23,7 +29,7 @@
 		.ant-modal-header {
 			background-color: var(--bg-ink-400);
 		}
-	}	
+	}
 }
 
 .lightMode {