Update updates page to be mobile friendly and look better

5 years ago · 11962bb5fa
1 changed files with 12 additions and 22 deletions
--- a/packages/builder/src/pages/builder/portal/settings/update.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/update.svelte
@ -7,6 +7,7 @@
    Button,
    Divider,
    notifications,
+    Label,
  } from "@budibase/bbui"
  import api from "builderStore/api"
  import { auth } from "stores/portal"
@ -47,36 +48,25 @@
 </script>

 {#if $auth.isAdmin}
-  <Layout>
+  <Layout noPadding>
    <Layout gap="XS" noPadding>
-      <Heading size="M">Update</Heading>
+      <Heading size="M">Updates</Heading>
      <Body>
        Keep your budibase installation up to date to take advantage of the
        latest features, security updates and much more.
      </Body>
    </Layout>
    <Divider size="S" />
-    <div class="fields">
-      <div class="field">
-        {#if version}
-          Current Version: {version}
-        {/if}
-      </div>
-      <div class="field">
-        <Button cta on:click={updateBudibase}>Check For Updates</Button>
+    {#if version}
+      <div>
+        <Label size="L">Current version</Label>
+        <Heading size="XS">
+          {version}
+        </Heading>
      </div>
+    {/if}
+    <div>
+      <Button cta on:click={updateBudibase}>Check for updates</Button>
    </div>
  </Layout>
 {/if}
-
-<style>
-  .fields {
-    display: grid;
-    grid-gap: var(--spacing-m);
-  }
-  .field {
-    display: grid;
-    grid-template-columns: 33% 1fr;
-    align-items: center;
-  }
-</style>