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

Author: esimkowitz

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);
 }

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;
 }

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);
 }

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}>