Add missing CSS to exercise details component

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

@@ -24,8 +24,8 @@
                                 <hr>
 
                                 <!-- modal rating-->
-                                <div style="float: left; width: 100%; margin-bottom: 5px;">
-                                    <div style="float: left; padding-top: 15px;">
+                                <div style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
+                                    <div style="float: left;">
                                         <p class="card-text" jhiTranslate="exercise.details.rating"></p>
                                     </div>
                                     <div class="star-container">
@@ -50,7 +50,7 @@
                                 </div> <!-- modal rating end-->
 
                                 <!-- modal bookmark-->
-                                <div style="float: left; width: 100%; margin-bottom: 25px;">
+                                <div style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px;">
                                     <div style="float: left;">
                                         <p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
                                     </div>

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

+.star-container {
+  float: right;
+  height: auto;
+  padding-right: 10px;
+}
+
+.star::before {
+  content: '★';
+}
+
+.star-marked {
+  color: #ffc700;
+}
+
+.star-unmarked {
+  color: #ccc;
+}
+
+.metadata-table {
+  width: 100%;
+}
+
+.metadata-table-description {
+  padding: 15px;
+}
+
+.metadata-table-value {
+  padding: 15px;
+}
+
+.modal-title {
+  padding-top: 5px;
+}
+
+.card-text {
+  text-align: left;
+}