Use BBUI components instead of raw HTML.

This commit is contained in:
Sam Rose 2024-03-11 15:19:23 +00:00
parent 3550ae8c1a
commit 19803f9182
No known key found for this signature in database
2 changed files with 30 additions and 59 deletions

View File

@ -1,5 +1,6 @@
<script> <script>
import { MaintenanceType } from "@budibase/types" import { MaintenanceType } from "@budibase/types"
import { Heading, Body, Button, Layout } from "@budibase/bbui"
import { admin } from "stores/portal" import { admin } from "stores/portal"
import BudibaseLogo from "../portal/_components/BudibaseLogo.svelte" import BudibaseLogo from "../portal/_components/BudibaseLogo.svelte"
</script> </script>
@ -9,25 +10,26 @@
<div class="hero"> <div class="hero">
<BudibaseLogo /> <BudibaseLogo />
</div> </div>
<div> <div class="inner-content">
{#each $admin.maintenance as maintenance} {#each $admin.maintenance as maintenance}
{#if maintenance.type === MaintenanceType.SQS_MISSING} {#if maintenance.type === MaintenanceType.SQS_MISSING}
<h1 class="title">Please upgrade your Budibase installation</h1> <Layout>
<p> <Heading>Please upgrade your Budibase installation</Heading>
We've detected that the version of Budibase you're using depends on <Body>
a more recent version of the CouchDB database than what you have We've detected that the version of Budibase you're using depends
installed. on a more recent version of the CouchDB database than what you
</p> have installed.
<p> </Body>
To resolve this, you can either rollback to a previous version of <Body>
Budibase, or follow the migration guide to update to a later version To resolve this, you can either rollback to a previous version of
of CouchDB. Budibase, or follow the migration guide to update to a later
</p> version of CouchDB.
<div class="buttons"> </Body>
<a class="button" href="https://docs.budibase.com" </Layout>
>Migration guide</a <Button
> on:click={() => (window.location = "https://docs.budibase.com")}
</div> >Migration guide</Button
>
{/if} {/if}
{/each} {/each}
</div> </div>
@ -35,27 +37,7 @@
</div> </div>
<style> <style>
:root {
--spectrum-global-color-gray-600: rgb(144, 144, 144);
--spectrum-global-color-gray-900: rgb(255, 255, 255);
--spectrum-global-color-gray-800: rgb(227, 227, 227);
--bb-indigo: #6e56ff;
--bb-indigo-light: #9f8fff;
}
a {
color: #e7e7e7;
font-family: "Roboto", sans-serif;
border: none;
font-size: 15px;
border-radius: 15px;
padding: 8px 22px;
}
a:hover {
cursor: pointer;
}
.main { .main {
font-size: 1.5em;
max-width: 700px; max-width: 700px;
margin: auto; margin: auto;
height: 100vh; height: 100vh;
@ -63,37 +45,23 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1em;
}
.title {
font-weight: 400;
color: var(--spectrum-global-color-gray-900);
}
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 15px;
}
.button {
background-color: var(--bb-indigo);
}
.button:hover {
background-color: var(--bb-indigo-light);
} }
.hero { .hero {
height: 60px; margin: var(--spacing-l);
margin: 10px 40px 10px 0;
} }
.content { .content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
justify-content: center; justify-content: center;
gap: 1em; gap: var(--spacing-m);
} }
h1 {
margin-bottom: 10px; .inner-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-m);
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {

View File

@ -45,6 +45,9 @@ export const fetch = async (ctx: Ctx) => {
maintenance: [], maintenance: [],
} }
// TODO: remove
ctx.body.maintenance.push({ type: MaintenanceType.SQS_MISSING })
if (env.SELF_HOSTED) { if (env.SELF_HOSTED) {
if (await isSqsMissing()) { if (await isSqsMissing()) {
ctx.body.maintenance.push({ type: MaintenanceType.SQS_MISSING }) ctx.body.maintenance.push({ type: MaintenanceType.SQS_MISSING })