From 6418e8ea684a13e97baa5c1786fa49e8823cacce Mon Sep 17 00:00:00 2001
From: Fabian Homborg <FHomborg@gmail.com>
Date: Sun, 4 Oct 2020 17:30:01 +0200
Subject: [PATCH] Webconfig: Let theme match help and fishshell.com

More consistency is nice.
---
 share/tools/web_config/fishconfig.css         | 71 +++++++------------
 share/tools/web_config/index.html             |  2 +-
 share/tools/web_config/js/colorutils.js       |  2 +-
 share/tools/web_config/js/controllers.js      |  2 +-
 share/tools/web_config/partials/colors.html   |  8 +--
 .../tools/web_config/partials/functions.html  |  2 +-
 share/tools/web_config/partials/prompt.html   |  4 +-
 7 files changed, 37 insertions(+), 54 deletions(-)

diff --git a/share/tools/web_config/fishconfig.css b/share/tools/web_config/fishconfig.css
index 34eafd050..cff183809 100644
--- a/share/tools/web_config/fishconfig.css
+++ b/share/tools/web_config/fishconfig.css
@@ -1,7 +1,8 @@
 body {
-    background-color: #292929;
+    background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%);
     font-family: "Source Code Pro", "DejaVu Sans Mono", Menlo, "Ubuntu Mono", Consolas, Monaco, "Lucida Console", monospace, fixed;
-    color: white;
+    color: #222;
+    min-height: 100vh; /* at least 1 screen high - to prevent the gradient from running out on a short tab */
 }
 
 code {
@@ -9,10 +10,11 @@ code {
 }
 
 #ancestor {
-    width: 80%;
+    width: 90%;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 25px;
+    /* HACK: Instead of allowing tabs to overflow, hide them */
+    overflow: hidden;
 }
 
 #parent {
@@ -29,16 +31,15 @@ code {
 
 .tab {
 	display: table-cell;
-    border: 1px solid #111;
+    border: 1px solid #CCC;
     border-right: none;
     padding-bottom: 15px;
     padding-top: 15px;
-	padding-left: 8px;
-	padding-right: 8px;
-    font-size: 17pt;
+    padding-left: 3px;
+    padding-right: 3px;
+    font-size: 14pt;
     text-align: center;
-    width: 15%;
-    background-color: #292929;
+    background-color: white;
     cursor: pointer;
 }
 
@@ -47,7 +48,6 @@ code {
 }
 
 #tab_parent :last-child {
-	border-right: 1px solid #111;
 	border-top-right-radius: 8px;
 }
 
@@ -62,14 +62,15 @@ code {
 }
 
 .selected_tab {
-    background-color: black;
-    border-color: black;
+    background-color: #eeeefa;
+    border-bottom: none;
 }
 
 #tab_contents {
-	padding-top: 35px;
+	padding-top: 20px;
+	padding-bottom: 20px;
 	width: 100%;
-	background-color: black;
+	background-color: #eeeefa;
 	border-bottom-left-radius: 8px;
 	border-bottom-right-radius: 8px;
 	margin-bottom: 20px;
