From c7b77608a2523343b4e6a7582d1ef0d60a27b957 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Fri, 15 Mar 2024 09:54:39 -0700
Subject: [PATCH] Small UI tweaks (#467)

* Extend bottom border for mainview underneath window controls

* Make sidebar button hover color an accent color

* revert 87 to 88

* make mint less bright on light mode

* revert modal border change
---
 public/themes/default.css             |  4 ++--
 public/themes/light.css               |  3 +--
 src/app/common/elements/mainview.less | 13 ++++++++-----
 src/app/common/elements/mainview.tsx  |  2 +-
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/public/themes/default.css b/public/themes/default.css
index 731ca04d..a7c1ceb5 100644
--- a/public/themes/default.css
+++ b/public/themes/default.css
@@ -51,7 +51,7 @@
     /* global colors */
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
-    --app-accent-bg-color: rgba(88, 193, 66, 0.2);
+    --app-accent-bg-color: rgba(88, 193, 66, 0.25);
     --app-error-color: rgb(229, 77, 46);
     --app-warning-color: rgb(224, 185, 86);
     --app-success-color: rgb(78, 154, 6);
@@ -222,5 +222,5 @@
     --modal-bg-color: var(--app-bg-color);
     --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
 
-    --logo-button-hover-bg-color: #1e1e1e;
+    --logo-button-hover-bg-color: var(--app-accent-bg-color);
 }
diff --git a/public/themes/light.css b/public/themes/light.css
index d6b22832..70179e14 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -23,6 +23,7 @@
 
     /* tab color */
     --tab-white: rgb(0, 0, 0, 0.6);
+    --tab-mint: rgb(70, 235, 156);
 
     /* button colors */
     --button-text-color: rgb(50, 50, 50); /* Dark gray for light theme */
@@ -72,6 +73,4 @@
 
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);
-
-    --logo-button-hover-bg-color: #f0f0f0;
 }
diff --git a/src/app/common/elements/mainview.less b/src/app/common/elements/mainview.less
index 224c6a2d..e5ff15b7 100644
--- a/src/app/common/elements/mainview.less
+++ b/src/app/common/elements/mainview.less
@@ -9,6 +9,10 @@
         display: none;
     }
 
+    .header-container {
+        border-bottom: 1px solid var(--app-border-color);
+    }
+
     .header {
         -webkit-app-region: drag;
         display: flex;
@@ -18,7 +22,6 @@
         vertical-align: middle;
         padding: 0 10px 0 10px;
         margin: 0;
-        border-bottom: 1px solid var(--app-border-color);
 
         .title {
             font-size: var(--title-font-size);
@@ -42,10 +45,10 @@
 
 // This ensures the tab bar does not collide with the floating logo. The floating logo sits above the sidebar when it is not collapsed, so no additional margin is needed in that case.
 // More margin is given on macOS to account for the traffic light buttons
-#main.platform-darwin.mainsidebar-collapsed .header {
-    margin-left: var(--floating-logo-width-darwin);
+#main.platform-darwin.mainsidebar-collapsed .header-container {
+    padding-left: var(--floating-logo-width-darwin);
 }
 
-#main:not(.platform-darwin).mainsidebar-collapsed .header {
-    margin-left: var(--floating-logo-width);
+#main:not(.platform-darwin).mainsidebar-collapsed .header-container {
+    padding-left: var(--floating-logo-width);
 }
diff --git a/src/app/common/elements/mainview.tsx b/src/app/common/elements/mainview.tsx
index aa6ae65c..65a3ef65 100644
--- a/src/app/common/elements/mainview.tsx
+++ b/src/app/common/elements/mainview.tsx
@@ -23,7 +23,7 @@ class MainView extends React.Component<{
                 className={cn("mainview", this.props.className)}
                 style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
             >
-                <div className="header-container bottom-border">
+                <div className="header-container">
                     <header className="header">
                         <div className="title text-primary">{this.props.title}</div>
                         <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.props.onClose}>