From e561a8b280d887183f600901f5fa8f57cb0833f4 Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Fri, 13 Oct 2023 16:40:34 -0700
Subject: [PATCH] first pass at increasing new-screen click target

---
 src/app/app.less                   | 10 ++++++++++
 src/app/workspace/screen/tabs.less |  6 ++++--
 src/app/workspace/screen/tabs.tsx  |  4 ++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/app.less b/src/app/app.less
index b54c3b5c..c2049e49 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -52,6 +52,16 @@ svg.icon {
     }
 }
 
+.hover-effect-base:hover {
+    cursor: pointer;
+    
+    .hover-effect-target {
+        box-shadow: 0px 2px 2px 0 rgba(255, 255, 255, 0.1), 0px 4px 5px 0 rgba(255, 255, 255, 0.2),
+            0px 0px 5px 2.5px rgba(255, 255, 255, 0.5);
+        transition: box-shadow 0.2s ease;
+    }
+}
+
 .hideScrollbarUntillHover {
     overflow: hidden;
     &:hover,
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less
index 7f34016d..0c358e15 100644
--- a/src/app/workspace/screen/tabs.less
+++ b/src/app/workspace/screen/tabs.less
@@ -141,13 +141,15 @@
     .new-screen {
         width: 3em;
         min-width: 3em;
-        margin-left: 1em;
+        padding-left: 1em;
         cursor: pointer;
-
+        height: 36px;
+        
         .icon {
             width: 1.1em;
             height: 1.1em;
             border-radius: 50%;
+            margin-top: 9px;
         }
     }
 }
diff --git a/src/app/workspace/screen/tabs.tsx b/src/app/workspace/screen/tabs.tsx
index 4390c8dd..29490c97 100644
--- a/src/app/workspace/screen/tabs.tsx
+++ b/src/app/workspace/screen/tabs.tsx
@@ -187,8 +187,8 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
                     <For each="screen" index="index" of={showingScreens}>
                         {this.renderTab(screen, activeScreenId, index)}
                     </For>
-                    <div key="new-screen" className="new-screen" onClick={this.handleNewScreen}>
-                        <AddIcon className="icon hoverEffect" />
+                    <div key="new-screen" className="new-screen hover-effect-base" onClick={this.handleNewScreen}>
+                        <AddIcon className="icon hover-effect-target" />
                     </div>
                 </div>
                 {/**<div className="cmd-hints">