From 16edffdf3483cc458f25f015c63d6f416d329ea3 Mon Sep 17 00:00:00 2001
From: Jack Ninway <jack.ninway@gmail.com>
Date: Sun, 10 Sep 2023 00:49:42 +0200
Subject: [PATCH 1/7] Added headings to connection screen+modified color

---
 index.html                          |  6 ++++--
 style/less/colour/connect_page.less |  6 ++++++
 style/less/layout/connect_page.less | 10 +++++++++-
 style/less/themes/base.less         |  2 +-
 style/less/themes/dark.less         |  2 +-
 style/less/themes/light.less        |  2 +-
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 409c13b2..23fcd819 100644
--- a/index.html
+++ b/index.html
@@ -20,17 +20,19 @@
 <!--Connect page-->
 <div id=cn class="container-fluid" hidden>
   <div id="cn_lhs" class="col col-xs-3">
+    <div class="cn_head"><h2>Available Configurations</h2></div>
     <div id=cn_favs></div>
     <div id=cn_fav_btns class=dlg_btns>
       <div class="col left">
-        <button id=cn_neu><u>N</u>ew Configuration...</button>
-        <button id=cn_tgl_cfg class="pull-right"><u>C</u>ustom options
+        <button id=cn_neu><u>N</u>ew...</button>
+        <button id=cn_tgl_cfg class="pull-right"><u>E</u>dit
           <span id=cn_tgl_cfg_arrow></span>
         </button>
       </div>
     </div>
   </div>
   <div id="cn_rhs">
+    <div class="cn_head"><h2>Configuration Details</h2></div>
     <div id="cn_rhs_inner">
       <div id=cn_type_dtl>
         <div class="row">
diff --git a/style/less/colour/connect_page.less b/style/less/colour/connect_page.less
index 07e93e12..aeb883e6 100644
--- a/style/less/colour/connect_page.less
+++ b/style/less/colour/connect_page.less
@@ -45,6 +45,8 @@
 		outline: dotted black 1px;
 	}
 	>div{
+		border: 1px solid @DLG_BOTTOM_BG;
+		line-height: 36px;
 		background:@CN_FAV_BTN_BG;
 		color:@CN_FAV_BTN_FG;
 		&:not(:first-child) {
@@ -79,3 +81,7 @@
 		font-family: monospace;
 	}
 }
+.cn_head {
+	background-color: @DLG_BOTTOM_BG;
+	color: @CN_INPUT_FG;
+}
diff --git a/style/less/layout/connect_page.less b/style/less/layout/connect_page.less
index aa6c2420..53efba67 100644
--- a/style/less/layout/connect_page.less
+++ b/style/less/layout/connect_page.less
@@ -49,7 +49,7 @@
 }
 
 #cn_favs {
-  position:absolute;
+  position:relative;
   top: 0;
   left: 0;
   right: 0;
@@ -163,4 +163,12 @@
 
 #cn_args, #cn_env {
   width:100%;
+}
+.cn_head {
+  width:100%;
+  height: 4%;
+}
+.cn_head h2 {
+  font-weight: bold;
+  padding: 5px; 
 }
\ No newline at end of file
diff --git a/style/less/themes/base.less b/style/less/themes/base.less
index 82538a10..060e1ee8 100644
--- a/style/less/themes/base.less
+++ b/style/less/themes/base.less
@@ -15,7 +15,7 @@
 @DYALOG_LOGO_IMG:url(img/dyalog.png);
 @RIDE_LOGO_IMG:url(img/RideLogo.png);
 @SPLASH_IMG:url(img/RideSplash-Blue.png);
-@CN_LHS_BG:@THEME_SECONDARY_DIM;
+@CN_LHS_BG:@THEME_SECONDARY;
 @CN_RHS_BG:@THEME_SECONDARY;
 @CN_RHS_BG2:@THEME_SECONDARY;
 @CN_INPUT_BG:@CN_LHS_BG;
diff --git a/style/less/themes/dark.less b/style/less/themes/dark.less
index e6f3f6b8..356d5777 100644
--- a/style/less/themes/dark.less
+++ b/style/less/themes/dark.less
@@ -1,7 +1,7 @@
 @THEME_SECONDARY:#272937;
 @THEME_WIN_BG:@THEME_SECONDARY_DIM;
 @THEME_WIN_FG:white;
