Continue refactoring things

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<ErrorBoundaryProps, ErrorBoundarySt
         if(this.state.error) {
             return (
                 <ViewNotice
-                <main id="page-error-fatal" className="page">
-                    <ErrorBlock text={this.props.text} error={this.state.error}/>
-                </main>
+                    notice={
+                        <ErrorBlock text={this.props.text} error={this.state.error}/>
+                    }
+                />
             )
         }
         else {

components/tools/ToolToggleEditing.tsx

@@ -12,6 +12,7 @@ export function ToolToggleEditing() {
         <button 
             aria-label={editing ? t("toggleEditingView") : t("toggleEditingEdit")}
             onClick={() => setEditing(!editing)}
+            className="square-40"
         >
             <FestaIcon icon={editing ? faBinoculars : faPencil}/>
         </button>

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 <>
+        <Postcard src={errorPostcard.src}/>
+        <ViewNotice 
+            notice={
+                <ErrorBlock
+                    text={t("notFoundError")}
+                    error={new Error("HTTP 404 (Not found)")}
+                />
+            }
+        />
+    </>
+}

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 <>
+        <Postcard src={errorPostcard.src}/>
+        <ViewNotice 
+            notice={
+                <ErrorBlock
+                    text={t("internalServerError")}
+                    error={new Error("HTTP 500 (Internal server error)")}
+                />
+            }
+        />
+    </>
+}

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:",

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%);
-    }

styles/components/square.css

@@ -0,0 +1,4 @@
+.square-40 {
+    width: 40px !important;
+    height: 40px !important;
+}

styles/components/toolbar.css

@@ -24,8 +24,3 @@
     right: 8px;
     flex-direction: row-reverse;
 }
-
-.toolbar > * {
-    width: 40px;
-    height: 40px;
-}

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 {

styles/components/views/landing.css

@@ -15,7 +15,6 @@
 
 .view-landing-titles {
     grid-area: titles;
-    align-self: center;
 }
 
 .view-landing-titles-title {

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;
 }

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";
 
 
 * {