What if the styling looked better but was just as lazy

client/src/App.js

@@ -18,26 +18,26 @@ const NameForm = ({ onNameSet }) => {
   const [name, setName] = useState("");
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexFlow: "column nowrap",
-      }}
-    >
+    <div className="login-form">
       <span>Vacation Planner</span>
       <span>Enter the name you want to use for the planner</span>
       <span>Remember the name you use b/c you'll need it to log back in at a later time</span>
       <span>Please just behave and use a reasonable name</span>
       <span>I spend my day job cleaning up edge cases from bad users</span>
-      <form onSubmit={() => onNameSet(name.trim())}>
-        <input 
-          type="text" 
+      <form
+        className="login-form__name-form"
+        onSubmit={() => onNameSet(name.trim())}
+      >
+        <input
+          className="login-form__textbox"
+          type="text"
           onChange={({ target }) => setName(target.value)}
           value={name}
         />
-        <input 
-          disabled={name === ""} 
-          type="submit" 
+        <input
+          className={`login-form__submit ${name !== "" ? "login-form__submit--enabled" : ""}`}
+          disabled={name === ""}
+          type="submit"
           value="Submit"
         />
       </form>
@@ -45,12 +45,6 @@ const NameForm = ({ onNameSet }) => {
   )
 }
 
