chore: snapshot status internationalization and mobile view

decentraland · Sep 12, 2023 · 066c681 · 066c681
1 parent c7a4385
commit 066c681
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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",