From 4ef234417f35df6443e37c301e6537042748167f Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Sun, 5 Jun 2022 17:35:35 +0200 Subject: [PATCH] Continue refactoring things --- components/errors/ErrorBoundary.tsx | 8 +++-- components/tools/ToolToggleEditing.tsx | 1 + pages/404.tsx | 33 ++++++++++++++++++++ pages/500.tsx | 33 ++++++++++++++++++++ public/locales/it-IT/common.json | 2 ++ styles/color-schemes.css | 42 +++++++++++++------------- styles/components/square.css | 4 +++ styles/components/toolbar.css | 5 --- styles/components/views/content.css | 3 ++ styles/components/views/landing.css | 1 - styles/components/views/notice.css | 6 +++- styles/globals.css | 3 +- 12 files changed, 109 insertions(+), 32 deletions(-) create mode 100644 pages/404.tsx create mode 100644 pages/500.tsx create mode 100644 styles/components/square.css diff --git a/components/errors/ErrorBoundary.tsx b/components/errors/ErrorBoundary.tsx index e99f3b0..ba439e3 100644 --- a/components/errors/ErrorBoundary.tsx +++ b/components/errors/ErrorBoundary.tsx @@ -1,4 +1,5 @@ import { Component, ErrorInfo, ReactNode } from "react"; +import { ViewNotice } from "../view/ViewNotice"; import { ErrorBlock } from "./ErrorBlock"; type ErrorBoundaryProps = { @@ -28,9 +29,10 @@ export class ErrorBoundary extends Component - - + notice={ + + } + /> ) } else { diff --git a/components/tools/ToolToggleEditing.tsx b/components/tools/ToolToggleEditing.tsx index 9eda43f..5d7c1d1 100644 --- a/components/tools/ToolToggleEditing.tsx +++ b/components/tools/ToolToggleEditing.tsx @@ -12,6 +12,7 @@ export function ToolToggleEditing() { diff --git a/pages/404.tsx b/pages/404.tsx new file mode 100644 index 0000000..a73ad32 --- /dev/null +++ b/pages/404.tsx @@ -0,0 +1,33 @@ +import { NextPageContext } from "next"; +import { useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ErrorBlock } from "../components/errors/ErrorBlock"; +import { Postcard } from "../components/postcard/Postcard"; +import { ViewNotice } from "../components/view/ViewNotice"; +import errorPostcard from "../public/postcards/markus-spiske-iar-afB0QQw-unsplash-red.jpg" + + +export async function getStaticProps(context: NextPageContext) { + return { + props: { + ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"])) + } + } +} + + +export default function Page404() { + const {t} = useTranslation() + + return <> + + + } + /> + +} \ No newline at end of file diff --git a/pages/500.tsx b/pages/500.tsx new file mode 100644 index 0000000..f8b960e --- /dev/null +++ b/pages/500.tsx @@ -0,0 +1,33 @@ +import { NextPageContext } from "next"; +import { useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { ErrorBlock } from "../components/errors/ErrorBlock"; +import { Postcard } from "../components/postcard/Postcard"; +import { ViewNotice } from "../components/view/ViewNotice"; +import errorPostcard from "../public/postcards/markus-spiske-iar-afB0QQw-unsplash-red.jpg" + + +export async function getStaticProps(context: NextPageContext) { + return { + props: { + ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"])) + } + } +} + + +export default function Page500() { + const {t} = useTranslation() + + return <> + + + } + /> + +} \ No newline at end of file diff --git a/public/locales/it-IT/common.json b/public/locales/it-IT/common.json index 9e1e4d8..9e3925d 100644 --- a/public/locales/it-IT/common.json +++ b/public/locales/it-IT/common.json @@ -13,6 +13,8 @@ "eventsInputSubmitLabel": "Crea evento", "genericLoading": "Caricamento...", "genericError": "Si è verificato il seguente errore:", + "notFoundError": "La pagina che hai richiesto non è stata trovata.", + "internalServerError": "Si è verificato un errore nella gestione della tua richiesta.", "eventListError": "Si è verificato il seguente errore durante il recupero dei tuoi eventi:", "eventListLoading": "Caricamento della lista degli eventi creati in corso...", "eventListDescription": "Questi sono gli eventi che hai creato:", diff --git a/styles/color-schemes.css b/styles/color-schemes.css index 6ab1ac1..d9a81df 100644 --- a/styles/color-schemes.css +++ b/styles/color-schemes.css @@ -1,5 +1,25 @@ +/* Dark theme */ +:root, :host { + --background: #050505; + --foreground: white; + --border: gray; + --interactable: #050505b5; + --selection: #3333dd; + + --anchor: #8888ff; + --anchor-visited: #aa88ff; + --anchor-active: #ff8888; + + --positive: #88ff88; + --negative: #ff8888; +} + +.postcard { + filter: blur(7px) contrast(50%) brightness(50%); +} + @media (prefers-color-scheme: light) { - body { + :root, :host { --background: #fafafa; --foreground: black; --border: gray; @@ -18,23 +38,3 @@ filter: blur(7px) contrast(25%) brightness(175%); } } - -/* Dark theme */ - body { - --background: #050505; - --foreground: white; - --border: gray; - --interactable: #050505b5; - --selection: #3333dd; - - --anchor: #8888ff; - --anchor-visited: #aa88ff; - --anchor-active: #ff8888; - - --positive: #88ff88; - --negative: #ff8888; - } - - .postcard { - filter: blur(7px) contrast(50%) brightness(50%); - } diff --git a/styles/components/square.css b/styles/components/square.css new file mode 100644 index 0000000..b442efb --- /dev/null +++ b/styles/components/square.css @@ -0,0 +1,4 @@ +.square-40 { + width: 40px !important; + height: 40px !important; +} \ No newline at end of file diff --git a/styles/components/toolbar.css b/styles/components/toolbar.css index 1471271..832c664 100644 --- a/styles/components/toolbar.css +++ b/styles/components/toolbar.css @@ -24,8 +24,3 @@ right: 8px; flex-direction: row-reverse; } - -.toolbar > * { - width: 40px; - height: 40px; -} \ No newline at end of file diff --git a/styles/components/views/content.css b/styles/components/views/content.css index 30fbf7d..3a368a7 100644 --- a/styles/components/views/content.css +++ b/styles/components/views/content.css @@ -8,6 +8,9 @@ grid-template-rows: auto 1fr; justify-content: stretch; + + max-width: 800px; + margin: 0 auto; } .view-content-title { diff --git a/styles/components/views/landing.css b/styles/components/views/landing.css index 16a7ad7..cfe8916 100644 --- a/styles/components/views/landing.css +++ b/styles/components/views/landing.css @@ -15,7 +15,6 @@ .view-landing-titles { grid-area: titles; - align-self: center; } .view-landing-titles-title { diff --git a/styles/components/views/notice.css b/styles/components/views/notice.css index 809ba31..f7d25c2 100644 --- a/styles/components/views/notice.css +++ b/styles/components/views/notice.css @@ -1,6 +1,10 @@ .view-notice { - display: flex; + display: grid; + flex-direction: column; justify-content: center; align-content: center; + + min-width: 100vw; + min-height: 100vh; } \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 698e705..444abc4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -6,11 +6,12 @@ @import "components/views/landing.css"; @import "components/views/notice.css"; -@import "components/toolbar.css"; @import "components/icon.css"; @import "components/list-events.css"; @import "components/postcard.css"; +@import "components/square.css"; @import "components/telegram-login.css"; +@import "components/toolbar.css"; * {