-@CN_LHS_BG:@THEME_SECONDARY;
+@CN_LHS_BG:#08090c;
 @CN_RHS_BG:@THEME_SECONDARY_DIM;
 @CN_RHS_BG2:black;
 @CN_INPUT_FG:white;
diff --git a/style/less/themes/light.less b/style/less/themes/light.less
index ec690c15..6b7e20ad 100644
--- a/style/less/themes/light.less
+++ b/style/less/themes/light.less
@@ -1,7 +1,7 @@
 @THEME_SECONDARY:#edeff5;
 @THEME_WIN_BG:@THEME_PRIMARY;
 @THEME_WIN_FG:black;
-@CN_LHS_BG:@THEME_SECONDARY_DIM;
+@CN_LHS_BG:#edeff5;
 @CN_RHS_BG:@THEME_SECONDARY;
 @CN_RHS_BG2:@THEME_SECONDARY;
 @CN_INPUT_FG:black;

From badd583cee7e59e712a4820396f33a313ffe4d73 Mon Sep 17 00:00:00 2001
From: Jack Ninway <jack.ninway@gmail.com>
Date: Fri, 15 Sep 2023 12:11:34 +0200
Subject: [PATCH 2/7] Set min size for window, fields folded - labels

---
 index.html                          | 50 ++++++++++++++---------------
 main.js                             |  2 ++
 style/less/colour/connect_page.less |  4 +++
 style/less/layout/connect_page.less | 27 +++++++++-------
 style/less/themes/base.less         |  5 +--
 style/less/themes/dark.less         |  2 +-
 style/less/themes/light.less        |  2 +-
 7 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/index.html b/index.html
index 23fcd819..20c8f98f 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 <!--Connect page-->
 <div id=cn class="container-fluid" hidden>
   <div id="cn_lhs" class="col col-xs-3">
-    <div class="cn_head"><h2>Available Configurations</h2></div>
+    <p class="cn_head">Available Configurations</p>
     <div id=cn_favs></div>
     <div id=cn_fav_btns class=dlg_btns>
       <div class="col left">
@@ -32,16 +32,16 @@
     </div>
   </div>
   <div id="cn_rhs">
-    <div class="cn_head"><h2>Configuration Details</h2></div>
+    <p class="cn_head">Configuration Details</p>
     <div id="cn_rhs_inner">
       <div id=cn_type_dtl>
         <div class="row">
-          <div class="col col-xs-3"><label for=cn_fav_name>C<u>o</u>nfiguration name:</label></div>
-          <div class="col col-xs-9"><input id=cn_fav_name placeholder=unnamed></div>
+          <div class="col col-sm-12 col-md-3"><label for=cn_fav_name>C<u>o</u>nfiguration name:</label></div>
+          <div class="col col-sm-12 col-md-9"><input id="cn_fav_name" placeholder="unnamed" maxlength="35"></div>
         </div>
         <div class="row">
-          <div class="col col-xs-3"><label for=cn_type><u>T</u>ype:</label></div>
-          <div class="col col-xs-9">
+          <div class="col col-sm-12 col-md-3"><label for=cn_type><u>T</u>ype:</label></div>
+          <div class="col col-sm-12 col-md-9">
             <select id=cn_type class=cn_select>
               <option value=connect     >Connect to an interpreter
               <option value=start       >Start an interpreter
@@ -50,8 +50,8 @@
           </div>
         </div>
         <div class="row">
-          <div class="col col-xs-3"></div>
-          <div class="col col-xs-9">
+          <div class="col col-sm-12 col-md-3"></div>
+          <div class="col col-sm-12 col-md-9">
             <select id=cn_subtype hidden>
               <option value=raw  id=cn_raw_opt>via TCP
               <option value=ssh               >via SSH
@@ -63,13 +63,13 @@
       </div>
       <div id=cn_dtl>
         <div class="row">
-          <div class="col col-xs-3">
+          <div class="col col-sm-12 col-md-3">
             <input type=checkbox id=cn_log_cb>
             <label for=cn_log_cb>
               Save protocol <u>l</u>og</span>
             </label>
           </div>
-          <div class="col col-xs-9">
+          <div class="col col-sm-12 col-md-9">
             <div class="row">
               <div class="col col-xs-12">
                 <input id=cn_log name=log placeholder="Log file" class=browse>
@@ -80,12 +80,12 @@
         </div>
         <div id=cn_tcp_dtl>
           <div class="row">
