Merge branch 'master' into master

src/components/nodes/Node.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import Avatar from 'boring-avatars';
+
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+type DefaultDivProps = JSX.IntrinsicElements['div'];
+
+export interface NodeProps {
+  node: Protobuf.NodeInfo;
+}
+
+export const Node = ({
+  node,
+  ...props
+}: NodeProps & DefaultDivProps): JSX.Element => {
+  return (
+    <div
+      {...props}
+      className="flex space-x-4 items-center w-full rounded-md dark:bg-primaryDark shadow-md border dark:border-gray-600 p-2 mt-6 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
+    >
+      <Avatar
+        size={30}
+        name={node.user?.longName ?? 'UNK'}
+        variant="beam"
+        colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
+      />
+      <div>{node.user?.longName}</div>
+    </div>
+  );
+};

src/components/templates/PrimaryTemplate.tsx

@@ -35,7 +35,6 @@ export const PrimaryTemplate = ({
       <div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark">
         {children}
       </div>
-
       {footer && (
         <div className="flex p-6 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
           {button && <div className="pr-2 m-auto md:hidden">{button}</div>}