From 4fe4083c02b1f22a60cb9dfc15d759e905db9d8f Mon Sep 17 00:00:00 2001
From: Greg Wuller <greg@afofo.com>
Date: Thu, 30 Dec 2021 00:00:44 -0800
Subject: [PATCH] Refine light/dark styling for project manager

---
 web/src/components/catalog-list.css    |  4 +-
 web/src/components/catalog.css         |  9 +---
 web/src/components/catalog.js          |  2 +-
 web/src/components/project-control.css |  3 +-
 web/src/components/project-info.css    |  3 +-
 web/src/components/project-list.css    |  4 +-
 web/src/components/switcher.css        |  8 ++-
 web/src/components/text-button.css     |  6 +++
 web/src/components/text-button.js      | 69 +++-----------------------
 web/src/icon-button.js                 | 10 ++--
 web/src/index.css                      | 17 ++++---
 web/src/repl-activity.css              |  2 +-
 12 files changed, 40 insertions(+), 97 deletions(-)

diff --git a/web/src/components/catalog-list.css b/web/src/components/catalog-list.css
index 3454d61..7ed6636 100644
--- a/web/src/components/catalog-list.css
+++ b/web/src/components/catalog-list.css
@@ -15,10 +15,8 @@
 }
 
 .catalog-refresh-all-button {
-  /*color: rgb(150, 150, 150);*/
   color: var(--interactive-medium-default);
-  /*background: rgb(249, 249, 249);*/
-  background: var(--interactive-surface-default);
+  background: var(--interactive-background-base);
   padding: 15px;
   width: 95%;
   margin-right: 8px;
diff --git a/web/src/components/catalog.css b/web/src/components/catalog.css
index f844977..056975a 100644
--- a/web/src/components/catalog.css
+++ b/web/src/components/catalog.css
@@ -6,11 +6,9 @@
 .catalog-name {
   font-family: monospace;
   font-size: 100%;
-  /* font-style: italic; */
   text-transform: lowercase;
   padding: 2px 10px 8px 15px;
   color: hsl(0, 0%, 59%);
-  /*border-bottom: 1px solid rgb(230, 230, 230);*/
   border-bottom: 1px solid var(--neutral-trim-default);
   margin-right: 2em;
 }
@@ -21,14 +19,9 @@
   padding: 0px;
 }
 
-.catalog-entries > li {
-  margin: 0 0 4px 0;
-}
-
 .catalog-installed-label {
   font-family: monospace;
   width: 10em;
   text-align: center;
-  /*color: rgb(204, 204, 204);*/
-  color: var(--neutral-base-default);
+  color: var(--interactive-medium-disabled);
 }