-            <div class="col col-xs-3"><label for=cn_tcp_host class=cn_label><u>H</u>ost:</label></div>
-            <div class="col col-xs-9"><input id=cn_tcp_host name=host size=12 placeholder=localhost></div>
+            <div class="col col-sm-12 col-md-3"><label for=cn_tcp_host class=cn_label><u>H</u>ost:</label></div>
+            <div class="col col-sm-12 col-md-9"><input id=cn_tcp_host name=host size=12 placeholder=localhost></div>
           </div>
           <div class="row">
-            <div class="col col-xs-3"><label for=cn_tcp_port class=cn_label><u>P</u>ort:</label></div>
-            <div class="col col-xs-9"><input id=cn_tcp_port name=port size=4 placeholder=4502></div>
+            <div class="col col-sm-12 col-md-3"><label for=cn_tcp_port class=cn_label><u>P</u>ort:</label></div>
+            <div class="col col-sm-12 col-md-9"><input id=cn_tcp_port name=port size=4 placeholder=4502></div>
           </div>
         </div>
         <div class="row">
@@ -184,8 +184,8 @@
         </div>
         <div id=cn_start hidden>
           <div class="row" id=cn_exes_dtl>
-            <div class="col col-xs-3"><label for=cn_exes class=cn_label><u>I</u>nterpreter:</label></div>
-            <div class="col col-xs-9">
+            <div class="col col-sm-12 col-md-3"><label for=cn_exes class=cn_label><u>I</u>nterpreter:</label></div>
+            <div class="col col-sm-12 col-md-9">
               <select id=cn_exes name=exes class="cn_select browse"></select>
               <button id=cn_fetch class=tb_btn title="Fetch list of interpreters through ssh">
                 <span class="fas fa-sync-alt"></span>
@@ -193,41 +193,41 @@
             </div>
           </div>
           <div class="row">
-            <div class="col col-xs-3"><label for=cn_exe class=cn_label>Exe path:</label></div>
-            <div class="col col-xs-9">
+            <div class="col col-sm-12 col-md-3"><label for=cn_exe class=cn_label>Exe path:</label></div>
+            <div class="col col-sm-12 col-md-9">
               <input id=cn_exe name=exe placeholder='path to executable'>
             </div>
           </div>
           <div class="row" id=cn_cwd_fld>
-            <div class="col col-xs-3"><label for=cn_cwd><u>W</u>orking directory:</label></div>
-            <div class="col col-xs-9"><input id=cn_cwd name=cwd></div>
+            <div class="col col-sm-12 col-md-3"><label for=cn_cwd><u>W</u>orking directory:</label></div>
+            <div class="col col-sm-12 col-md-9"><input id=cn_cwd name=cwd></div>
           </div>
           <div class="row">
-            <div class="col col-xs-3">
+            <div class="col col-sm-12 col-md-3">
               <label for=cn_args>Arg<u>u</u>ments:</label>
               <div class="tooltip">
                 <span class="fas fa-question-circle"></span>
                 <span class="tooltiptext">one per line; if needed, RIDE may also pass "+s" and "-q"</span>
               </div>
             </div>
-            <div class="col col-xs-9">
+            <div class="col col-sm-12 col-md-9">
               <textarea id=cn_args name=args cols=40 rows=3></textarea>
             </div>
           </div>
           <div class="row">
-            <div class="col col-xs-3">
+            <div class="col-sm-12 col-md-3">
               <label for=cn_env><u>C</u>onfiguration parameters:</label>
               <div class="tooltip">
                 <span class="fas fa-question-circle"></span>
                 <span class="tooltiptext">key=value, one pair per line, no extra spaces, no quoting or escaping of value</span>
               </div>
             </div>
-            <div class="col col-xs-9">
+            <div class="col col-sm-12 col-md-9">
               <textarea id=cn_env name=env cols=40 rows=3></textarea>
             </div>
           </div>
           <div class="row">
-            <div class="col col-xs-9 col-xs-offset-3">
+            <div class="col col col-sm-12 col-md-9 col-md-offset-3">
               <span id=cn_env_add>For example:<br><a href=#>MAXWS=1G</a><br><a href=#>WSPATH=.</a><br><a href=#>HISTORY_SIZE=1000</a></span>
             </div>
           </div>