@@ -100,7 +101,7 @@ code {
 .detail {
     display: table-cell;
   	border: 1px solid #555;
-  	background-color: #181818;
+  	background-color: #ffffff;
   	padding-top: 30px;
   	padding-bottom: 20px;
   	padding-left: 30px;
@@ -113,7 +114,6 @@ code {
 	white-space: pre-wrap !important;
 	width: 100%;
 	font-size: 11pt;
-	color: #BBB;
 }
 
 /* The colours used for function highlighting are taken from the fish
@@ -149,7 +149,7 @@ code {
 .selected_master_elem {
 	border: 1px solid #555;
 	border-right: none;
-	background-color: #181818;
+	background-color: #FFFFFF;
 
 	border-top-left-radius: 5;
 	border-bottom-left-radius: 5;
@@ -199,7 +199,7 @@ code {
 	display:inline-block;
 	margin-left: auto;
 	margin-right: auto;
-	color: #AAA;
+	color: #000;
 	font-size: smaller;
 }
 
@@ -215,14 +215,12 @@ code {
 }
 
 .modifier_cell_selected {
-	color: #CCC;
-	border-color: #AAA;
+	border-color: #000;
 	background-color: #444;
 }
 
 .data_table {
 	table-layout:fixed;
-	color: #CCC;
 	width: 100%;
 	padding-left: 10px;
 	padding-right: 10px;
@@ -266,10 +264,7 @@ code {
 }
 
 .abbreviation_input {
-	background-color: #111;
-	border: solid 1px #777;
 	height: 1.5em;
-	color: white;
 	font: inherit;
 	padding: 3px;
 	margin: 0;
@@ -399,14 +394,12 @@ code {
 	cursor: pointer;
 	font-size: 12pt;
 	white-space: normal;
-	color: #AAA;
 }
 
 .color_scheme_choices_scrollview, .prompt_choices_scrollview {
-	 border-top: 1px solid #333;
 	 padding-top: 5px;
-	 overflow: scroll;
-	 max-height: 30em; /* about two and a half boxes */
+	 overflow-y: scroll;
+	 max-height: 70vh; /* fill out roughly the rest of the screen once scrolled to the preview */
 }
 
 .color_scheme_choices_list, .prompt_choices_list {
@@ -451,21 +444,15 @@ img.delete_icon {
 .filter_text_box {
 	width: 250px;
 	padding: 5 10 5 10;
-	background-color: #888;
-	border: #222 solid 3px;
 	border-radius: 15px;
 	font-size: 12pt;
-	color: white;
 	font-weight: bold;
 }
 
-.text_box_transient {
-	color: #C8C8C8;
-}
-
 .prompt_demo, .current_prompt {
+	background-color: #000;
 	font-size: 12pt;
-	padding: 10px;
+	padding: 25px;
 	margin: 5px 5px 25px 5px; /* top right bottom left */
 	cursor: pointer;
 	line-height: 1.8em;
@@ -478,6 +465,7 @@ img.delete_icon {
 }
 
 .prompt_demo {
+    color: #AAA;
     white-space: pre;
 }
 
@@ -494,7 +482,7 @@ img.delete_icon {
 	font-size: 13pt;
 	display: inline-block;
 	margin-top: 12px;
-	background-color: rgba(128,128,128,0.2);
+	background-color: rgba(128,128,128,0.4);
 	color: #FFF;
 	cursor: pointer;
 }
@@ -575,12 +563,7 @@ img.delete_icon {
 }
 
 .paginator .disabled a {
-    color: #999999;
+    color: #BBB;
     background-color: transparent;
     cursor: default;
 }
-
-.paginator .desc {
-	background: #222;
-	color: #BBB;
-}
\ No newline at end of file
diff --git a/share/tools/web_config/index.html b/share/tools/web_config/index.html
index b5581e29f..bf595b6da 100644
--- a/share/tools/web_config/index.html
+++ b/share/tools/web_config/index.html
@@ -18,7 +18,7 @@
 <body>
 
 <div id="ancestor">
-    <span style="font-size: 16pt; color: #CCC">fish</span><p id="global_error" class="error_msg" error-message></p>
+    <!-- TODO: Add logo -->
     <div id="parent">
         <div id="tab_parent" ng-controller="main">
             <div ng-class="{'tab': true, 'selected_tab': currentTab =='colors'}" id="tab_colors" ng-click="changeView('colors')">colors</div>
diff --git a/share/tools/web_config/js/colorutils.js b/share/tools/web_config/js/colorutils.js
index 7a319cb6f..cedfa9fdf 100644
--- a/share/tools/web_config/js/colorutils.js
+++ b/share/tools/web_config/js/colorutils.js
@@ -117,7 +117,7 @@ function border_color_for_color(color_str) {
 
 /* Use this function to make a color that contrasts well with the given color */
 function text_color_for_color(color_str) {
-    var adjust = .5
+    var adjust = .7
     function compute_constrast(lightness){
         var new_lightness = lightness + adjust
         if (new_lightness > 1.0 || new_lightness < 0.0) {
diff --git a/share/tools/web_config/js/controllers.js b/share/tools/web_config/js/controllers.js
index 0fca3cbf0..a09f16479 100644
--- a/share/tools/web_config/js/controllers.js
+++ b/share/tools/web_config/js/controllers.js
@@ -86,7 +86,7 @@ controllers.controller("colorsController", function($scope, $http) {
 
     $scope.getCurrentTheme = function() {
         $http.get("colors/").then(function(arg) {
-            var currentScheme = { "name": "Current", "colors":[], "preferred_background": "" };
+            var currentScheme = { "name": "Current", "colors":[], "preferred_background": "black" };
             var data = arg.data
             for (var i in data) {
                 currentScheme[data[i].name] = data[i].color;
diff --git a/share/tools/web_config/partials/colors.html b/share/tools/web_config/partials/colors.html
index f8e44510e..17898af2a 100644
--- a/share/tools/web_config/partials/colors.html
+++ b/share/tools/web_config/partials/colors.html
@@ -3,9 +3,9 @@
 fish cannot change the background color of your terminal and it will not be saved. Refer to your terminal documentation to set its background color.">
     <!-- ko with: color_picker -->
     <div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}">
-        <span style="position: absolute; left: 10px; top: 3px;" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}">{{ selectedColorScheme.name }}</span><br>
+        <span style="position: absolute; left: 10px; top: 3px;" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}">{{ selectedColorScheme.name }}</span><br>
         <div class="color_picker_background_cells">
-	        <span style="display: block; text-align: right; line-height: 110%" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}">Background Color:<br />(demo only)&nbsp;</span>
+	        <span style="display: block; text-align: right; line-height: 110%" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}">Background Color:<br />(demo only)&nbsp;</span>
             <div ng-style="{'background-color': color}" ng-repeat="color in sampleTerminalBackgroundColors" ng-click="changeTerminalBackgroundColor(color)"  title="Preview with this background color.
 
 fish cannot change the background color of your terminal. Refer to your terminal settings to set its background color."></div>
@@ -94,11 +94,11 @@ fish cannot change the background color of your terminal. Refer to your terminal
 
 			<span class="customize_theme_button"
 				  ng-class="{button_highlight: customizationActive}"
-				  data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}"
+				  data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}"
 				  ng-click="toggleCustomizationActive();">Customize</span>
 
 			<span class="save_button"
-				  data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}"
+				  data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'black')}"
 				  ng-show="showSaveButton"
 				  ng-click="setTheme()">{{saveThemeButtonTitle}}</span>
 		</div>
diff --git a/share/tools/web_config/partials/functions.html b/share/tools/web_config/partials/functions.html
index 50562f79b..5b7e7963b 100644
--- a/share/tools/web_config/partials/functions.html
+++ b/share/tools/web_config/partials/functions.html
@@ -2,7 +2,7 @@
     <div class="master">
         <div ng-repeat="func in functions">
             <div id="master_{{func}}" ng-class="{'master_element': true, 'selected_master_elem': func == selectedFunction }" ng-style="'color: #aaaaaa'" ng-click="selectFunction(func)">
-                <span class="master_element_text" style="font-size: 11pt;">{{ func }}</span>
+                <span class="master_element_text" style="font-size: 11pt; color: #222;">{{ func }}</span>
             </div>
         </div>
     </div>
diff --git a/share/tools/web_config/partials/prompt.html b/share/tools/web_config/partials/prompt.html
index a1a37b0ba..7846ad46e 100644
--- a/share/tools/web_config/partials/prompt.html
+++ b/share/tools/web_config/partials/prompt.html
@@ -1,6 +1,6 @@
 <!-- The first 'sample' prompt is the current one; the remainders are samples. This ought to be cleaned up. -->
-<div class="current_prompt" style="min-height: 7.5em">
-	<div class="prompt_demo_choice_label">{{ selectedPrompt.name }}</div>
+<div class="current_prompt" ng-style="min-height: 7.5em; {'background-color': terminalBackgroundColor}">
+    <div class="prompt_demo_choice_label" style="color: #FFF;">{{ selectedPrompt.name }}</div>
 	<div ng-bind-html='selectedPrompt.demo | to_trusted' class="prompt_demo unbordered"></div>
 	<div style="position: absolute; right: 5px; bottom: 5px; color:">
 		<span class="save_button"