fix: color missing, translation missing

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) {

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

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>

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

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>