diff --git a/main.js b/main.js
index 4d5672a6..9209ba78 100644
--- a/main.js
+++ b/main.js
@@ -78,6 +78,8 @@ el.app.on('ready', () => {
     y,
     width,
     height,
+    minWidth: 900,
+    minHeight: 650,
     show: 0,
     ...(!D.win && !D.mac && { icon: `${__dirname}/D.png` }),
     backgroundColor: '#7688d9',
diff --git a/style/less/colour/connect_page.less b/style/less/colour/connect_page.less
index aeb883e6..84ced228 100644
--- a/style/less/colour/connect_page.less
+++ b/style/less/colour/connect_page.less
@@ -63,6 +63,10 @@
 }
 #cn, #cn_rhs {
 	background: linear-gradient(@CN_RHS_BG, @CN_RHS_BG2);
+	// background-color: @CN_RHS_BG;
+	select{
+    background-color: @CN_INPUT_BG;
+  }
 }
 #cn_env_add {
 	color: @CN_LABEL_COL;
diff --git a/style/less/layout/connect_page.less b/style/less/layout/connect_page.less
index 53efba67..897aaedb 100644
--- a/style/less/layout/connect_page.less
+++ b/style/less/layout/connect_page.less
@@ -1,3 +1,6 @@
+@CN_CONTENT_TOP: 34px;
+@CN_CONTENT_BTM: 64px;
+
 #cn {
 	position: absolute;
   z-index:2;
@@ -49,11 +52,11 @@
 }
 
 #cn_favs {
-  position:relative;
-  top: 0;
+  position: absolute;
+  top: @CN_CONTENT_TOP;
   left: 0;
   right: 0;
