From f36db182f14a0eabd798423abf060d82ff47d367 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Thu, 24 Sep 2020 22:52:17 +0530
Subject: [PATCH] Better color schemes, minor UI fixes

---
 assets/scss/styles.scss | 22 +++++++++++-----------
 assets/scss/themes.scss | 22 ++++++----------------
 layouts/default.vue     |  4 ++--
 pages/doc.vue           |  2 +-
 pages/graphql.vue       |  2 +-
 pages/index.vue         |  2 +-
 6 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index a1162c020..287f48aeb 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -137,7 +137,7 @@ footer {
   @apply h-full;
 }
 
-.main {
+main {
   @apply flex;
   @apply flex-col;
   @apply flex-1;
@@ -645,23 +645,23 @@ ol li {
 }
 
 .info-response {
-  color: #ffeb3b;
+  @apply text-yellow-400;
 }
 
 .success-response {
-  color: #4bb543;
+  @apply text-green-400;
 }
 
 .redir-response {
-  color: #ff5722;
+  @apply text-orange-400;
 }
 
 .cl-error-response {
-  color: #a63232;
+  @apply text-red-400;
 }
 
 .sv-error-response {
-  color: #b71c1c;
+  @apply text-red-600;
 }
 
 .missing-data-response {
@@ -754,7 +754,7 @@ section {
     @apply flex-col;
   }
 
-  .main {
+  main {
     padding: 0 8px 68px;
   }
 
@@ -792,8 +792,8 @@ section {
 }
 
 .toasted-ad {
-  background-color: #fefefe;
-  color: #121212;
+  @apply bg-gray-50;
+  @apply text-gray-900;
   padding: 16px !important;
   @apply font-bold;
   @apply text-sm;
@@ -802,13 +802,13 @@ section {
 
   .action {
     text-transform: none !important;
-    background-color: #121212;
-    color: #fefefe;
     padding: 12px 16px !important;
     font-weight: 500 !important;
     font-size: 16px !important;
     margin: 0 !important;
     margin-left: 8px !important;
+    @apply bg-gray-50;
+    @apply text-gray-900;
     @apply rounded-lg;
   }
 }
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 4bb326551..98a316412 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -23,6 +23,8 @@
   --tt-color: rgba(53, 53, 53, 1);
   // Editor theme
   --editor-theme: "twilight";
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin lightTheme {
@@ -44,6 +46,8 @@
   --tt-color: rgba(220, 220, 220, 1);
   // Editor theme
   --editor-theme: "iplastic";
+  // Active text color
+  --act-color: rgba(255, 255, 255, 1);
 }
 
 @mixin blackTheme {
@@ -65,62 +69,48 @@
   --tt-color: rgba(18, 18, 18, 1);
   // Editor theme
   --editor-theme: "vibrant_ink";
+  // Active text color
+  --act-color: rgba(0, 0, 0, 1);
 }
 
 @mixin blueTheme {
   // Acent color
   --ac-color: theme("colors.blue.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin greenTheme {
   // Acent color
   --ac-color: theme("colors.green.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin tealTheme {
   // Acent color
   --ac-color: theme("colors.teal.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin purpleTheme {
   // Acent color
   --ac-color: theme("colors.purple.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin orangeTheme {
   // Acent color
   --ac-color: theme("colors.orange.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin pinkTheme {
   // Acent color
   --ac-color: theme("colors.pink.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin redTheme {
   // Acent color
   --ac-color: theme("colors.red.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin yellowTheme {
   // Acent color
   --ac-color: theme("colors.yellow.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 :root {
diff --git a/layouts/default.vue b/layouts/default.vue
index 4ce08087c..2db72fb0f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,11 +3,11 @@
     <div class="content">
       <div class="columns">
         <sidenav />
-        <div class="main" id="main">
+        <main>
           <pw-header />
           <nuxt />
           <pw-footer />
-        </div>
+        </main>
       </div>
     </div>
   </div>
diff --git a/pages/doc.vue b/pages/doc.vue
index e09303023..bb0594b96 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -276,7 +276,7 @@
         </pw-section>
       </div>
 
-      <aside class="sticky-inner inner-right">
+      <aside class="sticky-inner inner-right lg:max-w-md">
         <collections @use-collection="useSelectedCollection($event)" :doc="true" />
       </aside>
     </div>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 3fe747417..da054fcae 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -260,7 +260,7 @@
           />
         </pw-section>
       </div>
-      <aside class="sticky-inner inner-right">
+      <aside class="sticky-inner inner-right lg:max-w-md">
         <pw-section class="purple" :label="$t('docs')" ref="docs">
           <section>
             <tabs ref="gqlTabs">
diff --git a/pages/index.vue b/pages/index.vue
index 3ee968df5..6c5291c24 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -938,7 +938,7 @@
         </pw-section>
       </div>
 
-      <aside v-if="activeSidebar" class="sticky-inner inner-right">
+      <aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
         <section>
           <tabs>
             <tab :id="'history'" :label="$t('history')" :selected="true">