style: menu shadow + dashboard feed cards + top nav

oaeproject · Dec 17, 2019 · a75faa2 · a75faa2 · datreeio · Dec 17, 2019
1 parent ec5ad8f
commit a75faa2
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -35,6 +35,8 @@
     <!-- Material Design Icons-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
+    <!-- Open Sans Font-->
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
     <!-- See https://goo.gl/OOhYW5 -->
     <link rel="manifest" href="manifest.json">
 

diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -1,5 +1,6 @@
 import { html } from 'lit-element';
 import sharedStyles from '../../style/app.scss';
+import dashboardStyles from '../../style/dashboard.scss';
 import { PageViewElement } from './page-view-element.js';
 import './sidebar.js';
 import './top-nav.js';
@@ -11,7 +12,7 @@ import './tags.js';
 
 class OAEDashboard extends PageViewElement {
   static get styles() {
-    return [sharedStyles];
+    return [sharedStyles, dashboardStyles];
   }
 
   render() {
@@ -32,10 +33,7 @@ class OAEDashboard extends PageViewElement {
                     <div class="column is-three-fifths main-left">
                       <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>
+                          <h3>Recent Activity</h3>
                         </section>
                         <news-feed></news-feed>
                         <news-feed></news-feed>

diff --git a/src/components/news-feed.js b/src/components/news-feed.js
@@ -6,6 +6,7 @@ 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 '@polymer/iron-icons/communication-icons.js';
 import './tags.js';
 
 class newsFeed extends LitElement {
@@ -42,7 +43,7 @@ class newsFeed extends LitElement {
             <div class="level-right">
               <p class="level-item">
                 <a class="button news-pin">
-                  <iron-icon icon="icons:label-outline"></iron-icon>
+                  <iron-icon icon="icons:bookmark-border"></iron-icon>
                 </a>
               </p>
             </div>
@@ -55,28 +56,27 @@ class newsFeed extends LitElement {
               Here is the briefing for that group assignment we talked about.
             </p>
             <tags-button></tags-button>
-            <tags-button></tags-button>
           </section>
           <nav class="level bottom-nav-news">
             <div class="level-left">
               <div class="level-item">
                 <a class="button comments-button">
-                  <span>View (25) comments</span>
-                  <span class="icon is-small">
-                    <i class="mdi mdi-alert"></i>
+                  <span class="comments-icon">
+                    <iron-icon icon="communication:forum"></iron-icon>
                   </span>
+                  <span>View (25) comments</span>
                 </a>
               </div>
-            </div>
-            <div class="level-right is-pulled-right">
               <div class="level-item">
-                <p>
-                  reply
-                </p>
+                <a class="button reply-button">
+                  <span class="reply-icon">
+                    <iron-icon icon="communication:import-export"></iron-icon>
+                  </span>
+                  <span>Reply</span>
+                </a>
               </div>
             </div>
           </nav>
-          <hr class="news-feed-break" />
         </div>
       </div>
     `;

diff --git a/style/app.scss b/style/app.scss
@@ -84,6 +84,8 @@ html,
 body {
   margin: 0;
   height: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 1em;
 }
 
 * {
@@ -101,7 +103,7 @@ h2 {
 .hero-body {
   margin: 0;
   padding: 0;
-  background-color: #fcfcfc;
+  background-color: #FAFAFA;
 }
 
 .container.is-fluid {
@@ -133,6 +135,7 @@ h2 {
 
 .column.is-narrow {
   background-color: white;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   z-index: 1;
   width: 210px;
   padding: 0;
@@ -168,14 +171,15 @@ h2 {
 
 .menu-list {
   font-size: 14px;
+  font-family: 'Open Sans', sans-serif;
 }
 
 .menu-list li {
   padding-left: 35px;
   margin-bottom: 18px;
   border-radius: 0 25px 25px 0;
   height: 30px;
-  color: #000000;
+  color: #212121;
   display: flex;
   align-items: center;
   &:hover {
@@ -193,7 +197,7 @@ h2 {
 }
 
 .menu-list a {
-  color: #000000;
+  color: #212121;
 }
 
 a.dashboard,
@@ -213,12 +217,12 @@ a.network {
 .topbar-search-icon {
   display: flex;
   align-items: center;
-  color: black;
+  color: #212121;
   padding-top: 10px;
 }
 
 .input {
-  color: black;
+  color: #212121;
   -webkit-appearance: none;
   border: none;
   background-color: transparent;

diff --git a/style/dashboard.scss b/style/dashboard.scss
@@ -0,0 +1,3 @@
+h3 {
+  color: #212121;
+}
diff --git a/style/news-feed.scss b/style/news-feed.scss
@@ -1,12 +1,14 @@
 // News Feed - Dashboard
 .box {
   box-shadow: none;
+  background-color: white;
+  //box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
 .box-feed {
   margin-top: 25px;
   padding: 5px;
-  background-color: transparent;
   border: none;
 }
 
@@ -29,11 +31,11 @@
 
 .news-feed-message {
   margin-left: 65px;
+  margin-right: 65px;
   margin-top: -15px;
   width: auto;
-  background-color: rgb(253, 253, 253);
+  background-color: #fafafa;
   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;
 }
 
@@ -47,7 +49,7 @@
   color: #0060df;
   background-color: #f5f7ff;
   &:hover {
-    color: #0d47a1;
+    color: #0060df;
     background-color: #f5f7ff;
     text-decoration: none;
   }
@@ -60,8 +62,9 @@
 }
 
 .bottom-nav-news {
-  margin-left: 65px;
-  margin-top: 1.8em;
+  margin-left: 70px;
+  margin-top: 2em;
+  margin-bottom: 1em;
 }
 
 .news-feed-break {
@@ -72,26 +75,57 @@
   border: none;
   background-color: transparent;
   height: 5px;
+  color: #424242;
+  width: 0;
+  margin-left: 55px;
+  &:hover {
+    color: #0060df;
+    text-decoration: underline;
+  }
+}
+
+.reply-button {
+  border: none;
+  background-color: transparent;
+  height: 5px;
+  color: #424242;
+  width: 0;
+  margin-left: 90px;
+  &:hover {
+    color: #0060df;
+    text-decoration: underline;
+  }
+}
+
+.comments-icon {
   color: #0060df;
-  text-decoration: underline;
+  margin-right: 5px;
   &:hover {
-    color: #0d47a1;
-    text-decoration: none;
+    color: #0060df;
+  }
+}
+
+.reply-icon {
+  color: #0060df;
+  margin-right: 5px;
+  &:hover {
+    color: #0060df;
   }
 }
 
 .icon-feed {
-  color: #424242;
+  color: #0060df;
 }
 
 .news-pin {
   background-color: transparent;
+  margin-right: 15px;
   border-radius: 25px;
   border: none;
-  background-color: #0060df;
-  color: white;
+  background-color: #fafafa;
+  color: #424242;
   &:hover {
-    background-color: #0d47a1;
+    background-color: #0060df;
     color: white;
   }
 }
diff --git a/style/topnav-buttons.scss b/style/topnav-buttons.scss
@@ -22,16 +22,16 @@
 }
 
 .notification-icon {
-  color: black;
+  color: #212121;
 
 }
 .navbar-link {
   border-radius: 25px;
-  color: black;
+  color: #212121;
 }
 
 .navbar-link:not(.is-arrowless)::after {
-  border-color: black;
+  border-color: #212121;
   margin-top: -0.5em;
   margin-left: 15;
   right: 0.5em;