From 094866afbba67d238a63357315cb997d20d7c5a8 Mon Sep 17 00:00:00 2001
From: pskfyi <patrick.keenan.fyi@gmail.com>
Date: Sun, 9 Jan 2022 22:08:59 -0800
Subject: [PATCH] feat: page transitions trigger color animated changes

---
 layouts/default.vue | 10 +++++++---
 store/index.js      |  6 ++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 1be465b..d13e9fa 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,16 +1,19 @@
 <template>
   <div class="page container max-h-full h-full w-full mx-auto bg-gray-400 px-4">
-    <main class="grid w-full h-full overflow-auto relative bg-gray-300">
+    <main
+      class="grid w-full h-full overflow-auto relative"
+      :class="`bg-${$store.getters.activeTab.color}`"
+    >
       <time-header />
 
-      <div class="units p-8 relative bg-gray-300">
+      <div class="units p-8 relative">
         <div class="units-background absolute top-8 left-0 right-0"></div>
         <div
           class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
           @click="$store.commit('addCurrency', 1)"
         >
           <span
-            class="spare-time flex flex-row items-center font-bold rounded-2xl"
+            class="spare-time flex flex-row items-center font-bold rounded-2xl p-2"
             :class="`text-${$store.getters.activeTab.darkColor}`"
           >
             <span class="text-3xl md:text-5xl" v-text="$store.state.currency" />
@@ -108,6 +111,7 @@ html {
 
 main {
   grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
+  transition: background-color 2000ms;
 }
 
 .tabs {
diff --git a/store/index.js b/store/index.js
index 65486e6..29af92d 100644
--- a/store/index.js
+++ b/store/index.js
@@ -8,6 +8,7 @@ export const state = () => ({
       label: 'fas fa-clock',
       title: 'Timekeeping Instruments',
       darkColor: 'amber-900',
+      color: 'amber-400',
       lightColor: 'amber-200',
       locked: false,
     },
@@ -16,6 +17,7 @@ export const state = () => ({
       label: 'fas fa-user-friends',
       title: 'Apprentices',
       darkColor: 'rose-900',
+      color: 'rose-400',
       lightColor: 'rose-200',
       locked: false,
     },
@@ -24,6 +26,7 @@ export const state = () => ({
       label: 'fas fa-th-list',
       title: 'Missions',
       darkColor: 'sky-900',
+      color: 'sky-400',
       lightColor: 'sky-200',
       locked: false,
     },
@@ -32,6 +35,7 @@ export const state = () => ({
       label: 'fas fa-fast-forward',
       title: 'Time Machine',
       darkColor: 'lime-900',
+      color: 'lime-400',
       lightColor: 'lime-200',
       locked: false,
     },
@@ -40,6 +44,7 @@ export const state = () => ({
       label: 'fas fa-eye',
       title: 'Time Magic',
       darkColor: 'violet-900',
+      color: 'violet-400',
       lightColor: 'violet-200',
       locked: false,
     },
@@ -48,6 +53,7 @@ export const state = () => ({
       label: 'fas fa-book-open',
       title: 'Wisdom',
       darkColor: 'teal-900',
+      color: 'teal-400',
       lightColor: 'teal-100',
       locked: false,
     },