Interface updatesv2

src/components/dashboard.js

@@ -29,7 +29,7 @@ class OAEDashboard extends PageViewElement {
                     <top-nav></top-nav>
                   </div>
                   <div class=" columns is-flex main-content">
-                    <div class="column is-two-thirds">
+                    <div class="column is-three-fifths main-left">
                       <section class="column activity-dashboard">
                         <section class="is-flex">
                           <span class="icon tag-activity-dashboard">

src/components/news-feed.js

@@ -2,6 +2,10 @@ import { html, LitElement } from 'lit-element';
 import homepageStyles from '../../style/homepage.scss';
 import sharedStyles from '../../style/app.scss';
 import newsFeedComponent from '../../style/news-feed.scss';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
+import '@polymer/iron-icons/av-icons.js';
+import '@polymer/iron-icons/hardware-icons.js';
 import './tags.js';
 
 class newsFeed extends LitElement {
@@ -13,19 +17,19 @@ class newsFeed extends LitElement {
     return html`
       <div class="box box-feed">
         <div class="content news-feed">
-          <nav class="level">
+          <nav class="level news-feed-top">
             <div class="level-left">
               <div class="level-item">
                 <div class="column is-flex news-feed-nav">
                   <figure class="image avatar-news-feed">
-                    <img class="is-rounded avatar-news-feed" src="https://bulma.io/images/placeholders/128x128.png" />
+                    <img class="is-rounded avatar-news-feed" src="/images/avatar.jpg" />
                   </figure>
                   <section>
                     <h4>
-                      <a> Rita Carvalho</a>
+                      <a class="feed-user">Michael Brown</a>
                       uploaded a file
-                      <span class="panel-icon">
-                        <i class="fas fa-book" aria-hidden="true"></i>
+                      <span class="panel-icon icon-feed">
+                        <iron-icon icon="icons:cloud-upload"></iron-icon>
                       </span>
                     </h4>
                     <p>
@@ -36,7 +40,11 @@ class newsFeed extends LitElement {
               </div>
             </div>
             <div class="level-right">
-              <p class="level-item"><a class="button is-info">Pin</a></p>
+              <p class="level-item">
+                <a class="button news-pin">
+                  <iron-icon icon="icons:label-outline"></iron-icon>
+                </a>
+              </p>
             </div>
           </nav>
           <section class="column news-feed-message">
@@ -49,11 +57,10 @@ class newsFeed extends LitElement {
             <tags-button></tags-button>
             <tags-button></tags-button>
           </section>
-          <hr class="news-feed-break" />
           <nav class="level bottom-nav-news">
             <div class="level-left">
               <div class="level-item">
-                <a class="button is-inverted is-link">
+                <a class="button comments-button">
                   <span>View (25) comments</span>
                   <span class="icon is-small">
                     <i class="mdi mdi-alert"></i>
@@ -69,6 +76,7 @@ class newsFeed extends LitElement {
               </div>
             </div>
           </nav>
+          <hr class="news-feed-break" />
         </div>
       </div>
     `;

src/components/user-button.js

@@ -17,9 +17,9 @@ class User extends LitElement {
       <div class="navbar-item has-dropdown is-hoverable notifications-button">
         <a class="navbar-link">
           <span class="notifications-label">Hi, Rita Carvalho</span>
-          <span class="icon user-icon">
-            <iron-icon icon="social:person-outline"></iron-icon>
-          </span>
+          <figure class="image user-avatar">
+            <img class="is-rounded" src="/images/user.jpg" />
+          </figure>
         </a>
         <div class="navbar-dropdown">
           <a class="navbar-item">

style/app.scss

@@ -133,9 +133,6 @@ h2 {
 
 .column.is-narrow {
   background-color: white;
-  -moz-box-shadow: 3px 3px 5px 6px #ccc;
-  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
-  box-shadow: 5px 5px 6px #d8d3d3;
   z-index: 1;
   width: 210px;
   padding: 0;
@@ -264,6 +261,11 @@ a.network {
 .activity-dashboard h3 {
   color: black;
   font-weight: bold;
+  font-size: 14px;
+}
+
+.main-left {
+  padding: 0;
 }
 
 .tag-activity-dashboard {

style/news-feed.scss

@@ -1,33 +1,97 @@
 // News Feed - Dashboard
+.box {
+  box-shadow: none;
+}
+
 .box-feed {
-	margin-top: 25px;
-	&:hover {
-		border: 5px solid #2962ff;
-	}
+  margin-top: 25px;
+  padding: 5px;
+  background-color: transparent;
+  border: none;
+}
+
+* {
+  font-size: 13px;
+}
+
+.avatar-news-feed img {
+  height: 100%;
+  object-fit: cover;
 }
 
 .news-feed {
-	padding: 10px;
+  padding: 10px;
+}
+
+.news-feed-top {
+  margin-bottom: 0;
 }
+
 .news-feed-message {
-	margin-left: 65px;
-	width: auto;
-	background-color: #fafafa;
-	border-radius: 5px;
-	word-wrap: break-word;
+  margin-left: 65px;
+  margin-top: -15px;
+  width: auto;
+  background-color: rgb(253, 253, 253);
+  border-radius: 5px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  word-wrap: break-word;
 }
 
 .news-feed-message h4 {
-	font-weight: bold;
-	margin-bottom: 5px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.feed-user {
+  text-decoration: underline;
+  color: #0060df;
+  background-color: #f5f7ff;
+  &:hover {
+    color: #0d47a1;
+    background-color: #f5f7ff;
+    text-decoration: none;
+  }
 }
 
 .avatar-news-feed {
-	width: 50px;
-	height: 50px;
-	margin-right: 15px;
+  width: 50px;
+  height: 50px;
+  margin-right: 15px;
 }
 
 .bottom-nav-news {
-	margin-left: 65px;
+  margin-left: 65px;
+  margin-top: 1.8em;
+}
+
+.news-feed-break {
+  margin-top: 3em;
+}
+
+.comments-button {
+  border: none;
+  background-color: transparent;
+  height: 5px;
+  color: #0060df;
+  text-decoration: underline;
+  &:hover {
+    color: #0d47a1;
+    text-decoration: none;
+  }
+}
+
+.icon-feed {
+  color: #424242;
+}
+
+.news-pin {
+  background-color: transparent;
+  border-radius: 25px;
+  border: none;
+  background-color: #0060df;
+  color: white;
+  &:hover {
+    background-color: #0d47a1;
+    color: white;
+  }
 }

style/topnav-buttons.scss

@@ -3,6 +3,10 @@
 }
 
 .notification-button {
+  background-color: #0060df;
+}
+
+.navbar-item {
   border-color: #0060df;
 }
 
@@ -12,10 +16,18 @@
   font-size: 14px;
   height: 35px;
   border-radius: 25px;
+  border: solid;
+  border-color: #EEEEEE;
+  border-width: 1px;
 }
 
+.notification-icon {
+  color: black;
+
+}
 .navbar-link {
   border-radius: 25px;
+  color: black;
 }
 
 .navbar-link:not(.is-arrowless)::after {

style/user.scss

@@ -5,3 +5,14 @@
 .topnav-icon-left {
   padding-left: 8px;
 }
+
+.user-avatar {
+  padding-left: 5px;
+  height: 25px;
+  width: 25px;
+}
+
+.user-avatar img {
+  height: 100%;
+  object-fit: cover;
+}