From 41149a9a793c31ab49d7d66b59b4299f9de60d1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Markus=20=C3=96lhafen?= <oelhafenmarkus@gmail.com>
Date: Thu, 3 May 2018 22:51:41 +0200
Subject: [PATCH] feat: update styling of preview resize handles (#410)

* fix(component): update resize pattern ux
* fix(app): remove unneeded comma
* fix(component): adjust resize hover styling
* fix(component): add transition on hover
---
 src/component/container/app.tsx               |  2 +-
 src/lsg/patterns/panes/preview-pane/index.tsx | 24 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/component/container/app.tsx b/src/component/container/app.tsx
index 5dfe8ce74..2bab1fa27 100644
--- a/src/component/container/app.tsx
+++ b/src/component/container/app.tsx
@@ -163,7 +163,7 @@ export class App extends React.Component {
 								key="center"
 								id="preview"
 								previewFrame={`http://localhost:${store.getServerPort()}/preview.html`}
-							/>,
+							/>
 							<SideBar side="right" directionVertical hasBorder>
 								{store.getRightPane() === RightPane.Properties && (
 									<PropertyPane>
diff --git a/src/lsg/patterns/panes/preview-pane/index.tsx b/src/lsg/patterns/panes/preview-pane/index.tsx
index 1affcc5ae..ee6cac2c8 100644
--- a/src/lsg/patterns/panes/preview-pane/index.tsx
+++ b/src/lsg/patterns/panes/preview-pane/index.tsx
@@ -22,9 +22,16 @@ const StyledPreviewWrapper = styled.div`
 `;
 
 const StyledPreviewResizer = styled.div`
-	width: 9px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 11px;
 	height: 100%;
 	cursor: ew-resize;
+	background-color: ${colors.blackAlpha13.toString()};
+	opacity: 0;
+	transition: opacity 0.15s ease-in-out;
+
 	&::after {
 		content: '';
 		position: absolute;
@@ -32,24 +39,31 @@ const StyledPreviewResizer = styled.div`
 		transform: translateY(-50%);
 		height: 36px;
 		width: 3px;
-		margin: 3px;
+		margin: 4px;
 		border-radius: 2px;
 		background: ${colors.grey80.toString()};
 	}
 
 	&:hover {
+		opacity: 1;
 		&::after {
 			background: ${colors.grey60.toString()};
 		}
 	}
 	&:active {
+		opacity: 1;
 		&::after {
-			background: ${colors.blue40.toString()};
+			background: ${colors.white.toString()};
 		}
 	}
+	&:last-of-type {
+		right: 0;
+		left: auto;
+	}
 `;
 
 const BaseStyledPreviewPane = styled.div`
+	position: relative;
 	flex-grow: 1;
 	overflow: hidden;
 	background: ${colors.white.toString()};
@@ -83,11 +97,11 @@ export default class PreviewPane extends React.Component<PreviewPaneProps> {
 				onMouseMove={props.onMouseMove}
 				onMouseUp={props.onMouseUp}
 			>
-				<StyledPreviewResizer onMouseDown={props.onMouseDownLeft} />
 				<StyledPreviewPane width={props.width}>
+					<StyledPreviewResizer onMouseDown={props.onMouseDownLeft} />
 					<StyledPreviewFrame src={props.previewFrame} />
+					<StyledPreviewResizer onMouseDown={props.onMouseDownRight} />
 				</StyledPreviewPane>
-				<StyledPreviewResizer onMouseDown={props.onMouseDownRight} />
 			</StyledPreviewWrapper>
 		);
 	}