From 702ae1811c8826f833c90bcdbe976a74020a1faf Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel.summers.2415@gmail.com>
Date: Sat, 24 Aug 2019 22:32:35 -0500
Subject: [PATCH] Complete v2 UI, pending human testing

---
 src/app/src/App.vue                           | 190 +++---------------
 src/app/src/components/Home.vue               |  10 +-
 src/app/src/components/Journal.vue            |  26 +--
 src/app/src/components/common/Navigation.vue  |  49 +----
 src/app/src/components/common/PageTitle.vue   |   4 +-
 .../src/components/legal/PrivacyPolicy.vue    | 109 +++++-----
 .../src/components/legal/TermsOfService.vue   |  71 ++++---
 .../src/components/request/ActiveRequests.vue |   2 +-
 .../components/request/AnsweredRequests.vue   |   2 +-
 .../src/components/request/EditRequest.vue    | 125 +++++-------
 .../src/components/request/FullRequest.vue    |  38 ++--
 src/app/src/components/request/NotesEdit.vue  |  41 ++--
 .../src/components/request/RequestCard.vue    |  64 ++----
 .../components/request/RequestListItem.vue    |  23 +--
 .../src/components/request/SnoozeRequest.vue  |   8 +-
 .../components/request/SnoozedRequests.vue    |   2 +-
 16 files changed, 257 insertions(+), 507 deletions(-)

diff --git a/src/app/src/App.vue b/src/app/src/App.vue
index c4b9915..3e2898b 100644
--- a/src/app/src/App.vue
+++ b/src/app/src/App.vue
@@ -4,7 +4,7 @@
     md-app-toolbar.md-large.md-dense.md-primary
       .md-toolbar-row
         .md-toolbar-section-start
-          span.md-title
+          router-link(to='/').md-title
             span(style='font-weight:100;') my
             span(style='font-weight:400;') Prayer
             span(style='font-weight:700;') Journal
@@ -18,14 +18,15 @@
                   :md-duration='snackbar.interval'
                   ref='snackbar')
         | {{ snackbar.message }}
-      p.mpj-muted-text.mpj-text-right
-        | myPrayerJournal v{{ version }}
-        br
-        em: small.
-          #[router-link(:to="{ name: 'PrivacyPolicy' }") Privacy Policy] &bull;
-          #[router-link(:to="{ name: 'TermsOfService' }") Terms of Service] &bull;
-          #[a(href='https://github.com/bit-badger/myprayerjournal' target='_blank') Developed] and hosted by
-          #[a(href='https://bitbadger.solutions' target='_blank') Bit Badger Solutions]
+      footer
+        p.mpj-muted-text.mpj-text-right
+          | myPrayerJournal v{{ version }}
+          br
+          em: small.
+            #[router-link(to='/legal/privacy-policy') Privacy Policy] &bull;
+            #[router-link(to='/legal/terms-of-service') Terms of Service] &bull;
+            #[a(href='https://github.com/bit-badger/myprayerjournal' target='_blank') Developed] and hosted by
+            #[a(href='https://bitbadger.solutions' target='_blank') Bit Badger Solutions]
 </template>
 
 <script>
@@ -103,125 +104,31 @@ export default {
 </script>
 
 <style lang="sass">
+// Custom theme
+@import "~vue-material/dist/theme/engine"
+@include md-register-theme("default", (primary: md-get-palette-color(green, 800), accent: md-get-palette-color(gray, 700)))
+@import "~vue-material/dist/theme/all"
 html, body
-  // background-color: whitesmoke;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
   font-size: 1rem
-// 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, select {
-    border-radius: .25rem;
-    font-size: 1rem;
-  }
-  textarea {
-    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  }
-  input, select {
-    font-family: inherit;
-  }
-  button,
-  a[role="button"] {
-    border: solid 1px #050;
-    border-radius: .5rem;
-    background-color: rgb(235, 235, 235);
-    padding: .25rem;
-    font-size: 1rem;
-  }
-  a[role="button"]:link,
-  a[role="button"]:visited {
-    color: black;
-  }
-  button.primary,
-  a[role="button"].primary {
-    background-color: white;
-    border-width: 3px;
-  }
-  button:hover,
-  a[role="button"]:hover {
-    cursor: pointer;
-    background-color: #050;
-    color: white;
-    text-decoration: none;
-  }
-  label {
-    font-variant: small-caps;
-    font-size: 1.1rem;
-  }
-  label.normal {
-    font-variant: unset;
-    font-size: unset;
-  }
-  footer {
-    border-top: solid 1px lightgray;
-    margin-top: 1rem;
-    padding: 0 1rem;
-  }
-  footer p {
-    margin: 0;
-  }
-  a:link, a:visited {
-    color: #050;
-    text-decoration: none;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
+footer
+  border-top: solid 1px lightgray
+  margin: 1rem -1rem 0
+  padding: 0 1rem
+footer p
+  margin: 0
+.mpj-full-page-card
+  font-size: 1rem
+  line-height: 1.25rem
 .mpj-main-content
   max-width: 60rem
   margin: auto
-// .mpj-main-content-wide {
-    margin: .5rem;
-  }
-  @media screen and (max-width: 21rem) {
-    .mpj-main-content-wide {
-      margin: 0;
-    }
-  }
 .mpj-request-text
   white-space: pre-line
