From 0705bd9dbd7784ea3d57d2f5903225985e9a210a Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 15 Oct 2024 13:10:47 +0200
Subject: [PATCH] fix: color missing, translation missing

---
 src/components/reply-modal/reply-modal.tsx | 8 +++++---
 src/views/board/board.module.css           | 4 ++--
 src/views/board/board.tsx                  | 2 +-
 src/views/catalog/catalog.module.css       | 4 ++--
 src/views/catalog/catalog.tsx              | 2 +-
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 7e048008..09537f4a 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import Draggable from 'react-draggable';
 import { setAccount, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
@@ -127,9 +127,11 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
   const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
   const offlineAlert = updatedAt
     ? isBoardOffline && (
-        <div className={styles.offlineBoard}>{`Posts last synced ${getFormattedTimeAgo(updatedAt)}, the subplebbit might be offline and publishing might fail.`}</div>
+        <div className={styles.offlineBoard}>
+          <Trans i18nKey='posts_last_synced_info' values={{ time: getFormattedTimeAgo(updatedAt) }} />
+        </div>
       )
-    : `The subplebbit might be offline and publishing might fail.`;
+    : t('subplebbit_offline_info');
 
   useEffect(() => {
     if (showReplyModal) {
diff --git a/src/views/board/board.module.css b/src/views/board/board.module.css
index e85552b1..cb16a088 100644
--- a/src/views/board/board.module.css
+++ b/src/views/board/board.module.css
@@ -3,12 +3,12 @@
   padding: 15px 0 10px 5px;
 }
 
-.footer a  {
+.footer a, .newerPostsButton  {
   text-decoration: var(--button-text-decoration);
   color: var(--button-desktop-text-color);
 }
 
-.footer a:hover {
+.footer a:hover, .newerPostsButton:hover {
   color: var(--button-desktop-text-color-hover);
 }
 
diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx
index 98894a48..a04d5982 100644
--- a/src/views/board/board.tsx
+++ b/src/views/board/board.tsx
@@ -189,7 +189,7 @@ const Board = () => {
               <Trans
                 i18nKey='newer_posts_available'
                 components={{
-                  1: <span onClick={handleNewerPostsButtonClick} />,
+                  1: <span className={styles.newerPostsButton} onClick={handleNewerPostsButtonClick} />,
                 }}
               />
             </div>
diff --git a/src/views/catalog/catalog.module.css b/src/views/catalog/catalog.module.css
index ff6fad79..b75ea749 100644
--- a/src/views/catalog/catalog.module.css
+++ b/src/views/catalog/catalog.module.css
@@ -3,12 +3,12 @@
   color: var(--post-mobile-abbr-text-color);
 }
 
-.footer a  {
+.footer a, .newerPostsButton  {
   text-decoration: var(--button-text-decoration);
   color: var(--button-desktop-text-color);
 }
 
-.footer a:hover {
+.footer a:hover, .newerPostsButton:hover {
   color: var(--button-desktop-text-color-hover);
 }
 
diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx
index 52cec984..d85e508c 100644
--- a/src/views/catalog/catalog.tsx
+++ b/src/views/catalog/catalog.tsx
@@ -173,7 +173,7 @@ const Catalog = () => {
               <Trans
                 i18nKey='newer_posts_available'
                 components={{
-                  1: <span onClick={handleNewerPostsButtonClick} />,
+                  1: <span className={styles.newerPostsButton} onClick={handleNewerPostsButtonClick} />,
                 }}
               />
             </div>