diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/BankFrame.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/BankFrame.tsx | 89 |
1 files changed, 37 insertions, 52 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index c7168ac6d..dc61f1302 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -49,16 +49,14 @@ function MaybeBusinessButton({ const result = useBusinessAccountDetails(account); if (!result.ok) return <Fragment />; return ( - <div class="some-space"> - <a - href="#" - class="pure-button pure-button-primary" - onClick={(e) => { - e.preventDefault(); - onClick(); - }} - >{i18n.str`Business Profile`}</a> - </div> + <a + href="#" + class="pure-button pure-button-primary" + onClick={(e) => { + e.preventDefault(); + onClick(); + }} + >{i18n.str`Business Profile`}</a> ); } @@ -88,7 +86,7 @@ export function BankFrame({ style="display: flex; flex-direction: row; justify-content: space-between;" > <a href="#main" class="skip">{i18n.str`Skip to main content`}</a> - <div style="max-width: 50em; margin-left: 2em;"> + <div style="max-width: 50em; margin-left: 2em; margin-right: 2em;"> <h1> <span class="it"> <a href="/">{bankUiSettings.bankName}</a> @@ -112,35 +110,21 @@ export function BankFrame({ </p>, )} </div> - <a href="https://taler.net/"> - <img - src={talerLogo} - alt={i18n.str`Taler logo`} - height="100" - width="224" - style="margin: 2em 2em" - /> - </a> </header> <div style="display:flex; flex-direction: column;" class="navcontainer"> <nav class="demolist"> {maybeDemoContent(<Fragment>{demo_sites}</Fragment>)} - <div class="right"> - <LangSelector /> - </div> - </nav> - </div> - <section id="main" class="content"> - <StatusBanner /> - {backend.state.status === "loggedIn" ? ( - <div class="top-right"> - {goToBusinessAccount && !backend.state.isUserAdministrator ? ( - <MaybeBusinessButton - account={backend.state.username} - onClick={goToBusinessAccount} - /> - ) : undefined} - <div class="some-space"> + {backend.state.status === "loggedIn" ? ( + <Fragment> + {goToBusinessAccount && !backend.state.isUserAdministrator ? ( + <MaybeBusinessButton + account={backend.state.username} + onClick={goToBusinessAccount} + /> + ) : undefined} + + <LangSelector /> + <a href="#" class="pure-button logout-button" @@ -149,26 +133,27 @@ export function BankFrame({ updateSettings("currentWithdrawalOperationId", undefined); }} >{i18n.str`Logout`}</a> - </div> - </div> - ) : null} + </Fragment> + ) : undefined} + </nav> + </div> + <section id="main" class="content"> + <StatusBanner /> {children} </section> <section id="footer" class="footer"> - <div class="footer"> - <hr /> - <div> - <p> - You can learn more about GNU Taler on our{" "} - <a href="https://taler.net">main website</a>. - </p> - </div> - <div style="flex-grow:1" /> + <hr /> + <div> <p> - Copyright © 2014—2022 Taler Systems SA. {versionText}{" "} - <TestingTag /> + You can learn more about GNU Taler on our{" "} + <a href="https://taler.net">main website</a>. </p> </div> + <div style="flex-grow:1" /> + <p> + Copyright © 2014—2022 Taler Systems SA. {versionText}{" "} + <TestingTag /> + </p> </section> </Fragment> ); @@ -192,7 +177,7 @@ export function ErrorBannerFloat({ <div style={{ position: "fixed", - top: 0, + top: 10, zIndex: 200, width: "90%", }} @@ -262,7 +247,7 @@ function StatusBanner(): VNode | null { <div style={{ position: "fixed", - top: 0, + top: 10, zIndex: 200, width: "90%", }} |