Template and Card fixes

5 years ago · f643e6d681
10 changed files with 293 additions and 218 deletions
--- a/package.json
+++ b/package.json
@ -12,50 +12,50 @@
  },
  "dependencies": {
    "@headlessui/react": "^1.4.0",
-    "@heroicons/react": "^1.0.1",
+    "@heroicons/react": "^1.0.4",
    "@meshtastic/meshtasticjs": "^0.6.17",
-    "@reduxjs/toolkit": "^1.6.0",
-    "apexcharts": "^3.27.3",
+    "@reduxjs/toolkit": "^1.6.1",
+    "apexcharts": "^3.28.1",
    "boring-avatars": "^1.5.8",
-    "i18next": "^20.3.5",
+    "i18next": "^20.4.0",
    "i18next-browser-languagedetector": "^6.1.2",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-dom": "^17.0.2",
    "react-flags-select": "^2.1.2",
-    "react-hook-form": "^7.13.0-next.5",
+    "react-hook-form": "^7.13.0",
    "react-i18next": "^11.11.4",
    "react-redux": "^7.2.4",
    "type-route": "^0.6.0",
    "use-breakpoint": "^2.0.1"
  },
  "devDependencies": {
-    "@snowpack/plugin-dotenv": "^2.0.5",
+    "@snowpack/plugin-dotenv": "^2.2.0",
    "@snowpack/plugin-postcss": "^1.4.3",
    "@snowpack/plugin-react-refresh": "^2.5.0",
-    "@snowpack/plugin-typescript": "^1.2.0",
-    "@types/react": "^17.0.13",
-    "@types/react-dom": "^17.0.8",
-    "@types/react-redux": "^7.1.16",
-    "@types/snowpack-env": "^2.3.3",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@typescript-eslint/parser": "^4.29.1",
-    "@verypossible/eslint-config": "^1.6.0",
-    "autoprefixer": "^10.2.6",
+    "@snowpack/plugin-typescript": "^1.2.1",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-redux": "^7.1.18",
+    "@types/snowpack-env": "^2.3.4",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
+    "@verypossible/eslint-config": "^1.6.1",
+    "autoprefixer": "^10.3.2",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-babel-module": "^5.3.1",
    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "^2.24.1",
+    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "gzipper": "^5.0.0",
-    "postcss": "^8.3.5",
+    "postcss": "^8.3.6",
    "prettier": "^2.3.2",
-    "snowpack": "^3.7.1",
-    "tailwindcss": "^2.2.4",
+    "snowpack": "^3.8.7",
+    "tailwindcss": "^2.2.7",
    "typescript": "^4.3.5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -2,46 +2,46 @@ lockfileVersion: 5.3

 specifiers:
  '@headlessui/react': ^1.4.0
-  '@heroicons/react': ^1.0.1
+  '@heroicons/react': ^1.0.4
  '@meshtastic/meshtasticjs': ^0.6.17
-  '@reduxjs/toolkit': ^1.6.0
-  '@snowpack/plugin-dotenv': ^2.0.5
+  '@reduxjs/toolkit': ^1.6.1
+  '@snowpack/plugin-dotenv': ^2.2.0
  '@snowpack/plugin-postcss': ^1.4.3
  '@snowpack/plugin-react-refresh': ^2.5.0
-  '@snowpack/plugin-typescript': ^1.2.0
-  '@types/react': ^17.0.13
-  '@types/react-dom': ^17.0.8
-  '@types/react-redux': ^7.1.16
-  '@types/snowpack-env': ^2.3.3
-  '@typescript-eslint/eslint-plugin': ^4.29.1
-  '@typescript-eslint/parser': ^4.29.1
-  '@verypossible/eslint-config': ^1.6.0
-  apexcharts: ^3.27.3
-  autoprefixer: ^10.2.6
+  '@snowpack/plugin-typescript': ^1.2.1
+  '@types/react': ^17.0.19
+  '@types/react-dom': ^17.0.9
+  '@types/react-redux': ^7.1.18
+  '@types/snowpack-env': ^2.3.4
+  '@typescript-eslint/eslint-plugin': ^4.29.3
+  '@typescript-eslint/parser': ^4.29.3
+  '@verypossible/eslint-config': ^1.6.1
+  apexcharts: ^3.28.1
+  autoprefixer: ^10.3.2
  babel-plugin-module-resolver: ^4.1.0
  boring-avatars: ^1.5.8
  eslint: ^7.32.0
  eslint-config-prettier: ^8.3.0
  eslint-import-resolver-babel-module: ^5.3.1
  eslint-import-resolver-typescript: ^2.4.0
-  eslint-plugin-import: ^2.24.1
+  eslint-plugin-import: ^2.24.2
  eslint-plugin-react: ^7.24.0
  eslint-plugin-react-hooks: ^4.2.0
  gzipper: ^5.0.0
-  i18next: ^20.3.5
+  i18next: ^20.4.0
  i18next-browser-languagedetector: ^6.1.2
  moment: ^2.29.1
-  postcss: ^8.3.5
+  postcss: ^8.3.6
  prettier: ^2.3.2
  react: ^17.0.2
  react-apexcharts: ^1.3.9
  react-dom: ^17.0.2
  react-flags-select: ^2.1.2
-  react-hook-form: ^7.13.0-next.5
+  react-hook-form: ^7.13.0
  react-i18next: ^11.11.4
  react-redux: ^7.2.4
-  snowpack: ^3.7.1
-  tailwindcss: ^2.2.4
+  snowpack: ^3.8.7
+  tailwindcss: ^2.2.7
  type-route: ^0.6.0
  typescript: ^4.3.5
  use-breakpoint: ^2.0.1
@ -51,13 +51,13 @@ dependencies:
  '@heroicons/react': 1.0[email protected]
  '@meshtastic/meshtasticjs': 0.6.17
  '@reduxjs/toolkit': 1.6[email protected][email protected]
-  apexcharts: 3.27.3
+  apexcharts: 3.28.1
  boring-avatars: 1.5.8
  i18next: 20.4.0
  i18next-browser-languagedetector: 6.1.2
  moment: 2.29.1
  react: 17.0.2
-  react-apexcharts: 1.3[email protected]7.3[email protected]
+  react-apexcharts: 1.3[email protected]8.1[email protected]
  react-dom: 17.0[email protected]
  react-flags-select: 2.1[email protected][email protected]
  react-hook-form: 7.13[email protected]
@ -67,7 +67,7 @@ dependencies:
  use-breakpoint: 2.0[email protected][email protected]

 devDependencies:
-  '@snowpack/plugin-dotenv': 2.1.0
+  '@snowpack/plugin-dotenv': 2.2.0
  '@snowpack/plugin-postcss': 1.4[email protected]
  '@snowpack/plugin-react-refresh': 2.5[email protected][email protected]
  '@snowpack/plugin-typescript': 1.2[email protected]
@ -75,22 +75,22 @@ devDependencies:
  '@types/react-dom': 17.0.9
  '@types/react-redux': 7.1.18
  '@types/snowpack-env': 2.3.4
-  '@typescript-eslint/eslint-plugin': 4.29.2_b01b7137116ac50f0745961d9cf72d34
-  '@typescript-eslint/parser': 4.29.2[email protected][email protected]
+  '@typescript-eslint/eslint-plugin': 4.29.3_fd14c0002fbbfb85b8a0070d0dffb93d
+  '@typescript-eslint/parser': 4.29.3[email protected][email protected]
  '@verypossible/eslint-config': 1.6[email protected]
  autoprefixer: 10.3[email protected]
  babel-plugin-module-resolver: 4.1.0
  eslint: 7.32.0
  eslint-config-prettier: 8.3[email protected]
  eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344
-  eslint-import-resolver-typescript: 2.4.0_dd24990a2f914d6f3397930dfc8171b2
-  eslint-plugin-import: 2.24.1[email protected]
+  eslint-import-resolver-typescript: 2.4.0_b7a4de75e7d0094cbe979e30a9a325ab
+  eslint-plugin-import: 2.24.2[email protected]
  eslint-plugin-react: 7.24[email protected]
  eslint-plugin-react-hooks: 4.2[email protected]
  gzipper: 5.0.0
  postcss: 8.3.6
  prettier: 2.3.2
-  snowpack: 3.8.6
+  snowpack: 3.8.7
  tailwindcss: 2.2.7_8b238584a104f535cc123d61e89214a6
  typescript: 4.3.5

@ -634,8 +634,8 @@ packages:
    engines: {node: '>=10'}
    dev: true

-  /@snowpack/plugin-dotenv/2.1.0:
-    resolution: {integrity: sha512-NvwB+kQuxKheZLWrRvOgXB8i0cXhuIkljbgCn02fRGCIOigPIDk1jZrnn3x9skqqtul/XvW9dNulVi6Fa7CN6g==}
+  /@snowpack/plugin-dotenv/2.2.0:
+    resolution: {integrity: sha512-/gj91mHz9iPi7e393sibVfpm4jrG7hqZytgkfiscOIWJ8Y838D0jX1JFXu9IAThZz0IEKTLpb74d5A7pM00HVg==}
    dependencies:
      dotenv: 8.6.0
      dotenv-expand: 5.1.0
@ -723,6 +723,10 @@ packages:
    resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
    dev: true

+  /@types/json5/0.0.29:
+    resolution: {integrity: sha1-7ihweulOEdK4J7y+UnC86n8+ce4=}
+    dev: true
+
  /@types/keyv/3.1.2:
    resolution: {integrity: sha512-/FvAK2p4jQOaJ6CGDHJTqZcUtbZe820qIeTg7o0Shg7drB4JHeL+V/dhSaly7NXx6u8eSee+r7coT+yuJEvDLg==}
    dependencies:
@ -780,8 +784,8 @@ packages:
    resolution: {integrity: sha512-zYzMb2aMyzXW5VgOQHy+FgI8N5tLFb+tIsUqk35CIgSr9pT4pji2GR8BCOTMdniusVuRHIp/DaYQNQGYGLVZHQ==}
    dev: true

-  /@typescript-eslint/eslint-plugin/4.29.2_b01b7137116ac50f0745961d9cf72d34:
-    resolution: {integrity: sha512-x4EMgn4BTfVd9+Z+r+6rmWxoAzBaapt4QFqE+d8L8sUtYZYLDTK6VG/y/SMMWA5t1/BVU5Kf+20rX4PtWzUYZg==}
+  /@typescript-eslint/eslint-plugin/4.29.3_fd14c0002fbbfb85b8a0070d0dffb93d:
+    resolution: {integrity: sha512-tBgfA3K/3TsZY46ROGvoRxQr1wBkclbVqRQep97MjVHJzcRBURRY3sNFqLk0/Xr//BY5hM9H2p/kp+6qim85SA==}
    engines: {node: ^10.12.0 || >=12.0.0}
    peerDependencies:
      '@typescript-eslint/parser': ^4.0.0
@ -791,9 +795,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/experimental-utils': 4.29.2[email protected][email protected]
-      '@typescript-eslint/parser': 4.29.2[email protected][email protected]
-      '@typescript-eslint/scope-manager': 4.29.2
+      '@typescript-eslint/experimental-utils': 4.29.3[email protected][email protected]
+      '@typescript-eslint/parser': 4.29.3[email protected][email protected]
+      '@typescript-eslint/scope-manager': 4.29.3
      debug: 4.3.2
      eslint: 7.32.0
      functional-red-black-tree: 1.0.1
@ -805,16 +809,16 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/experimental-utils/4.29.2[email protected][email protected]:
-    resolution: {integrity: sha512-P6mn4pqObhftBBPAv4GQtEK7Yos1fz/MlpT7+YjH9fTxZcALbiiPKuSIfYP/j13CeOjfq8/fr9Thr2glM9ub7A==}
+  /@typescript-eslint/experimental-utils/4.29.3[email protected][email protected]:
+    resolution: {integrity: sha512-ffIvbytTVWz+3keg+Sy94FG1QeOvmV9dP2YSdLFHw/ieLXWCa3U1TYu8IRCOpMv2/SPS8XqhM1+ou1YHsdzKrg==}
    engines: {node: ^10.12.0 || >=12.0.0}
    peerDependencies:
      eslint: '*'
    dependencies:
      '@types/json-schema': 7.0.9
-      '@typescript-eslint/scope-manager': 4.29.2
-      '@typescript-eslint/types': 4.29.2
-      '@typescript-eslint/typescript-estree': 4.29.2[email protected]
+      '@typescript-eslint/scope-manager': 4.29.3
+      '@typescript-eslint/types': 4.29.3
+      '@typescript-eslint/typescript-estree': 4.29.3[email protected]
      eslint: 7.32.0
      eslint-scope: 5.1.1
      eslint-utils: 3.0[email protected]
@ -823,8 +827,8 @@ packages:
      - typescript
    dev: true

-  /@typescript-eslint/parser/4.29.2[email protected][email protected]:
-    resolution: {integrity: sha512-WQ6BPf+lNuwteUuyk1jD/aHKqMQ9jrdCn7Gxt9vvBnzbpj7aWEf+aZsJ1zvTjx5zFxGCt000lsbD9tQPEL8u6g==}
+  /@typescript-eslint/parser/4.29.3[email protected][email protected]:
+    resolution: {integrity: sha512-jrHOV5g2u8ROghmspKoW7pN8T/qUzk0+DITun0MELptvngtMrwUJ1tv5zMI04CYVEUsSrN4jV7AKSv+I0y0EfQ==}
    engines: {node: ^10.12.0 || >=12.0.0}
    peerDependencies:
      eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
@ -833,9 +837,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/scope-manager': 4.29.2
-      '@typescript-eslint/types': 4.29.2
-      '@typescript-eslint/typescript-estree': 4.29.2[email protected]
+      '@typescript-eslint/scope-manager': 4.29.3
+      '@typescript-eslint/types': 4.29.3
+      '@typescript-eslint/typescript-estree': 4.29.3[email protected]
      debug: 4.3.2
      eslint: 7.32.0
      typescript: 4.3.5
@ -843,21 +847,21 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/scope-manager/4.29.2:
-    resolution: {integrity: sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==}
+  /@typescript-eslint/scope-manager/4.29.3:
+    resolution: {integrity: sha512-x+w8BLXO7iWPkG5mEy9bA1iFRnk36p/goVlYobVWHyDw69YmaH9q6eA+Fgl7kYHmFvWlebUTUfhtIg4zbbl8PA==}
    engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
    dependencies:
-      '@typescript-eslint/types': 4.29.2
-      '@typescript-eslint/visitor-keys': 4.29.2
+      '@typescript-eslint/types': 4.29.3
+      '@typescript-eslint/visitor-keys': 4.29.3
    dev: true

-  /@typescript-eslint/types/4.29.2:
-    resolution: {integrity: sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==}
+  /@typescript-eslint/types/4.29.3:
+    resolution: {integrity: sha512-s1eV1lKNgoIYLAl1JUba8NhULmf+jOmmeFO1G5MN/RBCyyzg4TIOfIOICVNC06lor+Xmy4FypIIhFiJXOknhIg==}
    engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
    dev: true

-  /@typescript-eslint/typescript-estree/4.29.2[email protected]:
-    resolution: {integrity: sha512-TJ0/hEnYxapYn9SGn3dCnETO0r+MjaxtlWZ2xU+EvytF0g4CqTpZL48SqSNn2hXsPolnewF30pdzR9a5Lj3DNg==}
+  /@typescript-eslint/typescript-estree/4.29.3[email protected]:
+    resolution: {integrity: sha512-45oQJA0bxna4O5TMwz55/TpgjX1YrAPOI/rb6kPgmdnemRZx/dB0rsx+Ku8jpDvqTxcE1C/qEbVHbS3h0hflag==}
    engines: {node: ^10.12.0 || >=12.0.0}
    peerDependencies:
      typescript: '*'
@ -865,8 +869,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/types': 4.29.2
-      '@typescript-eslint/visitor-keys': 4.29.2
+      '@typescript-eslint/types': 4.29.3
+      '@typescript-eslint/visitor-keys': 4.29.3
      debug: 4.3.2
      globby: 11.0.4
      is-glob: 4.0.1
@ -877,25 +881,25 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/visitor-keys/4.29.2:
-    resolution: {integrity: sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==}
+  /@typescript-eslint/visitor-keys/4.29.3:
+    resolution: {integrity: sha512-MGGfJvXT4asUTeVs0Q2m+sY63UsfnA+C/FDgBKV3itLBmM9H0u+URcneePtkd0at1YELmZK6HSolCqM4Fzs6yA==}
    engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
    dependencies:
-      '@typescript-eslint/types': 4.29.2
+      '@typescript-eslint/types': 4.29.3
      eslint-visitor-keys: 2.1.0
    dev: true

  /@verypossible/eslint-config/[email protected]:
    resolution: {integrity: sha512-3qf2FSag49zqI6rZlwKcF8RryLX0RJ3W+koJuhDhdQNyelSEeTxiijQ+Y/Xss4ILFzyqpBnzqiphmABGcOgj1Q==}
    dependencies:
-      '@typescript-eslint/eslint-plugin': 4.29.2_b01b7137116ac50f0745961d9cf72d34
-      '@typescript-eslint/parser': 4.29.2[email protected][email protected]
+      '@typescript-eslint/eslint-plugin': 4.29.3_fd14c0002fbbfb85b8a0070d0dffb93d
+      '@typescript-eslint/parser': 4.29.3[email protected][email protected]
      babel-plugin-module-resolver: 4.1.0
      eslint: 7.32.0
      eslint-config-prettier: 8.3[email protected]
      eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344
-      eslint-import-resolver-typescript: 2.4.0_dd24990a2f914d6f3397930dfc8171b2
-      eslint-plugin-import: 2.24.1[email protected]
+      eslint-import-resolver-typescript: 2.4.0_b7a4de75e7d0094cbe979e30a9a325ab
+      eslint-plugin-import: 2.24.2[email protected]
      eslint-plugin-react: 7.24[email protected]
      eslint-plugin-react-hooks: 4.2[email protected]
      prettier: 2.3.2
@ -1024,8 +1028,8 @@ packages:
      picomatch: 2.3.0
    dev: true

-  /apexcharts/3.27.3:
-    resolution: {integrity: sha512-1ZrqiQT0VahkqW0kVjf5QVURYGaHMlGN08BoIZG2c2U/gY2AtnEoFN4r9q4d/pYYYKvI9AyLBHq0otzcVGrHAw==}
+  /apexcharts/3.28.1:
+    resolution: {integrity: sha512-5M1KitI/XmY2Sx6ih9vQOXyQUTmotDG/cML2N6bkBlVseF10RPSzM7dkrf7Y68apSZF6e7J581gXXu1+qkLhCA==}
    dependencies:
      svg.draggable.js: 2.2.2
      svg.easing.js: 2.0.0
@ -1233,7 +1237,7 @@ packages:
    dependencies:
      caniuse-lite: 1.0.30001251
      colorette: 1.3.0
-      electron-to-chromium: 1.3.814
+      electron-to-chromium: 1.3.817
      escalade: 3.1.1
      node-releases: 1.1.75
    dev: true
@ -1776,8 +1780,8 @@ packages:
      safer-buffer: 2.1.2
    dev: true

-  /electron-to-chromium/1.3.814:
-    resolution: {integrity: sha512-0mH03cyjh6OzMlmjauGg0TLd87ErIJqWiYxMcOLKf5w6p0YEOl7DJAj7BDlXEFmCguY5CQaKVOiMjAMODO2XDw==}
+  /electron-to-chromium/1.3.817:
+    resolution: {integrity: sha512-Vw0Faepf2Id9Kf2e97M/c99qf168xg86JLKDxivvlpBQ9KDtjSeX0v+TiuSE25PqeQfTz+NJs375b64ca3XOIQ==}
    dev: true

  /emoji-regex/8.0.0:
@ -1955,7 +1959,7 @@ packages:
      resolve: 1.20.0
    dev: true

-  /eslint-import-resolver-typescript/2.4.0_dd24990a2f914d6f3397930dfc8171b2:
+  /eslint-import-resolver-typescript/2.4.0_b7a4de75e7d0094cbe979e30a9a325ab:
    resolution: {integrity: sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==}
    engines: {node: '>=4'}
    peerDependencies:
@ -1964,11 +1968,11 @@ packages:
    dependencies:
      debug: 4.3.2
      eslint: 7.32.0
-      eslint-plugin-import: 2.24.1[email protected]
+      eslint-plugin-import: 2.24.2[email protected]
      glob: 7.1.7
      is-glob: 4.0.1
      resolve: 1.20.0
-      tsconfig-paths: 3.10.1
+      tsconfig-paths: 3.11.0
    transitivePeerDependencies:
      - supports-color
    dev: true
@ -1981,8 +1985,8 @@ packages:
      pkg-dir: 2.0.0
    dev: true

-  /eslint-plugin-import/2.24.1[email protected]:
-    resolution: {integrity: sha512-KSFWhNxPH8OGJwpRJJs+Z7I0a13E2iFQZJIvSnCu6KUs4qmgAm3xN9GYBCSoiGWmwA7gERZPXqYQjcoCROnYhQ==}
+  /eslint-plugin-import/2.24.2[email protected]:
+    resolution: {integrity: sha512-hNVtyhiEtZmpsabL4neEj+6M5DCLgpYyG9nzJY8lZQeQXEn5UPW1DpUdsMHMXsq98dbNm7nt1w9ZMSVpfJdi8Q==}
    engines: {node: '>=4'}
    peerDependencies:
      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0
@ -2002,7 +2006,7 @@ packages:
      pkg-up: 2.0.0
      read-pkg-up: 3.0.0
      resolve: 1.20.0
-      tsconfig-paths: 3.10.1
+      tsconfig-paths: 3.11.0
    dev: true

  /eslint-plugin-react-hooks/[email protected]:
@ -3237,8 +3241,8 @@ packages:
      semver: 6.3.0
    dev: true

-  /make-fetch-happen/9.0.5:
-    resolution: {integrity: sha512-XN0i/VqHsql30Oq7179spk6vu3IuaPL1jaivNYhBrJtK7tkOuJwMK2IlROiOnJ40b9SvmOo2G86FZyI6LD2EsQ==}
+  /make-fetch-happen/9.1.0:
+    resolution: {integrity: sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==}
    engines: {node: '>= 10'}
    dependencies:
      agentkeepalive: 4.1.4
@ -3546,7 +3550,7 @@ packages:
    resolution: {integrity: sha512-jmlgSxoDNuhAtxUIG6pVwwtz840i994dL14FoNVZisrmZW5kWd63IUTNv1m/hyRSGSqWjCUp/YZlS1BJyNp9XA==}
    engines: {node: '>=10'}
    dependencies:
-      make-fetch-happen: 9.0.5
+      make-fetch-happen: 9.1.0
      minipass: 3.1.3
      minipass-fetch: 1.3.4
      minipass-json-stream: 1.0.1
@ -4152,13 +4156,13 @@ packages:
    engines: {node: '>=10'}
    dev: true

-  /react-apexcharts/[email protected]7.3[email protected]:
+  /react-apexcharts/[email protected]8.1[email protected]:
    resolution: {integrity: sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==}
    peerDependencies:
      apexcharts: ^3.18.0
      react: '>=0.13'
    dependencies:
-      apexcharts: 3.27.3
+      apexcharts: 3.28.1
      prop-types: 15.7.2
      react: 17.0.2
    dev: false
@ -4548,8 +4552,8 @@ packages:
    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
    dev: true

-  /snowpack/3.8.6:
-    resolution: {integrity: sha512-EZ3Y7RtTiPvxnVFTKPfkvi2PKBrprXCvOHKWQQLBkHonf+xdtG51RiNjtrRLJeCjislAlD6OoeGHUxz76ToGHw==}
+  /snowpack/3.8.7:
+    resolution: {integrity: sha512-lvz1jxAxi/uPU6aOW8LSLp1sJlSNnwOGDt5nkF4pLeECmxn9iymLLiyptXEJJrXhFf48D0RrCww57J5kwi4dwA==}
    engines: {node: '>=10.19.0'}
    hasBin: true
    dependencies:
@ -4580,6 +4584,7 @@ packages:
      isbinaryfile: 4.0.8
      jsonschema: 1.2.11
      kleur: 4.1.4
+      magic-string: 0.25.7
      meriyah: 3.1.6
      mime-types: 2.1.32
      mkdirp: 1.0.4
@ -4962,10 +4967,11 @@ packages:
    resolution: {integrity: sha512-whw60l7r+8ZU8Tu/Uc2yxtc4ZTZbR/PF3u1IPNKGQ6p8EICLb3Z2lAgoqw9bqYd8IkgnsaOcLzYHFckjqNsf0g==}
    dev: true

-  /tsconfig-paths/3.10.1:
-    resolution: {integrity: sha512-rETidPDgCpltxF7MjBZlAFPUHv5aHH2MymyPvh+vEyWAED4Eb/WeMbsnD/JDr4OKPOA1TssDHgIcpTN5Kh0p6Q==}
+  /tsconfig-paths/3.11.0:
+    resolution: {integrity: sha512-7ecdYDnIdmv639mmDwslG6KQg1Z9STTz1j7Gcz0xa+nshh/gKDAHcPxRbWOsA3SPp0tXP2leTcY9Kw+NAkfZzA==}
    dependencies:
-      json5: 2.2.0
+      '@types/json5': 0.0.29
+      json5: 1.0.1
      minimist: 1.2.5
      strip-bom: 3.0.0
    dev: true
--- a/src/components/generic/Card.tsx
+++ b/src/components/generic/Card.tsx
@ -0,0 +1,45 @@
+import React from 'react';
+
+type DefaultDivProps = JSX.IntrinsicElements['div'];
+
+interface CardProps extends DefaultDivProps {
+  title: string;
+  description: string;
+  buttons?: JSX.Element;
+  lgPlaceholder?: JSX.Element;
+}
+
+export const Card = ({
+  title,
+  description,
+  buttons,
+  children,
+  className,
+  lgPlaceholder,
+  ...props
+}: CardProps): JSX.Element => {
+  return (
+    <div
+      className={`flex flex-col flex-auto text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl  ${className}`}
+      {...props}
+    >
+      <div className="flex items-center justify-between mx-10 mt-10">
+        <div className="flex flex-col">
+          <div className="mr-4 text-2xl font-semibold leading-7 tracking-tight text-black md:text-3xl dark:text-white">
+            {title}
+          </div>
+          <div className="font-medium text-gray-400">{description}</div>
+        </div>
+        {buttons}
+      </div>
+      <div className="flex">
+        <div className={`${lgPlaceholder ? 'w-full xl:w-2/3' : 'w-full'}`}>
+          {children}
+        </div>
+        {lgPlaceholder && (
+          <div className="hidden w-1/3 xl:flex">{lgPlaceholder}</div>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/src/components/generic/Chart.tsx
+++ b/src/components/generic/Chart.tsx
@ -3,6 +3,7 @@ import React from 'react';
 import ApexChart from 'react-apexcharts';

 import { Button } from './Button';
+import { Card } from './Card';

 type DefaultDivProps = JSX.IntrinsicElements['div'];

@ -30,129 +31,125 @@ export const Chart = ({
 }: ChartProps): JSX.Element => {
  const [activeSeries, setActiveSeries] = React.useState<ISeries>(series[0]);
  return (
-    <div
-      className="flex flex-col flex-auto text-white shadow-md dark bg-primaryDark rounded-3xl"
-      {...props}
-    >
-      <div className="flex items-center justify-between mx-10 mt-10">
-        <div className="flex flex-col">
-          <div className="mr-4 text-2xl font-semibold leading-7 tracking-tight md:text-3xl">
-            {title}
-          </div>
-          <div className="font-medium text-gray-400">{description}</div>
-        </div>
-        {hasMultipleSeries && (
-          <div className="flex space-x-2">
-            {series.map((data, index) => (
-              <Button
-                active={data.name === activeSeries.name}
-                key={index}
-                className="font-medium"
-                onClick={(): void => {
-                  setActiveSeries(series[index]);
-                }}
-              >
-                {data.name}
-              </Button>
-            ))}
-          </div>
-        )}
-      </div>
-      <div className="h-80">
-        <ApexChart
-          height="96%"
-          type="area"
-          options={{
-            chart: {
-              animations: {
-                speed: 400,
-                animateGradually: {
+    <div className="dark" {...props}>
+      <Card
+        title={title}
+        description={description}
+        buttons={
+          hasMultipleSeries ? (
+            <div className="flex space-x-2">
+              {series.map((data, index) => (
+                <Button
+                  active={data.name === activeSeries.name}
+                  key={index}
+                  className="font-medium"
+                  onClick={(): void => {
+                    setActiveSeries(series[index]);
+                  }}
+                >
+                  {data.name}
+                </Button>
+              ))}
+            </div>
+          ) : undefined
+        }
+      >
+        <div className="h-80">
+          <ApexChart
+            height="96%"
+            type="area"
+            options={{
+              chart: {
+                animations: {
+                  speed: 400,
+                  animateGradually: {
+                    enabled: false,
+                  },
+                },
+                toolbar: {
+                  show: false,
+                },
+                zoom: {
                  enabled: false,
                },
              },
-              toolbar: {
-                show: false,
-              },
-              zoom: {
+              colors: ['#818CF8'],
+              dataLabels: {
                enabled: false,
              },
-            },
-            colors: ['#818CF8'],
-            dataLabels: {
-              enabled: false,
-            },
-            fill: {
-              colors: ['#312E81'],
-            },
-            grid: {
-              padding: {
-                top: 10,
-                left: 0,
-                right: 0,
+              fill: {
+                colors: ['#312E81'],
              },
+              grid: {
+                padding: {
+                  top: 10,
+                  left: 0,
+                  right: 0,
+                },

-              xaxis: {
-                lines: {
-                  show: false,
+                xaxis: {
+                  lines: {
+                    show: false,
+                  },
                },
-              },
-              yaxis: {
-                lines: {
-                  show: false,
+                yaxis: {
+                  lines: {
+                    show: false,
+                  },
                },
              },
-            },

-            stroke: {
-              width: 2,
-            },
-            tooltip: {
-              followCursor: true,
-              theme: 'dark',
-              x: {
-                format: 'MMM dd, yyyy',
-              },
-              y: {
-                formatter: (value: number): string => `${value}`,
-              },
-            },
-            xaxis: {
-              axisBorder: {
-                show: false,
+              stroke: {
+                width: 2,
              },
-              axisTicks: {
-                show: false,
-              },
-              crosshairs: {
-                stroke: {
-                  color: '#475569',
-                  dashArray: 0,
-                  width: 2,
+              tooltip: {
+                followCursor: true,
+                theme: 'dark',
+                x: {
+                  format: 'MMM dd, yyyy',
                },
-              },
-              labels: {
-                style: {
-                  colors: '#CBD5E1',
+                y: {
+                  formatter: (value: number): string => `${value}`,
                },
              },
-              tooltip: {
-                enabled: false,
-              },
-              type: 'datetime',
-            },
-            yaxis: {
-              axisTicks: {
-                show: false,
+              xaxis: {
+                axisBorder: {
+                  show: false,
+                },
+                axisTicks: {
+                  show: false,
+                },
+                crosshairs: {
+                  stroke: {
+                    color: '#475569',
+                    dashArray: 0,
+                    width: 2,
+                  },
+                },
+                labels: {
+                  style: {
+                    colors: '#CBD5E1',
+                  },
+                },
+                tooltip: {
+                  enabled: false,
+                },
+                type: 'datetime',
              },
-              axisBorder: {
+              yaxis: {
+                axisTicks: {
+                  show: false,
+                },
+                axisBorder: {
+                  show: false,
+                },
                show: false,
              },
-              show: false,
-            },
-          }}
-          series={[activeSeries]}
-        />
-      </div>
+            }}
+            series={[activeSeries]}
+          />
+        </div>
+      </Card>
    </div>
  );
 };
--- a/src/components/generic/Input.tsx
+++ b/src/components/generic/Input.tsx
@ -26,7 +26,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
      <div className="w-full">
        <label
          htmlFor={id}
-          className="block text-sm font-medium dark:text-white"
+          className="block text-sm font-medium text-black dark:text-white"
        >
          {label}
        </label>
--- a/src/components/generic/Select.tsx
+++ b/src/components/generic/Select.tsx
@ -28,7 +28,10 @@ export const Select = ({
 }: SelectProps): JSX.Element => {
  return (
    <div className="w-full">
-      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
+      <label
+        htmlFor={id}
+        className="block text-sm font-medium text-black dark:text-white"
+      >
        {label}
      </label>

--- a/src/components/generic/Toggle.tsx
+++ b/src/components/generic/Toggle.tsx
@ -20,18 +20,21 @@ export const Toggle = ({
  const [enabled, setEnabled] = React.useState(false);

  return (
-    <div className="w-full">
-      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
+    <div className="flex flex-col w-full">
+      <label
+        htmlFor={id}
+        className="block text-sm font-medium text-black dark:text-white"
+      >
        {label}
      </label>
-      <div className="float-right">
+      <div className="ml-auto">
        <Switch
          id={id}
          {...props}
          checked={enabled}
          onChange={setEnabled}
          className={`${
-            enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-primaryDark'
+            enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-secondaryDark'
          }
          relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
        >
--- a/src/components/templates/PrimaryTemplate.tsx
+++ b/src/components/templates/PrimaryTemplate.tsx
@ -16,7 +16,7 @@ export const PrimaryTemplate = ({
  footer,
 }: PrimaryTemplateProps): JSX.Element => {
  return (
-    <div className="flex flex-col flex-auto min-w-0">
+    <div className="flex flex-col flex-auto h-full min-w-0">
      <div className="flex p-4 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
        {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
        <div className="flex-1 min-w-0">
@ -32,7 +32,7 @@ export const PrimaryTemplate = ({
          </div>
        </div>
      </div>
-      <div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark overflow-y-auto">
+      <div className="flex-auto flex-grow p-6 overflow-y-auto bg-white md:p-10 dark:bg-secondaryDark">
        {children}
      </div>
      {footer && (
--- a/src/pages/Nodes/Index.tsx
+++ b/src/pages/Nodes/Index.tsx
@ -89,9 +89,9 @@ export const Nodes = (): JSX.Element => {
          </Tab.List>
        </Drawer>
        <div className="w-full">
-          <Tab.Panels>
+          <Tab.Panels className="h-full">
            {nodes.map((node) => (
-              <Tab.Panel key={node.num}>
+              <Tab.Panel className="h-full" key={node.num}>
                <Node navOpen={navOpen} setNavOpen={setNavOpen} node={node} />
              </Tab.Panel>
            ))}
--- a/src/pages/Nodes/Node.tsx
+++ b/src/pages/Nodes/Node.tsx
@ -2,10 +2,13 @@ import React from 'react';

 import moment from 'moment';

+import { Card } from '@app/components/generic/Card';
 import { Chart } from '@app/components/generic/Chart';
+import { Input } from '@app/components/generic/Input';
+import { Toggle } from '@app/components/generic/Toggle';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { MenuIcon } from '@heroicons/react/outline';
+import { MenuIcon, PuzzleIcon } from '@heroicons/react/outline';
 import type { Protobuf } from '@meshtastic/meshtasticjs';

 export interface NodeProps {
@ -29,7 +32,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
        />
      }
    >
-      <div className="w-full space-y-2">
+      <div className="w-full space-y-4">
        <Chart
          title="Visitors Overview"
          description="Number of unique visitors"
@ -143,6 +146,24 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
            },
          ]}
        />
+        <Card
+          title="Settings"
+          description="Remote node settings"
+          lgPlaceholder={
+            <div className="w-full h-full text-black dark:text-white">
+              <PuzzleIcon className="w-24 h-24 m-auto" />
+              <div className="text-center">Placeholder</div>
+            </div>
+          }
+        >
+          <div className="p-10">
+            <form className="space-y-4">
+              <Input label={'Device Name'} />
+              <Input label={'Short Name'} maxLength={3} />
+              <Toggle label="Licenced Operator?" />
+            </form>
+          </div>
+        </Card>
      </div>
    </PrimaryTemplate>
  );