Unsnooze works; #20 is complete

also:
- wrapped up some other stylings
- snoozed requests still show in the journal; this logic will change with recurrence work, so that bug is deferred

src/app/src/App.vue

@@ -54,18 +54,40 @@ body {
 }
 h1, h2, h3, h4, h5 {
   font-weight: 500;
+  margin-top: 0;
+}
+h1 {
+  font-size: 2.5rem;
+}
+h2 {
+  font-size: 2rem;
+}
+h3 {
+  font-size: 1.75rem;
+}
+h4 {
+  font-size: 1.5rem;
+}
+h5 {
+  font-size: 1.25rem;
 }
 p {
   margin-bottom: 0;
 }
+input, textarea {
+  border-radius: .25rem;
+}
 button,
 a[role="button"] {
   border: solid 1px #050;
   border-radius: .5rem;
-  background-color: whitesmoke;
+  background-color: rgb(235, 235, 235);
-}
-a[role="button"] {
   padding: .25rem;
+  font-size: 1rem;
+}
+a[role="button"]:link,
+a[role="button"]:visited {
+  color: black;
 }
 button.primary,
 a[role="button"].primary {
@@ -149,6 +171,10 @@ a:hover {
   max-width: 40rem;
   margin: auto;
 }
+.mpj-skinny {
+  max-width: 20rem;
+  margin: auto;
+}
 .mpj-modal {
   position: fixed;
   z-index: 8;
@@ -182,7 +208,7 @@ a:hover {
   margin: -1rem -1rem .5rem;
   border-radius: .4rem;
 }
-.mpj-modal-content header h3 {
+.mpj-modal-content header h5 {
   color: white;
   margin: 0;
   padding: 1rem;

src/app/src/components/Journal.vue

@@ -3,10 +3,10 @@ article.mpj-main-content-wide(role='main')
   page-title(:title='title')
   p(v-if='isLoadingJournal') Loading your prayer journal...
   template(v-else)
+    .mpj-text-center
       router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
-                role='button')
+                  role='button').
-      md-icon(icon='add_box')
+        #[md-icon(icon='add_box')] Add a New Request
-      |   Add a New Request
     br
     .mpj-journal(v-if='journal.length > 0')
       request-card(v-for='request in journal'

src/app/src/components/request/ActiveRequests.vue

@@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
       No active requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
     request-list-item(v-for='req in requests'
                       :key='req.requestId'
-                      :request='req')
+                      :request='req'
+                      :toast='toast')
   p(v-else) Loading journal...
 </template>
 
@@ -36,6 +37,9 @@ export default {
     },
     ...mapState(['journal', 'isLoadingJournal'])
   },
+  created () {
+    this.$on('requestSnoozed', this.ensureJournal)
+  },
   methods: {
     async ensureJournal () {
       if (!Array.isArray(this.journal)) {
@@ -45,15 +49,6 @@ export default {
       this.requests = this.journal
         .sort((a, b) => a.showAfter - b.showAfter)
       this.loaded = true
-    },
-    async cancelSnooze (requestId) {
-      await this.$store.dispatch(actions.SNOOZE_REQUEST, {
-        progress: this.$Progress,
-        requestId: requestId,
-        until: 0
-      })
-      this.toast.showToast('Request un-snoozed', { theme: 'success' })
-      this.ensureJournal()
     }
   },
   async mounted () {

src/app/src/components/request/AnsweredRequests.vue

@@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
       No answered requests found; once you have marked one as “Answered”, it will appear here
     request-list-item(v-for='req in requests'
                       :key='req.requestId'
-                      :request='req')
+                      :request='req'
+                      :toast='toast')
   p(v-else) Loading answered requests...
 </template>
 

src/app/src/components/request/NotesEdit.vue

@@ -1,9 +1,8 @@
 <template lang="pug">
-.mpj-modal(v-show='notesVisible'
+.mpj-modal(v-show='notesVisible')
-           @edit='openDialog()')
   .mpj-modal-content.mpj-narrow
     header.mpj-bg
-      h3 Add Notes to Prayer Request
+      h5 Add Notes to Prayer Request
     label(for='notes') Notes
     br
     textarea#notes(v-model='form.notes'

src/app/src/components/request/RequestCard.vue

@@ -28,7 +28,8 @@ export default {
   },
   computed: {
     shouldDisplay () {
-      return Date.now() >= this.request.showAfter
+      const now = Date.now()
+      return Math.max(now, this.request.showAfter, this.request.snoozedUntil) === now
     }
   },
   methods: {
@@ -77,7 +78,10 @@ export default {
 }
 .mpj-card-header button {
   margin: .25rem;
-  font-size: .8rem;
+  padding: 0 .25rem;
+}
+.mpj-card-header button .material-icons {
+  font-size: 1.3rem;
 }
 .mpj-request-card .card-text {
   margin-left: 1rem;

src/app/src/components/request/RequestListItem.vue

@@ -3,22 +3,18 @@ p.mpj-request-text
   | {{ request.text }}
   br
   br
-  router-link(:to="{ name: 'FullRequest', params: { id: request.requestId } }"
+  button(@click='viewFull'
-              role='button'
+         title='View Full Request').
-              title='View Full Request')
+    #[md-icon(icon='description')] View Full Request
-    md-icon(icon='description')
+  |    
-    = ' View Full Request'
+  button(v-if='!isAnswered'
-  |  
+         @click='editRequest'
-  router-link(v-if='!isAnswered'
+         title='Edit Request').
-              :to="{ name: 'EditRequest', params: { id: request.requestId } }"
+    #[md-icon(icon='edit')] Edit Request
-              role='button'
+  |    
-              title='Edit Request')
+  button(v-if='isSnoozed'
-    md-icon(icon='edit')
+         @click='cancelSnooze()').
-    = ' Edit Request'
+    #[md-icon(icon='restore')] Cancel Snooze
-  |  
-  button(v-if='isSnoozed' @click='cancelSnooze()')
-    md-icon(icon='restore')
-    = ' Cancel Snooze'
   br(v-if='isSnoozed || isAnswered')
   small(v-if='isSnoozed').mpj-muted-text: em.
       Snooze expires #[date-from-now(:value='request.snoozedUntil')]
@@ -34,7 +30,8 @@ import actions from '@/store/action-types'
 export default {
   name: 'request-list-item',
   props: {
-    request: { required: true }
+    request: { required: true },
+    toast: { required: true }
   },
   data () {
     return {}
@@ -58,7 +55,13 @@ export default {
         until: 0
       })
       this.toast.showToast('Request un-snoozed', { theme: 'success' })
-      // FIXME: communicate with the parent to refresh // this.ensureJournal()
+      this.$parent.$emit('requestUnsnoozed')
+    },
+    editRequest () {
+      this.$router.push({ name: 'EditRequest', params: { id: this.request.requestId } })
+    },
+    viewFull () {
+      this.$router.push({ name: 'FullRequest', params: { id: this.request.requestId } })
     }
   }
 }

src/app/src/components/request/SnoozeRequest.vue

@@ -1,23 +1,22 @@
 <template lang="pug">
-b-modal(v-model='snoozeVisible'
+.mpj-modal(v-show='snoozeVisible')
-        header-bg-variant='mpj'
+  .mpj-modal-content.mpj-skinny
-        header-text-variant='light'
+    header.mpj-bg
-        size='lg'
+      h5 Snooze Prayer Request
-        title='Snooze Prayer Request'
+    p.mpj-text-center
-        @edit='openDialog()')
+      label(for='until') Until
-  b-form
+      = ' '
-    b-form-group(label='Until'
+      input#until(type='date'
-                 label-for='until')
-      b-input#until(type='date'
                   v-model='form.snoozedUntil'
                   autofocus)
-  div.w-100.text-right(slot='modal-footer')
+    br
-    b-btn(variant='primary'
+    .mpj-text-right
-          :disabled='!isValid'
+      button.primary(:disabled='!isValid'
-          @click='snoozeRequest()') Snooze
+                     @click='snoozeRequest()').
+        #[md-icon(icon='snooze')] Snooze
       | &nbsp; &nbsp;
-    b-btn(variant='outline-secondary'
+      button(@click='closeDialog()').
-          @click='closeDialog()') Cancel
+        #[md-icon(icon='undo')] Cancel
 </template>
 
 <script>

src/app/src/components/request/SnoozedRequests.vue

@@ -6,7 +6,8 @@ article.mpj-main-content(role='main')
       No snoozed requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
     request-list-item(v-for='req in requests'
                       :key='req.requestId'
-                      :request='req')
+                      :request='req'
+                      :toast='toast')
   p(v-else) Loading journal...
 </template>
 
@@ -36,6 +37,9 @@ export default {
     },
     ...mapState(['journal', 'isLoadingJournal'])
   },
+  created () {
+    this.$on('requestUnsnoozed', this.ensureJournal)
+  },
   methods: {
     async ensureJournal () {
       if (!Array.isArray(this.journal)) {
@@ -46,15 +50,6 @@ export default {
         .filter(req => req.snoozedUntil > Date.now())
         .sort((a, b) => a.snoozedUntil - b.snoozedUntil)
       this.loaded = true
-    },
-    async cancelSnooze (requestId) {
-      await this.$store.dispatch(actions.SNOOZE_REQUEST, {
-        progress: this.$Progress,
-        requestId: requestId,
-        until: 0
-      })
-      this.toast.showToast('Request un-snoozed', { theme: 'success' })
-      this.ensureJournal()
     }
   },
   async mounted () {