style + feat: fixed groups + added updated news feed

src/components/groups-about.js

@@ -15,8 +15,8 @@ class groupsAbout extends LitElement {
       <div class="groups-about-box">
         <div class="column groups-wrapper-top is-centered">
           <div class="navbar-brand groups-brand">
-            <a class="navbar-item" href="https://bulma.io">
-              <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
+            <a class="navbar-item" href="http://0.0.0.0:8080/oae">
+              <img src="/images/logo-oae2.svg" width="112" height="28" />
             </a>
           </div>
           <div class="group-name">

src/components/groups.js

@@ -1,16 +1,20 @@
 import { html } from 'lit-element';
+import '@polymer/iron-icons/iron-icons.js';
 import sharedStyles from '../../style/app.scss';
+import groupStyles from '../../style/groups.scss';
+import groupButtonStyles from '../../style/groups-filter.scss';
 import { PageViewElement } from './page-view-element.js';
 import './sidebar.js';
 import './top-nav.js';
 import './groups-feed.js';
 import './groups-about.js';
+import './news-feed.js';
 import './quick-settings.js';
 import './tags.js';
 
 class OAEGroups extends PageViewElement {
   static get styles() {
-    return [sharedStyles];
+    return [sharedStyles, groupStyles, groupButtonStyles];
   }
 
   render() {
@@ -28,17 +32,34 @@ class OAEGroups extends PageViewElement {
                     <top-nav></top-nav>
                   </div>
                   <div class=" columns is-flex main-content">
-                    <div class="column is-two-thirds">
-                      <section class="column is-inline-flex"></section>
-                      <section class="column activity-dashboard">
-                        <section class="is-flex">
-                          <span class="icon tag-activity-dashboard">
-                            <img src="./../../node_modules/@mdi/svg/svg/tag-text-outline.svg" />
-                          </span>
-                          <h3>RECENT ACTIVITY</h3>
-                        </section>
-                        <groups-feed></groups-feed>
+                    <div class="column is-three-fifths">
+                      <section class="is-flex">
+                        <ul class="breadcrumb">
+                          <li><a href="#">Groups</a></li>
+                          <li>Open Apereo 2019</li>
+                        </ul>
                       </section>
+                      <nav class="level">
+                        <!-- Left side -->
+                        <div class="level-left">
+                          <div class="level-item">
+                            <span class="dashboard-icon">
+                              <iron-icon icon="icons:update"></iron-icon>
+                            </span>
+                            <h3>Recent Activity</h3>
+                          </div>
+                        </div>
+                        <!-- Right side -->
+                        <div class="level-right">
+                          <div class="buttons">
+                            <button class="button filter-feed filter-active-feed">Most Recent</button>
+                            <button class="button filter-feed">Oldest</button>
+                          </div>
+                        </div>
+                      </nav>
+                      <news-feed></news-feed>
+                      <news-feed></news-feed>
+                      <news-feed></news-feed>
                     </div>
                     <div class="column">
                       <groups-about></groups-about>

style/groups-about.scss

@@ -2,6 +2,8 @@
     background-color: white;
     border-radius: 5px;
 	position: sticky;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+	height: 38em;
 }
 
 .groups-about-box h5 {
@@ -10,8 +12,8 @@
 }
 
 .groups-brand {
-	margin-top: 4.5em;
-	margin-bottom: 2.5em;
+	margin-top: 3em;
+	margin-bottom: 1.5em;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -73,5 +75,8 @@
 }
 
 .group-members h5 {
-	color: black;
+	color: white;
+	margin-bottom: 5em;
+
 }
+

style/groups-filter.scss

@@ -0,0 +1,19 @@
+.filter-feed {
+    color: #0060df;
+    margin-right: 15px;
+    font-size: 13px;
+    height: 20px;
+    width: 6em;
+    border-radius: 25px;
+    border: none;
+    background-color: transparent;
+  }
+
+  .filter-active-feed {
+      background-color: #0060df;
+      color: white;
+      &:hover {
+          color: white;
+      }
+  }
+

style/groups.scss

@@ -0,0 +1,9 @@
+h3 {
+    color: #212121;
+    font-size: 14px;
+  }
+
+  .dashboard-icon {
+    color: #212121;
+    margin-right: 0.8em;
+  }

style/news-feed.scss

@@ -45,13 +45,13 @@
 }
 
 .feed-user {
-  text-decoration: underline;
+  text-decoration: none;
   color: #0060df;
   background-color: #f5f7ff;
   &:hover {
     color: #0060df;
     background-color: #f5f7ff;
-    text-decoration: none;
+    text-decoration: underline;
   }
 }
 
@@ -121,6 +121,7 @@
 
 .news-pin {
   background-color: transparent;
+  transform: rotate(-35deg);
   margin-right: 15px;
   border-radius: 25px;
   border: none;