From 60bb82ea9d9f2f2197a7aa6e118a6bda9d2fee4b Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Wed, 18 May 2022 08:55:08 +0530
Subject: [PATCH] feat: resize handler is visible on hover

---
 .../src/container/GridGraphLayout/index.tsx   | 10 ++++-
 .../src/container/GridGraphLayout/styles.ts   | 45 ++++++++++++-------
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx
index 48d51fd7f0..444c976999 100644
--- a/frontend/src/container/GridGraphLayout/index.tsx
+++ b/frontend/src/container/GridGraphLayout/index.tsx
@@ -28,6 +28,7 @@ function GridGraph(): JSX.Element {
 	const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
+	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
 	const [saveLayoutState, setSaveLayoutState] = useState<State>({
 		loading: false,
 		error: false,
@@ -251,8 +252,13 @@ function GridGraph(): JSX.Element {
 					const isQueryType = type === 'VALUE';
 
 					return (
-						<CardContainer key={rest.i} data-grid={rest}>
-							<Card isQueryType={isQueryType}>
+						<CardContainer
+							isQueryType={isQueryType}
+							isDarkMode={isDarkMode}
+							key={rest.i}
+							data-grid={rest}
+						>
+							<Card isDarkMode={isDarkMode} isQueryType={isQueryType}>
 								<Component />
 							</Card>
 						</CardContainer>
diff --git a/frontend/src/container/GridGraphLayout/styles.ts b/frontend/src/container/GridGraphLayout/styles.ts
index 0b8f4cfc89..880697fbd1 100644
--- a/frontend/src/container/GridGraphLayout/styles.ts
+++ b/frontend/src/container/GridGraphLayout/styles.ts
@@ -1,6 +1,7 @@
 import { Button as ButtonComponent, Card as CardComponent } from 'antd';
+import { StyledCSS } from 'container/GantChart/Trace/styles';
 import RGL, { WidthProvider } from 'react-grid-layout';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const ReactGridLayoutComponent = WidthProvider(RGL);
 
@@ -18,20 +19,34 @@ export const Card = styled(CardComponent)<Props>`
 	}
 `;
 
-export const CardContainer = styled.div`
-	.react-resizable-handle {
-		position: absolute;
-		width: 20px;
-		height: 20px;
-		bottom: 0;
-		right: 0;
-		background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
-		background-position: bottom right;
-		padding: 0 3px 3px 0;
-		background-repeat: no-repeat;
-		background-origin: content-box;
-		box-sizing: border-box;
-		cursor: se-resize;
+interface Props {
+	isDarkMode: boolean;
+}
+
+export const CardContainer = styled.div<Props>`
+	:hover {
+		.react-resizable-handle {
+			position: absolute;
+			width: 20px;
+			height: 20px;
+			bottom: 0;
+			right: 0;
+			background-position: bottom right;
+			padding: 0 3px 3px 0;
+			background-repeat: no-repeat;
+			background-origin: content-box;
+			box-sizing: border-box;
+			cursor: se-resize;
+
+			${({ isDarkMode }): StyledCSS => {
+				const uri = `data:image/svg+xml,%3Csvg viewBox='0 0 6 6' style='background-color:%23ffffff00' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' x='0px' y='0px' width='6px' height='6px'%0A%3E%3Cg opacity='0.302'%3E%3Cpath d='M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z' fill='${
+					isDarkMode ? 'white' : 'grey'
+				}'/%3E%3C/g%3E%3C/svg%3E`;
+
+				return css`
+					background-image: ${(): string => `url("${uri}")`};
+				`;
+			}}
 	}
 `;