playing with tab styles

src/app/app.less

@@ -17,7 +17,7 @@ body {
 
 body {
     &.is-dev .sidebar {
-        background-color: var(--app-panel-bg-color-dev);
+        // background-color: var(--app-panel-bg-color-dev);
     }
 }
 

src/app/sidebar/sidebar.less

@@ -15,12 +15,19 @@
     font-family: var(--label-font-family);
     font-weight: var(--sidebar-font-weight);
 
+    .sidebar-content {
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+    }
+
     .title-bar-drag {
         -webkit-app-region: drag;
         height: calc(var(--screentabs-height) + 1px);
         border-bottom: 1px solid var(--app-border-color);
         position: relative;
         display: flex;
+        flex-shrink: 0;
 
         .logo {
             line-height: 15px;
@@ -47,13 +54,22 @@
     }
 
     .contents {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
         margin-top: 16px;
+        flex-grow: 1;
     }
 
     .separator {
         height: 1px;
         margin: 16px 0;
         background-color: var(--sidebar-separator-color);
+        flex-shrink: 0;
+    }
+
+    .sidebar-spacer {
+        flex-grow: 1;
     }
 
     .item.workspaces-item {
@@ -80,12 +96,32 @@
         }
     }
 
+    .sidebar-logo-div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 100;
+        max-height: 180px;
+        img {
+            filter: grayscale(1);
+            opacity: 0.2;
+            transition: filter 1.5s ease-in-out, opacity 1.5s ease-in-out;
+            max-width: 200px;
+        }
+    }
+
+    &:hover .sidebar-logo-div {
+        img {
+            filter: grayscale(0);
+            opacity: 1;
+        }
+    }
+
     .bottom {
-        position: absolute;
-        bottom: 2rem;
-        left: 0;
+        padding-bottom: 1rem;
         width: 100%;
-        padding-top: 0.8rem;
+        flex-shrink: 0;
     }
 
     .item {

src/app/sidebar/sidebar.tsx

@@ -247,9 +247,9 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
      */
     setMiddleHeightSubtractor() {
         const windowHeight = window.innerHeight;
-        const bottomHeight = windowHeight - window.document.getElementById("sidebar-bottom")?.offsetTop;
+        const bottomHeight = window.document.getElementById("sidebar-bottom")?.offsetHeight;
         const middleTop = document.getElementById("sidebar-middle")?.offsetTop;
-        const newMiddleHeightSubtractor = bottomHeight + middleTop;
+        const newMiddleHeightSubtractor = bottomHeight + middleTop + 200;
         if (!Number.isNaN(newMiddleHeightSubtractor)) {
             mobx.action(() => {
                 this.middleHeightSubtractor.set(newMiddleHeightSubtractor);
@@ -278,14 +278,6 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                 {(toggleCollapse) => (
                     <React.Fragment>
                         <div className="title-bar-drag">
-                            <div className="logo">
-                                <If condition={sidebarWidth > 215}>
-                                    <WaveLogoWord />
-                                </If>
-                                <If condition={sidebarWidth <= 215}>
-                                    <WaveLogo />
-                                </If>
-                            </div>
                             <div className="close-button">
                                 <i className="fa-sharp fa-solid fa-xmark-large" onClick={toggleCollapse} />
                             </div>
@@ -332,6 +324,11 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                             >
                                 {this.getSessions()}
                             </div>
+                            <div className="sidebar-spacer" />
+                            <div className="sidebar-logo-div">
+                                <img src="public/logos/wave-logo.png" alt="logo" />
+                            </div>
+                            <div className="sidebar-spacer" />
                             <div className="bottom" id="sidebar-bottom">
                                 {this.getUpdateAppBanner()}
                                 <If condition={GlobalModel.isDev}>

src/app/workspace/screen/tabs.less

@@ -102,13 +102,21 @@
                 // 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: 2px solid var(--tab-green);
+                opacity: 1;
+                font-weight: var(--screentabs-selected-font-weight);
+            }
+
+            &.is-archived {
+                .fa.fa-archive {
+                    margin-right: 4px;
+                }
+            }
+
             .screen-tab-inner {
                 display: flex;
                 flex-direction: row;
@@ -127,18 +135,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.