-const colors = {
-  yes: "#0f0",
-  no: "#f00",
-  maybe: "#ff0",
-}
-
 const getNext = (user, availability) => ({
   yes: "no",
   no: "maybe",
@@ -64,32 +58,20 @@ const pad = num => {
   return snum
 }
 
-const Tile = ({ user, month, day, availability, onClick }) => (
-  <div 
+const Tile = ({ user, month, day, availability, showOthers, onClick }) => (
+  <div
     onClick={() => onClick(month, day, getNext(user, availability))}
-    style={{
-      display: "flex",
-      flexFlow: "column nowrap",
-      width: "10em",
-      height: "10em",
-      border: "1px solid black",
-      margin: "2px 2px 2px 2px",
-      backgroundColor: colors[availability.filter(({ name }) => name === user)[0]?.status] || "#fff",
-    }}
+    className={`week__tile week__tile--${availability.filter(({ name }) => name === user)[0]?.status ?? "unknown"}`}
   >
     <span>{pad(month)}/{pad(day)}</span>
     {
-      availability
+      showOthers && availability
         .filter(({ status }) => status && status !== "unknown")
         .filter(({ name }) => name !== user)
         .map(({ name, status }) => (
-          <span 
-            key={name} 
-            style={{ 
-              backgroundColor: colors[status],
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}
+          <span
+            key={name}
+            className={`week__availability week__availability--${status ?? "unknown"}`}
           >
             {name}
           </span>
@@ -108,25 +90,15 @@ const chunk = (arr, len) => {
 }
 
 const DaysOfWeek = () => (
-  <div
-    style={{
-      display: "flex",
-      flexFlow: "row nowrap",
-    }}
-  >
+  <div className="header__day-names">
     {
       ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
       .map(day => (
         <div
           key={day}
-          style={{
-            width: "10em",
-            height: "1.5em",
-            border: "1px solid black",
-            margin: "2px 2px 2px 2px",
-          }}
+          className="header__day-container"
         >
-          <span style={{ paddingLeft: "0.5em" }}>{day}</span>
+          <span className="header__day">{day}</span>
         </div>
       ))
     }
@@ -135,59 +107,46 @@ const DaysOfWeek = () => (
 
 const Header = ({ name }) => (
   <>
-    <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>
-    <DaysOfWeek />
+    <span className="header__item">Ignore how ugly this site is I wrote it in a total of 15 hours</span>
+    <span className="header__item">Logged in as: {name}</span>
+    <span className="header__item">Please toggle the tiles as follows:</span>
+    <div className="header__item header__list">
+      <span><span className="header__green-text">Green</span> if you are available/can probably be available with enough forewarning</span>
+      <span><span className="header__red-text">Red</span> if you are definitely not available</span>
+      <span><span className="header__yellow-text">Yellow</span> if you don't think you will be available but can't be sure this far out</span>
+    </div>
+    <span className="header__item">If you are leaving a tile blank I will assume you truly have no idea</span>
+    <span className="header__item">WEEK buttons toggle a whole week</span>
   </>
 )
 
-const Week = ({ days, user, change }) => (
-  <div
-    style={{
-      display: "flex",
-      flexFlow: "row nowrap",
-      alignItems: "center",
-    }}
-  >
-    <div 
-      style={{
-        display: "flex",
-        flexFlow: "row nowrap",
-      }}
-    >
+const Week = ({ days, user, change, showOthers }) => (
+  <div className="week">
+    <div className="week__days">
       {
         days.map(item => (
           <Tile
-            key={item.day} 
+            key={item.day}
             user={user}
             month={item.month}
             day={item.day}
             availability={item.availability}
+            showOthers={showOthers}
             onClick={(month, day, status) => change(user, [{ month, day, status }])}
           />
         ))
       }
     </div>
-    <div
+    <button
       onClick={() => change(user, days.map(({ month, day, availability }) => ({
         month,
         day,
         status: getNext(user, availability),
       })))}
-      style={{
-        marginLeft: "1em",
-        padding: "1em 1em 1em 1em",
-        background: "#ccc",
-        cursor: "pointer",
-      }}
+      className="week__button"
     >
       WEEK
-    </div>
+    </button>
   </div>
 )
 
@@ -228,27 +187,30 @@ const useCalendar = () => {
 function App() {
   const [name, setName] = useState(null);
   const [getDay, change] = useCalendar();
+  const [showAvailability, setShowAvailability] = useState(true);
 
-  if (name === null) { 
-    return <NameForm onNameSet={setName} />; 
+  if (name === null) {
+    return <NameForm onNameSet={setName} />;
   }
 
-
   return (
-    <div
-      style={{
-        display: "flex",
-        flexFlow: "column nowrap",
-      }}
-    >
+    <div className="page">
       <Header name={name} />
+      <button 
+        className="toggle-availability"
+        onClick={() => setShowAvailability(s => !s)}
+      >
+        {showAvailability ? "Hide": "Show"} Responses
+      </button>
+      <DaysOfWeek />
       {
-        chunk(DATES, 7).map(days => 
-          <Week 
-            key={`${days[0].month}-${days[0].day}`} 
-            days={days.map(({ month, day }) => ({ month, day, availability: getDay(month, day) }))} 
+        chunk(DATES, 7).map(days =>
+          <Week
+            key={`${days[0].month}-${days[0].day}`}
+            days={days.map(({ month, day }) => ({ month, day, availability: getDay(month, day) }))}
             change={change}
             user={name}
+            showOthers={showAvailability}
           />
         )
       }

client/src/index.css

@@ -1,3 +1,12 @@
+:root {
+  --available-color: #ccc;
+  --unavailable-color: #222;
+  --unsure-color: #222;
+  --available-bg-color: #080;
+  --unavailable-bg-color: #a00;
+  --unsure-bg-color: #aa0;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,9 +14,230 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  height: 100vh;
+  width: 100vw;
+  background-color: #222;
+  color: #ccc;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+.login-form {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  min-height: 200px;
+  width: 100%;
+  margin-left: 2em;
+  margin-top: 1em;
+}
+
+.login-form__name-form {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.login-form__textbox {
+  margin-right: 1em;
+  padding: 0.5em;
+  min-width: 200px;
+}
+
+.login-form__submit {
+  padding: 0.5em 1em;
+  border-radius: 0;
+  border: 4px solid #333;
+  padding: 8px;
+  background-color: #444;
+  color: #aaa;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.login-form__submit--enabled {
+  background-color: #555;
+  color: #fff;
+  transition: background-color .3s;
+}
+
+.login-form__submit--enabled:hover {
+  background-color: #777;
+}
+
+.page {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  margin-left: 2em;
+  margin-top: 1em;
+}
+
+.header__item {
+  margin-bottom: 0.5em;
+}
+
+.header__list {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-left: 1em;
+}
+
+.header__green-text {
+  color: var(--available-bg-color);
+  font-weight: 600;
+}
+
+.header__red-text {
+  color: var(--unavailable-bg-color);
+  font-weight: 600;
+}
+
+.header__yellow-text {
+  color: var(--unsure-bg-color);
+  font-weight: 600;
+}
+
+.header__day-names {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.header__day-container {
+  width: calc(10em + 8px);
+  height: 1.5em;
+  border: 1px solid rgb(201, 201, 201);
+  margin: 2px 2px 2px 2px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.header__day {
+  padding-left: 0.5em;
+}
+
+.toggle-availability {
+  width: 10em;
+  margin-bottom: 0.5em;
+  padding: 0.5em 1em;
+  border-radius: 0;
+  border: 4px solid #333;
+  padding: 8px;
+  background-color: #444;
+  color: #aaa;
+  font-weight: 600;
+  cursor: pointer;
+  background-color: #555;
+  color: #fff;
+  transition: background-color .3s;
+}
+
+.toggle-availability:hover {
+  background-color: #777;
+}
+
+.week {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.week__days {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.week__button {
+  margin-left: 1em;
+  padding: 0.5em 1em;
+  border-radius: 0;
+  border: 4px solid #333;
+  padding: 8px;
+  background-color: #444;
+  color: #aaa;
+  font-weight: 600;
+  cursor: pointer;
+  background-color: #555;
+  color: #fff;
+  transition: background-color .3s;
+}
+
+.week__button:hover {
+  background-color: #777;
+}
+
+.week__tile {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 10em;
+  height: 10em;
+  border: 1px solid rgb(201, 201, 201);
+  padding: 4px;
+  margin: 2px;
+}
+
+.week__tile--unknown {
+  background-color: #333;
+  color: #ccc;
+}
+
+.week__tile--yes {
+  background-color: var(--available-bg-color);
+  color: var(--available-color);
+}
+
+.week__tile--no {
+  background-color: var(--unavailable-bg-color);
+  color: var(--unavailable-color);
+}
+
+.week__tile--maybe {
+  background-color: var(--unsure-bg-color);
+  color: var(--unsure-color);
+}
+
+.week__availability {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 4px;
+  padding-right: 4px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
+.week__availability--unknown {
+  background-color: #333;
+  color: #ccc;
+}
+
+.week__availability--yes {
+  background-color: var(--available-bg-color);
+  color: var(--available-color);
+}
+
+.week__availability--no {
+  background-color: var(--unavailable-bg-color);
+  color: var(--unavailable-color);
+}
+
+.week__availability--maybe {
+  background-color: var(--unsure-bg-color);
+  color: var(--unsure-color);
+}