Header #1f1c18, text white

Author: elmisback

src/herbie/HerbieUI.css

@@ -155,7 +155,6 @@ input[type="text"]:focus, select:focus {
   display:flex;
   grid-area: header; /*Place the header in the "header" grid area */
   justify-content: space-between; /* Align the components at the start and end of the header */
-  border-bottom: 4px solid #5e5e5f1a;
   .app-name {
     display: flex;
     align-items: center;

src/herbie/HerbieUI.tsx

@@ -535,33 +535,35 @@ function HerbieUIInner() {
 
   ];
 
+  function myHeader() {
+    return (
+      <div className="header" style={{ backgroundColor: "var(--foreground-color)", color: "var(--background-color)", paddingLeft: "10px", paddingRight: "10px", alignItems: 'center'}}>
+        {/* removed header-top */}
+        <div className="app-name">
+          <div className="app-icon">
+            <img src="https://raw.githubusercontent.com/herbie-fp/odyssey/main/images/odyssey-icon.png" style={{ width: '20px', marginRight: '5px' }} alt="Odyssey Icon"></img>
+          </div>
+          Odyssey
+        </div>
+        <SpecComponent {...{ showOverlay, setShowOverlay }} />
+        <ServerStatusComponent />
+      </div>
+    )
+  }
+
   return (
     <div>
       {showOverlay && // HACK to show the spec config component. Not a true overlay now, needs to be refactored.
         <div className="overlay" style={ {display: "flex", flexDirection: 'column'} }>
-          <div className="header">
-            {/* removed header-top */}
-            <div className="app-name">
-              <div className="app-icon">
-                <img src="https://raw.githubusercontent.com/herbie-fp/odyssey/main/images/odyssey-icon.png" style={{width: '20px', marginRight: '5px', marginLeft: '10px'}} alt="Odyssey Icon"></img>
-              </div>
-              Odyssey</div>
-          <SpecComponent {...{showOverlay, setShowOverlay}} />
-          <ServerStatusComponent />
-        </div>
+          {myHeader()}
           <div className="overlay-content" style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start', margin: 'auto', padding: '10px', width: '750px', gap: '7.5px', fontSize: '18.4px'} }>
             <SpecConfigComponent />
           </div>
           </div>
       }
       {!showOverlay &&
         <div className="grid-container">
-          <div className="header">
-            {/* removed header-top */}
-            <div className="app-name">Odyssey</div>
-            <SpecComponent {...{ showOverlay, setShowOverlay }} />
-            <ServerStatusComponent />
-          </div>
+          {myHeader()}
 
           <ExpressionTable />
           <div className="visualizations">

src/herbie/ServerStatus.css

@@ -16,7 +16,6 @@
     justify-content: space-between;
     vertical-align: bottom;
     cursor: pointer;
-    background-color: var(--background-color);
     font-size: 12px;
     align-items: center;
     width: 100px;

src/herbie/SpecComponent.css

@@ -63,7 +63,6 @@
 .spec-text {
   font-family: 'Ruda', serif;
   font-size: 1em;
-  padding-top:4px;
   /* overflow should be ... */
   white-space: nowrap;
   overflow: hidden;