Merge branch 'master' into master

.github/workflows/main.yml

@@ -0,0 +1,49 @@
+name: meshtastic-web build
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  build-and-package:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checks-out repository
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      # Build project
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'yarn'
+      - run: yarn install --ignore-optional
+      - run: yarn lint
+      - run: yarn build
+      - run: yarn package
+      - run: tree build/output
+      
+      # Create a zip file from the output folder
+      - name: Create output zip file
+        uses: papeloto/action-zip@v1
+        with:
+          files: build/output/
+          dest: output.zip
+    
+      # Upload Artifact
+      - name: Upload a Build Artifact
+        uses: "marvinpinto/action-automatic-releases@latest"
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          automatic_release_tag: "latest"
+          prerelease: false
+          files: |
+            output.zip

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

src/pages/settings/Radio.tsx

@@ -28,7 +28,6 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
   const onSubmit = handleSubmit((data) => {
     void connection.setPreferences(data);
   });
-
   return (
     <PrimaryTemplate
       title="Radio"