-// .mpj-request-list p {
-    border-top: solid 1px lightgray;
-  }
-  .mpj-request-list p:first-child {
-    border-top: none;
-  }
-  .mpj-request-log {
-    width: 100%;
-  }
-  .mpj-request-log thead th {
-    border-top: solid 1px lightgray;
-    border-bottom: solid 2px lightgray;
-    text-align: left;
-  }
-  .mpj-request-log tbody td {
-    border-bottom: dotted 1px lightgray;
-    vertical-align: top;
-  }
-  .mpj-bg {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#050), to(whitesmoke));
-    background-image: -webkit-linear-gradient(top, #050, whitesmoke);
-    background-image: -moz-linear-gradient(top, #050, whitesmoke);
-    background-image: linear-gradient(to bottom, #050, whitesmoke);
-  }
+p.mpj-request-text
+  margin-top: 0
 .mpj-text-center
   text-align: center
 .mpj-text-nowrap
@@ -230,6 +137,8 @@ p
   text-align: right
 .mpj-muted-text
   color: rgba(0, 0, 0, .6)
+.mpj-valign-top
+  vertical-align: top
 .mpj-narrow
   max-width: 40rem
   margin: auto
@@ -238,51 +147,6 @@ p
   margin: auto
 .mpj-full-width
   width: 100%
-// .mpj-modal {
-    position: fixed;
-    z-index: 8;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, .4);
-  }
-  .mpj-modal-content {
-    background-color: whitesmoke;
-    border: solid 1px #050;
-    border-radius: .5rem;
-    animation-name: animatetop;
-    animation-duration: 0.4s;
-    padding: 1rem;
-    margin-top: 4rem;
-  }
-  @keyframes animatetop {
-    from {
-      top: -300px;
-      opacity: 0;
-    }
-    to {
-      top: 0;
-      opacity: 1;
-    }
-  }
-  .mpj-modal-content header {
-    margin: -1rem -1rem .5rem;
-    border-radius: .4rem;
-  }
-  .mpj-modal-content header h5 {
-    color: white;
-    margin: 0;
-    padding: 1rem;
-  }
-  .mpj-margin {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-  .material-icons {
-    vertical-align: middle;
-  } */
 .md-progress-bar
   margin: 24px
 </style>
diff --git a/src/app/src/components/Home.vue b/src/app/src/components/Home.vue
index 8b94bc9..c764a6b 100644
--- a/src/app/src/components/Home.vue
+++ b/src/app/src/components/Home.vue
@@ -1,16 +1,16 @@
 <template lang="pug">
-article.mpj-main-content(role='main')
+md-content(role='main').mpj-main-content
   page-title(title='Welcome!'
              hideOnPage=true)
   p &nbsp;
   p.
     myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
-    update them as God moves in the situation, and record a final answer received on that request. It will also allow
+    update them as God moves in the situation, and record a final answer received on that request. It also allows
     individuals to review their answered prayers.
   p.
-    This site is currently in beta, but it is open and available to the general public. To get started, simply click
-    the &ldquo;Log On&rdquo; link above, and log on with either a Microsoft or Google account. You can also learn more
-    about the site at the &ldquo;Docs&rdquo; link, also above.
+    This site is open and available to the general public. To get started, simply click the &ldquo;Log On&rdquo; link
+    above, and log on with either a Microsoft or Google account. You can also learn more about the site at the
+    &ldquo;Docs&rdquo; link, also above.
 </template>
 
 <script>
diff --git a/src/app/src/components/Journal.vue b/src/app/src/components/Journal.vue
index 1e31847..f5d30bf 100644
--- a/src/app/src/components/Journal.vue
+++ b/src/app/src/components/Journal.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-article.mpj-main-content-wide(role='main')
+md-content(role='main').mpj-main-content-wide
   page-title(:title='title')
   p(v-if='isLoadingJournal') Loading your prayer journal...
   template(v-else)
@@ -7,13 +7,11 @@ article.mpj-main-content-wide(role='main')
                    md-icon='done_all'
                    md-label='No Requests to Show'
                    md-description='You have no requests to be shown; see the “Active” link above for snoozed/deferred requests, and the “Answered” link for answered requests')
-      md-button(:to="{ name: 'Journal' }").md-primary.md-raised Add a New Request
+      md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }").md-primary.md-raised Add a New Request
     template(v-else)
       .mpj-text-center
         md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
