Log transition & light mode messaging fixes

src/pages/Extensions/Logs.tsx

@@ -85,7 +85,7 @@ export const Logs = (): JSX.Element => {
                   />
                 </div>
               )}
-            </AnimatePresence>
+
               {meshtasticState.logs.map((log, index) => (
                 // <ContextMenu
                 //   key={index}
@@ -95,8 +95,12 @@ export const Logs = (): JSX.Element => {
                 //     </>
                 //   }
                 // >
-              <tr
+                <m.tr
                   key={index}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.3 }}
                   className="group hover:bg-gray-200 dark:hover:bg-secondaryDark"
                 >
                   <m.td
@@ -139,9 +143,10 @@ export const Logs = (): JSX.Element => {
                     <FiPaperclip />
                   </td>
                   <td className="w-full truncate pl-1">{log.message}</td>
-              </tr>
+                </m.tr>
                 // </ContextMenu>
               ))}
+            </AnimatePresence>
           </tbody>
         </table>
       </Card>

src/pages/Messages/Message.tsx

@@ -31,7 +31,7 @@ export const Message = ({
         >
           <div className="flex gap-2">
             <Tooltip content={rxTime.toString()}>
-              <div className="my-auto ml-auto w-8 pt-1 text-xs text-transparent dark:group-hover:text-gray-400">
+              <div className="my-auto ml-auto w-8 pt-1 text-xs text-transparent group-hover:text-gray-500 dark:group-hover:text-gray-400">
                 {rxTime
                   .toLocaleTimeString(undefined, {
                     hour: '2-digit',
@@ -50,7 +50,7 @@ export const Message = ({
             </div>
           </div>
           <Tooltip content="Response time">
-            <div className="flex gap-1 pt-1 text-xs text-transparent dark:group-hover:text-gray-400">
+            <div className="flex gap-1 pt-1 text-xs text-transparent group-hover:text-gray-500 dark:group-hover:text-gray-400">
               <FiClock className="mt-0.5" />
               <div>25s</div>
             </div>