fix 500 error styles (#360)

This commit is contained in:
saml33 2022-07-14 01:26:13 +10:00 committed by GitHub
parent 446c53c10a
commit 725920c90f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 23 deletions

View File

@ -35,14 +35,14 @@ export const FiveOhFive = ({ error }) => {
const Icon = showDetails ? ChevronDownIcon : ChevronRightIcon const Icon = showDetails ? ChevronDownIcon : ChevronRightIcon
return ( return (
<div className="bg-bg-texture flex min-h-screen flex-col bg-cover bg-bottom bg-no-repeat"> <div className="flex h-screen flex-col bg-th-bkg-1">
<div className="h-2 w-screen bg-gradient-to-r from-mango-theme-green via-mango-theme-yellow-dark to-mango-theme-red-dark"></div> <div className="absolute top-0 h-2 w-full bg-gradient-to-r from-mango-theme-green via-mango-theme-yellow-dark to-mango-theme-red-dark"></div>
<main className="my-[-2] mx-auto w-full max-w-7xl flex-grow px-4 sm:px-6 lg:px-8"> <main className="mx-auto w-full max-w-7xl flex-grow px-4 sm:px-6 lg:px-8">
<div className="flex-shrink-0 pt-16"> <div className="flex-shrink-0 pt-16">
<img <img
className="mx-auto h-12 w-auto" className="mx-auto h-12 w-auto"
src="/assets/logotext.svg" src="/assets/icons/mngo.svg"
alt="Workflow" alt="Logo"
/> />
</div> </div>
<div className="mx-auto max-w-xl py-16 sm:py-24"> <div className="mx-auto max-w-xl py-16 sm:py-24">
@ -50,10 +50,10 @@ export const FiveOhFive = ({ error }) => {
<p className="text-sm font-semibold uppercase tracking-wide"> <p className="text-sm font-semibold uppercase tracking-wide">
<GradientText>500 error</GradientText> <GradientText>500 error</GradientText>
</p> </p>
<h1 className="mt-2 text-4xl font-extrabold tracking-tight text-white sm:text-5xl"> <h1 className="mt-2 text-3xl font-extrabold tracking-tight text-white sm:text-5xl">
Something went wrong Something went wrong
</h1> </h1>
<p className="mt-2 text-lg text-gray-500"> <p className="mt-2 text-base text-th-fgd-3">
The page you are looking for could not be loaded. The page you are looking for could not be loaded.
</p> </p>
</div> </div>
@ -109,7 +109,7 @@ export const FiveOhFive = ({ error }) => {
</div> </div>
</main> </main>
<footer className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8"> <footer className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="border-t border-gray-200 py-10 text-center md:flex md:justify-between"> <div className="border-t border-th-bkg-4 py-10 text-center md:flex md:justify-between">
<div className="mt-6 flex justify-center space-x-8 md:mt-0"> <div className="mt-6 flex justify-center space-x-8 md:mt-0">
{social.map((item, itemIdx) => ( {social.map((item, itemIdx) => (
<a <a
@ -124,7 +124,7 @@ export const FiveOhFive = ({ error }) => {
</div> </div>
</div> </div>
</footer> </footer>
<div className="h-2 w-screen bg-gradient-to-r from-mango-theme-green via-mango-theme-yellow-dark to-mango-theme-red-dark"></div> <div className="absolute bottom-0 h-2 w-full bg-gradient-to-r from-mango-theme-green via-mango-theme-yellow-dark to-mango-theme-red-dark"></div>
</div> </div>
) )
} }

View File

@ -193,17 +193,16 @@ function App({ Component, pageProps }) {
<meta name="google" content="notranslate" /> <meta name="google" content="notranslate" />
<link rel="manifest" href="/manifest.json"></link> <link rel="manifest" href="/manifest.json"></link>
</Head> </Head>
<ErrorBoundary> <ThemeProvider defaultTheme="Mango">
<WalletProvider wallets={wallets}> <ErrorBoundary>
<PageTitle /> <WalletProvider wallets={wallets}>
<MangoStoreUpdater /> <PageTitle />
<OpenOrdersStoreUpdater /> <MangoStoreUpdater />
<SpotBalancesStoreUpdater /> <OpenOrdersStoreUpdater />
<PerpPositionsStoreUpdater /> <SpotBalancesStoreUpdater />
<TradeHistoryStoreUpdater /> <PerpPositionsStoreUpdater />
<FetchReferrer /> <TradeHistoryStoreUpdater />
<FetchReferrer />
<ThemeProvider defaultTheme="Mango">
<WalletListener /> <WalletListener />
<ViewportProvider> <ViewportProvider>
<div className="min-h-screen bg-th-bkg-1"> <div className="min-h-screen bg-th-bkg-1">
@ -216,9 +215,9 @@ function App({ Component, pageProps }) {
<Notifications /> <Notifications />
</ViewportProvider> </ViewportProvider>
</ThemeProvider> </WalletProvider>
</WalletProvider> </ErrorBoundary>
</ErrorBoundary> </ThemeProvider>
</> </>
) )
} }