From 1033ecd845b34abc037cef735a2016065477b1d9 Mon Sep 17 00:00:00 2001
From: 1emu <github@lemu.sh>
Date: Tue, 12 Sep 2023 17:03:44 -0300
Subject: [PATCH] chore: snapshot status internationalization and mobile view

---
 src/components/Debug/SnapshotStatus.css | 25 ++++++++++++++++++++++---
 src/components/Debug/SnapshotStatus.tsx |  8 ++++----
 src/intl/en.json                        |  5 ++++-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/Debug/SnapshotStatus.css b/src/components/Debug/SnapshotStatus.css
index ffddf6f62..fe68afc68 100644
--- a/src/components/Debug/SnapshotStatus.css
+++ b/src/components/Debug/SnapshotStatus.css
@@ -4,16 +4,35 @@
   background: var(--black-700);
   display: flex;
   justify-content: center;
+  align-items: center;
   overflow: hidden;
   transition: all 0.75s ease 0s;
 }
 
 .SnapshotStatus__TopBar--visible {
-  padding-top: 12px;
-  height: 43px;
+  height: 50px;
+  padding-top: 4px;
+  padding-left: 31px;
+  gap: 16px;
 }
 
 .SnapshotStatus__Text {
   color: var(--white-900) !important;
-  margin-left: 6px;
+}
+
+@media (min-width: 768px) {
+  .SnapshotStatus__TopBar {
+    align-items: flex-start;
+  }
+
+  .SnapshotStatus__TopBar--visible {
+    height: 43px !important;
+    padding-top: 12px;
+    padding-left: 0;
+    gap: 0;
+  }
+
+  .SnapshotStatus__Text {
+    margin-left: 6px;
+  }
 }
diff --git a/src/components/Debug/SnapshotStatus.tsx b/src/components/Debug/SnapshotStatus.tsx
index 8f1426f63..07f841f0f 100644
--- a/src/components/Debug/SnapshotStatus.tsx
+++ b/src/components/Debug/SnapshotStatus.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames'
 
 import { Governance } from '../../clients/Governance'
 import { ServiceHealth } from '../../clients/SnapshotTypes'
+import useFormatMessage from '../../hooks/useFormatMessage'
 import Markdown from '../Common/Typography/Markdown'
 import WarningTriangle from '../Icon/WarningTriangle'
 
@@ -12,12 +13,11 @@ import './SnapshotStatus.css'
 const PING_INTERVAL_IN_MS = 5000 // 5 seconds
 
 export default function SnapshotStatus() {
-  const [serviceHealth, setServiceHealth] = useState<ServiceHealth>(ServiceHealth.Normal)
-  const [showTopBar, setShowTopBar] = useState(false) // Control bar visibility
+  const t = useFormatMessage()
+  const [showTopBar, setShowTopBar] = useState(false)
 
   const updateServiceStatus = async () => {
     const status = await Governance.get().getSnapshotStatus()
-    setServiceHealth(status.health)
     setShowTopBar(status.health === ServiceHealth.Slow || status.health === ServiceHealth.Failing)
   }
 
@@ -31,7 +31,7 @@ export default function SnapshotStatus() {
       <div className={classNames(`SnapshotStatus__TopBar`, showTopBar && 'SnapshotStatus__TopBar--visible')}>
         <WarningTriangle size="18" />
         <Markdown size="sm" componentsClassNames={{ p: 'SnapshotStatus__Text', strong: 'SnapshotStatus__Text' }}>
-          {'**Snapshot is failing.** Voting and creating proposals is currently unavailable.'}
+          {t('page.debug.snapshot_status.label')}
         </Markdown>
       </div>
     </>
diff --git a/src/intl/en.json b/src/intl/en.json
index 6ddcd5a00..4a1710e87 100644
--- a/src/intl/en.json
+++ b/src/intl/en.json
@@ -733,7 +733,10 @@
     "debug": {
       "title": "Debug",
       "description": "A tab where anything is possible",
-      "error_label": "There was an error."
+      "error_label": "There was an error.",
+      "snapshot_status": {
+        "label": "**Snapshot is unstable.** Voting and creating proposals may be unavailable."
+      }
     },
     "home": {
       "title": "Decentraland DAO",