From 6bf4c7d7c8338c6373b824585d54eed3ce60ce89 Mon Sep 17 00:00:00 2001
From: jeanettephung <jeanettephung@hotmail.com>
Date: Thu, 7 Dec 2023 13:47:17 -0800
Subject: [PATCH] Update App.css to include styles for "Events" demo

---
 src/App.css | 67 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/App.css b/src/App.css
index 2291754..d81ced7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,18 +9,19 @@
   align-items: center;
   justify-content: center;
   font-size: 120%;
-  color: #fff;
+  color: white;
 }
 
 .App-buttonbar {
   display: flex;
   flex-direction: row;
+  padding-bottom: 2em;
 }
 
 [class*="App-button-"] {
-  background-color: #4caf50;
+  background-color: #4CAF50;
   border: none;
-  color: #fff;
+  color: white;
   padding: 15px 32px;
   text-align: center;
   display: inline-block;
@@ -30,33 +31,53 @@
   margin-right: 1em;
 }
 
-.App-button-plain:hover {
-  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
-    0 17px 50px 0 rgba(0, 0, 0, 0.19);
+.App-button-plain {
+  color: white;
 }
 
 .App-button-active {
-  color: #000;
+  color: black;
 }
 
-.App-source-button {
-  background-color: #1a456d;
-  border: none;
-  color: white;
-  padding: 0.5rem 1.25rem;
-  text-align: center;
-  display: inline-block;
-  font-size: 16px;
-  border-radius: 5px;
-  text-decoration: none;
-  margin-right: 1rem;
+.App-button-plain:hover {
+  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 }
 
-.App-demo-titlebar {
-  background-color: #c3c3c5;
-  padding: 15px 32px;
+.App-link {
+  color: #61dafb;
+}
+
+.Events-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.Events-output {
+  border: 1px;
+  border-style: solid;
+  width: 30%;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-right: 1em;
+}
+
+.Events-bound {
+  margin-left: 1em;
+  text-align: left;
+}
+
+.Events-bound ul {
+  margin-top: 0.5em;
+}
+
+.Events-renderState {
+  background-color:#c3c3c5;
+  color: white;
+  padding-top: 0.3em;
+  padding-bottom: 0.3em;
 }
 
-.App-demo-titlebar h3 {
-  color: #484848;
+.Events-nodeInfo {
+  margin-left: 1em;
+  text-align: left;
 }