From e52ed7a5cedbc5ee5320768e21bea8114fb4e51a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 18 Jul 2021 18:53:51 +0530
Subject: [PATCH] refactor(ui): minor inconsistency fixes

---
 assets/scss/styles.scss               | 36 ++++++++++++++---------
 assets/scss/themes.scss               | 42 +++++++++++++--------------
 components/app/Announcement.vue       |  9 +++++-
 components/button/Primary.vue         |  4 +--
 components/http/Request.vue           | 11 +++++--
 components/smart/AccentModePicker.vue |  3 +-
 components/smart/ColorModePicker.vue  |  7 ++---
 components/smart/Toggle.vue           |  4 +--
 nuxt.config.js                        |  1 -
 pages/settings.vue                    | 12 +++-----
 10 files changed, 72 insertions(+), 57 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 06a0ebb66..2aed0a69f 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -304,23 +304,31 @@ input[type="checkbox"] {
 }
 
 .toasted-container {
-  margin-bottom: 68px;
-
   .toasted {
-    justify-content: space-between !important;
+    &.toasted-primary {
+      @apply px-6;
+      @apply py-1;
+      @apply bg-tooltip;
+      @apply text-primary;
+      @apply text-xs;
+      @apply !font-semibold;
+
+      .material-icons {
+        @apply !text-md;
+      }
+
+      .action {
+        @apply transition;
+        @apply text-current;
+        @apply text-xs;
+        @apply hover:opacity-75;
+        @apply hover:no-underline;
+      }
+    }
 
     &.info {
-      background-color: var(--accent-color) !important;
-      color: var(--primary-color) !important;
-      font-weight: 700 !important;
-    }
-
-    &.bubble .action {
-      color: inherit !important;
-    }
-
-    .action {
-      margin-left: auto !important;
+      @apply !bg-accent;
+      @apply !text-primary;
     }
   }
 }
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 39da2b4e0..bf6de5935 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -26,7 +26,7 @@
   // Error color
   --error-color: theme("colors.true-gray.600");
   // Tooltip color
-  --tooltip-color: theme("colors.true-gray.800");
+  --tooltip-color: theme("colors.true-gray.200");
   // Editor theme
   --editor-theme: "merbivore_soft";
 }
@@ -80,16 +80,16 @@
   // Error color
   --error-color: theme("colors.dark.800");
   // Tooltip color
