From 7d0c264313221d3e13449b4bd23038ecec128db5 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Fri, 25 Feb 2022 23:46:28 +1100
Subject: [PATCH] Log transition & light mode messaging fixes

---
 src/pages/Extensions/Logs.tsx  | 115 +++++++++++++++++----------------
 src/pages/Messages/Message.tsx |   4 +-
 2 files changed, 62 insertions(+), 57 deletions(-)

diff --git a/src/pages/Extensions/Logs.tsx b/src/pages/Extensions/Logs.tsx
index e90b13c9..e4e4fdfa 100644
--- a/src/pages/Extensions/Logs.tsx
+++ b/src/pages/Extensions/Logs.tsx
@@ -85,63 +85,68 @@ export const Logs = (): JSX.Element => {
                   />
                 </div>
               )}
-            </AnimatePresence>
-            {meshtasticState.logs.map((log, index) => (
-              // <ContextMenu
-              //   key={index}
-              //   items={
-              //     <>
-              //       <ContextItem title="Test" icon={<FiGitBranch />} />
-              //     </>
-              //   }
-              // >
-              <tr
-                key={index}
-                className="group hover:bg-gray-200 dark:hover:bg-secondaryDark"
-              >
-                <m.td
-                  className="w-6 cursor-pointer"
-                  whileHover={{ scale: 1.01 }}
-                  whileTap={{ scale: 0.99 }}
-                >
-                  <div className="m-auto pl-2 text-white group-hover:text-black dark:text-primaryDark dark:group-hover:text-gray-400">
-                    <FiArrowRight />
-                  </div>
-                </m.td>
-                <Wrapper>
-                  {log.date
-                    .toLocaleString(undefined, {
-                      year: 'numeric',
-                      month: '2-digit',
-                      day: '2-digit',
 
-                      hour: '2-digit',
-                      minute: '2-digit',
-                      second: '2-digit',
-                    })
-                    .replaceAll('/', '-')
-                    .replace(',', '')}
-                </Wrapper>
-                <Wrapper>
-                  <div className={emitterLookup[log.emitter]}>
-                    [{Types.EmitterScope[log.scope]}.
-                    {Types.Emitter[log.emitter]}]
-                  </div>
-                </Wrapper>
-                <Wrapper className={levelLookup[log.level]}>
-                  [{Protobuf.LogRecord_Level[log.level]}]{/* </div> */}
-                </Wrapper>
-                <td
-                  className={`m-auto ${
-                    log.packet ? '' : 'dark:text-secondaryDark'
-                  }`}
+              {meshtasticState.logs.map((log, index) => (
+                // <ContextMenu
+                //   key={index}
+                //   items={
+                //     <>
+                //       <ContextItem title="Test" icon={<FiGitBranch />} />
+                //     </>
+                //   }
+                // >
+                <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"
                 >
-                  <FiPaperclip />
-                </td>
-                <td className="w-full truncate pl-1">{log.message}</td>
-              </tr>
-              // </ContextMenu>
-            ))}
+                  <m.td
+                    className="w-6 cursor-pointer"
+                    whileHover={{ scale: 1.01 }}
+                    whileTap={{ scale: 0.99 }}
+                  >
+                    <div className="m-auto pl-2 text-white group-hover:text-black dark:text-primaryDark dark:group-hover:text-gray-400">
+                      <FiArrowRight />
+                    </div>
+                  </m.td>
+                  <Wrapper>
+                    {log.date
+                      .toLocaleString(undefined, {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit',
+                      })
+                      .replaceAll('/', '-')
+                      .replace(',', '')}
+                  </Wrapper>
+                  <Wrapper>
+                    <div className={emitterLookup[log.emitter]}>
+                      [{Types.EmitterScope[log.scope]}.
+                      {Types.Emitter[log.emitter]}]
+                    </div>
+                  </Wrapper>
+                  <Wrapper className={levelLookup[log.level]}>
+                    [{Protobuf.LogRecord_Level[log.level]}]{/* </div> */}
+                  </Wrapper>
+                  <td
+                    className={`m-auto ${
+                      log.packet ? '' : 'dark:text-secondaryDark'
+                    }`}
+                  >
+                    <FiPaperclip />
+                  </td>
+                  <td className="w-full truncate pl-1">{log.message}</td>
+                </m.tr>
+                // </ContextMenu>
+              ))}
+            </AnimatePresence>
           </tbody>
         </table>
       </Card>
diff --git a/src/pages/Messages/Message.tsx b/src/pages/Messages/Message.tsx
index 2937e6cd..6b0ff1bd 100644
--- a/src/pages/Messages/Message.tsx
+++ b/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>