From 6d79f197e98a0e53fa92f5a4e017ac9fec922ede Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Fri, 25 Feb 2022 23:38:25 +1100
Subject: [PATCH] Lightmode and button fixes

---
 src/components/Tab.tsx          |  4 +++-
 src/components/layout/index.tsx | 11 +++++++++--
 src/pages/Extensions/Info.tsx   | 20 ++++++++++++--------
 src/pages/Extensions/Logs.tsx   | 12 +++++-------
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
index 506992b9..2b5f96d9 100644
--- a/src/components/Tab.tsx
+++ b/src/components/Tab.tsx
@@ -23,7 +23,9 @@ export const Tab = ({
   return (
     <div
       className={`max-w-[10rem] md:flex-grow ${
-        active ? 'bg-primaryDark' : 'bg-secondaryDark'
+        active
+          ? 'bg-gray-100 dark:bg-primaryDark'
+          : 'bg-gray-300 dark:bg-secondaryDark'
       }`}
     >
       <div
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index 263d2876..de140f90 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -2,7 +2,7 @@ import type React from 'react';
 import { useState } from 'react';
 
 import { ErrorBoundary } from 'react-error-boundary';
-import { FiMessageCircle, FiSettings } from 'react-icons/fi';
+import { FiMessageCircle, FiSettings, FiTag } from 'react-icons/fi';
 import { RiMindMap, RiRoadMapLine } from 'react-icons/ri';
 import { VscExtensions } from 'react-icons/vsc';
 
@@ -55,6 +55,12 @@ export const Layout = ({
       link: routes.extensions().link,
       active: route.name === 'extensions',
     },
+    {
+      title: 'Temp',
+      icon: <FiTag />,
+      link: routes.extensions().link,
+      active: route.name === 'map',
+    },
   ];
 
   return (
@@ -72,7 +78,7 @@ export const Layout = ({
       </div>
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         <div className="flex h-full w-full flex-col bg-gray-300 dark:bg-secondaryDark">
-          <div className="flex w-full pt-1 dark:bg-primaryDark">
+          <div className="flex w-full bg-gray-100 pt-1 dark:bg-primaryDark">
             <div className="h-8">
               <IconButton
                 className="mx-1 rounded-b-none p-3"
@@ -94,6 +100,7 @@ export const Layout = ({
                 activeRight={tabs[index + 1]?.active}
               />
             ))}
+            <div className="-z-10 flex-grow shadow-md" />
           </div>
           <div className="flex flex-grow">{children}</div>
         </div>
diff --git a/src/pages/Extensions/Info.tsx b/src/pages/Extensions/Info.tsx
index a64043ea..70bbe297 100644
--- a/src/pages/Extensions/Info.tsx
+++ b/src/pages/Extensions/Info.tsx
@@ -1,9 +1,9 @@
 import type React from 'react';
 
-import { FiRefreshCw } from 'react-icons/fi';
+import { FiClipboard, FiRefreshCw } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
 
-import { Button } from '@app/components/generic/button/Button';
+import { IconButton } from '@app/components/generic/button/IconButton';
 import { Card } from '@app/components/generic/Card';
 import { Hashicon } from '@emeraldpay/hashicon-react';
 import { useAppSelector } from '@hooks/useAppSelector';
@@ -22,11 +22,7 @@ export const Info = (): JSX.Element => {
     <div className="flex h-full flex-col gap-4 p-4 xl:flex-row">
       <Card
         title="Connected Node Details"
-        actions={
-          <Button className="truncate" icon={<FiRefreshCw />}>
-            Refresh Node info
-          </Button>
-        }
+        actions={<IconButton icon={<FiRefreshCw />} />}
         className="xl:w-3/5"
       >
         <div className="m-auto flex flex-col gap-2">
@@ -35,9 +31,17 @@ export const Info = (): JSX.Element => {
             {node?.user?.longName || 'Unknown'}
           </div>
         </div>
+        {/* <img
+          src="https://docs.rakwireless.com/assets/images/wisblock/rak5005-o/overview/RAK5005-O_buy.png"
+          className="-rotate-90"
+        /> */}
       </Card>
 
-      <Card title="Debug Information" className="flex-grow">
+      <Card
+        title="Debug Information"
+        className="flex-grow"
+        actions={<IconButton icon={<FiClipboard />} />}
+      >
         <JSONPretty className="overflow-y-auto" data={hardwareInfo} />
       </Card>
     </div>
diff --git a/src/pages/Extensions/Logs.tsx b/src/pages/Extensions/Logs.tsx
index e38d0ad1..e90b13c9 100644
--- a/src/pages/Extensions/Logs.tsx
+++ b/src/pages/Extensions/Logs.tsx
@@ -1,9 +1,9 @@
 import type React from 'react';
 
 import { AnimatePresence, m } from 'framer-motion';
-import { FiArrowRight, FiPaperclip, FiX } from 'react-icons/fi';
+import { FiArrowRight, FiPaperclip, FiTrash } from 'react-icons/fi';
 
-import { Button } from '@app/components/generic/button/Button';
+import { IconButton } from '@app/components/generic/button/IconButton';
 import { Card } from '@app/components/generic/Card';
 import { clearLogs } from '@app/core/slices/meshtasticSlice';
 import { useAppDispatch } from '@app/hooks/useAppDispatch';
@@ -57,14 +57,12 @@ export const Logs = (): JSX.Element => {
       <Card
         title="Device Logs"
         actions={
-          <Button
+          <IconButton
+            icon={<FiTrash />}
             onClick={(): void => {
               dispatch(clearLogs());
             }}
-            icon={<FiX />}
-          >
-            Clear Logs
-          </Button>
+          />
         }
         className="flex-grow overflow-y-auto"
       >