From 8f6f2f0018c720d788dcf37311e12862ac10a9a8 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Thu, 4 Apr 2024 18:47:41 +0530
Subject: [PATCH] feat: views toolbar visibility, light mode (#4813)

---
 .../ExplorerOptions/ExplorerOptions.tsx       | 20 ++++++-------------
 .../SideNav/NavItem/NavItem.styles.scss       |  7 ++-----
 .../src/container/SideNav/SideNav.styles.scss |  4 ++--
 3 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
index 635d085e1e..ff186409e3 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -381,21 +381,13 @@ function ExplorerOptions({
 					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
 
 					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-						<Tooltip title="Create Alerts">
-							<Button
-								disabled={disabled}
-								shape="circle"
-								onClick={onCreateAlertsHandler}
-							>
-								<ConciergeBell size={16} />
-							</Button>
-						</Tooltip>
+						<Button disabled={disabled} shape="round" onClick={onCreateAlertsHandler}>
+							<ConciergeBell size={16} /> Create an Alert
+						</Button>
 
-						<Tooltip title="Add to Dashboard">
-							<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
-								<Plus size={16} />
-							</Button>
-						</Tooltip>
+						<Button disabled={disabled} shape="round" onClick={onAddToDashboard}>
+							<Plus size={16} /> Add to Dashboard
+						</Button>
 
 						<Tooltip title="Hide">
 							<Button disabled={disabled} shape="circle" onClick={hideToolbar}>
diff --git a/frontend/src/container/SideNav/NavItem/NavItem.styles.scss b/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
index fe5952d400..1e4d7c1aec 100644
--- a/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
+++ b/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
@@ -44,8 +44,6 @@
 	.nav-item-data {
 		flex-grow: 1;
 
-		max-width: calc(100% - 24px);
-
 		display: flex;
 		margin: 0px 8px;
 		padding: 4px 12px;
@@ -94,15 +92,14 @@
 			.nav-item-data {
 				color: #121317;
 
-				background: white;
+				background: var(--bg-vanilla-300);
 			}
 		}
 
 		&.active {
 			.nav-item-data {
 				color: #121317;
-				background: white;
-				// color: #4e74f8;
+				background: var(--bg-vanilla-300);
 			}
 		}
 
diff --git a/frontend/src/container/SideNav/SideNav.styles.scss b/frontend/src/container/SideNav/SideNav.styles.scss
index 5aa336f3c8..c770652724 100644
--- a/frontend/src/container/SideNav/SideNav.styles.scss
+++ b/frontend/src/container/SideNav/SideNav.styles.scss
@@ -87,7 +87,7 @@
 
 	.get-started-nav-items {
 		display: flex;
-		margin: 4px 13px 4px 10px;
+		margin: 4px 8px 4px 10px;
 
 		.get-started-btn {
 			display: flex;
@@ -130,7 +130,7 @@
 			left: 0;
 			width: 64px;
 
-			transition: all 0.3s, background 0s, border 0s;
+			transition: all 0.2s, background 0s, border 0s;
 
 			&::-webkit-scrollbar {
 				width: 0.1rem;