From 14d5461085cfba00028d13af2367c1457c9e1f64 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sat, 21 Mar 2020 07:42:28 +0530
Subject: [PATCH] :art: Minor UI fixes

---
 assets/css/styles.scss       | 166 ++++++++++++++---------------------
 components/layout/footer.vue |   4 +
 components/layout/header.vue |  27 ++++++
 3 files changed, 99 insertions(+), 98 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 0288f8a6c..eda2470c7 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -1,17 +1,3 @@
-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
-  transition: opacity 0.2s;
-}
-
-.page-enter,
-.page-leave-active,
-.layout-enter,
-.layout-leave-active {
-  opacity: 0;
-}
-
 $responsiveWidth: 768px;
 
 ::selection {
@@ -93,6 +79,20 @@ footer {
   }
 }
 
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.2s;
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+  opacity: 0;
+}
+
 .wrapper {
   min-height: 100vh;
   display: flex;
@@ -111,31 +111,6 @@ footer {
   flex: 1;
 }
 
-.slide-in {
-  position: relative;
-  animation: slideIn 0.2s forwards ease-in-out;
-}
-
-@keyframes slideIn {
-  0% {
-    opacity: 0;
-    left: -16px;
-  }
-
-  100% {
-    opacity: 1;
-    left: 0px;
-  }
-}
-
-.logo {
-  font-size: 22px;
-
-  &:hover {
-    color: var(--ac-color);
-  }
-}
-
 .nav-first,
 .sticky-inner {
   display: flex;
@@ -161,7 +136,6 @@ footer {
   order: 2;
   position: relative;
   padding: 0 16px;
-  height: 100%;
 }
 
 .nav-second {
@@ -251,10 +225,6 @@ nav.secondary-nav {
   }
 }
 
-.footer {
-  flex-flow: column nowrap;
-}
-
 h1,
 h2,
 h3,
@@ -484,6 +454,60 @@ fieldset {
   border-radius: 16px;
   background-color: var(--bg-dark-color);
   transition: all 0.2s ease-in-out;
+
+  legend {
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+    color: var(--fg-color);
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    * {
+      vertical-align: middle;
+    }
+
+    i {
+      margin-left: 8px;
+    }
+  }
+
+  &.blue legend {
+    color: #57b5f9;
+  }
+
+  &.gray legend {
+    color: #bcc2cd;
+  }
+
+  &.green legend {
+    color: #50fa7b;
+  }
+
+  &.cyan legend {
+    color: #8be9fd;
+  }
+
+  &.purple legend {
+    color: #bd93f9;
+  }
+
+  &.orange legend {
+    color: #ffb86c;
+  }
+
+  &.pink legend {
+    color: #ff79c6;
+  }
+
+  &.red legend {
+    color: #ff5555;
+  }
+
+  &.yellow legend {
+    color: #f1fa8c;
+  }
 }
 
 fieldset:target,
@@ -497,60 +521,6 @@ section:target {
   }
 }
 
-legend {
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-  color: var(--fg-color);
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  * {
-    vertical-align: middle;
-  }
-
-  i {
-    margin-left: 8px;
-  }
-}
-
-fieldset.blue legend {
-  color: #57b5f9;
-}
-
-fieldset.gray legend {
-  color: #bcc2cd;
-}
-
-fieldset.green legend {
-  color: #50fa7b;
-}
-
-fieldset.cyan legend {
-  color: #8be9fd;
-}
-
-fieldset.purple legend {
-  color: #bd93f9;
-}
-
-fieldset.orange legend {
-  color: #ffb86c;
-}
-
-fieldset.pink legend {
-  color: #ff79c6;
-}
-
-fieldset.red legend {
-  color: #ff5555;
-}
-
-fieldset.yellow legend {
-  color: #f1fa8c;
-}
-
 input[type="file"],
 input[type="radio"],
 .hide-on-large-screen,
diff --git a/components/layout/footer.vue b/components/layout/footer.vue
index 7ef2772c7..6cf05d6c3 100644
--- a/components/layout/footer.vue
+++ b/components/layout/footer.vue
@@ -60,6 +60,10 @@
 </template>
 
 <style scoped lang="scss">
+.footer {
+  flex-flow: column nowrap;
+}
+
 .footer-link {
   margin: 8px 16px;
   color: var(--fg-light-color);
diff --git a/components/layout/header.vue b/components/layout/header.vue
index 6f590d34f..83e6ee94e 100644
--- a/components/layout/header.vue
+++ b/components/layout/header.vue
@@ -257,6 +257,33 @@
   </header>
 </template>
 
+<style scoped lang="scss">
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    left: -16px;
+  }
+
+  100% {
+    opacity: 1;
+    left: 0px;
+  }
+}
+
+.slide-in {
+  position: relative;
+  animation: slideIn 0.2s forwards ease-in-out;
+}
+
+.logo {
+  font-size: 22px;
+
+  &:hover {
+    color: var(--ac-color);
+  }
+}
+</style>
+
 <script>
 import intializePwa from "../../assets/js/pwa"
 import { hasExtensionInstalled } from "../../functions/strategies/ExtensionStrategy"