From 160d7706551a07efec9ef455a95de769766d2fca Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 26 Jul 2022 10:36:12 +0100
Subject: [PATCH] Update version icon to version status light

---
 .../bbui/src/StatusLight/StatusLight.svelte     |  8 ++++++++
 .../src/components/deploy/VersionModal.svelte   | 17 +++++------------
 .../builder/app/[application]/_layout.svelte    |  8 +++++++-
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/bbui/src/StatusLight/StatusLight.svelte b/packages/bbui/src/StatusLight/StatusLight.svelte
index 6648b2b32b..d30bf96b05 100644
--- a/packages/bbui/src/StatusLight/StatusLight.svelte
+++ b/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>
diff --git a/packages/builder/src/components/deploy/VersionModal.svelte b/packages/builder/src/components/deploy/VersionModal.svelte
index f0f58d7cb0..b0f4655f1b 100644
--- a/packages/builder/src/components/deploy/VersionModal.svelte
+++ b/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}
-  <div class="icon-wrapper" class:highlight={updateAvailable}>
-    <Icon
-      name="Refresh"
-      hoverable
-      on:click={updateModal.show}
-      tooltip={updateAvailable
-        ? "An update is available"
-        : "No updates are available"}
-    />
-  </div>
+{#if !hideIcon && updateAvailable}
+  <StatusLight hoverable on:click={updateModal.show} notice>
+    Update available
+  </StatusLight>
 {/if}
 <Modal bind:this={updateModal}>
   <ModalContent
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 54b685f541..190c419ac5 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/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>