like button now centered on page

src/main/webapp/app/exercise/exercise-details/exercise-details.component.html

@@ -92,15 +92,22 @@
                                         >
                                     </button>
                                 </div>
-
-                                <button type="button" class="btn btn-outline-secondary" style="display: block;"
-                                    (click)="openLink(exercise.gitlabURL)" jhiTranslate="exercise.details.git">
-                                </button>
-
-                                <button type="button" class="btn btn-outline-secondary" style="margin-top: 20px;"
-                                    data-toggle="modal" data-target="#mdModal" (click)="selectREADME()">README
-                                </button>
-
+                                <div>
+                                    <div>
+                                        <button type="button" class="btn-block btn btn-outline-secondary"
+                                            style="display: block;" (click)="openLink(exercise.gitlabURL)"
+                                            jhiTranslate="exercise.details.git">
+                                        </button>
+                                    </div>
+                                    <div> <button type="button" class="btn-block btn btn-outline-secondary"
+                                            style="margin-top: 20px;" data-toggle="modal" data-target="#mdModal"
+                                            (click)="selectREADME()">README
+                                        </button>
+                                    </div>
+                                    <div style="width: 100%;"><button class="btn like">
+                                            <fa-icon icon="heart"></fa-icon>
+                                        </button></div>
+                                </div>
                             </div>
 
                             <jhi-exercise-metadata class="col-12 col-md-8" [exercise]="exercise">
@@ -137,7 +144,6 @@
                 <div class="modal-footer">
                     <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"
                         jhiTranslate="exercise.close"></button>
-                    <!-- <button class="btn"><fa-icon icon="heart"></fa-icon></button> -->
                 </div>
             </div>
         </div>

src/main/webapp/app/exercise/exercise-details/exercise-details.component.scss

@@ -40,20 +40,12 @@
   text-align: left;
 }
 
-a {
-  color: gray;
-  text-decoration: none !important;
-  .glyphicon {
-    transition: all 0.5s;
-    &.glyphicon-heart {
-      color: #e74c3c;
-    }
-    &.glyphicon-heart-empty {
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
+.like {
+  margin-top: 20px;
+  position: absolute;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
 }
 
 // .onhoverIcon:hover ~ .onhoverIconDisplay {