minimum effort to make it mobile friendly, fuck it go to prod

client/src/App.js

@@ -90,15 +90,15 @@ const chunk = (arr, len) => {
 }
 
 const DaysOfWeek = () => (
-  <div className="header__day-names">
+  <div className="header__day-row">
     {
-      ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+      ["Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"]
       .map(day => (
         <div
           key={day}
-          className="header__day-container"
+          className="header__day"
         >
-          <span className="header__day">{day}</span>
+          {day}
         </div>
       ))
     }
@@ -116,7 +116,7 @@ const Header = ({ name }) => (
       <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>
+    <span className="header__item">W buttons toggle a whole week</span>
   </>
 )
 
@@ -145,7 +145,7 @@ const Week = ({ days, user, change, showOthers }) => (
       })))}
       className="week__button"
     >
-      WEEK
+      W
     </button>
   </div>
 )
@@ -187,7 +187,7 @@ const useCalendar = () => {
 function App() {
   const [name, setName] = useState(null);
   const [getDay, change] = useCalendar();
-  const [showAvailability, setShowAvailability] = useState(true);
+  const [showAvailability, setShowAvailability] = useState(false);
 
   if (name === null) {
     return <NameForm onNameSet={setName} />;
@@ -200,7 +200,7 @@ function App() {
         className="toggle-availability"
         onClick={() => setShowAvailability(s => !s)}
       >
-        {showAvailability ? "Hide": "Show"} Responses
+        {showAvailability ? "Hide": "Show"} Other Responses
       </button>
       <DaysOfWeek />
       {

client/src/index.css

@@ -35,10 +35,8 @@ code {
   flex-flow: column nowrap;
   justify-content: space-between;
   align-items: flex-start;
-  min-height: 200px;
-  width: 100%;
-  margin-left: 2em;
-  margin-top: 1em;
+  min-height: 300px;
+  margin: 1em;
 }
 
 .login-form__name-form {
@@ -78,9 +76,12 @@ code {
 .page {
   display: flex;
   flex-flow: column nowrap;
-  width: 100%;
-  margin-left: 2em;
-  margin-top: 1em;
+}
+
+@media screen and (min-width: 900px) {
+  .page {
+    margin: 1em;
+  }
 }
 
 .header__item {
@@ -110,28 +111,38 @@ code {
   font-weight: 600;
 }
 
-.header__day-names {
+.header__day-row {
   display: flex;
   flex-flow: row nowrap;
 }
 
-.header__day-container {
-  width: calc(10em + 8px);
+.header__day {
   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;
+  justify-content: center;
   align-items: center;
 }
 
-.header__day {
-  padding-left: 0.5em;
+@media screen and (min-width: 900px) {
+  .header__day {
+    width: calc(10em + 8px);
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .header__day {
+    width: 40px;
+    font-size: 10px;
+    font-weight: 800;
+  }
 }
 
 .toggle-availability {
-  width: 10em;
+  min-width: 10em;
+  max-width: 20em;
   margin-bottom: 0.5em;
   padding: 0.5em 1em;
   border-radius: 0;
@@ -165,7 +176,6 @@ code {
 }
 
 .week__button {
-  margin-left: 1em;
   padding: 0.5em 1em;
   border-radius: 0;
   border: 4px solid #333;
@@ -179,15 +189,35 @@ code {
   transition: background-color .3s;
 }
 
+@media screen and (min-width: 900px) {
+  .week__button {
+    margin-left: 1em;
+  }
+}
+
 .week__button:hover {
   background-color: #777;
 }
 
+@media screen and (min-width: 900px) {
+  .week__tile {
+    width: 10em;
+    height: 10em;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .week__tile {
+    width: 32px;
+    min-height: 4em;
+    font-size: 10px;
+    font-weight: 800;
+  }
+}
+
 .week__tile {
   display: flex;
   flex-flow: column nowrap;
-  width: 10em;
-  height: 10em;
   border: 1px solid rgb(201, 201, 201);
   padding: 4px;
   margin: 2px;