-                  role='button').md-raised
-          md-icon add_box
-          = ' Add a New Request'
+                  role='button').md-raised.md-accent #[md-icon add_box] Add a New Request
       br
       .mpj-journal
         request-card(v-for='request in journal'
@@ -72,14 +70,12 @@ export default {
 }
 </script>
 
-<style>
-.mpj-journal {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  align-items: flex-start;
-}
-.mpj-dialog-content {
-  padding: 0 1rem;
-}
+<style lang="sass">
+.mpj-journal
+  display: flex
+  flex-flow: row wrap
+  justify-content: center
+  align-items: flex-start
+.mpj-dialog-content
+  padding: 0 1rem
 </style>
diff --git a/src/app/src/components/common/Navigation.vue b/src/app/src/components/common/Navigation.vue
index 671fadf..790b700 100644
--- a/src/app/src/components/common/Navigation.vue
+++ b/src/app/src/components/common/Navigation.vue
@@ -1,32 +1,30 @@
 <template lang="pug">
 .md-toolbar-row
-  md-tabs.md-primary(md-sync-route)
-    md-tab(md-label='Home'
-           :to="{ name: 'Home' }")#mpj-home
+  md-tabs(md-sync-route).md-primary
     md-tab(v-if='isAuthenticated'
            md-label='Journal'
-           :to="{ name: 'Journal' }")#mpj-journal
+           to='/journal')
     md-tab(v-if='isAuthenticated'
            md-label='Active'
-           :to="{ name: 'ActiveRequests' }")#mpj-active
+           to='/requests/active')
     md-tab(v-if='hasSnoozed'
            md-label='Snoozed'
-           :to="{ name: 'SnoozedRequests' }")#mpj-snoozed
+           to='/requests/snoozed')
     md-tab(v-if='isAuthenticated'
            md-label='Answered'
-           :to="{ name: 'AnsweredRequests' }")#mpj-answered
+           to='/requests/answered')
     md-tab(v-if='isAuthenticated'
            md-label='Log Off'
            href='#'
-           @click.stop='logOff()')#mpj-log-off
+           @click.stop='logOff()')
     md-tab(v-if='!isAuthenticated'
            md-label='Log On'
            href='#'
-           @click.stop='logOn()')#mpj-log-on
+           @click.stop='logOn()')
     md-tab(md-label='Docs'
            href='https://docs.prayerjournal.me'
            target='_blank'
-           @click.stop='')#mpj-docs
+           @click.stop='')
 </template>
 
 <script>
@@ -61,34 +59,3 @@ export default {
   }
 }
 </script>
