From 88e6cf7d8adb5031d066b8f18282938a6f8dcdd8 Mon Sep 17 00:00:00 2001
From: SabreCat <sabrecat@gmail.com>
Date: Wed, 16 Aug 2017 21:56:10 +0000
Subject: [PATCH] feat(RYA): style Yesterdailies MODAL

---
 website/client/components/notifications.vue   |  6 +-
 .../client/components/yesterdailyModal.vue    | 73 +++++++++++++++++++
 .../client/components/yesterdailyModel.vue    | 46 ------------
 website/common/locales/en/newClient.json      |  4 +-
 4 files changed, 79 insertions(+), 50 deletions(-)
 create mode 100644 website/client/components/yesterdailyModal.vue
 delete mode 100644 website/client/components/yesterdailyModel.vue

diff --git a/website/client/components/notifications.vue b/website/client/components/notifications.vue
index 9cabe4ad5a..de98a34b25 100644
--- a/website/client/components/notifications.vue
+++ b/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,
diff --git a/website/client/components/yesterdailyModal.vue b/website/client/components/yesterdailyModal.vue
new file mode 100644
index 0000000000..73bdee2010
--- /dev/null
+++ b/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>
diff --git a/website/client/components/yesterdailyModel.vue b/website/client/components/yesterdailyModel.vue
deleted file mode 100644
index b2555e40dc..0000000000
--- a/website/client/components/yesterdailyModel.vue
+++ /dev/null
@@ -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>
diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json
index 313f7471d4..86a2db62ef 100644
--- a/website/common/locales/en/newClient.json
+++ b/website/common/locales/en/newClient.json
@@ -283,5 +283,7 @@
   "equip": "Equip",
   "unequip": "Unequip",
   "sortByName": "Name",
-  "haveHatchablePet": "You have a <%= potion %> hatching potion and <%= egg %> egg to hatch this pet! <b>Click</b> the paw print to hatch."
+  "haveHatchablePet": "You have a <%= potion %> hatching potion and <%= egg %> egg to hatch this pet! <b>Click</b> the paw print to hatch.",
+  "welcomeBack": "Welcome back!",
+  "checkOffYesterDailies": "Check off any Dailies you did yesterday:"
 }