diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/BankFrame.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/BankFrame.tsx | 100 |
1 files changed, 70 insertions, 30 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index cf52cb0f3..e75a5c1d0 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -126,14 +126,6 @@ export function BankFrame({ </nav> </div> <section id="main" class="content"> - {pageState.error && ( - <ErrorBanner - error={pageState.error} - onClear={() => { - pageStateSetter((prev) => ({ ...prev, error: undefined })); - }} - /> - )} <StatusBanner /> {backend.state.status === "loggedIn" ? ( <div class="top-right"> @@ -191,20 +183,48 @@ function maybeDemoContent(content: VNode): VNode { return <Fragment />; } -export function ErrorBanner({ +export function ErrorBannerFloat({ error, onClear, }: { error: ErrorMessage; onClear?: () => void; -}): VNode | null { +}): VNode { + return ( + <div + style={{ + position: "fixed", + top: 0, + zIndex: 200, + width: "90%", + }} + > + <ErrorBanner error={error} onClear={onClear} /> + </div> + ); +} + +function ErrorBanner({ + error, + onClear, +}: { + error: ErrorMessage; + onClear?: () => void; +}): VNode { return ( - <div class="informational informational-fail" style={{ marginTop: 8 }}> + <div + class="informational informational-fail" + style={{ + marginTop: 8, + paddingLeft: 16, + paddingRight: 16, + }} + > <div style={{ display: "flex", justifyContent: "space-between" }}> <p> <b>{error.title}</b> </p> - <div> + <div style={{ marginTop: "auto", marginBottom: "auto" }}> {onClear && ( <input type="button" @@ -225,26 +245,46 @@ export function ErrorBanner({ function StatusBanner(): VNode | null { const { pageState, pageStateSetter } = usePageContext(); - if (!pageState.info) return null; - const rval = ( - <div class="informational informational-ok" style={{ marginTop: 8 }}> - <div style={{ display: "flex", justifyContent: "space-between" }}> - <p> - <b>{pageState.info}</b> - </p> - <div> - <input - type="button" - class="pure-button" - value="Clear" - onClick={async () => { - pageStateSetter((prev) => ({ ...prev, info: undefined })); - }} - /> + return ( + <div + style={{ + position: "fixed", + top: 0, + zIndex: 200, + width: "90%", + }} + > + {!pageState.info ? undefined : ( + <div + class="informational informational-ok" + style={{ marginTop: 8, paddingLeft: 16, paddingRight: 16 }} + > + <div style={{ display: "flex", justifyContent: "space-between" }}> + <p> + <b>{pageState.info}</b> + </p> + <div> + <input + type="button" + class="pure-button" + value="Clear" + onClick={async () => { + pageStateSetter((prev) => ({ ...prev, info: undefined })); + }} + /> + </div> + </div> </div> - </div> + )} + {!pageState.error ? undefined : ( + <ErrorBanner + error={pageState.error} + onClear={() => { + pageStateSetter((prev) => ({ ...prev, error: undefined })); + }} + /> + )} </div> ); - return rval; } |