minor: community implementation

src/styles/base/main.scss

@@ -752,6 +752,29 @@ a,
       }
     }
 
+    &.button-disabled{
+      cursor: not-allowed;
+      background-color: var(--color-white);
+
+      *,
+      & {
+        color: var(--color-grey-3);
+      }
+
+      &.bordered {
+        border: 1px solid var(--color-grey-3);
+      }
+
+      &:hover {
+        background-color: var(--color-white);
+
+        *,
+        & {
+          color: var(--color-grey-3);
+        }
+      }
+    }
+
     &.button-secondary {
       background-color: var(--color-white);
 
@@ -816,6 +839,29 @@ a,
         }
       }
 
+      &.button-disabled{
+        cursor: not-allowed;
+        background-color: var(--color-grey-3);
+  
+        *,
+        & {
+          color: var(--color-white);
+        }
+  
+        &.bordered {
+          border: 1px solid var(--color-white);
+        }
+  
+        &:hover {
+          background-color: var(--color-grey-3);
+  
+          *,
+          & {
+            color: var(--color-white);
+          }
+        }
+      }
+
       &.button-secondary {
         background-color: var(--color-secondary);
 

src/styles/base/table.scss

@@ -118,6 +118,14 @@
     width: 280px;
   }
 
+  .w450 {
+    width: 450px;
+  }
+
+  .w370 {
+    width: 370px;
+  }
+
   .w230 {
     width: 230px;
   }

src/styles/base/user-thumb.scss

@@ -66,8 +66,32 @@
     content: '@';
   }
 }
+solid-multiple[name="user.communities"] {
+  * {
+    display: contents;
+  }
+
+  solid-display-value {
+    &:after {
+      content: ",";
+      margin-right: 5px;
+    }
+
+    display: inline-block!important;
+  }
+
+  >solid-display>div>solid-display:last-child>div>solid-display-value:after {
+    display: none;
+  }
+
+  >solid-display {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: calc(50% - 22px - 0.5rem);
+  }
 
-.user-thumb__city:not(:empty) {
   @include mdi('atom');
   align-items: center;
   display: flex;

src/styles/components/sidebar.scss

@@ -86,7 +86,8 @@
         >solid-route {
 
           &[name*='circle'],
-          &[name*='project'] {
+          &[name*='project'],
+          &[name*='communities'] {
 
             >li::before {
               font-size: 4rem;
@@ -120,16 +121,8 @@
             @include ci('file');
           }
 
-          &[name='admin-users']>li::before {
-            background-color: var(--color-secondary);
-            content: '';
-            display: inline-block;
-            height: 40px;
-            mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat;
-            mask-size: cover;
-            -webkit-mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat;
-            -webkit-mask-size: cover;
-            width: 40px;
+          &[name='admin-communities']>li {
+            @include ci('networking');
           }
 
           &[name='admin-circles']>li {