Web: Style and layout to Sleep Schedule management

* Use full-width form
  Fitting an input inside a <dl> makes it jump around
* Add button to toggle schedule on/off
* Add button to cancel editing the schedule
* Use time type inputs for Start/End Time fields
* Add help text to "Days of Week" to explain it's only the first 2 letters

web/app/src/assets/base.css

@@ -348,17 +348,18 @@ fieldset {
   border-radius: var(--border-radius);
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="time"] {
   appearance: none;
   background-color: var(--color-background);
   border-radius: var(--border-radius);
   border: var(--border-width) solid var(--border-color);
   box-sizing: border-box;
   display: block;
-  padding: var(--spacer-sm);
-  width: 100%;
   outline: none;
-  transition: border-color var(--transition-speed) ease-in-out
+  padding: var(--spacer-sm);
+  transition: border-color var(--transition-speed) ease-in-out;
+  width: 100%;
 }
 
 input[type="text"]:focus {
@@ -369,6 +370,17 @@ input[type="text"].is-invalid {
   border-color: var(--color-danger);
 }
 
+input[type="time"] {
+  height: 37px;
+}
+
+.input-help-text {
+  display: inline-block;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  margin: var(--spacer-xs);
+}
+
 select {
   background-color: var(--color-button-background);
   border-radius: var(--border-radius);
@@ -379,7 +391,7 @@ select {
   padding: var(--spacer-xs) var(--spacer-sm);
 }
 
-button, .btn {
+button, input[type='button'], .btn {
   align-items: center;
   background-color: var(--color-button-background);
   border-radius: var(--border-radius);
@@ -411,6 +423,7 @@ button, .btn {
 }
 
 button[disabled],
+input[type='button'][disabled],
 .btn[disabled] {
   background-color: transparent;
   border-color: var(--color-button-background);
@@ -420,6 +433,7 @@ button[disabled],
 }
 
 button:hover:not([disabled]),
+input[type='button']:hover:not([disabled]),
 .btn:hover:not([disabled]) {
   transition: all 100ms;
   color: white;
@@ -443,6 +457,17 @@ button:focus,
   color: var(--color-accent-text);
 }
 
+.btn-secondary {
+  background-color: transparent;
+  color: var(--color-text-muted);
+  border-color: var(--color-text-muted);
+}
+
+.btn-secondary:hover {
+  border-color: var(--color-text);
+  color: var(--color-text);
+}
+
 .btn-bar .btn.dangerous {
   background-color: #7c4d41;
   color: #e4c5c0;

web/app/src/components/workers/WorkerDetails.vue

@@ -34,26 +34,71 @@
       </dd>
     </dl>
 
-    <h3 class="sub-title">Sleep Schedule</h3>
+    <section class="sleep-schedule" :class="{'is-schedule-active': workerSleepSchedule.is_active}">
-    <button v-if="isScheduleEditing" @click="saveWorkerSleepSchedule" class="btn">Save</button>
+      <h3 class="sub-title">Sleep Schedule</h3>
-    <button v-else @click="isScheduleEditing = true" class="btn">Edit</button>
+      <div class="btn-bar-group">
-    <dl>
+        <div class="btn-bar">
-      <dt class="field-is_active">Use Schedule</dt>
+          <label for="toggle-sleep-schedule" v-if="!isScheduleEditing">
-      <dd v-if="isScheduleEditing"><input type="checkbox" v-model="workerSleepSchedule.is_active"></dd>
+            <input
-      <dd v-else><input @change="toggleWorkerSleepSchedule" type="checkbox" v-model="workerSleepSchedule.is_active"></dd>
+              v-model="workerSleepSchedule.is_active"
+              @change="toggleWorkerSleepSchedule"
+              class="toggle-sleep-schedule"
+              id="toggle-sleep-schedule"
+              type="checkbox">
+            <span class="btn btn-primary" v-if="workerSleepSchedule.is_active">
+              Turn Schedule Off
+            </span>
+            <span class="btn" v-else>
+              Turn Schedule On
+            </span>
+          </label>
 
-      <dt class="field-days_of_week">Days of Week</dt>
+          <button v-if="isScheduleEditing" @click="cancelEditWorkerSleepSchedule" class="btn">Cancel</button>
-      <dd v-if="isScheduleEditing"><input type="text" placeholder="mo tu we th fr" v-model="workerSleepSchedule.days_of_week"></dd>
+          <button v-if="isScheduleEditing" @click="saveWorkerSleepSchedule" class="btn btn-primary">Save Schedule</button>
-      <dd v-else>{{ workerSleepScheduleFormatted.days_of_week }}</dd>
+          <button v-else @click="isScheduleEditing = true" class="btn btn-secondary">Edit</button>
+        </div>
+      </div>
 
-      <dt class="field-start_time">Start Time</dt>
+      <p v-if="isScheduleEditing">Adjust at which time of the day (and on which days) this worker should go to sleep.</p>
-      <dd v-if="isScheduleEditing"><input type="text" placeholder="09:00" v-model="workerSleepSchedule.start_time"></dd>
+      <div class="sleep-schedule-edit" v-if="isScheduleEditing">
-      <dd v-else>{{ workerSleepScheduleFormatted.start_time }}</dd>
+        <div>
+          <label>Days of the week</label>
+          <input type="text" placeholder="mo tu we th fr" v-model="workerSleepSchedule.days_of_week">
+          <span class="input-help-text">
+            Write the days name using their first two letters, separated by spaces.
+            (e.g. mo tu we th fr)
+          </span>
+        </div>
+        <div>
+          <label>Start Time</label>
+          <input type="time" placeholder="09:00" v-model="workerSleepSchedule.start_time">
+        </div>
+        <div>
+          <label>End Time</label>
+          <input type="time" placeholder="18:00" v-model="workerSleepSchedule.end_time">
+        </div>
+      </div>
 
-      <dt class="field-end_time">End Time</dt>
+      <dl v-if="!isScheduleEditing">
-      <dd v-if="isScheduleEditing"><input type="text" placeholder="18:00" v-model="workerSleepSchedule.end_time"></dd>
+        <dt>Status</dt>
-      <dd v-else>{{ workerSleepScheduleFormatted.end_time }}</dd>
+        <dd>
-    </dl>
+          <span v-if="workerSleepSchedule.is_active">enabled</span>
+          <span v-else>disabled</span>
+        </dd>
+        <dt>Days of Week</dt>
+        <dd>
+          {{ workerSleepScheduleFormatted.days_of_week }}
+        </dd>
+        <dt>Start Time</dt>
+        <dd>
+          {{ workerSleepScheduleFormatted.start_time }}
+        </dd>
+        <dt>End Time</dt>
+        <dd>
+          {{ workerSleepScheduleFormatted.end_time }}
+        </dd>
+      </dl>
+    </section>
   </template>
 
   <div v-else class="details-no-item-selected">
@@ -148,6 +193,10 @@ export default {
       this.setWorkerSleepSchedule(`Updated schedule for worker ${this.workerData.name}`);
       this.isScheduleEditing = false;
     },
+    cancelEditWorkerSleepSchedule() {
+      this.fetchWorkerSleepSchedule();
+      this.isScheduleEditing = false;
+    },
     defaultWorkerSleepSchedule() {
       return new WorkerSleepSchedule(false, '', '', '')  // Default values in OpenAPI
     },
@@ -156,6 +205,46 @@ export default {
 </script>
 
 <style scoped>
+
+.sleep-schedule .btn-bar label+.btn {
+  margin-left: var(--spacer-sm);
+}
+.sleep-schedule dl {
+  color: var(--color-text-muted);
+}
+.sleep-schedule.is-schedule-active dl {
+  color: unset;
+}
+
+.sleep-schedule-edit {
+  display: flex;
+  margin: var(--spacer-lg) 0;
+}
+
+.sleep-schedule-edit > div {
+  margin-right: var(--spacer-sm);
+}
+
+.sleep-schedule-edit > div:first-child {
+  flex: 1;
+}
+
+.sleep-schedule-edit label {
+  margin-bottom: var(--spacer-xs);
+  font-size: var(--font-size-sm);
+  font-weight: bold;
+  color: var(--color-text-muted);
+}
+
+.toggle-sleep-schedule {
+  visibility: hidden;
+  display: none;
+}
+
+input[type="text"] {
+  font-family: var(--font-family-mono);
+}
+
 /* Prevent fields with long IDs from overflowing. */
 .field-id+dd {
   overflow: hidden;