New groups

app/javascript/styles/gabsocial/components/group-card.scss

@@ -0,0 +1,71 @@
+$height: 80px; 
+
+.group-column-header {
+    border-radius: 10px;
+    background: $gab-background-container;
+    overflow: hidden;
+
+    .group-column-header__title {
+        padding: 15px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+}
+
+.group-card-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 15px;
+}
+
+.group-card {
+    display: block;
+    flex: 0 0 calc(50% - 15px/2);
+    margin-bottom: 15px;
+    background: $gab-background-container;
+    text-decoration: none;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .group-card__header {
+        height: $height;
+        overflow: hidden;
+        
+        img {
+            pointer-events: none;
+            width: 100%;
+            background: $gab-background-container;;
+        }
+    }
+
+    .group-card__content {
+        padding: 15px;
+
+        .group-card__title {
+            color: $primary-text-color;
+            font-size: 16px;
+            font-weight: bold;
+        }
+
+        .group-card__meta {
+            color: $gab-secondary-text;
+            font-size: 14px;
+            margin-top: 5px;
+            margin-bottom: 10px;
+        }
+
+        .group-card__description {
+            color: $primary-text-color;
+            font-size: 14px;
+        }
+    }
+
+    &:hover {
+        .group-card__title {
+            text-decoration: underline;
+        }
+    }
+}

app/javascript/styles/gabsocial/components/group-detail.scss

@@ -0,0 +1,72 @@
+.group {
+    .group__header-container {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: row;
+    }
+
+    .group__header {
+        width: 100%;
+        max-width: 1150px;
+        background: $gab-background-container;
+        border-radius: 10px;
+        overflow: hidden;
+        margin: 20px 0;
+
+        .group__cover {
+            img {
+                width: 100%;
+            }
+        }
+
+        .group__tabs {
+            .group__tabs__tab {
+                display: inline-block;
+				text-decoration: none;
+				padding: 16px 22px;
+                text-align: center;
+                color: $primary-text-color;
+                
+                &:hover,
+                &--active {
+                    border-bottom: 2px solid $primary-text-color;
+                }
+            }
+            
+            &:after {
+                content: "";
+                clear: both;
+                display: table;
+            }
+
+            button {
+                float: right;
+                margin: 7px;
+            }
+        }
+    }
+
+    .group__panel {
+        padding: 10px 10px 20px 10px;
+
+        h1 {
+            font-size: 22px;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+
+        .group__panel__description {
+            font-size: 14px;
+        }
+
+        .group__panel__label {
+            display: inline-block;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            background: $gab-background-container;
+            font-size: 13px;
+            padding: 4px 8px;
+        }
+    }
+}

app/javascript/styles/gabsocial/components/tabs-bar.scss

@@ -147,6 +147,7 @@
 	&.explore,
 	&.notifications,
 	&.messages,
+	&.groups,
 	&.optional {
 		padding: 16px 0 0 23px;
 		background-size: 14px 114px;
@@ -161,6 +162,7 @@
 	&.notifications {background-image: url('../images/gab-icons/icon-notifications-sprite.svg');}
 	&.messages {background-image: url('../images/gab-icons/icon-messages-sprite.svg');}
 	&.optional {background-image: url('../images/gab-icons/icon-search-sprite.svg');}
+	&.groups {background-image: url('../images/gab-icons/icon-explore-sprite.svg');}
 
 
 	&.optional {