feat(RYA): style Yesterdailies MODAL

website/client/components/notifications.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  yesterdaily-model(:yesterDailies='yesterDailies')
+  yesterdaily-modal(:yesterDailies='yesterDailies')
   new-stuff
   death
   low-health
@@ -29,7 +29,7 @@ import { mapState } from 'client/libs/store';
 import notifications from 'client/mixins/notifications';
 import guide from 'client/mixins/guide';
 
-import yesterdailyModel from './yesterdailyModel';
+import yesterdailyModal from './yesterdailyModal';
 import welcomeModal from './achievements/welcome';
 import newStuff from './achievements/newStuff';
 import death from './achievements/death';
@@ -55,7 +55,7 @@ import wonChallenge from './achievements/wonChallenge';
 export default {
   mixins: [notifications, guide],
   components: {
-    yesterdailyModel,
+    yesterdailyModal,
     wonChallenge,
     ultimateGear,
     streak,

website/client/components/yesterdailyModal.vue

@@ -0,0 +1,73 @@
+<template lang="pug">
+  b-modal#yesterdaily(size='m', :hide-header="true", :hide-footer="true")
+    .modal-body
+      h1.header-welcome.text-center {{ $t('welcomeBack') }}
+      p.call-to-action.text-center {{ $t('checkOffYesterDailies') }}
+      .tasks-list
+        task(
+          v-for='task in tasksByType["daily"]',
+          :key='task.id', :task='task',
+          :isUser='true',
+        )
+      .start-day.text-center
+        button.btn.btn-primary(@click='close()') {{ $t('yesterDailiesCallToAction') }}
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .header-welcome {
+    color: $purple-200;
+    margin-top: 1.33333em;
+  }
+
+  .call-to-action {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .tasks-list {
+    border-radius: 4px;
+    background: $gray-600;
+    padding: 8px;
+    padding-bottom: 0.1px;
+    position: relative;
+    height: calc(100% - 64px);
+    overflow: auto;
+  }
+
+  .start-day {
+    margin: 2em auto 2em auto;
+  }
+</style>
+
+<script>
+import axios from 'axios';
+import { mapState } from 'client/libs/store';
+import bModal from 'bootstrap-vue/lib/components/modal';
+import Task from './tasks/task';
+
+export default {
+  props: ['yesterDailies'],
+  components: {
+    bModal,
+    Task,
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    tasksByType () {
+      return {
+        daily: this.yesterDailies,
+      };
+    },
+  },
+  methods: {
+    async close () {
+      await axios.post('/api/v3/cron');
+      // @TODO: Better way to sync user?
+      window.location.href = '/';
+      this.$root.$emit('hide::modal', 'yesterdaily');
+    },
+  },
+};
+</script>

website/client/components/yesterdailyModel.vue

@@ -1,46 +0,0 @@
-<template lang="pug">
-  b-modal#yesterdaily(:title="$t('armoireText')", size='lg', :hide-footer="true")
-    .modal-header
-      .shop_armoire.pull-right
-    .modal-body
-      task-column.col-6.offset-3(
-        v-if='tasksByType && tasksByType[column]'
-        v-for="column in ['daily']",
-        :type="column",
-        :key="column",
-        :taskListOverride='tasksByType[column]',
-        :isUser='true')
-    .modal-footer.text-center
-      button.btn.btn-primary(@click='close()') Start My Day
-</template>
-
-<script>
-import axios from 'axios';
-import { mapState } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
-import Column from './tasks/column';
-
-export default {
-  props: ['yesterDailies'],
-  components: {
-    bModal,
-    TaskColumn: Column,
-  },
-  computed: {
-    ...mapState({user: 'user.data'}),
-    tasksByType () {
-      return {
-        daily: this.yesterDailies,
-      };
-    },
-  },
-  methods: {
-    async close () {
-      await axios.post('/api/v3/cron');
-      // @TODO: Better way to sync user?
-      window.location.href = '/';
-      this.$root.$emit('hide::modal', 'yesterdaily');
-    },
-  },
-};
-</script>