Merge pull request #179 from jusrus01/improving-reactions

Fixed reactions

Author: SauliusStankevicius

src/webapp/src/client/app/common/directives/wall/message-like/list/like-list-popover/like-list-popover-modal.html

@@ -59,11 +59,11 @@
 
 <div class="modal-body popover-likes-modal-content">
     <!-- All likes list -->
-    <ul class="likes-list no-bottom-margin"
+    <ul class="likes-list"
         ng-repeat="likes in vm.modalLikes track by $index"
         ng-if="vm.currentLikeTab === vm.likeTypes.length">
 
-        <li ng-repeat="like in likes">
+        <li ng-repeat="like in likes" class="likes-list-item">
             <a ng-if="$index > 0"
                class="likes-list-img-link"
                ui-sref="Root.WithOrg.Client.Profiles.Details({ id: like.userId })">
@@ -96,7 +96,7 @@
         ng-if="vm.currentLikeTab !== vm.likeTypes.length">
 
         <span ng-if="likes.length > 1 && $index == vm.currentLikeTab">
-            <li ng-repeat="like in likes">
+            <li ng-repeat="like in likes" class="likes-list-item">
                 <a ng-if="$index > 0"
                    class="likes-list-img-link"
                    ui-sref="Root.WithOrg.Client.Profiles.Details({ id: like.userId })">

src/webapp/src/client/app/common/directives/wall/message-like/list/like-list-popover/like-list-popover.html

@@ -8,14 +8,14 @@
         <div class="clearfix"></div>
 
         <ul class="likes-list" data-test-id="likes-popover-ul">
-            <li ng-repeat="like in likes|limitTo:popoverLikeCount + 1">
+            <li class="popover-likes-list-item" ng-repeat="like in likes|limitTo:popoverLikeCount + 1">
 
                 <a ng-if="$index > 0" class="likes-list-span" data-test-id="like-list-name">
                     {{:: like.fullName}}
                 </a>
             </li>
 
-            <p class="likes-list-span blue" ng-if="hiddenUsersCount > 0">
+            <p class="likes-list-span blue" ng-if="hiddenUserCount > 0">
                 and {{hiddenUserCount}} more...
             </p>
         </ul>

src/webapp/src/client/styles/style/modules/_modules-other.less

@@ -849,22 +849,28 @@ div.post-text-container {
 .likes-list {
     list-style-type: none;
     margin-left: -40px;
+
+    li:first-child {
+        margin: 0;
+    }
+}
+
+.likes-list-item {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
 }
 
 .likes-list-img {
     width: 40px;
+    height: 40px;
+    object-fit: cover;
 }
 
 .likes-list-img-link {
     text-decoration: none !important;
 }
 
-.likes-list li {
-    margin-bottom: 5px;
-    display: flex;
-    align-items: center;
-}
-
 .likes-list-span {
     font-size: 14px;
     height: auto;
@@ -888,6 +894,12 @@ div.post-text-container {
     margin-left: auto;
 }
 
+.popover-likes-list-item {
+    margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+}
+
 .popover-modal-like-tabs {
     align-items: center;
     padding-left: 15px;
@@ -911,6 +923,10 @@ div.post-text-container {
     overflow-x: hidden;
     overflow-y: auto;
 
+    > ul {
+        margin-bottom: 0;
+    }
+
     li.span {
         margin-left: auto;
     }