From 186632af6909f5fffb2e895cfe166255a06016a5 Mon Sep 17 00:00:00 2001
From: Chintan Sudani <46838508+csudani7@users.noreply.github.com>
Date: Wed, 18 Jan 2023 19:53:45 +0530
Subject: [PATCH] fix: Changed Legends UI & Scrollable (#2078)

* fix: Changed Legends UI & Scrollable

* fix: Changed axis label color

* fix: Changed Legends UI & Scrollable

* chore: Removed other issues changes

* fix: linting issues

* fix: changed fontsize of legend

* fix: changed height of legend

* chore: px is updated to rem

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 frontend/src/components/Graph/Plugin/Legend.ts |  9 +++++----
 frontend/src/components/Graph/index.tsx        |  2 +-
 frontend/src/components/Graph/styles.ts        | 16 ++++++++++++----
 frontend/src/constants/theme.ts                |  2 ++
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Graph/Plugin/Legend.ts b/frontend/src/components/Graph/Plugin/Legend.ts
index b1e9befffd..6d12812ff1 100644
--- a/frontend/src/components/Graph/Plugin/Legend.ts
+++ b/frontend/src/components/Graph/Plugin/Legend.ts
@@ -22,6 +22,7 @@ const getOrCreateLegendList = (
 		listContainer.style.height = '100%';
 		listContainer.style.flexWrap = 'wrap';
 		listContainer.style.justifyContent = 'center';
+		listContainer.style.fontSize = '0.75rem';
 		legendContainer?.appendChild(listContainer);
 	}
 
@@ -59,7 +60,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
 				li.style.cursor = 'pointer';
 				li.style.display = 'flex';
 				li.style.marginLeft = '10px';
-				li.style.marginTop = '5px';
+				// li.style.marginTop = '5px';
 
 				li.onclick = (): void => {
 					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -83,9 +84,9 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
 				boxSpan.style.borderColor = `${item?.strokeStyle}`;
 				boxSpan.style.borderWidth = `${item.lineWidth}px`;
 				boxSpan.style.display = 'inline-block';
-				boxSpan.style.minHeight = '20px';
-				boxSpan.style.marginRight = '10px';
-				boxSpan.style.minWidth = '20px';
+				boxSpan.style.minHeight = '0.75rem';
+				boxSpan.style.marginRight = '0.5rem';
+				boxSpan.style.minWidth = '0.75rem';
 				boxSpan.style.borderRadius = '50%';
 
 				if (item.text) {
diff --git a/frontend/src/components/Graph/index.tsx b/frontend/src/components/Graph/index.tsx
index fe2b5928e2..b51772d62d 100644
--- a/frontend/src/components/Graph/index.tsx
+++ b/frontend/src/components/Graph/index.tsx
@@ -330,7 +330,7 @@ Graph.defaultProps = {
 	yAxisUnit: undefined,
 	forceReRender: undefined,
 	staticLine: undefined,
-	containerHeight: '85%',
+	containerHeight: '90%',
 	onDragSelect: undefined,
 	dragSelectColor: undefined,
 };
diff --git a/frontend/src/components/Graph/styles.ts b/frontend/src/components/Graph/styles.ts
index e0fa56dee1..89b220150e 100644
--- a/frontend/src/components/Graph/styles.ts
+++ b/frontend/src/components/Graph/styles.ts
@@ -1,3 +1,4 @@
+import { themeColors } from 'constants/theme';
 import styled from 'styled-components';
 
 export const LegendsContainer = styled.div`
@@ -5,10 +6,17 @@ export const LegendsContainer = styled.div`
 
 	* {
 		::-webkit-scrollbar {
-			display: none !important;
+			width: 0.5rem;
+		}
+		::-webkit-scrollbar-track {
+			background: transparent;
+		}
+		::-webkit-scrollbar-thumb {
+			background: ${themeColors.royalGrey};
+			border-radius: 0.625rem;
+		}
+		::-webkit-scrollbar-thumb:hover {
+			background: ${themeColors.matterhornGrey};
 		}
-
-		-ms-overflow-style: none !important; /* IE and Edge */
-		scrollbar-width: none !important; /* Firefox */
 	}
 `;
diff --git a/frontend/src/constants/theme.ts b/frontend/src/constants/theme.ts
index 18f1076cf9..7e3bb042f8 100644
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -33,6 +33,8 @@ const themeColors = {
 		rust: '#B33300',
 	},
 	errorColor: '#d32f2f',
+	royalGrey: '#888888',
+	matterhornGrey: '#555555',
 	whiteCream: '#ffffffd5',
 	black: '#000000',
 };