Adding some very bad column headers

client/src/App.js

@@ -148,13 +148,35 @@ function App() {
         flexFlow: "column nowrap",
       }}
     >
-      <span>Ignore how ugly this site is I wrote it in like, 2 days</span>
+      <span>Ignore how ugly this site is I wrote it in a total of 10 hours</span>
       <span>Logged in as: {name}</span>
       <span>Green is definitely available</span>
       <span>Red is definitely not available</span>
       <span>Yellow is possibly available</span>
       <span>White is unknown availability</span>
       <span>WEEK buttons toggle a whole week</span>
+      <div
+        style={{
+          display: "flex",
+          flexFlow: "row nowrap",
+        }}
+      >
+        {
+          ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+          .map(day => (
+            <div
+              style={{
+                width: "10em",
+                height: "1.5em",
+                border: "1px solid black",
+                margin: "2px 2px 2px 2px",
+              }}
+            >
+              <span style={{ paddingLeft: "0.5em" }}>{day}</span>
+            </div>
+          ))
+        }
+      </div>
       {
         chunk(calendar, 7).map((row, ind) => (
           <div
@@ -165,11 +187,6 @@ function App() {
               alignItems: "center",
             }}
           >
-            <div
-              onClick={() => advance(row)}
-            >
-              WEEK
-            </div>
             <div 
               style={{
                 display: "flex",
@@ -187,6 +204,14 @@ function App() {
                 ))
               }
             </div>
+            <div
+              onClick={() => advance(row)}
+              style={{
+                paddingLeft: "1em",
+              }}
+            >
+              WEEK
+            </div>
           </div>
         ))
       }