-
-<style>
-.mpj-top-nav {
-  position: fixed;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding-left: .5rem;
-  min-height: 50px;
-}
-.mpj-top-nav a:link,
-.mpj-top-nav a:visited {
-  text-decoration: none;
-  color: rgba(255, 255, 255, .75);
-  padding-left: 1rem;
-}
-.mpj-top-nav a:link.router-link-active,
-.mpj-top-nav a:visited.router-link-active,
-.mpj-top-nav a:hover {
-  color: white;
-}
-.mpj-top-nav .title {
-  font-size: 1.25rem;
-  color: white;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-</style>
diff --git a/src/app/src/components/common/PageTitle.vue b/src/app/src/components/common/PageTitle.vue
index f3734b1..7f5c04b 100644
--- a/src/app/src/components/common/PageTitle.vue
+++ b/src/app/src/components/common/PageTitle.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-h1.md-title(v-if='!hideOnPage'
-            v-html='title')
+h1(v-if='!hideOnPage'
+   v-html='title').md-title
 </template>
 
 <script>
diff --git a/src/app/src/components/legal/PrivacyPolicy.vue b/src/app/src/components/legal/PrivacyPolicy.vue
index 9d338f1..5bf1099 100644
--- a/src/app/src/components/legal/PrivacyPolicy.vue
+++ b/src/app/src/components/legal/PrivacyPolicy.vue
@@ -1,54 +1,59 @@
 <template lang="pug">
-article
-  page-title(title='Privacy Policy')
-  p: small: em (as of May 21, 2018)
-  p.
-    The nature of the service is one where privacy is a must. The items below will help you understand the data we
-    collect, access, and store on your behalf as you use this service.
-  hr
-  h3 Third Party Services
-  p.
-    myPrayerJournal utilizes a third-party authentication and identity provider. You should familiarize yourself with
-    the privacy policy for #[a(href='https://auth0.com/privacy' target='_blank') Auth0], as well as your chosen provider
-    (#[a(href='https://privacy.microsoft.com/en-us/privacystatement' target='_blank') Microsoft] or
-    #[a(href='https://policies.google.com/privacy' target='_blank') Google]).
-  hr
-  h3 What We Collect
-  h4 Identifying Data
-  ul
-    li.
-      The only identifying data myPrayerJournal stores is the subscriber (&ldquo;sub&rdquo;) field from the token we
-      receive from Auth0, once you have signed in through their hosted service. All information is associated with you
-      via this field.
-    li.
-      While you are signed in, within your browser, the service has access to your first and last names, along with a
-      URL to the profile picture (provided by your selected identity provider). This information is not transmitted to
-      the server, and is removed when &ldquo;Log Off&rdquo; is clicked.
-  h4 User Provided Data
-  ul
-    li.
-      myPrayerJournal stores the information you provide, including the text of prayer requests, updates, and notes;
-      and the date/time when certain actions are taken.
-  hr
-  h3 How Your Data Is Accessed / Secured
-  ul
-    li.
-      Your provided data is returned to you, as required, to display your journal or your answered requests.
-      On the server, it is stored in a controlled-access database.
-    li.
-      Your data is backed up, along with other Bit Badger Solutions hosted systems, in a rolling manner; backups are
-      preserved for the prior 7 days, and backups from the 1st and 15th are preserved for 3 months. These backups are
-      stored in a private cloud data repository.
-    li.
-      The data collected and stored is the absolute minimum necessary for the functionality of the service. There are
-      no plans to &ldquo;monetize&rdquo; this service, and storing the minimum amount of information means that the
-      data we have is not interesting to purchasers (or those who may have more nefarious purposes).
-    li Access to servers and backups is strictly controlled and monitored for unauthorized access attempts.
-  hr
-  h3 Removing Your Data
-  p.
-    At any time, you may choose to discontinue using this service. Both Microsoft and Google provide ways to revoke
-    access from this application. However, if you want your data removed from the database, please contact daniel at
-    bitbadger.solutions (via e-mail, replacing at with @) prior to doing so, to ensure we can determine which
-    subscriber ID belongs to you.
+md-content(role='main').mpj-main-content
+  page-title(title='Privacy Policy'
+             hide-on-page=true)
+  md-card
+    md-card-header
+      .md-title Privacy Policy
+      .md-subhead as of May 21, 2018
+    md-card-content.mpj-full-page-card
+      p.
+        The nature of the service is one where privacy is a must. The items below will help you understand the data we
+        collect, access, and store on your behalf as you use this service.
+      hr
+      h3 Third Party Services
+      p.
+        myPrayerJournal utilizes a third-party authentication and identity provider. You should familiarize yourself
+        with the privacy policy for #[a(href='https://auth0.com/privacy' target='_blank') Auth0], as well as your
+        chosen provider (#[a(href='https://privacy.microsoft.com/en-us/privacystatement' target='_blank') Microsoft] or
+        #[a(href='https://policies.google.com/privacy' target='_blank') Google]).
+      hr
+      h3 What We Collect
+      h4 Identifying Data
+      ul
+        li.
+          The only identifying data myPrayerJournal stores is the subscriber (&ldquo;sub&rdquo;) field from the token we
+          receive from Auth0, once you have signed in through their hosted service. All information is associated with
+          you via this field.
+        li.
+          While you are signed in, within your browser, the service has access to your first and last names, along with
+          a URL to the profile picture (provided by your selected identity provider). This information is not
+          transmitted to the server, and is removed when &ldquo;Log Off&rdquo; is clicked.
+      h4 User Provided Data
+      ul
+        li.
+          myPrayerJournal stores the information you provide, including the text of prayer requests, updates, and notes;
+          and the date/time when certain actions are taken.
+      hr
+      h3 How Your Data Is Accessed / Secured
+      ul
+        li.
+          Your provided data is returned to you, as required, to display your journal or your answered requests. On the
+          server, it is stored in a controlled-access database.
+        li.
+          Your data is backed up, along with other Bit Badger Solutions hosted systems, in a rolling manner; backups are
+          preserved for the prior 7 days, and backups from the 1st and 15th are preserved for 3 months. These backups
+          are stored in a private cloud data repository.
+        li.
+          The data collected and stored is the absolute minimum necessary for the functionality of the service. There
+          are no plans to &ldquo;monetize&rdquo; this service, and storing the minimum amount of information means that
+          the data we have is not interesting to purchasers (or those who may have more nefarious purposes).
+        li Access to servers and backups is strictly controlled and monitored for unauthorized access attempts.
+      hr
+      h3 Removing Your Data
+      p.
+        At any time, you may choose to discontinue using this service. Both Microsoft and Google provide ways to revoke
+        access from this application. However, if you want your data removed from the database, please contact daniel at
+        bitbadger.solutions (via e-mail, replacing at with @) prior to doing so, to ensure we can determine which
+        subscriber ID belongs to you.
 </template>
diff --git a/src/app/src/components/legal/TermsOfService.vue b/src/app/src/components/legal/TermsOfService.vue
index 6b90d04..960a0e6 100644
--- a/src/app/src/components/legal/TermsOfService.vue
+++ b/src/app/src/components/legal/TermsOfService.vue
@@ -1,35 +1,40 @@
 <template lang="pug">
-article
-  page-title(title='Terms of Service')
-  p: small: em (as of May 21, 2018)
-  h3 1. Acceptance of Terms
-  p.
-    By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are
-    responsible to ensure that your use of this site complies with all applicable laws. Your continued use of this
-    site implies your acceptance of these terms.
-  h3 2. Description of Service and Registration
-  p.
-    myPrayerJournal is a service that allows individuals to enter and amend their prayer requests. It requires no
-    registration by itself, but access is granted based on a successful login with an external identity provider. See
-    #[router-link(:to="{ name: 'PrivacyPolicy' }") our privacy policy] for details on how that information is accessed
-    and stored.
-  h3 3. Third Party Services
-  p.
-    This service utilizes a third-party service provider for identity management. Review the terms of service for
-    #[a(href='https://auth0.com/terms' target='_blank') Auth0], as well as those for the selected authorization
-    provider (#[a(href='https://www.microsoft.com/en-us/servicesagreement' target='_blank') Microsoft] or
-    #[a(href='https://policies.google.com/terms' target='_blank') Google]).
-  h3 4. Liability
-  p.
-    This service is provided "as is", and no warranty (express or implied) exists. The service and its developers may
-    not be held liable for any damages that may arise through the use of this service.
-  h3 5. Updates to Terms
-  p.
-    These terms and conditions may be updated at any time, and this service does not have the capability to notify
-    users when these change. The date at the top of the page will be updated when any of the text of these terms is
-    updated.
-  hr
-  p.
-    You may also wish to review our #[router-link(:to="{ name: 'PrivacyPolicy' }") privacy policy] to learn how we
-    handle your data.
+md-content(role='main').mpj-main-content
+  page-title(title='Terms of Service'
+             hide-on-page=true)
+  md-card
+    md-card-header
+      .md-title Terms of Service
+      .md-subhead as of May 21, 2018
+    md-card-content.mpj-full-page-card
+      h3 1. Acceptance of Terms
+      p.
+        By accessing this web site, you are agreeing to be bound by these Terms and Conditions, and that you are
+        responsible to ensure that your use of this site complies with all applicable laws. Your continued use of this
+        site implies your acceptance of these terms.
+      h3 2. Description of Service and Registration
+      p.
+        myPrayerJournal is a service that allows individuals to enter and amend their prayer requests. It requires no
+        registration by itself, but access is granted based on a successful login with an external identity provider.
+        See #[router-link(:to="{ name: 'PrivacyPolicy' }") our privacy policy] for details on how that information is
+        accessed and stored.
+      h3 3. Third Party Services
+      p.
+        This service utilizes a third-party service provider for identity management. Review the terms of service for
+        #[a(href='https://auth0.com/terms' target='_blank') Auth0], as well as those for the selected authorization
+        provider (#[a(href='https://www.microsoft.com/en-us/servicesagreement' target='_blank') Microsoft] or
+        #[a(href='https://policies.google.com/terms' target='_blank') Google]).
+      h3 4. Liability
+      p.
+        This service is provided "as is", and no warranty (express or implied) exists. The service and its developers
+        may not be held liable for any damages that may arise through the use of this service.
+      h3 5. Updates to Terms
+      p.
+        These terms and conditions may be updated at any time, and this service does not have the capability to notify
+        users when these change. The date at the top of the page will be updated when any of the text of these terms is
+        updated.
+      hr
+      p.
+        You may also wish to review our #[router-link(:to="{ name: 'PrivacyPolicy' }") privacy policy] to learn how we
+        handle your data.
 </template>
diff --git a/src/app/src/components/request/ActiveRequests.vue b/src/app/src/components/request/ActiveRequests.vue
index ef76526..5353488 100644
--- a/src/app/src/components/request/ActiveRequests.vue
+++ b/src/app/src/components/request/ActiveRequests.vue
@@ -7,7 +7,7 @@ md-content(role='main').mpj-main-content
                    md-icon='sentiment_dissatisfied'
                    md-label='No Active Requests'
                    md-description='Your prayer journal has no active requests')
-      md-button(:to="{ name: 'Journal' }").md-primary.md-raised Return to your journal
+      md-button(to='/journal').md-primary.md-raised Return to your journal
     request-list(v-if='requests.length !== 0'
                  title='Active Requests'
                  :requests='requests')
diff --git a/src/app/src/components/request/AnsweredRequests.vue b/src/app/src/components/request/AnsweredRequests.vue
index 8e19de1..065ace8 100644
--- a/src/app/src/components/request/AnsweredRequests.vue
+++ b/src/app/src/components/request/AnsweredRequests.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-article.mpj-main-content(role='main')
+md-content(role='main').mpj-main-content
   page-title(title='Answered Requests'
              hide-on-page=true)
   template(v-if='loaded')
diff --git a/src/app/src/components/request/EditRequest.vue b/src/app/src/components/request/EditRequest.vue
index 7366d2f..8c578ac 100644
--- a/src/app/src/components/request/EditRequest.vue
+++ b/src/app/src/components/request/EditRequest.vue
@@ -1,71 +1,52 @@
 <template lang="pug">
-article.mpj-main-content(role='main')
+md-content(role='main').mpj-narrow
   page-title(:title='title')
-  .mpj-narrow
-    label(for='request_text')
-      | Prayer Request
-      br
-      textarea(v-model='form.requestText'
-               :rows='10'
-               @blur='trimText()'
-               autofocus).mpj-full-width
+  md-field
+    label(for='request_text') Prayer Request
+    md-textarea(v-model='form.requestText'
+                @blur='trimText()'
+                md-autogrow
+                autofocus).mpj-full-width
+  br
+  template(v-if='!isNew')
+    label Also Mark As
     br
-    template(v-if='!isNew')
-      label Also Mark As
-      br
-      label.normal
-        input(v-model='form.status'
-              type='radio'
-              name='status'
-              value='Updated')
-        | Updated
-      | &nbsp; &nbsp;
-      label.normal
-        input(v-model='form.status'
-              type='radio'
-              name='status'
-              value='Prayed')
-        | Prayed
-      | &nbsp; &nbsp;
-      label.normal
-        input(v-model='form.status'
-              type='radio'
-              name='status'
-              value='Answered')
-        | Answered
-      br
-    label Recurrence
-    | &nbsp; &nbsp;
-    em.mpj-muted-text After prayer, request reappears...
+    md-radio(v-model='form.status'
+             value='Updated') Updated
+    md-radio(v-model='form.status'
+             value='Prayed') Prayed
+    md-radio(v-model='form.status'
+             value='Answered') Answered
     br
-    label.normal
-      input(v-model='form.recur.typ'
-            type='radio'
-            name='recur'
-            value='Immediate')
-      | Immediately
-    | &nbsp; &nbsp;
-    label.normal
-      input(v-model='form.recur.typ'
-            type='radio'
-            name='recur'
-            value='other')
-      | Every...
-    input(v-model='form.recur.count'
-          type='number'
-          :disabled='!showRecurrence').mpj-recur-count
-    select(v-model='form.recur.other'
-           :disabled='!showRecurrence').mpj-recur-type
-      option(value='Hours') hours
-      option(value='Days') days
-      option(value='Weeks') weeks
-    .mpj-text-right
-      button(:disabled='!isValidRecurrence'
-             @click.stop='saveRequest()').primary.
-        #[md-icon save] Save
-      | &nbsp; &nbsp;
-      button(@click.stop='goBack()').
-        #[md-icon arrow_back] Cancel
+  label Recurrence
+  | &nbsp; &nbsp;
+  em.mpj-muted-text After prayer, request reappears...
+  br
+  .md-layout
+    .md-layout-item.md-size-30
+      md-radio(v-model='form.recur.typ'
+              value='Immediate') Immediately
+    .md-layout-item.md-size-20
+      md-radio(v-model='form.recur.typ'
+              value='other') Every...
+    .md-layout-item.md-size-10
+      md-field(md-inline)
+        label Count
+        md-input(v-model='form.recur.count'
+                type='number'
+                :disabled='!showRecurrence')
+    .md-layout-item.md-size-20
+      md-field
+        label Interval
+        md-select(v-model='form.recur.other'
+                  :disabled='!showRecurrence')
+          md-option(value='Hours') hours
+          md-option(value='Days') days
+          md-option(value='Weeks') weeks
+  .mpj-text-right
+    md-button(:disabled='!isValidRecurrence'
+              @click.stop='saveRequest()').md-primary.md-raised #[md-icon save] Save
+    md-button(@click.stop='goBack()').md-raised #[md-icon arrow_back] Cancel
 </template>
 
 <script>
@@ -133,7 +114,7 @@ export default {
       this.title = 'Edit Prayer Request'
       this.isNew = false
       if (this.journal.length === 0) {
-        await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
+        await this.$store.dispatch(actions.LOAD_JOURNAL, this.progress)
       }
       const req = this.journal.filter(r => r.requestId === this.id)[0]
       this.form.requestId = this.id
@@ -159,7 +140,7 @@ export default {
     },
     async ensureJournal () {
       if (!Array.isArray(this.journal)) {
-        await this.$store.dispatch(actions.LOAD_JOURNAL, this.$Progress)
+        await this.$store.dispatch(actions.LOAD_JOURNAL, this.progress)
       }
     },
     async saveRequest () {
@@ -191,15 +172,3 @@ export default {
   }
 }
 </script>
-
-<style>
-.mpj-recur-count {
-  width: 3rem;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.mpj-recur-type {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-</style>
diff --git a/src/app/src/components/request/FullRequest.vue b/src/app/src/components/request/FullRequest.vue
index dd4f960..e54556f 100644
--- a/src/app/src/components/request/FullRequest.vue
+++ b/src/app/src/components/request/FullRequest.vue
@@ -1,22 +1,24 @@
 <template lang="pug">
-article.mpj-main-content(role='main')
-  page-title(title='Full Prayer Request')
-  template(v-if='request')
-    p
-      span(v-if='isAnswered') Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) &nbsp;
-      small: em.mpj-muted-text prayed {{ prayedCount }} times, open {{ openDays }} days
-    p.mpj-request-text {{ lastText }}
-    br
-    table.mpj-request-log
-      thead
-        tr
-          th Action
-          th Update / Notes
-      tbody
-        tr(v-for='item in log' :key='item.asOf')
-          td {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}]
-          td(v-if='item.text').mpj-request-text {{ item.text }}
-          td(v-else) &nbsp;
+md-content(role='main').mpj-main-content
+  page-title(title='Full Prayer Request'
+             hide-on-page=true)
+  md-card(v-if='request')
+    md-card-header
+      .md-title Full Prayer Request
+      .md-subhead
+        span(v-if='isAnswered') Answered {{ formatDate(answered) }} (#[date-from-now(:value='answered')]) !{' &bull; '}
+        | Prayed {{ prayedCount }} times &bull; Open {{ openDays }} days
+    md-card-content.mpj-full-page-card
+      p.mpj-request-text {{ lastText }}
+      md-table
+        md-table-row
+          md-table-head Action
+          md-table-head Update / Notes
+        md-table-row(v-for='item in log'
+                     :key='item.asOf')
+          md-table-cell.mpj-valign-top {{ item.status }} on #[span.mpj-text-nowrap {{ formatDate(item.asOf) }}]
+          md-table-cell(v-if='item.text').mpj-request-text.mpj-valign-top {{ item.text }}
+          md-table-cell(v-else) &nbsp;
   p(v-else) Loading request...
 </template>
 
diff --git a/src/app/src/components/request/NotesEdit.vue b/src/app/src/components/request/NotesEdit.vue
index ab99bce..6f964bf 100644
--- a/src/app/src/components/request/NotesEdit.vue
+++ b/src/app/src/components/request/NotesEdit.vue
@@ -8,12 +8,8 @@ md-dialog(:md-active.sync='notesVisible').mpj-note-dialog
                   md-autogrow
                   @blur='trimText()')
   md-dialog-actions
-    md-button(@click='saveNotes()').md-primary
-      md-icon save
-      = ' Save'
-    md-button(@click='closeDialog()')
-      md-icon undo
-      = ' Cancel'
+    md-button(@click='saveNotes()').md-primary #[md-icon save] Save
+    md-button(@click='closeDialog()') #[md-icon undo] Cancel
   .mpj-dialog-content
     div(v-if='hasPriorNotes')
       p.mpj-text-center: strong Prior Notes for This Request
@@ -26,8 +22,7 @@ md-dialog(:md-active.sync='notesVisible').mpj-note-dialog
     div(v-else-if='noPriorNotes').mpj-text-center.mpj-muted-text There are no prior notes for this request
     div(v-else).mpj-text-center
       hr
-      md-button(@click='loadNotes()').
-        #[md-icon cloud_download] Load Prior Notes
+      md-button(@click='loadNotes()') #[md-icon cloud_download] Load Prior Notes
 </template>
 
 <script>
@@ -108,22 +103,16 @@ export default {
 }
 </script>
 
-<style>
-.mpj-note-dialog {
-  width: 40rem;
-  padding-bottom: 1.5rem;
-}
-@media screen and (max-width: 40rem) {
-  @media screen and (max-width: 20rem) {
-    .mpj-note-dialog {
-      width: 100%;
-    }
-  }
-  .mpj-note-dialog {
-    width: 20rem;
-  }
-}
-.mpj-note-list p {
-  border-top: dotted 1px lightgray;
-}
+<style lang="sass">
+.mpj-note-dialog
+  width: 40rem
+  padding-bottom: 1.5rem
+@media screen and (max-width: 40rem)
+  @media screen and (max-width: 20rem)
+    .mpj-note-dialog
+      width: 100%
+  .mpj-note-dialog
+    width: 20rem
+.mpj-note-list p
+  border-top: dotted 1px lightgray
 </style>
diff --git a/src/app/src/components/request/RequestCard.vue b/src/app/src/components/request/RequestCard.vue
index aa91ac6..a3b5fbf 100644
--- a/src/app/src/components/request/RequestCard.vue
+++ b/src/app/src/components/request/RequestCard.vue
@@ -1,31 +1,27 @@
 <template lang="pug">
-md-card.mpj-request-card(v-if='shouldDisplay'
-                         md-with-hover)
+md-card(v-if='shouldDisplay'
+        md-with-hover).mpj-request-card
   md-card-actions(md-alignment='space-between')
-    md-button.md-icon-button.md-raised.md-primary(@click='markPrayed()')
+    md-button(@click='markPrayed()').md-icon-button.md-raised.md-primary
       md-icon done
       md-tooltip(md-direction='top'
                  md-delay=1000) Mark as Prayed
     span
-      md-button.md-icon-button.md-raised(@click.stop='showEdit()')
+      md-button(@click.stop='showEdit()').md-icon-button.md-raised
         md-icon edit
         md-tooltip(md-direction='top'
                    md-delay=1000) Edit Request
-      md-button.md-icon-button.md-raised(@click.stop='showNotes()')
+      md-button(@click.stop='showNotes()').md-icon-button.md-raised
         md-icon comment
         md-tooltip(md-direction='top'
                    md-delay=1000) Add Notes
-      md-button.md-icon-button.md-raised(@click.stop='snooze()')
+      md-button(@click.stop='snooze()').md-icon-button.md-raised
         md-icon schedule
         md-tooltip(md-direction='top'
                    md-delay=1000) Snooze Request
   md-card-content
-    p.card-text.mpj-request-text
-      | {{ request.text }}
-    p.as-of.mpj-text-right: small.mpj-muted-text: em
-      = '(last activity '
-      date-from-now(:value='request.asOf')
-      | )
+    p.mpj-request-text {{ request.text }}
+    p.mpj-text-right: small.mpj-muted-text: em (last activity #[date-from-now(:value='request.asOf')])
 </template>
 
 <script>
@@ -72,41 +68,11 @@ export default {
 }
 </script>
 
-<style>
-.mpj-request-card {
-/*  border: solid 1px darkgray;
-  border-radius: 5px; */
-  width: 20rem;
-  margin-bottom: 1rem;
-/*  margin: .5rem; */
-}
-@media screen and (max-width: 20rem) {
-  .mpj-request-card {
-    width: 100%;
-  }
-}
-/*
-.mpj-card-header {
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(lightgray), to(whitesmoke));
-  background-image: -webkit-linear-gradient(top, lightgray, whitesmoke);
-  background-image: -moz-linear-gradient(top, lightgray, whitesmoke);
-  background-image: linear-gradient(to bottom, lightgray, whitesmoke);
-}
-.mpj-card-header button {
-  margin: .25rem;
-  padding: 0 .25rem;
-}
-.mpj-card-header button .material-icons {
-  font-size: 1.3rem;
-}
-.mpj-request-card .card-text {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-.mpj-request-card .as-of {
-  margin-right: .25rem;
-} */
+<style lang="sass">
+.mpj-request-card
+  width: 20rem
+  margin-bottom: 1rem
+@media screen and (max-width: 20rem)
+  .mpj-request-card
+    width: 100%
 </style>
diff --git a/src/app/src/components/request/RequestListItem.vue b/src/app/src/components/request/RequestListItem.vue
index 3d14af3..0bd120f 100644
--- a/src/app/src/components/request/RequestListItem.vue
+++ b/src/app/src/components/request/RequestListItem.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 md-table-row
-  md-table-cell.mpj-action-cell
+  md-table-cell.mpj-action-cell.mpj-valign-top
     md-button(@click='viewFull').md-icon-button.md-raised
       md-icon description
       md-tooltip(md-direction='top'
@@ -16,20 +16,16 @@ md-table-row
         md-tooltip(md-direction='top'
                    md-delay=250) Cancel Snooze
     template(v-if='isPending')
-      md-button(@click='showNow()').md-icon-button.md-rasied
+      md-button(@click='showNow()').md-icon-button.md-raised
         md-icon restore
         md-tooltip(md-direction='top'
                    md-delay=250) Show Now
-  md-table-cell.mpj-request-cell
-    p.mpj-request-text
-      | {{ request.text }}
+  md-table-cell.mpj-valign-top
+    p.mpj-request-text {{ request.text }}
     br(v-if='isSnoozed || isPending || isAnswered')
-    small(v-if='isSnoozed').mpj-muted-text: em.
-      Snooze expires #[date-from-now(:value='request.snoozedUntil')]
-    small(v-if='isPending').mpj-muted-text: em.
-      Request scheduled to reappear #[date-from-now(:value='request.showAfter')]
-    small(v-if='isAnswered').mpj-muted-text: em.
-      Answered #[date-from-now(:value='request.asOf')]
+    small(v-if='isSnoozed').mpj-muted-text: em Snooze expires #[date-from-now(:value='request.snoozedUntil')]
+    small(v-if='isPending').mpj-muted-text: em Request appears next #[date-from-now(:value='request.showAfter')]
+    small(v-if='isAnswered').mpj-muted-text: em Answered #[date-from-now(:value='request.asOf')]
 </template>
 
 <script>
@@ -96,9 +92,4 @@ export default {
 .mpj-action-cell
   width: 1%
   white-space: nowrap
-  vertical-align: top
-.mpj-request-cell
-  vertical-align: top
-  p
-    margin-top: 0
 </style>
\ No newline at end of file
diff --git a/src/app/src/components/request/SnoozeRequest.vue b/src/app/src/components/request/SnoozeRequest.vue
index ef19c6d..472894e 100644
--- a/src/app/src/components/request/SnoozeRequest.vue
+++ b/src/app/src/components/request/SnoozeRequest.vue
@@ -8,12 +8,8 @@ md-dialog(:md-active.sync='snoozeVisible').mpj-skinny
                   md-immediately)
   md-dialog-actions
     md-button(:disabled='!isValid'
-              @click='snoozeRequest()').md-primary
-      md-icon snooze
-      = ' Snooze'
-    md-button(@click='closeDialog()')
-      md-icon undo
-      = ' Cancel'
+              @click='snoozeRequest()').md-primary #[md-icon snooze] Snooze
+    md-button(@click='closeDialog()') #[md-icon undo] Cancel
 </template>
 
 <script>
diff --git a/src/app/src/components/request/SnoozedRequests.vue b/src/app/src/components/request/SnoozedRequests.vue
index 513368f..0b50e0c 100644
--- a/src/app/src/components/request/SnoozedRequests.vue
+++ b/src/app/src/components/request/SnoozedRequests.vue
@@ -7,7 +7,7 @@ article.mpj-main-content(role='main')
                    md-icon='sentiment_dissatisfied'
                    md-label='No Snoozed Requests'
                    md-description='Your prayer journal has no snoozed requests')
-      md-button(:to="{ name: 'Journal' }").md-primary.md-raised Return to your journal
+      md-button(to='/journal').md-primary.md-raised Return to your journal
     request-list(v-if='requests.length !== 0'
                  title='Snoozed Requests'
                  :requests='requests')