Better empty state for Groups view.

1 files changed, 35 insertions, 1 deletions

diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 732dc645c66..185ce970e71 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -57,7 +57,6 @@
 }
 
 .groups-header {
-
   @media (min-width: $screen-sm-min) {
     .nav-links {
       width: 35%;
@@ -68,3 +67,38 @@
     }
   }
 }
+
+.groups-empty-state {
+  padding: 50px 100px;
+  overflow: hidden;
+
+  @media (max-width: $screen-md-min) {
+    padding: 50px 0;
+  }
+
+  svg {
+    float: right;
+
+    @media (max-width: $screen-md-min) {
+      float: none;
+      display: block;
+      width: 250px;
+      position: relative;
+      left: 50%;
+      margin-left: -125px;
+    }
+  }
+
+  .text-content {
+    float: left;
+    width: 460px;
+    margin-top: 120px;
+
+    @media (max-width: $screen-md-min) {
+      float: none;
+      margin-top: 60px;
+      width: auto;
+      text-align: center;
+    }
+  }
+}