From e390fafe41db5e6eeb5333d9ad4362540a552435 Mon Sep 17 00:00:00 2001
From: Maxime Aubanel <sshmaxime@gmail.com>
Date: Thu, 21 Sep 2023 20:59:14 +0200
Subject: [PATCH] Add maintenance screen

---
 src/app/[locale]/maintenance/page.module.css |  1 +
 src/app/[locale]/maintenance/page.tsx        | 54 +++++++++++++++++---
 src/i18n/locales/en.json                     |  6 ++-
 3 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/app/[locale]/maintenance/page.module.css b/src/app/[locale]/maintenance/page.module.css
index c9f2a4b..bfbdd79 100644
--- a/src/app/[locale]/maintenance/page.module.css
+++ b/src/app/[locale]/maintenance/page.module.css
@@ -1,3 +1,4 @@
 .main {
   min-height: 100vh;
+  margin-top: 30vh;
 }
diff --git a/src/app/[locale]/maintenance/page.tsx b/src/app/[locale]/maintenance/page.tsx
index 17922c6..5445ac5 100644
--- a/src/app/[locale]/maintenance/page.tsx
+++ b/src/app/[locale]/maintenance/page.tsx
@@ -1,18 +1,56 @@
 "use client";
 
 import { useI18n } from "@/i18n/client";
+import { Flex, Text } from "@ledgerhq/react-ui";
+import { CloseMedium } from "@ledgerhq/react-ui/assets/icons";
+import styled from "styled-components";
 import styles from "./page.module.css";
 
-export default function Home() {
+const LogoContainer = styled(Flex)`
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(p) => p.theme.colors.error.c50};
+  height: 50px;
+  width: 50px;
+`;
+
+export default function ApplicationDisabled() {
   const { t } = useI18n();
 
   return (
-    <main className={styles.main}>
-      <div>{t("welcome")}</div>
-      <br />
-      <br />
-      <br />
-      <div>Maintenance page</div>
-    </main>
+    <div className={styles.main}>
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="column"
+        flex={1}
+        data-testid="application-disabled-container"
+      >
+        <LogoContainer data-testid="application-disabled-logo">
+          <CloseMedium size={32} color="background.main" />
+        </LogoContainer>
+        <Text
+          variant="h4"
+          fontWeight="medium"
+          color="neutral.c100"
+          mt={10}
+          textAlign="center"
+          data-testid="application-disabled-title"
+        >
+          {t("applicationDisabled.title")}
+        </Text>
+        <Text
+          variant="bodyLineHeight"
+          fontWeight="medium"
+          color="neutral.c80"
+          mt={10}
+          textAlign="center"
+          data-testid="application-disabled-subtitle"
+        >
+          {t("applicationDisabled.desc")}
+        </Text>
+      </Flex>
+    </div>
   );
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1f0be48..dfcb5df 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1,4 +1,8 @@
 {
   "hello": "Hello",
-  "welcome": "Welcome"
+  "welcome": "Welcome",
+  "applicationDisabled": {
+    "title": "We are currently under maintenance.",
+    "desc": "We are actively working to restore the app as soon as possible. Thank you for your understanding."
+  }
 }