\ No newline at end of file
diff --git a/web/src/components/catalog.js b/web/src/components/catalog.js
index 98b9b68..60a7e5e 100644
--- a/web/src/components/catalog.js
+++ b/web/src/components/catalog.js
@@ -23,7 +23,7 @@ const Catalog = (props) => {
       <ProjectControl>
         <ProjectInfo project={e} />
         {(installedProjects || []).indexOf(projectName) === -1 ? (
-          <TextButton color="hsl(0, 0%, 45%)"
+          <TextButton
             action={() => props.installAction(catalogURL, projectName)}
           >
             install
diff --git a/web/src/components/project-control.css b/web/src/components/project-control.css
index 7fa6518..b468339 100644
--- a/web/src/components/project-control.css
+++ b/web/src/components/project-control.css
@@ -2,8 +2,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  background-color: var(--neutral-background-default);
-  /* border-left: 2px solid #979797; */
+  background-color: var(--interactive-background-base);
   margin-left: 2em;
   margin-right: 2em;
   align-items: center;
diff --git a/web/src/components/project-info.css b/web/src/components/project-info.css
index 8c7b34f..946dd65 100644
--- a/web/src/components/project-info.css
+++ b/web/src/components/project-info.css
@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   font-family: monospace;
-  background-color: var(--neutral-surface-default);
+  background-color: var(--neutral-surface-highlighted);
   color: var(--neutral-medium-default);
 }
 
@@ -22,6 +22,7 @@
 
 .project-info-name {
   font-weight: bold;
+  color: var(--interactive-medium-default);
   /* font-size: 110%; */
 }
 
diff --git a/web/src/components/project-list.css b/web/src/components/project-list.css
index c7ce129..dcd52ca 100644
--- a/web/src/components/project-list.css
+++ b/web/src/components/project-list.css
@@ -11,12 +11,12 @@
 }
 
 .project-listing li {
-  margin: 0 0 4px 0;
+  margin: 0 0 8px 0;
 }
 
 .project-update-all-button {
   color: var(--interactive-medium-default);
-  background: var(--interactive-surface-default);
+  background: var(--interactive-background-base);
   padding: 15px;
   width: 95%;
   margin-right: 8px;
diff --git a/web/src/components/switcher.css b/web/src/components/switcher.css
index f1c981d..1720895 100644
--- a/web/src/components/switcher.css
+++ b/web/src/components/switcher.css
@@ -19,12 +19,11 @@
   outline: none;
   font-family: monospace;
   font-size: 100%;
-  /* color: #979797; */
   color: var(--interactive-medium-default);
 
-  /*border-bottom: 1px solid #F4F4F4;*/  /* hack: match switcher background */
   border-bottom: 1px solid var(--interactive-trim-default);
 
+  text-align: center;
 
   /* the properties below are to match the file explorer header */
   height: 30px;
@@ -32,12 +31,11 @@
   margin-bottom: 8px;
   font-weight: bold;
   padding: 6px 12px;
-  text-align: start;
 }
 
 .switcher-active-tab {
-  /*border-bottom: 1px solid rgb(197, 197, 197);*/
-  border-bottom: 1px solid var(--interactive-trim-default);
+  color: var(--interactive-medium-selected);
+  border-bottom: 1px solid var(--interactive-medium-selected);
 }
 
 .switcher-content-container {
diff --git a/web/src/components/text-button.css b/web/src/components/text-button.css
index 2161fd6..15b3a0c 100644
--- a/web/src/components/text-button.css
+++ b/web/src/components/text-button.css
@@ -1,6 +1,7 @@
 .text-button {
   background-color: transparent;
   background-repeat: no-repeat;
+  color: var(--interactive-medium-default);
   border: none;
   cursor: pointer;
   overflow: hidden;
@@ -13,6 +14,11 @@
   width: 10em;
 }
 
+.text-button:hover {
+  color: var(--interactive-medium-hover);
+}
+
 .text-button:disabled {
+  color: var(--interactive-medium-disabled);
   cursor: not-allowed;
 }
\ No newline at end of file
diff --git a/web/src/components/text-button.js b/web/src/components/text-button.js
index 82b1337..f2749e4 100644
--- a/web/src/components/text-button.js
+++ b/web/src/components/text-button.js
@@ -1,83 +1,26 @@
 import React, { Component } from 'react';
 import './text-button.css';
 
-const hslRegex = /hsl\((\d{1,3}),\s?(\d{1,3})%,\s?(\d{1,3})%\)/;
-
 class TextButton extends Component {
-  static defaultProps = {
-    dark: true,
-  };
-
-  constructor (props) {
-    super(props)
-    
-    // Parse the hsl values from props.color
-    const [, h, s, l] = this.props.color.match(hslRegex);
-    this.parsedColor = { h, s, l };
-
-    this.state = {
-      color: this.color,
-    };
-  }
-  
-  get color() {
-    return this.props.disabled ? this.disabledColor : this.props.color;
-  }
-
-  // For the disabled color, we'll add 10% to the lightness
-  get disabledColor() {
-    const { h, s, l } = this.parsedColor;
-    return `hsl(${h}, ${s}%, ${Math.min(100, +l + 20)}%)`;
-  }
-
-  // For hover color, we'll determine whether to
-  // darken or lighten based on the props.dark
-  get hoverColor() {
-    const { h, s, l } = this.parsedColor;
-    if (this.props.dark) {
-      return `hsl(${h}, ${s}%, ${Math.max(0, +l - 20)}%)`;
-    }
-    return `hsl(${h}, ${s}%, ${Math.min(100, +l + 20)}%)`;
-  }
-
-  handleMouseEnter = () => {
-    // Only apply the hover styles if the button is active
-    if (!this.props.disabled) {
-      this.setState(() => ({
-        color: this.hoverColor,
-      }));
-    }
-  };
-
-  handleMouseLeave = () => {
-    // Only update the state when necessary
-    if (this.state.color !== this.color) {
-      this.setState(() => ({
-        color: this.color,
-      }));
-    }
-  };
-
   handleClick = () => {
     if (!this.props.disabled) {
       this.props.action();
     }
   };
-  
+
   render() {
-    const style = {color: this.state.color};
     return (
-      <button className={`text-button ${this.props.classes ? ` ${this.props.classes}` : ''}`}
+      <button
+        className={`text-button ${this.props.classes ? ` ${this.props.classes}` : ''}`}
         onClick={this.handleClick}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         disabled={this.props.disabled}
-        style={style}
       >
         {this.props.children}
       </button>
     );
-  };
-};
+  }
+}
 
