From a75faa281e2e824314d168b291642a26e74dbe54 Mon Sep 17 00:00:00 2001 From: RitaOak Date: Tue, 17 Dec 2019 03:12:40 +0000 Subject: [PATCH] style: menu shadow + dashboard feed cards + top nav --- index.html | 2 ++ src/components/dashboard.js | 8 ++--- src/components/news-feed.js | 22 +++++++------- style/app.scss | 14 +++++---- style/dashboard.scss | 3 ++ style/news-feed.scss | 60 +++++++++++++++++++++++++++++-------- style/topnav-buttons.scss | 6 ++-- 7 files changed, 78 insertions(+), 37 deletions(-) create mode 100644 style/dashboard.scss diff --git a/index.html b/index.html index 06ad2e3..a323ed0 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,8 @@ + + diff --git a/src/components/dashboard.js b/src/components/dashboard.js index 8ae9b36..2565d12 100644 --- 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 {
- - - -

RECENT ACTIVITY

+

Recent Activity

diff --git a/src/components/news-feed.js b/src/components/news-feed.js index c2f1faa..1ec3d71 100644 --- 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 {

- +

@@ -55,28 +56,27 @@ class newsFeed extends LitElement { Here is the briefing for that group assignment we talked about.

-
-
`; diff --git a/style/app.scss b/style/app.scss index da926dc..cccf927 100644 --- 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,6 +171,7 @@ h2 { .menu-list { font-size: 14px; + font-family: 'Open Sans', sans-serif; } .menu-list li { @@ -175,7 +179,7 @@ h2 { 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 new file mode 100644 index 0000000..b7426d3 --- /dev/null +++ b/style/dashboard.scss @@ -0,0 +1,3 @@ +h3 { + color: #212121; +} diff --git a/style/news-feed.scss b/style/news-feed.scss index 3096b42..2516a9b 100644 --- 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 index 14a414a..4c10505 100644 --- 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;