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

@@ -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) {

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,
 };

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 */
 	}
 `;

frontend/src/constants/theme.ts

@@ -33,6 +33,8 @@ const themeColors = {
 		rust: '#B33300',
 	},
 	errorColor: '#d32f2f',
+	royalGrey: '#888888',
+	matterhornGrey: '#555555',
 	whiteCream: '#ffffffd5',
 	black: '#000000',
 };