connecting it up

Author: grantnelson-wf

playground/internal/react/shareUrlControl.go

@@ -40,7 +40,7 @@ func shareUrlComponent(props Props) *Element {
 			`type`:      `text`,
 			`className`: className,
 			`ref`:       shareUrlRef,
-			`value`:     shareUrl,
+			`value`:     `https://localhost:8080#/2523432342`, //shareUrl, // TODO(grantnelson-wf): FIX
 			`readOnly`:  true,
 			`onFocus`:   onShareUrlFocus,
 		}),

playground/playground.css

@@ -1,42 +1,45 @@
 :root {
+	--color-scheme: light;
 	--color-banner-title-text: black;
-	--color-banner-background: white;
-
-	--color-code-text: black;
-	--color-code-background: #EBDAC7;
-	--color-code-box-borders: black;
-	--color-line-nums-text: #888;
-	--color-line-nums-background: #EBDAC7;
-	--color-code-line-nums-border: black;
-
-	--color-output-normal-text: black;
-	--color-output-normal-background: #DDD;
-	--color-output-error-text: #800;
-	--color-output-error-background: #FCC;
+	--color-banner-background: 	#e5fafa;
 
 	--color-run-button-background: #FFF5D5;
 	--color-run-button-boarder: #0E6A8A;
-	--color-run-button-text: #0E6A8A;
+	--color-run-button-text: #black;
 	--color-run-button-hover-background: #0E6A8A;
 	--color-run-button-hover-boarder: #0E6A8A;
 	--color-run-button-hover-text: #FFF5D5;
 
-	--color-buttons-background: #EEE;
+	--color-buttons-background: #EED;
 	--color-buttons-boarder: #CCC;
-	--color-buttons-text: #222;
+	--color-buttons-text: #0E6A8A;
 	--color-buttons-hover-background: #0E6A8A;
 	--color-buttons-hover-boarder: #0E6A8A;
 	--color-buttons-hover-text: #FFF5D5;
 
-	--color-share-url-background: #EEE;
-	--color-share-url-boarder: #CCC;
-	--color-share-url-text: black;
-
+	--color-format-imports-text: #0E6A8A;
 	--color-toggle-background: #CCC;
 	--color-toggle-background-checked: #0E6A8A;
 	--color-toggle-foreground: #0E6A8A;
 	--color-toggle-foreground-checked: #FFF5D5;
 
+	--color-share-url-background: #EED;
+	--color-share-url-boarder: #CCC;
+	--color-share-url-text: black;
+
+	--color-code-text: black;
+	--color-code-background: #F5ECE3;
+	--color-code-box-borders: black;
+	--color-line-nums-text: #888;
+	--color-line-nums-background: #EBDAC7;
+	--color-code-line-nums-border: black;
+
+	--color-output-normal-text: black;
+	--color-output-normal-background: #DDD;
+	--color-output-error-text: #800;
+	--color-output-error-background: #FCC;
+
+	--color-buttons-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
 	--font-family-banner-title: Arial, sans;
 	--font-size-banner-title: 32px;
 	--font-size-banner-title-sub: 24px;
@@ -52,9 +55,45 @@
 }
 
 [data-theme='dark'] {
-	--color-banner-title-text: red;
-	--color-banner-background: blue;
-	/* TODO(grantnelson-wf): Finish */
+	--color-scheme: dark;
+	--color-banner-title-text: white;
+	--color-banner-background: #007D9C;
+
+	--color-run-button-background: #253443;
+	--color-run-button-boarder: #00ADD8;
+	--color-run-button-text: #00ADD8;
+	--color-run-button-hover-background: #00ADD8;
+	--color-run-button-hover-boarder: black;
+	--color-run-button-hover-text: black;
+
+	--color-buttons-background: #003647;
+	--color-buttons-boarder: #50B7E0;
+	--color-buttons-text: #50B7E0;
+	--color-buttons-hover-background: #50B7E0;
+	--color-buttons-hover-boarder: #333;
+	--color-buttons-hover-text: #333;
+
+	--color-format-imports-text: #7CF;
+	--color-toggle-background: #333;
+	--color-toggle-background-checked: #7CF;
+	--color-toggle-foreground: #00ADD8;
+	--color-toggle-foreground-checked: #003647;
+
+	--color-share-url-background: #333;
+	--color-share-url-boarder: #50B7E0;
+	--color-share-url-text: #7CF;
+
+	--color-code-text: #F0F1F2;
+	--color-code-background: #253443;
+	--color-code-box-borders: #50B7E0;
+	--color-line-nums-text: #7CF;
+	--color-line-nums-background: #253443;
+	--color-code-line-nums-border: #50B7E0;
+
+	--color-output-normal-text: #F0F1F2;
+	--color-output-normal-background: #2B2D2F;
+	--color-output-error-text: #E67193;
+	--color-output-error-background: #411;
 }
 
 html, body {
@@ -63,6 +102,7 @@ html, body {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
+	color-scheme: var(--color-scheme);
 }
 
 #playground {
@@ -115,7 +155,7 @@ html, body {
 	border-radius: 5px;
 	font-family: var(--font-family-controls);
 	font-size: var(--font-size-controls);
-	/* TODO(grantnelson-wf): Add some shadow, like box-shadow: 5px 10px 10px #888888;*/
+	box-shadow: var(--color-buttons-shadow);
 }
 
 /* The run code button */
@@ -148,6 +188,7 @@ html, body {
 #format-imports {
 	font-family: var(--font-family-controls);
 	font-size: var(--font-size-controls);
+	color: var(--color-format-imports-text);
 }
 
 .toggle-box-wrapper {
@@ -214,7 +255,7 @@ html, body {
 
 /* The text box containing the url for sharing code. */
 #share-url {
-	margin-left: 5px;
+	margin: 0px 5px 0px 5px;
 	flex-grow: 3;
 	font-family: var(--font-family-controls);
 	font-size: var(--font-size-controls);
@@ -246,6 +287,7 @@ html, body {
 	max-height: 80%;
 	height: 75%;
 	flex-shrink: 0;
+	background: var(--color-code-background);
 }
 
 /* The panel that contains the code text area and the lines numbers */
@@ -258,6 +300,7 @@ html, body {
 	resize: none;
 	width: 100%;
 	align-items: stretch;
+	background: var(--color-code-background);
 	border-top: 1px solid var(--color-code-box-borders);
 	border-bottom: 1px solid var(--color-code-box-borders);
 }