fix: minor UI styling

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;

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;

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;

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>

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)}`,
             })
           )
       )

components/landing/Hero.vue

@@ -38,7 +38,7 @@
           svg="github"
           large
           rounded
-          :shortcuts="['30k']"
+          :shortcuts="['30k Stars']"
         />
       </div>
       <LandingStats />

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 {

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;

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 {

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 {