-  bottom: 64px;
+  bottom: @CN_CONTENT_BTM;
 	overflow: auto;
 	>div {
 		line-height: 46px;
@@ -62,7 +65,6 @@
 		cursor: default;
     .go {
       float: right;
-      margin-top:6px;
       margin-right:5px;
       width:32px;
       height:32px;
@@ -108,12 +110,15 @@
 #cn_rhs_inner {
   overflow-y: auto;
   overflow-x: hidden;
-	padding: 10px;
-  height:calc(100% - 64px);
+  padding: 0px 8px;
+  height:calc(100% - @CN_CONTENT_BTM - @CN_CONTENT_TOP);
   button{
     padding:8px;
     width: auto;
   }
+  .row .col-sm-12:first-child {
+    padding-bottom: 2px;
+  }  
   .col{
     // >input,>select,>button{
     >input:not([type=checkbox]),>select{
@@ -166,9 +171,9 @@
 }
 .cn_head {
   width:100%;
-  height: 4%;
-}
-.cn_head h2 {
-  font-weight: bold;
-  padding: 5px; 
+  height: @CN_CONTENT_TOP;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  padding: 0 8px; 
 }
\ No newline at end of file
diff --git a/style/less/themes/base.less b/style/less/themes/base.less
index 060e1ee8..40abb80c 100644
--- a/style/less/themes/base.less
+++ b/style/less/themes/base.less
@@ -1,4 +1,5 @@
 @APL_FONT: apl,monospace;
+@BRIGHT:#edeff5;
 @SANS_SERIF_FONT: Roboto,sans-serif;
 @THEME_PRIMARY:#7688d9;
 @THEME_SECONDARY:#edeff5;
@@ -15,10 +16,10 @@
 @DYALOG_LOGO_IMG:url(img/dyalog.png);
 @RIDE_LOGO_IMG:url(img/RideLogo.png);
 @SPLASH_IMG:url(img/RideSplash-Blue.png);
-@CN_LHS_BG:@THEME_SECONDARY;
+@CN_LHS_BG:@THEME_SECONDARY_DIM;
 @CN_RHS_BG:@THEME_SECONDARY;
 @CN_RHS_BG2:@THEME_SECONDARY;
-@CN_INPUT_BG:@CN_LHS_BG;
+@CN_INPUT_BG:@THEME_SECONDARY_DIM;
 @CN_INPUT_FG:black;
 @CN_SELECT_BG:@CN_LHS_BG;
 @CN_SELECT_FG:@THEME_DIMMED;
diff --git a/style/less/themes/dark.less b/style/less/themes/dark.less
index 356d5777..b3637ea6 100644
--- a/style/less/themes/dark.less
+++ b/style/less/themes/dark.less
@@ -2,7 +2,7 @@
 @THEME_WIN_BG:@THEME_SECONDARY_DIM;
 @THEME_WIN_FG:white;
 @CN_LHS_BG:#08090c;
-@CN_RHS_BG:@THEME_SECONDARY_DIM;
+@CN_RHS_BG:darken(@THEME_SECONDARY_DIM, 9%);
 @CN_RHS_BG2:black;
 @CN_INPUT_FG:white;
 @CN_SELECT_FG:white;
diff --git a/style/less/themes/light.less b/style/less/themes/light.less
index 6b7e20ad..09da1129 100644
--- a/style/less/themes/light.less
+++ b/style/less/themes/light.less
@@ -1,7 +1,7 @@
 @THEME_SECONDARY:#edeff5;
 @THEME_WIN_BG:@THEME_PRIMARY;
 @THEME_WIN_FG:black;
-@CN_LHS_BG:#edeff5;
+@CN_LHS_BG:@THEME_SECONDARY;
 @CN_RHS_BG:@THEME_SECONDARY;
 @CN_RHS_BG2:@THEME_SECONDARY;
 @CN_INPUT_FG:black;

From ab02042bf57543bb613bcc87df66a083fc461928 Mon Sep 17 00:00:00 2001
From: Jack Ninway <jack.ninway@gmail.com>
Date: Fri, 15 Sep 2023 12:41:48 +0200
Subject: [PATCH 3/7] More input field folding.

---
 index.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 20c8f98f..4df5e4c2 100644
--- a/index.html
+++ b/index.html
@@ -98,23 +98,23 @@
         </div>
         <div id=cn_ssh hidden>
           <div class="row">
-            <div class="col col-xs-3"><label for=cn_ssh_port class=cn_label>SSH <u>P</u>ort:</label></div>
-            <div class="col col-xs-9"><input id=cn_ssh_port name=ssh_port size=4 placeholder=22></div>
+            <div class="col col-sm-12 col-md-3"><label for=cn_ssh_port class=cn_label>SSH <u>P</u>ort:</label></div>
+            <div class="col col-sm-12 col-md-9"><input id=cn_ssh_port name=ssh_port size=4 placeholder=22></div>
           </div>
           <div class="row">
-            <div class="col col-xs-3"><label for=cn_ssh_user class=cn_label><u>U</u>ser:</label></div>
-            <div class="col col-xs-9"><input id=cn_ssh_user name=user size=10></div>
+            <div class="col col-sm-12 col-md-3"><label for=cn_ssh_user class=cn_label><u>U</u>ser:</label></div>
+            <div class="col col-sm-12 col-md-9"><input id=cn_ssh_user name=user size=10></div>
           </div>
           <div class="row">
-            <div class="col col-xs-3"><label for=cn_ssh_key class=cn_label><u>K</u>ey file:</label></div>
-            <div class="col col-xs-9">
+            <div class="col col-sm-12 col-md-3"><label for=cn_ssh_key class=cn_label><u>K</u>ey file:</label></div>
+            <div class="col col-sm-12 col-md-9">
               <input id=cn_ssh_key name=ssh_key class=browse>
               <button id=cn_ssh_key_dots class=tb_btn><span class="fas fa-ellipsis-h"></span></button>
             </div>
           </div>
           <div class="row">
-            <div class="col col-xs-3"><label for=cn_ssh_pass class=cn_label><u>P</u>assword / passphrase:</label></div>
-            <div class="col col-xs-9"><input id=cn_ssh_pass type=password></div>
+            <div class="col col-sm-12 col-md-3"><label for=cn_ssh_pass class=cn_label><u>P</u>assword&nbsp;/&nbsp;passphrase:</label></div>
+            <div class="col col-sm-12 col-md-9"><input id=cn_ssh_pass type=password></div>
           </div>
         </div>
         <div id=cn_ssl hidden>

From 81b5d8b5ac4861b5de8602186639811be56f308f Mon Sep 17 00:00:00 2001
From: Jack Ninway <jack.ninway@gmail.com>
Date: Mon, 18 Sep 2023 21:58:50 +0200
Subject: [PATCH 4/7] Remove line-height from color .less.

---
 style/less/colour/connect_page.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/style/less/colour/connect_page.less b/style/less/colour/connect_page.less
index 84ced228..532a86d0 100644
--- a/style/less/colour/connect_page.less
+++ b/style/less/colour/connect_page.less
@@ -46,7 +46,6 @@
 	}
 	>div{
 		border: 1px solid @DLG_BOTTOM_BG;
-		line-height: 36px;
 		background:@CN_FAV_BTN_BG;
 		color:@CN_FAV_BTN_FG;
 		&:not(:first-child) {

From 705acbd3ab1df71e81a77bafe66bed9ae9e7d58f Mon Sep 17 00:00:00 2001
From: Jack Ninway <jack.ninway@gmail.com>
Date: Mon, 18 Sep 2023 22:30:50 +0200
Subject: [PATCH 5/7] Vertically alligned start button.

---
 style/less/layout/connect_page.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/style/less/layout/connect_page.less b/style/less/layout/connect_page.less
index 897aaedb..2ddbd41d 100644
--- a/style/less/layout/connect_page.less
+++ b/style/less/layout/connect_page.less
@@ -65,6 +65,7 @@
 		cursor: default;
     .go {
       float: right;
+      margin-top:6px;
       margin-right:5px;
       width:32px;
       height:32px;

From 9e757cc6a8f27d389a3438e9d29b4142425f451f Mon Sep 17 00:00:00 2001
From: Gilgamesh Athoraya <e9gille@gmail.com>
Date: Tue, 19 Sep 2023 09:23:16 +0200
Subject: [PATCH 6/7] Re-instate line-height in correct file

---
 style/less/layout/connect_page.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/style/less/layout/connect_page.less b/style/less/layout/connect_page.less
index 2ddbd41d..09be1d51 100644
--- a/style/less/layout/connect_page.less
+++ b/style/less/layout/connect_page.less
@@ -59,13 +59,13 @@
   bottom: @CN_CONTENT_BTM;
 	overflow: auto;
 	>div {
-		line-height: 46px;
+		line-height: 36px;
 		padding: 0 2px 0 8px;
 		margin-bottom: 1px;
 		cursor: default;
     .go {
       float: right;
-      margin-top:6px;
+      margin-top:2px;
       margin-right:5px;
       width:32px;
       height:32px;

From d4ca67f30e6449849111e7466f7ac3b9c4b9ffed Mon Sep 17 00:00:00 2001
From: Gilgamesh Athoraya <e9gille@gmail.com>
Date: Tue, 19 Sep 2023 09:25:13 +0200
Subject: [PATCH 7/7] Refactor style constants and simplify

---
 style/less/colour/connect_page.less | 8 ++------
 style/less/colour/inputs.less       | 2 +-
 style/less/colour/preferences.less  | 2 +-
 style/less/layout/connect_page.less | 2 +-
 style/less/themes/base.less         | 9 +++------
 style/less/themes/dark.less         | 4 +---
 style/less/themes/light.less        | 4 +---
 7 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/style/less/colour/connect_page.less b/style/less/colour/connect_page.less
index 532a86d0..2d723048 100644
--- a/style/less/colour/connect_page.less
+++ b/style/less/colour/connect_page.less
@@ -57,12 +57,8 @@
 		}
 	}
 }
-#cn_lhs {
-	background: @CN_LHS_BG;
-}
-#cn, #cn_rhs {
-	background: linear-gradient(@CN_RHS_BG, @CN_RHS_BG2);
-	// background-color: @CN_RHS_BG;
+#cn, #cn_lhs, #cn_rhs {
+	background-color: @CN_BG;
 	select{
     background-color: @CN_INPUT_BG;
   }
diff --git a/style/less/colour/inputs.less b/style/less/colour/inputs.less
index aa947627..a27d6442 100644
--- a/style/less/colour/inputs.less
+++ b/style/less/colour/inputs.less
@@ -55,7 +55,7 @@ input:disabled+label{
     }
 }
 select{
-  background-color:	@CN_SELECT_BG;
+  background-color:	@CN_INPUT_BG;
   border: 1px solid @CN_INPUT_BORDER_COL;
   color:@CN_SELECT_FG;
 }
diff --git a/style/less/colour/preferences.less b/style/less/colour/preferences.less
index 96f4d619..ca27ac78 100644
--- a/style/less/colour/preferences.less
+++ b/style/less/colour/preferences.less
@@ -17,7 +17,7 @@
 }
 #prf_content {
   select{
-    background-color:	@CN_SELECT_BG;
+    background-color:	@CN_INPUT_BG;
     color:@CN_SELECT_FG;
   }
   h2 {
diff --git a/style/less/layout/connect_page.less b/style/less/layout/connect_page.less
index 09be1d51..1cfffd8e 100644
--- a/style/less/layout/connect_page.less
+++ b/style/less/layout/connect_page.less
@@ -111,7 +111,7 @@
 #cn_rhs_inner {
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 0px 8px;
+  padding: 2px 8px;
   height:calc(100% - @CN_CONTENT_BTM - @CN_CONTENT_TOP);
   button{
     padding:8px;
diff --git a/style/less/themes/base.less b/style/less/themes/base.less
index 40abb80c..c3c49065 100644
--- a/style/less/themes/base.less
+++ b/style/less/themes/base.less
@@ -1,5 +1,4 @@
 @APL_FONT: apl,monospace;
-@BRIGHT:#edeff5;
 @SANS_SERIF_FONT: Roboto,sans-serif;
 @THEME_PRIMARY:#7688d9;
 @THEME_SECONDARY:#edeff5;
@@ -7,6 +6,7 @@
 @THEME_DARK: darken(@THEME_PRIMARY, 25);
 @THEME_HIGHLIGHT: lighten(@THEME_PRIMARY, 10);
 @THEME_SECONDARY_DIM:darken(@THEME_SECONDARY,5);
+@THEME_SECONDARY_DARK:darken(@THEME_SECONDARY,10);
 @THEME_SECONDARY_HL:lighten(@THEME_SECONDARY,5);
 @THEME_WIN_BG:@THEME_PRIMARY;
 @THEME_WIN_FG:black;
@@ -16,12 +16,9 @@
 @DYALOG_LOGO_IMG:url(img/dyalog.png);
 @RIDE_LOGO_IMG:url(img/RideLogo.png);
 @SPLASH_IMG:url(img/RideSplash-Blue.png);
-@CN_LHS_BG:@THEME_SECONDARY_DIM;
-@CN_RHS_BG:@THEME_SECONDARY;
-@CN_RHS_BG2:@THEME_SECONDARY;
+@CN_BG:@THEME_SECONDARY;
 @CN_INPUT_BG:@THEME_SECONDARY_DIM;
 @CN_INPUT_FG:black;
-@CN_SELECT_BG:@CN_LHS_BG;
 @CN_SELECT_FG:@THEME_DIMMED;
 @CN_INPUT_BORDER_COL:fade(#a9a9a9,30);
 @CN_INPUT_DIS_BG:@CN_INPUT_BORDER_COL;
@@ -35,7 +32,7 @@
 @CN_FAV_BTN_SEL_FG:white;
 @CN_FAV_MENU_BTN_BG:transparent;
 @CN_FAV_MENU_BTN_FG:@THEME_PRIMARY;
-@CN_FAV_GO_BORDER:@CN_LHS_BG;
+@CN_FAV_GO_BORDER:@THEME_SECONDARY_DIM;
 @CN_RHS_BUTTON_BG:@THEME_PRIMARY;
 @CN_RHS_BUTTON_FG:@THEME_DARKGREY;
 @CN_LABEL_COL:@LABEL_COL;
diff --git a/style/less/themes/dark.less b/style/less/themes/dark.less
index b3637ea6..86076d52 100644
--- a/style/less/themes/dark.less
+++ b/style/less/themes/dark.less
@@ -1,9 +1,7 @@
 @THEME_SECONDARY:#272937;
 @THEME_WIN_BG:@THEME_SECONDARY_DIM;
 @THEME_WIN_FG:white;
-@CN_LHS_BG:#08090c;
-@CN_RHS_BG:darken(@THEME_SECONDARY_DIM, 9%);
-@CN_RHS_BG2:black;
+@CN_BG:@THEME_SECONDARY_DARK;
 @CN_INPUT_FG:white;
 @CN_SELECT_FG:white;
 @CN_FAV_BTN_BG:lighten(@THEME_WIN_BG,2);
diff --git a/style/less/themes/light.less b/style/less/themes/light.less
index 09da1129..0c4c3991 100644
--- a/style/less/themes/light.less
+++ b/style/less/themes/light.less
@@ -1,9 +1,7 @@
 @THEME_SECONDARY:#edeff5;
 @THEME_WIN_BG:@THEME_PRIMARY;
 @THEME_WIN_FG:black;
-@CN_LHS_BG:@THEME_SECONDARY;
-@CN_RHS_BG:@THEME_SECONDARY;
-@CN_RHS_BG2:@THEME_SECONDARY;
+@CN_BG:@THEME_SECONDARY;
 @CN_INPUT_FG:black;
 @CN_SELECT_FG:@THEME_DIMMED;
 @CN_FAV_BTN_BG:lighten(@THEME_SECONDARY,2);