Merge pull request #589 from liyasthomas/refactor/lint

Refactor/lint

assets/css/styles.scss

@@ -58,6 +58,7 @@ body {
   padding: 0;
   margin: 0;
   scroll-behavior: smooth;
+  transition: all 0.2s ease-in-out;
 }
 
 body.afterLoad {
@@ -175,6 +176,7 @@ nav.primary-nav {
 
   svg {
     fill: var(--fg-light-color);
+    transition: all 0.2s ease-in-out;
   }
 
   a {
@@ -264,11 +266,16 @@ hr {
   border-bottom: 1px dashed var(--brd-color);
 }
 
+p {
+  transition: all 0.2s ease-in-out;
+}
+
 .tooltip {
   $bgcolor: var(--tt-color);
   $fgcolor: var(--fg-color);
   display: block !important;
   z-index: 10000;
+  transition: all 0.2s ease-in-out;
 
   .tooltip-inner {
     background: $bgcolor;
@@ -472,6 +479,18 @@ fieldset {
   margin: 16px 0;
   border-radius: 16px;
   background-color: var(--bg-dark-color);
+  transition: all 0.2s ease-in-out;
+}
+
+fieldset:target,
+section:target {
+  animation: highlight 2s ease;
+}
+
+@keyframes highlight {
+  50% {
+    box-shadow: 0 0 0 2px var(--ac-color);
+  }
 }
 
 legend {
@@ -481,6 +500,7 @@ legend {
   color: var(--fg-color);
   font-weight: 700;
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
 
   * {
     vertical-align: middle;
@@ -677,6 +697,7 @@ input[type="checkbox"] {
 label {
   padding: 4px;
   color: var(--fg-light-color);
+  transition: all 0.2s ease-in-out;
 }
 
 ul,
@@ -801,6 +822,7 @@ ol li {
 section {
   display: flex;
   flex-wrap: wrap;
+  border-radius: 16px;
 }
 
 .tab {

components/firebase/login.vue

@@ -57,9 +57,9 @@ export default {
       firebase
         .auth()
         .signInWithPopup(provider)
-        .then(res => {
-          if (res.additionalUserInfo.isNewUser) {
-            this.$toast.info(this.$t("turn_on") + " " + this.$t("sync"), {
+        .then(({ additionalUserInfo }) => {
+          if (additionalUserInfo.isNewUser) {
+            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,
@@ -86,9 +86,9 @@ export default {
       firebase
         .auth()
         .signInWithPopup(provider)
-        .then(res => {
-          if (res.additionalUserInfo.isNewUser) {
-            this.$toast.info(this.$t("turn_on") + " " + this.$t("sync"), {
+        .then(({ additionalUserInfo }) => {
+          if (additionalUserInfo.isNewUser) {
+            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,

layouts/default.vue

@@ -247,6 +247,11 @@
                     <i class="material-icons">brush</i>
                   </a>
                 </li>
+                <li>
+                  <a href="#extensions" v-tooltip.right="$t('extensions')">
+                    <i class="material-icons">extensions</i>
+                  </a>
+                </li>
                 <li>
                   <a href="#proxy" v-tooltip.right="$t('proxy')">
                     <i class="material-icons">public</i>

pages/settings.vue

@@ -155,6 +155,7 @@
         </li>
       </ul>
     </pw-section>
+
     <pw-section class="blue" :label="$t('proxy')" ref="proxy">
       <ul>
         <li>