Update deploy page to use spectrum

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

@@ -75,7 +75,9 @@
     } catch (err) {
       console.error(err)
       clearInterval(poll)
-      notifications.error("Error fetching deployment history. Please try again.")
+      notifications.error(
+        "Error fetching deployment history. Please try again."
+      )
     }
   }
 
@@ -96,7 +98,7 @@
 {#if deployments.length > 0}
   <section class="deployment-history" in:slide>
     <header>
-      <h4>Deployment History</h4>
+      <Heading>Deployment History</Heading>
       <div class="deploy-div">
         {#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)}
           <a target="_blank" href={deploymentUrl}> View Your Deployed App → </a>
@@ -148,13 +150,13 @@
 </Modal>
 
 <style>
-  .deployment:nth-child(odd) {
+  section {
-    background: var(--grey-1);
+    padding: var(--spacing-xl) 0;
   }
 
   .deployment-list {
     height: 40vh;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   h4 {
@@ -163,9 +165,10 @@
   }
 
   header {
-    margin-left: var(--spacing-l);
+    padding-left: var(--spacing-l);
-    margin-bottom: var(--spacing-xl);
+    padding-bottom: var(--spacing-xl);
-    margin-right: var(--spacing-l);
+    padding-right: var(--spacing-l);
+    border-bottom: var(--border-light);
   }
 
   .deploy-div {
@@ -183,10 +186,14 @@
 
   .deployment {
     padding: var(--spacing-l);
-    height: 100px;
+    height: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    border-bottom: var(--border-light);
+  }
+  .deployment:last-child {
+    border-bottom: none;
   }
 
   .deployment-info {

packages/builder/src/pages/builder/[application]/deploy/index.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { Button, Modal, notifications, Heading } from "@budibase/bbui"
   import { store, hostingStore } from "builderStore"
-  import { notifications } from "@budibase/bbui"
   import api from "builderStore/api"
   import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
   import analytics from "analytics"
@@ -58,11 +57,11 @@
 </script>
 
 <section>
+  <img src={Rocket} alt="Rocket flying through sky" />
   <div>
-    <h4>It's time to shine!</h4>
+    <Heading m>It's time to shine!</Heading>
-    <Button secondary medium on:click={deployApp}>Deploy App</Button>
+    <Button size="XL" cta medium on:click={deployApp}>Deploy App</Button>
   </div>
-  <img src={Rocket} alt="Rocket flying through sky" />
 </section>
 <Modal bind:this={feedbackModal}>
   <FeedbackIframe on:finished={() => feedbackModal.hide()} />
@@ -73,17 +72,13 @@
   img {
     width: 100%;
     height: 100%;
-  }
+    object-fit: cover;
-
+    filter: brightness(80%);
-  h4 {
-    color: white;
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 30px;
   }
 
   section {
     position: relative;
+    min-height: 100%;
   }
 
   div {
@@ -99,5 +94,9 @@
     margin-left: auto;
     margin-right: auto;
     width: 50%;
+    gap: var(--spacing-xl);
+  }
+  div :global(h1) {
+    color: white;
   }
 </style>