-  --tooltip-color: theme("colors.dark.500");
+  --tooltip-color: theme("colors.true-gray.300");
   // Editor theme
   --editor-theme: "vibrant_ink";
 }
 
 @mixin blueTheme {
   // Accent color
-  --accent-color: theme("colors.blue.400");
+  --accent-color: theme("colors.blue.500");
   // Light Accent color
-  --accent-light-color: theme("colors.blue.200");
+  --accent-light-color: theme("colors.blue.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.blue.600");
   // Gradient from
@@ -102,11 +102,11 @@
 
 @mixin greenTheme {
   // Accent color
-  --accent-color: rgb(97, 207, 123);
+  --accent-color: theme("colors.green.500");
   // Light Accent color
-  --accent-light-color: rgba(73, 204, 104, 1);
+  --accent-light-color: theme("colors.green.400");
   // Dark Accent color
-  --accent-dark-color: rgb(0, 71, 17);
+  --accent-dark-color: theme("colors.green.600");
   // Gradient from
   --gradient-from-color: theme("colors.green.200");
   // Gradient via
@@ -117,9 +117,9 @@
 
 @mixin tealTheme {
   // Accent color
-  --accent-color: theme("colors.teal.400");
+  --accent-color: theme("colors.teal.500");
   // Light Accent color
-  --accent-light-color: theme("colors.teal.200");
+  --accent-light-color: theme("colors.teal.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.teal.600");
   // Gradient from
@@ -132,9 +132,9 @@
 
 @mixin indigoTheme {
   // Accent color
-  --accent-color: theme("colors.indigo.400");
+  --accent-color: theme("colors.indigo.500");
   // Light Accent color
-  --accent-light-color: theme("colors.indigo.200");
+  --accent-light-color: theme("colors.indigo.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.indigo.600");
   // Gradient from
@@ -147,9 +147,9 @@
 
 @mixin purpleTheme {
   // Accent color
-  --accent-color: theme("colors.purple.400");
+  --accent-color: theme("colors.purple.500");
   // Light Accent color
-  --accent-light-color: theme("colors.purple.200");
+  --accent-light-color: theme("colors.purple.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.purple.600");
   // Gradient from
@@ -162,9 +162,9 @@
 
 @mixin orangeTheme {
   // Accent color
-  --accent-color: theme("colors.orange.400");
+  --accent-color: theme("colors.orange.500");
   // Light Accent color
-  --accent-light-color: theme("colors.orange.200");
+  --accent-light-color: theme("colors.orange.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.orange.600");
   // Gradient from
@@ -177,9 +177,9 @@
 
 @mixin pinkTheme {
   // Accent color
-  --accent-color: theme("colors.pink.400");
+  --accent-color: theme("colors.pink.500");
   // Light Accent color
-  --accent-light-color: theme("colors.pink.200");
+  --accent-light-color: theme("colors.pink.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.pink.600");
   // Gradient from
@@ -192,9 +192,9 @@
 
 @mixin redTheme {
   // Accent color
-  --accent-color: theme("colors.red.400");
+  --accent-color: theme("colors.red.500");
   // Light Accent color
-  --accent-light-color: theme("colors.red.200");
+  --accent-light-color: theme("colors.red.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.red.600");
   // Gradient from
@@ -207,9 +207,9 @@
 
 @mixin yellowTheme {
   // Accent color
-  --accent-color: theme("colors.yellow.400");
+  --accent-color: theme("colors.yellow.500");
   // Light Accent color
-  --accent-light-color: theme("colors.yellow.200");
+  --accent-light-color: theme("colors.yellow.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.yellow.600");
   // Gradient from
diff --git a/components/app/Announcement.vue b/components/app/Announcement.vue
index 4129e1542..2cd27ba3e 100644
--- a/components/app/Announcement.vue
+++ b/components/app/Announcement.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="bg-primary border-b border-dividerLight flex justify-between">
+  <div
+    class="
+      bg-primary bg-dividerLight
+      border-b border-divider
+      flex
+      justify-between
+    "
+  >
     <span class="flex">
       <SmartLink
         to="https://forms.gle/8yFiEynXB7h477Ns6"
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 34022d9fb..aab05345c 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -15,7 +15,7 @@
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
-        : `text-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-3' : 'px-2',
       rounded ? 'rounded-full' : 'rounded-lg',
       { 'opacity-50 cursor-not-allowed': disabled },
@@ -27,7 +27,7 @@
           gradient,
       },
       {
-        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+        'border border-accent hover:border-accentDark focus:border-accentDark':
           outline,
       },
     ]"
diff --git a/components/http/Request.vue b/components/http/Request.vue
index ccdfd11ca..6f7d480bb 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -68,14 +68,15 @@
         :placeholder="$t('url')"
         @keyup.enter="newSendRequest()"
       />
-      <!-- <SmartUrlField v-else v-model="uri" /> -->
     </div>
+    <!-- <SmartUrlField v-else v-model="uri" /> -->
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-none font-bold"
+        class="rounded-none"
         :label="!loading ? $t('send') : $('cancel')"
         :shortcuts="[getSpecialKey(), 'G']"
+        outline
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="inline-flex">
@@ -88,7 +89,11 @@
           arrow
         >
           <template #trigger>
-            <ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
+            <ButtonPrimary
+              class="rounded-l-none"
+              icon="keyboard_arrow_down"
+              outline
+            />
           </template>
           <SmartItem
             :label="$t('import_curl')"
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index 53abb48f5..0f70cda53 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -14,8 +14,9 @@
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-      :class="[`text-${color}-400`, { 'bg-primary': color === active }]"
+      :class="[{ 'bg-primaryLight': color === active }]"
       icon="lens"
+      :color="color"
       @click.native="setActiveColor(color)"
     />
   </div>
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 3a30fa739..346eded2b 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -5,10 +5,9 @@
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-      :class="[
-        { 'bg-primary': color === activeColor },
-        { 'text-accent hover:text-accent': color === activeColor },
-      ]"
+      :class="{
+        'bg-primaryLight !text-accent hover:text-accent': color === activeColor,
+      }"
       :icon="getIcon(color)"
       @click.native="setBGMode(color)"
     />
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index 64bb1b69c..3e295a4c5 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -24,9 +24,9 @@ export default {
 
 <style scoped lang="scss">
 $useBorder: false;
-$borderColor: var(--secondary-light-color);
+$borderColor: var(--divider-dark-color);
 $activeColor: var(--accent-color);
-$inactiveColor: var(--secondary-light-color);
+$inactiveColor: var(--divider-dark-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
 $width: 32px;
diff --git a/nuxt.config.js b/nuxt.config.js
index 560273d8e..1f9944631 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -175,7 +175,6 @@ export default {
   toast: {
     position: "bottom-center",
     duration: 3000,
-    theme: "bubble",
     keepOnHover: true,
   },
 
diff --git a/pages/settings.vue b/pages/settings.vue
index 812801101..2004357ed 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="space-y-8">
+    <div class="divide-y divide-dividerLight space-y-8">
       <div class="md:grid md:grid-cols-3 md:gap-4">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
@@ -10,7 +10,7 @@
             Customize your account settings.
           </p>
         </div>
-        <div class="border border-divider rounded-lg p-8 md:col-span-2">
+        <div class="p-8 md:col-span-2">
           <div v-if="currentUser === null">
             <ButtonPrimary label="Log in" @click.native="showLogin = true" />
             <div class="mt-4 text-xs text-secondaryLight">
@@ -103,9 +103,7 @@
             Customize your application theme.
           </p>
         </div>
-        <div
-          class="border border-divider rounded-lg space-y-8 p-8 md:col-span-2"
-        >
+        <div class="space-y-8 p-8 md:col-span-2">
           <fieldset>
             <legend class="font-bold text-secondaryDark">
               {{ $t("background") }}
@@ -187,9 +185,7 @@
             Middleware between application and APIs.
           </p>
         </div>
-        <div
-          class="border border-divider rounded-lg space-y-8 p-8 md:col-span-2"
-        >
+        <div class="space-y-8 p-8 md:col-span-2">
           <fieldset>
             <legend class="font-bold text-secondaryDark">
               {{ $t("extensions") }}