From 2ace83bcaf3755a291f54400d281117af28f977d Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 20 Jul 2021 15:59:30 +0530
Subject: [PATCH] fix: minor UI styling

---
 assets/scss/styles.scss           | 105 ++++++++++++------------------
 assets/scss/themes.scss           |  42 ++++++------
 components/app/Sidenav.vue        |   7 +-
 components/docs/Collection.vue    |   2 +-
 components/docs/Folder.vue        |   4 +-
 components/landing/Footer.vue     |  11 ++--
 components/landing/Globe.vue      |  40 ++++++++----
 components/landing/Hero.vue       |   2 +-
 components/smart/AutoComplete.vue |   3 +-
 components/smart/Tabs.vue         |   5 +-
 components/smart/Toggle.vue       |   6 +-
 components/smart/UrlField.vue     |   3 +-
 layouts/default.vue               |   9 ---
 13 files changed, 110 insertions(+), 129 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index d121d5714..858f34b03 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -15,17 +15,10 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-divider;
+  @apply bg-divider bg-clip-content;
   @apply rounded-full;
-  @apply border-solid;
-  @apply border-4;
-  @apply border-transparent;
-  @apply bg-clip-content;
-
-  &:hover {
-    @apply bg-dividerDark;
-    @apply bg-clip-content;
-  }
+  @apply border-solid border-4 border-transparent;
+  @apply hover:(bg-dividerDark bg-clip-content);
 }
 
 ::-webkit-scrollbar {
@@ -53,8 +46,7 @@ html {
 
 body {
   @apply bg-primary;
-  @apply text-secondary;
-  @apply !text-sm;
+  @apply text-secondary !text-sm;
   @apply font-medium;
   @apply select-none;
   @apply overflow-x-hidden;
@@ -73,7 +65,8 @@ body {
 }
 
 .fade-enter,
-.fade-leave-to .page-enter,
+.fade-leave-to,
+.page-enter,
 .page-leave-to,
 .layout-enter,
 .layout-leave-to {
@@ -96,26 +89,25 @@ a {
   @apply text-current;
   @apply no-underline;
   @apply outline-none;
-  @apply focus-visible:ring;
-  @apply focus-visible:ring-inset;
-  @apply focus-visible:ring-accent;
+  @apply rounded-lg;
+  @apply focus-visible:(ring ring-inset ring-accent);
+  @apply transition;
 
   &.link {
     @apply items-center;
+    @apply px-2 py-1;
+    @apply -mx-2 -my-1;
     @apply text-accent;
-    @apply hover:text-accent;
-    @apply focus:text-accent;
+    @apply hover:text-accentDark;
   }
 }
 
 .tippy-popper {
   .tooltip-theme {
     @apply bg-tooltip;
-    @apply text-primaryLight;
-    @apply text-xs;
+    @apply text-primaryLight text-xs;
     @apply font-semibold;
-    @apply py-1;
-    @apply px-2;
+    @apply py-1 px-2;
     @apply shadow;
 
     kbd {
@@ -139,59 +131,51 @@ a {
   }
 
   &[x-placement^="top"] .tippy-tooltip .tippy-arrow {
-    border-top-color: var(--primary-color);
+    @apply border-t-primary;
   }
 
   &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
-    border-bottom-color: var(--primary-color);
+    @apply border-b-primary;
   }
 
   &[x-placement^="left"] .tippy-tooltip .tippy-arrow {
-    border-left-color: var(--primary-color);
+    @apply border-l-primary;
   }
 
   &[x-placement^="right"] .tippy-tooltip .tippy-arrow {
-    border-right-color: var(--primary-color);
+    @apply border-r-primary;
   }
 }
 
 .tippy-content > div {
-  @apply flex;
-  @apply flex-col;
+  @apply flex flex-col;
   @apply max-h-64;
-  @apply overflow-y-auto;
   @apply items-stretch;
+  @apply overflow-y-auto;
 }
 
 hr {
-  @apply border-b;
-  @apply border-dividerLight;
+  @apply border-b border-dividerLight;
 }
 
 .heading {
   @apply font-bold;
-  @apply text-secondaryDark;
-  @apply text-lg;
+  @apply text-secondaryDark text-lg;
 }
 
 .input,
 .select {
-  @apply flex;
-  @apply flex-1;
+  @apply flex flex-1;
   @apply w-full;
-  @apply px-4;
-  @apply py-2;
+  @apply px-4 py-2;
   @apply bg-primary;
   @apply truncate;
   @apply rounded-lg;
-  @apply font-semibold;
-  @apply font-mono;
+  @apply font-semibold font-mono;
   @apply text-xs;
-  @apply border;
-  @apply border-divider;
+  @apply border border-divider;
   @apply transition;
-  @apply focus:outline-none;
-  @apply focus:border-accent;
+  @apply focus:(outline-none border-accent);
 }
 
 .input[type="file"],
@@ -202,13 +186,13 @@ hr {
 
 pre.ace_editor {
   @apply font-mono;
-  @apply z-0;
   @apply resize-none;
+  @apply z-0;
 }
 
 select {
-  @apply cursor-pointer;
   @apply appearance-none;
+  @apply cursor-pointer;
 
   &::-ms-expand {
     @apply hidden;
@@ -220,8 +204,8 @@ select {
   @apply w-full;
 
   &::after {
-    @apply inline-block;
     @apply absolute;
+    @apply inline-block;
     @apply pointer-events-none;
     @apply font-icon;
     @apply text-secondaryLight;
@@ -241,8 +225,7 @@ input[type="checkbox"] {
     @apply cursor-pointer;
 
     &::before {
-      @apply border;
-      @apply border-secondary;
+      @apply border border-secondary;
       @apply rounded-lg;
       @apply inline-flex;
       @apply items-center;
@@ -293,8 +276,6 @@ input[type="checkbox"] {
   textarea {
     @apply m-0;
     @apply w-full;
-
-    line-height: 1;
   }
 
   .covers-response {
@@ -309,11 +290,9 @@ input[type="checkbox"] {
 .toasted-container {
   .toasted {
     &.toasted-primary {
-      @apply px-6;
-      @apply py-1;
+      @apply px-6 py-1;
       @apply bg-tooltip;
-      @apply text-primary;
-      @apply text-xs;
+      @apply text-white text-xs;
       @apply !font-semibold;
 
       .material-icons {
@@ -322,10 +301,8 @@ input[type="checkbox"] {
 
       .action {
         @apply transition;
-        @apply text-current;
-        @apply text-xs;
-        @apply hover:opacity-75;
-        @apply hover:no-underline;
+        @apply text-current text-xs;
+        @apply hover:(opacity-75 no-underline);
       }
     }
 
@@ -336,12 +313,6 @@ input[type="checkbox"] {
   }
 }
 
-@media (max-width: 767px) {
-  main {
-    margin-bottom: env(safe-area-inset-bottom);
-  }
-}
-
 .splitpanes__splitter {
   @apply relative;
   @apply bg-primaryLight;
@@ -402,3 +373,9 @@ input[type="checkbox"] {
   bottom: -2px;
   width: 100%;
 }
+
+@media (max-width: 767px) {
+  main {
+    margin-bottom: env(safe-area-inset-bottom);
+  }
+}
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index bf6de5935..78d11dc37 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -123,11 +123,11 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.teal.600");
   // Gradient from
-  --gradient-from-color: theme("colors.blue.200");
+  --gradient-from-color: theme("colors.teal.200");
   // Gradient via
-  --gradient-via-color: theme("colors.blue.400");
+  --gradient-via-color: theme("colors.teal.400");
   // Gradient to
-  --gradient-to-color: theme("colors.blue.600");
+  --gradient-to-color: theme("colors.teal.600");
 }
 
 @mixin indigoTheme {
@@ -138,11 +138,11 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.indigo.600");
   // Gradient from
-  --gradient-from-color: theme("colors.blue.200");
+  --gradient-from-color: theme("colors.indigo.200");
   // Gradient via
-  --gradient-via-color: theme("colors.blue.400");
+  --gradient-via-color: theme("colors.indigo.400");
   // Gradient to
-  --gradient-to-color: theme("colors.blue.600");
+  --gradient-to-color: theme("colors.indigo.600");
 }
 
 @mixin purpleTheme {
@@ -153,11 +153,11 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.purple.600");
   // Gradient from
-  --gradient-from-color: theme("colors.blue.200");
+  --gradient-from-color: theme("colors.purple.200");
   // Gradient via
-  --gradient-via-color: theme("colors.blue.400");
+  --gradient-via-color: theme("colors.purple.400");
   // Gradient to
-  --gradient-to-color: theme("colors.blue.600");
+  --gradient-to-color: theme("colors.purple.600");
 }
 
 @mixin orangeTheme {
@@ -168,11 +168,11 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.orange.600");
   // Gradient from
-  --gradient-from-color: theme("colors.blue.200");
+  --gradient-from-color: theme("colors.orange.200");
   // Gradient via
-  --gradient-via-color: theme("colors.blue.400");
+  --gradient-via-color: theme("colors.orange.400");
   // Gradient to
-  --gradient-to-color: theme("colors.blue.600");
+  --gradient-to-color: theme("colors.orange.600");
 }
 
 @mixin pinkTheme {
@@ -183,11 +183,11 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.pink.600");
   // Gradient from
-  --gradient-from-color: theme("colors.blue.200");
+  --gradient-from-color: theme("colors.pink.200");
   // Gradient via
-  --gradient-via-color: theme("colors.blue.400");
+  --gradient-via-color: theme("colors.pink.400");
   // Gradient to
-  --gradient-to-color: theme("colors.blue.600");
+  --gradient-to-color: theme("colors.pink.600");
 }
 
 @mixin redTheme {
@@ -198,11 +198,11 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.red.600");
   // Gradient from
-  --gradient-from-color: theme("colors.blue.200");
+  --gradient-from-color: theme("colors.red.200");
   // Gradient via
-  --gradient-via-color: theme("colors.blue.400");
+  --gradient-via-color: theme("colors.red.400");
   // Gradient to
-  --gradient-to-color: theme("colors.blue.600");
+  --gradient-to-color: theme("colors.red.600");
 }
 
 @mixin yellowTheme {
@@ -213,11 +213,11 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.yellow.600");
   // Gradient from
-  --gradient-from-color: theme("colors.blue.200");
+  --gradient-from-color: theme("colors.yellow.200");
   // Gradient via
-  --gradient-via-color: theme("colors.blue.400");
+  --gradient-via-color: theme("colors.yellow.400");
   // Gradient to
-  --gradient-to-color: theme("colors.blue.600");
+  --gradient-to-color: theme("colors.yellow.600");
 }
 
 :root {
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index 14688d4a6..97379f4bb 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -35,13 +35,12 @@ export default {
 <style scoped lang="scss">
 .nav-link {
   @apply p-4;
-  @apply flex-col;
-  @apply flex-1;
-  @apply hover:bg-primaryDark;
-  @apply hover:text-secondaryDark;
+  @apply flex flex-col flex-1;
   @apply items-center;
   @apply justify-center;
   @apply transition;
+  @apply hover:bg-primaryDark;
+  @apply hover:text-secondaryDark;
 
   .material-icons {
     @apply transition-opacity;
diff --git a/components/docs/Collection.vue b/components/docs/Collection.vue
index d1a77d5a1..197357113 100644
--- a/components/docs/Collection.vue
+++ b/components/docs/Collection.vue
@@ -28,7 +28,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .collection {
   @apply flex flex-col flex-1;
   @apply justify-center;
diff --git a/components/docs/Folder.vue b/components/docs/Folder.vue
index b83dc6cf8..f52d96fbb 100644
--- a/components/docs/Folder.vue
+++ b/components/docs/Folder.vue
@@ -24,13 +24,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .folder {
   @apply flex flex-col flex-1;
   @apply justify-center;
   @apply p-4;
-  @apply border-l border-divider;
   @apply mt-4;
+  @apply border-l border-divider;
 
   .material-icons {
     @apply mr-4;
diff --git a/components/landing/Footer.vue b/components/landing/Footer.vue
index 29e58a3b9..70c74aa78 100644
--- a/components/landing/Footer.vue
+++ b/components/landing/Footer.vue
@@ -154,13 +154,12 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .footer-nav {
+  @apply px-2 py-1;
+  @apply -mx-2 -my-1;
   @apply text-xs;
-
-  &:hover,
-  &:focus {
-    @apply text-secondaryDark;
-  }
+  @apply hover:text-secondaryDark;
+  @apply focus:text-secondaryDark;
 }
 </style>
diff --git a/components/landing/Globe.vue b/components/landing/Globe.vue
index 379951b5d..8e6c2c50d 100644
--- a/components/landing/Globe.vue
+++ b/components/landing/Globe.vue
@@ -9,6 +9,26 @@ import TrackballControls from "three-trackballcontrols"
 import geojson from "~/assets/geojson/ne_110m_admin_0_countries.geojson"
 import texture from "~/assets/images/texture.png"
 
+const COLORS = [
+  "#f43f5e",
+  "#ec4899",
+  "#d946ef",
+  "#a855f7",
+  "#8b5cf6",
+  "#6366f1",
+  "#3b82f6",
+  "#0ea5e9",
+  "#06b6d4",
+  "#14b8a6",
+  "#10b981",
+  "#22c55e",
+  "#84cc16",
+  "#eab308",
+  "#f59e0b",
+  "#f97316",
+  "#ef4444",
+]
+
 export default {
   data() {
     return {
@@ -17,18 +37,14 @@ export default {
       scene: null,
       camera: null,
       tbControls: null,
-      arcsData: [...Array(20).keys()].map(() => ({
-        startLat: (Math.random() - 0.5) * 180,
-        startLng: (Math.random() - 0.5) * 360,
-        endLat: (Math.random() - 0.5) * 180,
+      arcsData: [...Array(16).keys()].map(() => ({
+        startLat: (Math.random() - 0.5) * 90,
+        startLng: (Math.random() - 0.5) * 180,
+        endLat: (Math.random() - 0.5) * 270,
         endLng: (Math.random() - 0.5) * 360,
         color: [
-          ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
-            Math.round(Math.random() * 3)
-          ],
-          ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
-            Math.round(Math.random() * 3)
-          ],
+          COLORS[Math.round(Math.random() * 16)],
+          COLORS[Math.round(Math.random() * 16)],
         ],
       })),
     }
@@ -47,7 +63,9 @@ export default {
               lat,
               lng,
               color: color[edgeIdx],
-              text: `${linkIdx} ${edgeIdx ? "tgt" : "src"}`,
+              text: `#${linkIdx} ${
+                edgeIdx ? "response" : "request"
+              } ${Math.random().toString(36).substring(7)}`,
             })
           )
       )
diff --git a/components/landing/Hero.vue b/components/landing/Hero.vue
index a5069869f..c303b36a2 100644
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -38,7 +38,7 @@
           svg="github"
           large
           rounded
-          :shortcuts="['30k']"
+          :shortcuts="['30k Stars']"
         />
       </div>
       <LandingStats />
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index 8d6737f0d..5de0b7d9d 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -197,8 +197,7 @@ export default {
 <style scoped lang="scss">
 .autocomplete-wrapper {
   @apply relative;
-  @apply flex;
-  @apply flex-1;
+  @apply flex flex-1;
 
   input:focus + ul.suggestions,
   ul.suggestions:hover {
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 113156e33..2aa9d482d 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -78,11 +78,11 @@ export default {
   }
 
   .tab {
+    @apply relative;
     @apply flex;
     @apply items-center;
     @apply justify-center;
-    @apply px-4;
-    @apply py-3;
+    @apply px-4 py-3;
     @apply text-secondary;
     @apply font-semibold;
     @apply text-xs;
@@ -91,7 +91,6 @@ export default {
     @apply hover:text-secondaryDark;
     @apply focus:text-secondaryDark;
     @apply focus:outline-none;
-    @apply relative;
 
     .tab-info {
       @apply inline-flex;
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index 3e295a4c5..f2eb01099 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -29,9 +29,9 @@ $activeColor: var(--accent-color);
 $inactiveColor: var(--divider-dark-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
-$width: 32px;
-$height: 16px;
-$handleSpacing: 4px;
+$width: 2rem;
+$height: 1rem;
+$handleSpacing: 0.25rem;
 $transition: all 0.2s ease-in-out;
 
 .toggle {
diff --git a/components/smart/UrlField.vue b/components/smart/UrlField.vue
index 91de0463a..f6b3959d8 100644
--- a/components/smart/UrlField.vue
+++ b/components/smart/UrlField.vue
@@ -389,7 +389,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .VAR {
   @apply font-bold;
   @apply text-accent;
@@ -404,7 +404,6 @@ export default {
   @apply whitespace-nowrap;
   @apply overflow-x-auto;
   @apply resize-none;
-  @apply md:border-l;
 }
 
 .url-field::-webkit-scrollbar {
diff --git a/layouts/default.vue b/layouts/default.vue
index de1b43bad..b1d62ac7a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -148,12 +148,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.splitpanes--vertical > .splitpanes__splitter {
-  display: none;
-}
-.splitpanes--horizontal > .splitpanes__splitter {
-  display: none;
-}
-</style>