-export default TextButton;
\ No newline at end of file
+export default TextButton;
diff --git a/web/src/icon-button.js b/web/src/icon-button.js
index 22f61bf..8e73188 100644
--- a/web/src/icon-button.js
+++ b/web/src/icon-button.js
@@ -11,7 +11,7 @@ const hslRegex = /hsl\((\d{1,3}),\s?(\d{1,3})%,\s?(\d{1,3})%\)/;
 
 class IconButton extends Component {
   static defaultProps = {
-    dark: true,
+    darkenOnHover: true,
   };
 
   constructor(props) {
@@ -38,13 +38,13 @@ class IconButton extends Component {
   }
 
   // For hover color, we'll determine whether to
-  // darken or lighten based on the props.dark
+  // darken or lighten based on the props.darkenOnHover
   get hoverColor() {
     const { h, s, l } = this.parsedColor;
-    if (this.props.dark) {
-      return `hsl(${h}, ${s}%, ${Math.max(0, +l - 20)}%)`;
+    if (this.props.darkenOnHover) {
+      return `hsl(${h}, ${s}%, ${Math.max(0, +l - 30)}%)`;
     }
-    return `hsl(${h}, ${s}%, ${Math.min(100, +l + 20)}%)`;
+    return `hsl(${h}, ${s}%, ${Math.min(100, +l + 30)}%)`;
   }
 
   handleMouseEnter = () => {
diff --git a/web/src/index.css b/web/src/index.css
index 56d29ac..1f71087 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -2,14 +2,17 @@
 :root {
   --neutral-background-default: #F4F4F4;
   --neutral-surface-default: #f7f7f7;
+  --neutral-surface-highlighted: #f0f0f0;
   --neutral-surface-selected: #89b5f14f;
   --neutral-subdued-default: #eaeaea;
   --neutral-medium-default: #757575;
   --neutral-base-default: #AFAFAF;
   --neutral-heavy-default: #434351;
   --neutral-trim-default: #DADADA;
-  --interactive-medium-default: #979797;
-  --interactive-medium-hover: #818181;
+  --interactive-background-base: #F9F9F9;
+  --interactive-medium-disabled: #C2C2C2;
+  --interactive-medium-default: #969696;
+  --interactive-medium-hover: #656565;
   --interactive-medium-selected: #757575;
   --interactive-trim-default: #C5C5C5;
   --interactive-trim-selected: #C5C5C5;
@@ -24,7 +27,8 @@
 
 :root[data-theme="dark"] {
   --neutral-background-default: #1D1F21;
-  --neutral-surface-default: #25282c;
+  --neutral-surface-default: #25282C;
+  --neutral-surface-highlighted: #1F2123;
   --neutral-surface-selected: #4B4231;
   --neutral-subdued-default: #1D2023;
   --neutral-medium-default: #969896;
@@ -32,9 +36,10 @@
   --neutral-base-default: #2E2E2E;
   --neutral-heavy-default: #AAAAAA;
   --neutral-trim-default: #333333;
-  --overlay-fill: rgb(0, 0, 0, 0.5);
-  --interactive-medium-default: #666666;
-  --interactive-medium-hover: #888888;
+  --interactive-background-base: #1B1C1D;
+  --interactive-medium-disabled: #444444;
+  --interactive-medium-default: #777777;
+  --interactive-medium-hover: #9F9F9F;
   --interactive-medium-selected: #757575;
   --interactive-trim-default: #555555;
   --interactive-trim-selected: #C5C5C5;
diff --git a/web/src/repl-activity.css b/web/src/repl-activity.css
index 5c68ba0..c272a8c 100644
--- a/web/src/repl-activity.css
+++ b/web/src/repl-activity.css
@@ -68,7 +68,7 @@
 }
 
 .repl-active-tab {
-    border-bottom: 1px solid var(--interactive-trim-selected);
+    border-bottom: 1px solid var(--interactive-medium-selected);
     color: var(--interactive-medium-selected);
     font-weight: bold;
 }