From 1d646b7ab0d638dba7d01bca98e583b8e899cb18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Thu, 14 Jun 2018 20:11:56 -0500
Subject: [PATCH] Improved visual relation of side components to main sections
 in ecosystem overview

---
 content/.vuepress/components/Ecosystem.vue | 89 +++++++++++++---------
 1 file changed, 55 insertions(+), 34 deletions(-)

diff --git a/content/.vuepress/components/Ecosystem.vue b/content/.vuepress/components/Ecosystem.vue
index 30ce543..b703105 100644
--- a/content/.vuepress/components/Ecosystem.vue
+++ b/content/.vuepress/components/Ecosystem.vue
@@ -213,63 +213,58 @@
 
 <script>
   export default {
-    data () {
-      return {
-      }
-    },
     methods: {
       open (ecosystemComponentClassName) {
         document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active"));
-        document.querySelectorAll(".ecosystem__submodule").forEach(n => n.classList.remove("active"));
-
         document.getElementsByClassName(ecosystemComponentClassName)[0].classList.add("active");
 
         switch (true) {
           case (ecosystemComponentClassName === "lbrycrd"):
-            document.getElementsByClassName("chainquery")[0].classList.add("active");
-            document.getElementsByClassName("lighthouse")[0].classList.add("active");
-            document.getElementsByClassName("wallet")[0].classList.add("active");
+            resetClasses();
+            document.getElementsByClassName("chainquery")[0].className += " active red";
+            document.getElementsByClassName("lighthouse")[0].className += " active red";
+            document.getElementsByClassName("wallet")[0].className += " active red";
             break;
 
+
+
           case (ecosystemComponentClassName === "lbry"):
-            document.getElementsByClassName("reflector")[0].classList.add("active");
-            document.getElementsByClassName("wallet")[0].classList.add("active");
+            resetClasses();
+            document.getElementsByClassName("reflector")[0].className += " active blue";
+            document.getElementsByClassName("wallet")[0].className += " active blue";
             break;
 
+
+
           case (ecosystemComponentClassName === "applications"):
-            document.getElementsByClassName("chainquery")[0].classList.add("active");
-            document.getElementsByClassName("lighthouse")[0].classList.add("active");
+            resetClasses();
+            document.getElementsByClassName("chainquery")[0].className += " active green";
+            document.getElementsByClassName("lighthouse")[0].className += " active green";
             break;
 
+
+
           default:
             break;
         }
       },
       close () {
+        resetClasses();
         document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active"));
-        document.querySelectorAll(".ecosystem__submodule").forEach(n => n.classList.remove("active"));
-
-        /*
-        switch (true) {
-          case (ecosystemComponentClassName === "lbrycrd"):
-            document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
-            break;
-
-          case (ecosystemComponentClassName === "lbry"):
-            document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
-            break;
-
-          case (ecosystemComponentClassName === "applications"):
-            document.getElementsByClassName(ecosystemComponentClassName)[0].classList.remove("active");
-            break;
-
-          default:
-            break;
-        }
-        */
       }
     }
   }
+
+
+
+  function resetClasses() {
+    document.querySelectorAll(".ecosystem__submodule").forEach(n => {
+      n.classList.remove("active");
+      n.classList.remove("blue");
+      n.classList.remove("green");
+      n.classList.remove("red");
+    });
+  }
 </script>
 
 <style lang="scss">
@@ -521,10 +516,11 @@
     @include center;
     width: 144px; height: 144px;
 
-    border: 2px dashed;
     border-radius: 50%;
+    border-width: 2px;
     cursor: default;
     position: relative;
+    transition: border 0.2s;
     z-index: 2;
 
     &:not(:last-of-type) {
@@ -556,6 +552,31 @@
         right: -2px;
       }
     }
+
+    &:not(.blue):not(.green):not(.red) {
+      border-style: dashed;
+    }
+
+    &.blue,
+    &.green,
+    &.red {
+      border-style: solid;
+    }
+
+    &.blue {
+      background-color: rgba($blue, 0.3);
+      border-color: $blue;
+    }
+
+    &.green {
+      background-color: rgba($green, 0.3);
+      border-color: $green;
+    }
+
+    &.red {
+      background-color: rgba($red, 0.3);
+      border-color: $red;
+    }
   }
 
   .ecosystem__submodule__description {