From cd8b4d0dd13f5568d7cb4ac325cba04b56d3484a Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 8 Dec 2019 22:38:32 +0530
Subject: [PATCH] :dizzy: Updating animations and transitions

---
 assets/css/styles.scss         | 12 +++---------
 components/history.vue         |  4 ++++
 components/modal.vue           |  4 ++--
 components/settings/swatch.vue |  8 +++++++-
 nuxt.config.js                 |  2 +-
 pages/graphql.vue              |  7 +++++++
 6 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 81f2ba89c..a8cbeb19a 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -71,10 +71,7 @@ body {
 
 // Make theme transition smoother.
 body.afterLoad {
-  &,
-  & * {
-    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
-  }
+  transition: all 0.2s ease-in-out;
 }
 
 body.sticky-footer footer {
@@ -450,7 +447,7 @@ fieldset {
   margin: 16px 0;
   border: 1px solid var(--brd-color);
   border-radius: 8px;
-  background-color: var(--bg-color);
+  transition: all 0.2s ease-in-out;
 }
 
 legend {
@@ -813,10 +810,6 @@ input[type="radio"]:checked + label + .tab {
   margin-left: 16px;
 }
 
-.bg-color {
-  background-color: var(--bg-color);
-}
-
 @media (max-width: $responsiveWidth) {
   .content {
     flex-flow: column;
@@ -832,6 +825,7 @@ input[type="radio"]:checked + label + .tab {
     bottom: 0;
     width: 100%;
     background-color: var(--bg-color);
+    transition: all 0.2s ease-in-out;
   }
 
   nav.primary-nav {
diff --git a/components/history.vue b/components/history.vue
index b9218da0e..c972ff867 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -311,6 +311,10 @@ ol li {
   padding: 16px 0;
 }
 
+.bg-color {
+  background-color: var(--bg-color);
+}
+
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;
diff --git a/components/modal.vue b/components/modal.vue
index e5860f312..45c36448a 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -45,11 +45,11 @@
   flex-grow: 1;
   flex-direction: column;
   margin: 8px;
-  padding: 12px;
+  padding: 16px;
   transition: all 0.2s ease;
   background-color: var(--bg-color);
   border-radius: 8px;
-  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+  box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
 }
 
 /*
diff --git a/components/settings/swatch.vue b/components/settings/swatch.vue
index cd14c6020..98efe6d77 100644
--- a/components/settings/swatch.vue
+++ b/components/settings/swatch.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="color" :data-color="color" :class="{ active: active }" v-tooltip="{ content: name || color }">
+  <div
+    class="color"
+    :data-color="color"
+    :class="{ active: active }"
+    v-tooltip="{ content: name || color }"
+  >
     <span :style="{ backgroundColor: color }" class="preview">
       <i v-if="active" class="material-icons activeTick">done</i>
     </span>
@@ -15,6 +20,7 @@
   border-radius: 100%;
   border: 3px solid var(--bg-dark-color);
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
 
   &.fg {
     color: var(--act-color);
diff --git a/nuxt.config.js b/nuxt.config.js
index 80e35615e..974504fea 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -34,7 +34,7 @@ export default {
   render: {
     bundleRenderer: {
       shouldPreload: (file, type) => {
-        return ['script', 'style', 'font'].includes(type)
+        return ["script", "style", "font"].includes(type);
       }
     }
   },
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 9d850deda..90329b805 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -410,6 +410,7 @@ export default {
       const startTime = Date.now();
 
       this.$nuxt.$loading.start();
+      this.scrollInto("response");
 
       try {
         let headers = {};
@@ -462,6 +463,7 @@ export default {
     async getSchema() {
       const startTime = Date.now();
       this.schemaString = "Loading...";
+      this.scrollInto("schema");
 
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
@@ -628,6 +630,11 @@ export default {
         }
       });
       console.log(oldHeaders);
+    },
+    scrollInto(view) {
+      this.$refs[view].$el.scrollIntoView({
+        behavior: "smooth"
+      });
     }
   }
 };