Merge 4b0e707 into 5c04a6c

andela · Aug 17, 2018 · b7efd67 · b7efd67
2 parents 5c04a6c + 4b0e707
commit b7efd67
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 21 deletions.
diff --git a/ui/public/profile/index.html b/ui/public/profile/index.html
@@ -45,40 +45,45 @@
           <!--Notifications-->
           <ul id="notifications" class="dropdown-content collection">
             <li class="collection-item">
-              <p>Danson commented on All things are made in heaven<span>~ unread</span></p>
-              <img src="https://randomuser.me/api/portraits/med/men/17.jpg " alt=" " class="responsive-img small--avatar ">
+              <div class="dot"></div>
+              <img src="https://randomuser.me/api/portraits/med/women/40.jpg " alt=" " class="responsive-img small--avatar ">
+              <p class="unread"><b>Megan </b>commented on <b>All things are made in heaven</b></p>
             </li>
             <li class="collection-item">
-              <p>Danson commented on All things are made in heaven <span>~ unread</span></p>
-              <img src="https://randomuser.me/api/portraits/med/women/17.jpg " alt=" " class="responsive-img small--avatar ">
+              <div class="dot"></div>
+              <img src="https://randomuser.me/api/portraits/med/men/17.jpg " alt=" " class="responsive-img small--avatar ">
+              <p class="unread"><b>Danson </b>commented on <b>Here, Now, Today</b></p>
             </li>
             <li class="collection-item">
-              <p>Danson commented on All things are made in heaven <span>~ unread</span></p>
-              <img src="https://randomuser.me/api/portraits/med/men/1.jpg " alt=" " class="responsive-img small--avatar ">
+              <div class="dot"></div>
+              <img src="https://randomuser.me/api/portraits/med/women/6.jpg " alt=" " class="responsive-img small--avatar">
+              <p class="unread"><b>Betty </b>commented on <b>How to grow carrots</b></p>
             </li>
             <li class="collection-item">
-              <p>Danson commented on All things are made in heaven <span>~ unread</span></p>
-              <img src="https://randomuser.me/api/portraits/med/women/5.jpg " alt=" " class="responsive-img small--avatar ">
+              <div class="dot"></div>
+              <img src="https://randomuser.me/api/portraits/med/men/47.jpg " alt=" " class="responsive-img small--avatar ">
+              <p class="unread"><b>Sethan </b>commented on <b>If I were superman</b></p>
             </li>
             <li class="collection-item">
-              <p>Danson commented on All things are made in heaven <span>~ unread</span></p>
-              <img src="https://randomuser.me/api/portraits/med/men/10.jpg " alt=" " class="responsive-img small--avatar ">
+              <div class="dot"></div>
+              <img src="https://randomuser.me/api/portraits/med/men/7.jpg " alt=" " class="responsive-img small--avatar ">
+              <p class="unread"><b>Carlson </b>commented on <b>All things are made in heaven</b></p>
             </li>
             <li class="collection-item">
-              <p class="read">Danson commented on All things are made in heaven</p>
-              <img class="read" src="https://randomuser.me/api/portraits/med/women/12.jpg " alt=" " class="responsive-img small--avatar ">
+              <img src="https://randomuser.me/api/portraits/med/women/17.jpg " alt=" " class="responsive-img small--avatar ">
+              <p class="unread"><b>Ruby </b>commented on <b>All things are made in heaven</b></p>
             </li>
             <li class="collection-item">
-              <p class="read">Danson commented on All things are made in heaven</p>
-              <img class="read" src="https://randomuser.me/api/portraits/med/women/22.jpg " alt=" " class="responsive-img small--avatar ">
+              <img src="https://randomuser.me/api/portraits/med/men/66.jpg " alt=" " class="responsive-img small--avatar ">
+              <p class="unread"><b>Henry </b>commented on <b>All things are made in heaven</b></p>
             </li>
             <li class="collection-item">
-              <p class="read">Danson commented on All things are made in heaven</p>
-              <img class="read" src="https://randomuser.me/api/portraits/med/men/23.jpg " alt=" " class="responsive-img small--avatar ">
+              <img src="https://randomuser.me/api/portraits/med/women/62.jpg " alt=" " class="responsive-img small--avatar ">
+              <p class="unread"><b>Tchalla </b>commented on <b>All things are made in heaven</b></p>
             </li>
             <li class="collection-item">
-              <p class="read">Danson commented on All things are made in heaven</p>
-              <img class="read" src="https://randomuser.me/api/portraits/med/women/40.jpg " alt=" " class="responsive-img small--avatar ">
+              <img src="https://randomuser.me/api/portraits/med/men/50.jpg " alt=" " class="responsive-img small--avatar ">
+              <p class="unread"><b>Frey </b>commented on <b>All things are made in heaven</b></p>
             </li>
           </ul>
           <div class="badge">

diff --git a/ui/sass/base/_resets.scss b/ui/sass/base/_resets.scss
@@ -152,25 +152,37 @@ nav .back {
 }
 .collection {
   width: 350px !important;
+  height: 460px;
   top: -38px;
 }
 
 .collection-item {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  color: rgba($color: #000000, $alpha: 0.5) !important;
+
   & img {
     height: 50px;
     width: 50px;
   }
   & p {
+    margin-left: 10px;
+  }
+  & b {
+    color: black;
+    font-weight: 700;
+  }
+  & .dot {
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    background-color: $primary_color;
     margin-right: 30px;
   }
   & span {
     color: rgba($color: #000000, $alpha: 0.5);
     font-size: 10px;
     margin-left: 1px;
   }
-  & .read {
-    opacity: 0.4;
-  }
 }