From 5955819eeaaa1f0ac05abb89c2e90bd2df371cd3 Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <Grubba27@hotmail.com>
Date: Mon, 12 Dec 2022 15:54:54 -0300
Subject: [PATCH 1/4] wip: updating styles in tinytest

---
 packages/test-in-browser/driver.css  | 35 ++++++++++++++++++++--------
 packages/test-in-browser/driver.html |  7 ++++++
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/test-in-browser/driver.css b/packages/test-in-browser/driver.css
index f58f42fea1..ad59df151d 100644
--- a/packages/test-in-browser/driver.css
+++ b/packages/test-in-browser/driver.css
@@ -1,8 +1,23 @@
+
+* {
+  font-family: 'Space Grotesk', 'VT323', monospace;
+  /* Variables */
+  --bg-black : #18181b;
+  --primary-white : #F9FAFB;
+
+  --red-200 : #fecaca;
+  --red-500 : #dc2626;
+  --red-900 : #7f1d1d;
+
+  --gray-300: #d6d3d1;
+}
+
 body {
   height: 100vh;
   width: 100vw;
-  background-color: black !important;
-  color: white !important;
+  background-color: var(--bg-black) !important;
+  color: var(--primary-white) !important;
+
 }
 
 .test-in-browser {
@@ -125,8 +140,8 @@ body {
 .test_table .running .teststatus { color: #ccc; }
 
 .test_table .event .expected_fail { color: #600; }
-.test_table .event .fail { color: #d00; }
-.test_table .event .exception { color: #d00; }
+.test_table .event .fail { color: #dc2626; }
+.test_table .event .exception { color: #dc2626; }
 .test_table .event .nodata { color: #ccc; font-style: italic; }
 
 .test_table .event .xtimes, .test_table .event .failkey { font-weight: bold; }
@@ -137,7 +152,7 @@ body {
 
 .test_table .event:hover .debug {
     display: inline;
-    color: gray;
+    color: #737373; /* neutral 500 */
     text-decoration: underline;
     cursor: pointer;
 }
@@ -156,18 +171,18 @@ body {
   text-decoration: none;
 }
 .string_equal_expected ins {
-  background: #ed0;
+  background: #facc15; /* yellow 400 */
 }
 .string_equal_actual ins {
-  color: #d00;
-  background: #fcc;
+  color: #dc2626; /* red 600 */
+  background: #fecaca; /* red  200 */
 }
 
 #current-client-test {
-  color: #ccc;
+  color: #d6d3d1; /* gray  300 */
   margin-right: 15px;
 }
 
 .failedTests {
-  color: #900; /* red */
+  color: #7f1d1d; /* red 900 */
 }
diff --git a/packages/test-in-browser/driver.html b/packages/test-in-browser/driver.html
index 52bd3b8aad..0d86cdb6b4 100644
--- a/packages/test-in-browser/driver.html
+++ b/packages/test-in-browser/driver.html
@@ -1,5 +1,12 @@
 
 <template name="testInBrowserBody">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <div class="test-in-browser">
   {{> navBar}}
   <div class="test-results">

From c5267197e6293b874f60c6d3093e775c583f964b Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <Grubba27@hotmail.com>
Date: Mon, 12 Dec 2022 19:43:20 -0300
Subject: [PATCH 2/4] test: adjusted css

---
 packages/test-in-browser/driver.css | 234 +++++++++++++++++-----------
 1 file changed, 142 insertions(+), 92 deletions(-)

diff --git a/packages/test-in-browser/driver.css b/packages/test-in-browser/driver.css
index ad59df151d..cdd128fb8b 100644
--- a/packages/test-in-browser/driver.css
+++ b/packages/test-in-browser/driver.css
@@ -1,150 +1,197 @@
 
 * {
-  font-family: 'Space Grotesk', 'VT323', monospace;
-  /* Variables */
-  --bg-black : #18181b;
-  --primary-white : #F9FAFB;
+    font-family: 'Space Grotesk', 'VT323', monospace;
 
-  --red-200 : #fecaca;
-  --red-500 : #dc2626;
-  --red-900 : #7f1d1d;
+    /* Variables */
+    /* for reference: https://tailwindcss.com/docs/customizing-colors */
 
-  --gray-300: #d6d3d1;
+    --bg-black: #18181b;
+    --neutral-black: #262626;
+    --primary-white: #F9FAFB;
+    --red-50: #fef2f2;
+    --red-200: #fecaca;
+    --red-600: #dc2626;
+    --red-900: #7f1d1d;
+    --gray-300: #d6d3d1;
+    --gray-500: #737373;
+
+
+    --blue-500: #6366f1;
+    --blue-50: #eef2ff;
+
+    --yellow-400: #facc15;
+
+    --green-600: #16a34a;
 }
 
 body {
-  height: 100vh;
-  width: 100vw;
-  background-color: var(--bg-black) !important;
-  color: var(--primary-white) !important;
+    height: 100vh;
+    width: 100vw;
+    background-color: var(--bg-black) !important;
+    color: var(--primary-white) !important;
 
 }
 
 .test-in-browser {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
 }
 
 .test-results {
-  flex: 1;
-  overflow: auto;
+    flex: 1;
+    overflow: auto;
 }
 
 #testProgressBar {
-  flex: 1;
-  max-width: 400px;
-  position: relative;
+    flex: 1;
+    max-width: 400px;
+    position: relative;
 }
 
 .header {
-  font-family: Arial, sans-serif;
-  font-size: 24px;
-  padding-bottom: 4px;
+    font-family: Arial, sans-serif;
+    font-size: 24px;
+    padding-bottom: 4px;
 }
 
 .header.in-progress {
-  color: #ccc;
+    color: var(--red-50);
 }
 
 .header.pass {
-  color: #090; /* green */
+    color: #090; /* green */
 }
 
 .header.fail {
-  color: #900; /* red */
-  font-weight: bold;
+    color: #900; /* red */
+    font-weight: bold;
 }
 
 .header .time {
-  color: #666;
-  font-size: 14px;
+    color: var(--gray-500);
+    font-size: 14px;
 }
 
 .test_table {
-  font-family: Arial, sans-serif;
-  font-size: 16px;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
 }
 
 .test_table .group {
-  border-left: 1px solid #ddd;
+    border-left: 1px solid #ddd;
 }
 
 .test_table .group .group {
-  margin-left: 20px;
+    margin-left: 20px;
 }
 
 .test_table .test {
-  margin-left: 20px;
+    margin-left: 20px;
 }
 
 .test_table .testname {
-  margin-left: 200px;
-  line-height: 24px;
-  vertical-align: middle;
-  text-decoration: underline;
-  cursor: pointer;
+    margin-left: 200px;
+    line-height: 24px;
+    vertical-align: middle;
+    text-decoration: underline;
+    cursor: pointer;
 }
 
 .test_table .groupname {
-  font-weight: bold;
-  background: #212121;
-  padding-left: 5px;
-  line-height: 24px;
-  vertical-align: middle;
-  font-size: 16px;
-  color: white;
+    font-weight: bold;
+    background: var(--neutral-black);
+    padding-left: 5px;
+    line-height: 24px;
+    vertical-align: middle;
+    font-size: 16px;
+    color: var(--primary-white);
 }
 
 .test_table .event {
-  margin-left: 20px;
-  font-size: 14px;
-  border-left: 2px solid #def;
-  padding: 4px;
-  position: relative;
+    margin-left: 20px;
+    font-size: 14px;
+    border-left: 2px solid var(--blue-50);
+    padding: 4px;
+    position: relative;
 }
 
-.test_table .test .testrow { position: relative; overflow: hidden; /*hasLayout*/ }
+.test_table .test .testrow {
+    position: relative;
+    overflow: hidden; /*hasLayout*/
+}
 
-.test_table .running .testname { color: #66c; /* blue */ }
-.test_table .failed .testname { color: #900; /* red */ }
-.test_table .succeeded .testname { color: #090; /* green */ }
+.test_table .running .testname {
+    color: var(--blue-500);
+}
+
+.test_table .failed .testname {
+    color: var(--red-900);
+}
+
+.test_table .succeeded .testname {
+    color: var(--green-600);
+}
 
 .test_table .teststatus {
-  position: absolute;
-  height: 100%;
-  width: 100px;
-  left: 0px;
-  top: 0;
-  text-align: center;
-  line-height: 24px;
-  vertical-align: middle;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: 0px;
+    top: 0;
+    text-align: center;
+    line-height: 24px;
+    vertical-align: middle;
 }
 
 .test_table .testtime {
-  position: absolute;
-  height: 100%;
-  width: 75px;
-  margin-right: 5px;
-  left: 100px;
-  top: 0;
-  text-align: right;
-  line-height: 24px;
-  vertical-align: middle;
-  font-size: 14px;
-  color: #757575;
+    position: absolute;
+    height: 100%;
+    width: 75px;
+    margin-right: 5px;
+    left: 100px;
+    top: 0;
+    text-align: right;
+    line-height: 24px;
+    vertical-align: middle;
+    font-size: 14px;
+    color: var(--gray-500);
 }
 
-.test_table .succeeded .teststatus { color: #090; /* green */  background: black; }
-.test_table .failed .teststatus { color: #900; /* red */  background: black; }
-.test_table .running .teststatus { color: #ccc; }
+.test_table .succeeded .teststatus {
+    color: var(--green-600);
+    background: var(--bg-black);
+}
 
-.test_table .event .expected_fail { color: #600; }
-.test_table .event .fail { color: #dc2626; }
-.test_table .event .exception { color: #dc2626; }
-.test_table .event .nodata { color: #ccc; font-style: italic; }
+.test_table .failed .teststatus {
+    color: var(--red-900); /* red */
+    background: var(--bg-black);
+}
 
-.test_table .event .xtimes, .test_table .event .failkey { font-weight: bold; }
+.test_table .running .teststatus {
+    color: var(--red-50);
+}
+
+.test_table .event .expected_fail {
+    color: var(--red-900);
+}
+
+.test_table .event .fail {
+    color: var(--red-600);
+}
+
+.test_table .event .exception {
+    color: var(--red-600);
+}
+
+.test_table .event .nodata {
+    color: var(--red-50);
+    font-style: italic;
+}
+
+.test_table .event .xtimes, .test_table .event .failkey {
+    font-weight: bold;
+}
 
 .test_table .event .debug {
     display: none;
@@ -152,7 +199,7 @@ body {
 
 .test_table .event:hover .debug {
     display: inline;
-    color: #737373; /* neutral 500 */
+    color: var(--gray-500);
     text-decoration: underline;
     cursor: pointer;
 }
@@ -164,25 +211,28 @@ body {
 }
 
 .string_equal {
-  line-height: 1.2;
-  margin-left: 30px;
+    line-height: 1.2;
+    margin-left: 30px;
 }
+
 .string_equal ins {
-  text-decoration: none;
+    text-decoration: none;
 }
+
 .string_equal_expected ins {
-  background: #facc15; /* yellow 400 */
+    background: var(--yellow-400);
 }
+
 .string_equal_actual ins {
-  color: #dc2626; /* red 600 */
-  background: #fecaca; /* red  200 */
+    color: var(--red-600);
+    background: var(--red-200);
 }
 
 #current-client-test {
-  color: #d6d3d1; /* gray  300 */
-  margin-right: 15px;
+    color: var(--gray-300);
+    margin-right: 15px;
 }
 
 .failedTests {
-  color: #7f1d1d; /* red 900 */
+    color: var(--red-900);
 }

From 34e9ceda117b79b1d972e0009bafb1363a57e271 Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <Grubba27@hotmail.com>
Date: Mon, 12 Dec 2022 19:48:07 -0300
Subject: [PATCH 3/4] chore: removed minecraft font from tinytest

---
 packages/test-in-browser/driver.css  | 2 +-
 packages/test-in-browser/driver.html | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/test-in-browser/driver.css b/packages/test-in-browser/driver.css
index cdd128fb8b..66a5650de8 100644
--- a/packages/test-in-browser/driver.css
+++ b/packages/test-in-browser/driver.css
@@ -1,6 +1,6 @@
 
 * {
-    font-family: 'Space Grotesk', 'VT323', monospace;
+    font-family: 'Space Grotesk', monospace;
 
     /* Variables */
     /* for reference: https://tailwindcss.com/docs/customizing-colors */
diff --git a/packages/test-in-browser/driver.html b/packages/test-in-browser/driver.html
index 0d86cdb6b4..c42d77fdac 100644
--- a/packages/test-in-browser/driver.html
+++ b/packages/test-in-browser/driver.html
@@ -1,9 +1,5 @@
 
 <template name="testInBrowserBody">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
-
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">

From 35a806e1cb4c411f879074ed1fb32f5da0bb17fe Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <Grubba27@hotmail.com>
Date: Tue, 13 Dec 2022 10:10:18 -0300
Subject: [PATCH 4/4] styles: addressing comments

---
 packages/test-in-browser/driver.css  | 6 ++++--
 packages/test-in-browser/driver.html | 3 ---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/test-in-browser/driver.css b/packages/test-in-browser/driver.css
index 66a5650de8..ad37252a17 100644
--- a/packages/test-in-browser/driver.css
+++ b/packages/test-in-browser/driver.css
@@ -1,7 +1,5 @@
 
 * {
-    font-family: 'Space Grotesk', monospace;
-
     /* Variables */
     /* for reference: https://tailwindcss.com/docs/customizing-colors */
 
@@ -184,6 +182,10 @@ body {
     color: var(--red-600);
 }
 
+.exception pre {
+    color: var(--primary-white);
+}
+
 .test_table .event .nodata {
     color: var(--red-50);
     font-style: italic;
diff --git a/packages/test-in-browser/driver.html b/packages/test-in-browser/driver.html
index c42d77fdac..52bd3b8aad 100644
--- a/packages/test-in-browser/driver.html
+++ b/packages/test-in-browser/driver.html
@@ -1,8 +1,5 @@
 
 <template name="testInBrowserBody">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <div class="test-in-browser">
   {{> navBar}}
   <div class="test-results">