From 5af7d21e4b46a13b83d068e10d4008f9000e9f68 Mon Sep 17 00:00:00 2001
From: Mike Sawka <mike.sawka@gmail.com>
Date: Thu, 29 Feb 2024 14:53:34 -0800
Subject: [PATCH] update to tab highlighting for active tab.  tweak to sidebar
 logo (no name, fix left next to traffic lights) (#358)

---
 src/app/sidebar/sidebar.less       |  5 +++--
 src/app/sidebar/sidebar.tsx        |  7 +------
 src/app/workspace/screen/tabs.less | 33 ++++++++++++++----------------
 3 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index 0b799d9d3..19893e099 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -21,10 +21,11 @@
         border-bottom: 1px solid var(--app-border-color);
         position: relative;
         display: flex;
+        align-items: center;
 
         .logo {
-            line-height: 15px;
-            margin: auto auto;
+            margin-left: 45px;
+            margin-top: 4px;
             svg {
                 width: 88px;
             }
diff --git a/src/app/sidebar/sidebar.tsx b/src/app/sidebar/sidebar.tsx
index f094775f5..11c838538 100644
--- a/src/app/sidebar/sidebar.tsx
+++ b/src/app/sidebar/sidebar.tsx
@@ -279,12 +279,7 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                     <React.Fragment>
                         <div className="title-bar-drag">
                             <div className="logo">
-                                <If condition={sidebarWidth > 215}>
-                                    <WaveLogoWord />
-                                </If>
-                                <If condition={sidebarWidth <= 215}>
-                                    <WaveLogo />
-                                </If>
+                                <WaveLogo />
                             </div>
                             <div className="close-button">
                                 <i className="fa-sharp fa-solid fa-xmark-large" onClick={toggleCollapse} />
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less
index 4b05c3f74..98cca67e1 100644
--- a/src/app/workspace/screen/tabs.less
+++ b/src/app/workspace/screen/tabs.less
@@ -102,13 +102,22 @@
                 // This applies a transparency mask to the background color, as set above, so that it will blend with whatever the theme's background color is.
                 z-index: 1;
                 width: var(--screen-tab-width);
-                mask-image: linear-gradient(
-                    rgba(0, 0, 0, 1),
-                    rgba(0, 0, 0, 0.7) 15%,
-                    rgba(0, 0, 0, 0.5) 30%,
-                    rgba(0, 0, 0, 0) 100%
-                );
+                mask-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 100%);
             }
+
+            &.is-active {
+                border-top: none;
+                opacity: 1;
+                font-weight: var(--screentabs-selected-font-weight);
+                border-top: 2px solid var(--tab-color);
+            }
+
+            &.is-archived {
+                .fa.fa-archive {
+                    margin-right: 4px;
+                }
+            }
+
             .screen-tab-inner {
                 display: flex;
                 flex-direction: row;
@@ -127,18 +136,6 @@
                     flex-grow: 1;
                 }
 
-                &.is-active {
-                    border-top: none;
-                    opacity: 1;
-                    font-weight: var(--screentabs-selected-font-weight);
-                }
-
-                &.is-archived {
-                    .fa.fa-archive {
-                        margin-right: 4px;
-                    }
-                }
-
                 // Only one of these will be visible at a time
                 .end-icons {
                     // This adjusts the position of the icon to account for the default 8px margin on the parent. We want the positional calculations for this icon to assume it is flush with the edge of the screen tab.