Color modes (#1181)

components/layout/contributors.vue

@@ -229,9 +229,7 @@
   @apply items-center;
   @apply flex-no-wrap;
   @apply overflow-auto;
-  @apply py-4;
   @apply my-4;
-  max-width: calc(100vw - 72px);
 }
 </style>
 

components/layout/history.vue

@@ -245,7 +245,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 290px);
+  max-height: calc(100vh - 288px);
 
   [readonly] {
     @apply cursor-default;

components/layout/pw-header.vue

@@ -3,8 +3,8 @@
     <div class="row-wrapper">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
-          <h1 class="logo hide-on-small-screen">Hoppscotch</h1>
-          <h1 class="logo show-on-small-screen">Hs</h1>
+          <h1 class="text-xl hide-on-small-screen hover:text-acColor">Hoppscotch</h1>
+          <h1 class="text-xl show-on-small-screen hover:text-acColor">Hs</h1>
         </nuxt-link>
       </span>
       <span>
@@ -293,14 +293,6 @@ kbd {
   animation: slideIn 0.2s forwards ease-in-out;
 }
 
-.logo {
-  @apply text-xl;
-
-  &:hover {
-    @apply text-acColor;
-  }
-}
-
 .show-on-small-screen {
   @apply hidden;
 }

components/layout/pw-section.vue

@@ -2,7 +2,7 @@
   <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
     <legend @click.prevent="collapse">
       <span>{{ label }}</span>
-      <i class="material-icons">
+      <i class="ml-2 align-middle material-icons">
         {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
       </i>
     </legend>
@@ -30,47 +30,38 @@ fieldset {
     @apply transition;
     @apply ease-in-out;
     @apply duration-200;
-
-    i {
-      @apply ml-2;
-      @apply align-middle;
-    }
   }
 
   &.blue legend {
-    color: #57b5f9;
-  }
-
-  &.gray legend {
-    color: #bcc2cd;
+    @apply text-blue-400;
   }
 
   &.green legend {
-    color: #50fa7b;
+    @apply text-green-400;
   }
 
-  &.cyan legend {
-    color: #8be9fd;
+  &.teal legend {
+    @apply text-teal-400;
   }
 
   &.purple legend {
-    color: #bd93f9;
+    @apply text-purple-400;
   }
 
   &.orange legend {
-    color: #ffb86c;
+    @apply text-orange-400;
   }
 
   &.pink legend {
-    color: #ff79c6;
+    @apply text-pink-400;
   }
 
   &.red legend {
-    color: #ff5555;
+    @apply text-red-400;
   }
 
   &.yellow legend {
-    color: #f1fa8c;
+    @apply text-yellow-400;
   }
 }
 

components/layout/sidenav.vue

@@ -204,6 +204,9 @@ nav.primary-nav {
     @apply text-fgLightColor;
     @apply fill-current;
     @apply outline-none;
+    @apply transition;
+    @apply ease-in-out;
+    @apply duration-200;
 
     &:hover {
       @apply text-fgColor;
@@ -248,6 +251,7 @@ nav.secondary-nav {
     @apply flex-col;
     @apply flex-no-wrap;
     @apply space-y-2;
+    @apply py-1;
 
     li {
       @apply flex;
@@ -259,6 +263,9 @@ nav.secondary-nav {
         @apply text-fgLightColor;
         @apply fill-current;
         @apply outline-none;
+        @apply transition;
+        @apply ease-in-out;
+        @apply duration-200;
 
         &:hover {
           @apply text-fgColor;