update styling

Author: thejackwu

src/css/popup.scss

@@ -9,6 +9,16 @@
 #time-entries {
   max-height: 15em;
   overflow-y: auto;
+
+  .list-group-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &.list-group-item-primary {
+      background-color: #deeeff;
+    }
+  }
 }
 
 #time-entries button {

src/js/popup/render_helper.js

@@ -18,13 +18,15 @@ const renderTimeEntries = timeEntries => {
     timeEntriesHTML += 
     `
       <li class="list-group-item ${isOngoing ? 'list-group-item-primary' : ''}">
-        ${
-          isOngoing ?
-            `<span class="start">${startTime.format("h:mm a")}</span>`
-          :
-            `${duration.asHours().toFixed(2)} h`
-        }
-        @ <b><span class="project">${entry.projectName}</span></b>
+        <div class="time-entry-text">
+          ${
+            isOngoing ?
+              `<span class="start">${startTime.format("h:mm a")}</span>`
+            :
+              `${duration.asHours().toFixed(2)} h`
+          }
+          @ <b><span class="project">${entry.projectName}</span></b>
+        </div>
         ${ isOngoing ? `<button class="btn btn-outline-secondary btn-sm activity-stop-button" name="${entry.id}">Stop</button>` : "" }
       </li>
     `;