From 3647aa62743272934709e615640f902b7d0da5ef Mon Sep 17 00:00:00 2001
From: Joni Juup <jonijuup@gmail.com>
Date: Wed, 2 Feb 2022 12:39:08 +0200
Subject: [PATCH] adjusted gutter sizes and highlight style

---
 pages/deploy/[[...slug]].tsx  |  2 ++
 pages/develop/[[...slug]].tsx |  1 +
 pages/test/[[...slug]].tsx    |  2 ++
 styles/globals.css            | 19 ++++++++-----------
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/pages/deploy/[[...slug]].tsx b/pages/deploy/[[...slug]].tsx
index 5b4aabe..1614fa6 100644
--- a/pages/deploy/[[...slug]].tsx
+++ b/pages/deploy/[[...slug]].tsx
@@ -22,6 +22,7 @@ const Deploy = () => {
     <Split
       direction="vertical"
       gutterSize={4}
+      gutterAlign="center"
       sizes={[40, 60]}
       style={{ height: "calc(100vh - 60px)" }}
     >
@@ -33,6 +34,7 @@ const Deploy = () => {
         sizes={[50, 50]}
         minSize={[320, 160]}
         gutterSize={4}
+        gutterAlign="center"
         style={{
           display: "flex",
           flexDirection: "row",
diff --git a/pages/develop/[[...slug]].tsx b/pages/develop/[[...slug]].tsx
index 37d3987..d094997 100644
--- a/pages/develop/[[...slug]].tsx
+++ b/pages/develop/[[...slug]].tsx
@@ -26,6 +26,7 @@ const Home: NextPage = () => {
       direction="vertical"
       sizes={[70, 30]}
       minSize={[100, 100]}
+      gutterAlign="center"
       gutterSize={4}
       style={{ height: "calc(100vh - 60px)" }}
     >
diff --git a/pages/test/[[...slug]].tsx b/pages/test/[[...slug]].tsx
index 6e1c496..2d0bdeb 100644
--- a/pages/test/[[...slug]].tsx
+++ b/pages/test/[[...slug]].tsx
@@ -357,6 +357,7 @@ const Test = () => {
         direction="vertical"
         sizes={[50, 50]}
         gutterSize={4}
+        gutterAlign="center"
         style={{ height: "calc(100vh - 60px)" }}
       >
         <Flex
@@ -411,6 +412,7 @@ const Test = () => {
             sizes={[50, 50]}
             minSize={[320, 160]}
             gutterSize={4}
+            gutterAlign="center"
             style={{
               display: "flex",
               flexDirection: "row",
diff --git a/styles/globals.css b/styles/globals.css
index 9312c0f..67f83a5 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -15,30 +15,27 @@ body,
 
 .gutter {
   position: relative;
-  transition: border-color 0.3s;
+  transition: border-color 0.3s, background-color 0.3s;
 }
+
 .gutter-vertical {
-  border-bottom: 1px solid transparent;
-  margin-top: -5px;
-  padding-top: 4px;
+  margin-top: -4px;
 }
 .gutter-horizontal {
-  border-right: 1px solid transparent;
-  margin-left: -5px;
-  padding-left: 4px;
+  margin-left: -4px;
 }
 .gutter-vertical:hover {
   cursor: row-resize;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.25);
 }
 html.light .gutter-vertical:hover {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.25);
 }
 .gutter-horizontal:hover {
   cursor: col-resize;
-  border-right: 1px solid rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.25);
 }
 
 html.light .gutter-horizontal:hover {
-  border-right: 1px solid rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.25);
 }