feat: dashbaord followers

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

Hide file tree

Showing 4 changed files with 44 additions and 25 deletions.
diff --git a/src/components/info-card.js b/src/components/info-card.js
@@ -12,16 +12,26 @@ class infoCard extends LitElement {
     return html`
       <div class="box info">
         <div class="content info-card">
-          <h3>
-            <strong>USER DASHBOARD</strong>
-          </h3>
-          <p>
-            Welcome to your dashboard. From here, you can access different sections of the OAE.
-          </p>
-          <hr class="navbar-divider" />
-          <a>
-            Open Link
-          </a>
+          <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="/images/avatar.jpg" />
+                  </figure>
+                  <section class=infoBox-followers">
+                    <h4>
+                      <a class="feed-user">Michael Brown</a>
+                    </h4>
+                    <p>
+                      Following since October 2019
+                    </p>
+                  </section>
+                </div>
+              </div>
+            </div>
+            </hr>
+          </nav>
         </div>
       </div>
     `;

diff --git a/style/app.scss b/style/app.scss
@@ -93,17 +93,10 @@ body {
   font-size: 1em;
 }
 
-h2 {
-  color: green;
-  text-decoration-style: dotted;
-  text-decoration: underline;
-  font-size: 3rem;
-}
-
 .hero-body {
   margin: 0;
   padding: 0;
-  background-color: #FAFAFA;
+  background-color: #fafafa;
 }
 
 .container.is-fluid {
@@ -135,7 +128,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);
+  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;
@@ -263,9 +256,9 @@ a.network {
 }
 
 .activity-dashboard h3 {
-  color: black;
-  font-weight: bold;
-  font-size: 14px;
+  color: #212121;
+  font-weight: 600;
+  font-size: 16px;
 }
 
 .main-left {

diff --git a/style/info-box.scss b/style/info-box.scss
@@ -1,8 +1,23 @@
 // Cards
 .box {
-	margin: 0;
+  margin: 0;
 }
 
-.info-card p {
-	margin-top: 10px;
+* {
+  font-size: 13px;
+}
+
+.avatar-news-feed img {
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-news-feed {
+  width: 50px;
+  height: 50px;
+  margin-right: 15px;
+}
+
+.info-box p {
+	color: #BDBDBD;
 }
diff --git a/style/news-feed.scss b/style/news-feed.scss
@@ -115,6 +115,7 @@
 
 .icon-feed {
   color: #0060df;
+  margin-left: 5px;
 }
 
 .news-pin {