frontend/src/components/CurrentlyBuilding.vue

@@ -6,8 +6,14 @@
     style="border-radius: 10px; border: 2px solid grey"
     variant="elevated">
     <v-card-title class="d-flex align-center justify-space-between w-100">
-      <span v-if="packageCount.building > 0">Building</span>
+      <span v-if="packageCount.building > 0" class="d-flex">
-      <span v-else>Idle</span>
+        <div class="pulsating-circle-amber me-4" style="transform: translateY(10px)" />
+        <span>Building</span>
+      </span>
+      <span v-else class="d-flex">
+        <div class="pulsating-circle-green me-4" style="transform: translateY(10px)" />
+        <span>Idle</span>
+      </span>
       <v-sheet class="d-flex align-center w-100">
         <v-progress-linear
           :max="packageCount.built + packageCount.building + packageCount.queued"
@@ -16,8 +22,10 @@
           height="10"
           rounded
           striped
-          style="transform: translateX(-650px)"></v-progress-linear>
+          style="transform: translateX(-620px)"></v-progress-linear>
-        <span class="text-grey" style="font-size: 13px; min-width: 250px; padding-left: 50px">
+        <span
+          class="text-grey me-2"
+          style="font-size: 13px; min-width: 220px; width: 220px; padding-left: 60px">
           Last updated
           {{
             lastUpdatedSeconds > 59
@@ -28,12 +36,12 @@
       </v-sheet>
     </v-card-title>
 
-    <v-card-text class="d-flex">
+    <v-card-text v-if="packageCount.building > 0 || packageCount.queued > 0" class="d-flex">
       <v-list width="50%">
         <v-list-subheader>Building</v-list-subheader>
         <v-list-item v-for="(pkg, index) in packages.building" :key="index">
           <template v-slot:prepend>
-            <div class="pulsating-circle me-4" />
+            <div class="pulsating-circle-amber me-4" />
           </template>
           <v-list-item-title>
             {{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span>
@@ -192,14 +200,35 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-.pulsating-circle {
+.pulsating-circle-green {
+  background-color: rgba(126, 206, 5, 0.94);
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+}
+
+.pulsating-circle-green:before {
+  content: '';
+  display: block;
+  width: 200%;
+  height: 200%;
+  box-sizing: border-box;
+  margin-left: -50%;
+  margin-top: -50%;
+  border-radius: 50%;
+  background-color: rgba(126, 206, 5, 0.94);
+  -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+  animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+}
+
+.pulsating-circle-amber {
   background-color: #f39c12f0;
   border-radius: 50%;
   width: 12px;
   height: 12px;
 }
 
-.pulsating-circle:before {
+.pulsating-circle-amber:before {
   content: '';
   display: block;
   width: 200%;