Update version icon to version status light

packages/bbui/src/StatusLight/StatusLight.svelte

@@ -19,12 +19,15 @@
   export let active = false
   export let color = null
   export let square = false
+  export let hoverable = false
 </script>
 
 <div
+  on:click
   class="spectrum-StatusLight spectrum-StatusLight--size{size}"
   class:custom={!!color}
   class:square
+  class:hoverable
   style={`--color: ${color};`}
   class:spectrum-StatusLight--celery={celery}
   class:spectrum-StatusLight--yellow={yellow}
@@ -56,6 +59,7 @@
     min-height: 0;
     padding-top: 0;
     padding-bottom: 0;
+    transition: color ease-out 130ms;
   }
   .spectrum-StatusLight.withText::before {
     margin-right: 10px;
@@ -69,4 +73,8 @@
     border-radius: 4px;
     margin: 0;
   }
+  .hoverable:hover {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>

packages/builder/src/components/deploy/VersionModal.svelte

@@ -1,11 +1,11 @@
 <script>
   import {
-    Icon,
     Modal,
     notifications,
     ModalContent,
     Body,
     Button,
+    StatusLight,
   } from "@budibase/bbui"
   import { store } from "builderStore"
   import { API } from "api"
@@ -67,17 +67,10 @@
   }
 </script>
 
-{#if !hideIcon}
+{#if !hideIcon && updateAvailable}
-  <div class="icon-wrapper" class:highlight={updateAvailable}>
+  <StatusLight hoverable on:click={updateModal.show} notice>
-    <Icon
+    Update available
-      name="Refresh"
+  </StatusLight>
-      hoverable
-      on:click={updateModal.show}
-      tooltip={updateAvailable
-        ? "An update is available"
-        : "No updates are available"}
-    />
-  </div>
 {/if}
 <Modal bind:this={updateModal}>
   <ModalContent

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -111,7 +111,9 @@
         </Tabs>
       </div>
       <div class="toprightnav">
-        <VersionModal />
+        <div class="version">
+          <VersionModal />
+        </div>
         <RevertModal />
         <DeployNavigation {application} />
       </div>
@@ -180,4 +182,8 @@
     align-items: center;
     gap: var(--spacing-xl);
   }
+
+  .version {
+    margin-right: var(--spacing-s);
+  }
 </style>