mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

New UI colors and changes

pull/21/head
Sacha Weatherstone 4 years ago
parent
5b10d4de59
commit
5f2503976d
13 changed files with 239 additions and 193 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      package.json
  2. 100
      pnpm-lock.yaml
  3. 28
      src/App.tsx
  4. 97
      src/components/menu/BottomNav.tsx
  5. 36
      src/components/menu/MobileNav.tsx
  6. 98
      src/components/menu/Navigation.tsx
  7. 28
      src/components/menu/buttons/ThemeToggle.tsx
  8. 7
      src/components/templates/PageLayout.tsx
  9. 8
      src/pages/Nodes/Index.tsx
  10. 6
      src/pages/Nodes/Sidebar.tsx
  11. 2
      src/pages/Plugins/Files.tsx
  12. 6
      tailwind.config.js
  13. 6
      vite.config.ts

10
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "meshtastic-web", "name": "meshtastic-web",
"version": "1.0", "version": "1.0.0",
"description": "Meshtastic web client", "description": "Meshtastic web client",
"license": "GPL-3.0-only", "license": "GPL-3.0-only",
"scripts": { "scripts": {
@ -13,8 +13,8 @@
}, },
"dependencies": { "dependencies": {
"@floating-ui/react-dom": "^0.4.3", "@floating-ui/react-dom": "^0.4.3",
"@headlessui/react": "^1.4.2", "@headlessui/react": "^1.4.3",
"@meshtastic/components": "^1.0.15", "@meshtastic/components": "^1.0.17",
"@meshtastic/meshtasticjs": "^0.6.38", "@meshtastic/meshtasticjs": "^0.6.38",
"@reduxjs/toolkit": "^1.7.1", "@reduxjs/toolkit": "^1.7.1",
"base64-js": "^1.5.1", "base64-js": "^1.5.1",
@ -26,7 +26,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-error-boundary": "^3.1.4", "react-error-boundary": "^3.1.4",
"react-file-icon": "^1.1.0", "react-file-icon": "^1.1.0",
"react-hook-form": "^7.23.0", "react-hook-form": "^7.24.0",
"react-i18next": "^11.15.3", "react-i18next": "^11.15.3",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-json-pretty": "^2.2.0", "react-json-pretty": "^2.2.0",
@ -64,7 +64,7 @@
"gzipper": "^6.2.1", "gzipper": "^6.2.1",
"postcss": "^8.4.5", "postcss": "^8.4.5",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"tailwindcss": "^3.0.13", "tailwindcss": "^3.0.15",
"tar": "^6.1.11", "tar": "^6.1.11",
"typescript": "^4.5.4", "typescript": "^4.5.4",
"vite": "^2.7.12", "vite": "^2.7.12",

100
pnpm-lock.yaml
View File

@ -2,8 +2,8 @@ lockfileVersion: 5.3
specifiers: specifiers:
'@floating-ui/react-dom': ^0.4.3 '@floating-ui/react-dom': ^0.4.3
'@headlessui/react': ^1.4.2 '@headlessui/react': ^1.4.3
'@meshtastic/components': ^1.0.15 '@meshtastic/components': ^1.0.17
'@meshtastic/meshtasticjs': ^0.6.38 '@meshtastic/meshtasticjs': ^0.6.38
'@reduxjs/toolkit': ^1.7.1 '@reduxjs/toolkit': ^1.7.1
'@types/mapbox-gl': ^2.6.0 '@types/mapbox-gl': ^2.6.0
@ -38,7 +38,7 @@ specifiers:
react-dom: ^17.0.2 react-dom: ^17.0.2
react-error-boundary: ^3.1.4 react-error-boundary: ^3.1.4
react-file-icon: ^1.1.0 react-file-icon: ^1.1.0
react-hook-form: ^7.23.0 react-hook-form: ^7.24.0
react-i18next: ^11.15.3 react-i18next: ^11.15.3
react-icons: ^4.3.1 react-icons: ^4.3.1
react-json-pretty: ^2.2.0 react-json-pretty: ^2.2.0
@ -48,7 +48,7 @@ specifiers:
react-use-clipboard: ^1.0.7 react-use-clipboard: ^1.0.7
rfc4648: ^1.5.1 rfc4648: ^1.5.1
swr: ^1.1.2 swr: ^1.1.2
tailwindcss: ^3.0.13 tailwindcss: ^3.0.15
tar: ^6.1.11 tar: ^6.1.11
timeago-react: ^3.0.4 timeago-react: ^3.0.4
type-route: ^0.6.0 type-route: ^0.6.0
@ -61,8 +61,8 @@ specifiers:
dependencies: dependencies:
'@floating-ui/react-dom': 0.4.3_b3482aaf5744fc7c2aeb7941b0e0a78f '@floating-ui/react-dom': 0.4.3_b3482aaf5744fc7c2aeb7941b0e0a78f
'@headlessui/react': 1.4.2[email protected][email protected] '@headlessui/react': 1.4.3[email protected][email protected]
'@meshtastic/components': 1.0.15_@[email protected] '@meshtastic/components': 1.0.17_@[email protected]
'@meshtastic/meshtasticjs': 0.6.38 '@meshtastic/meshtasticjs': 0.6.38
'@reduxjs/toolkit': 1.7[email protected][email protected] '@reduxjs/toolkit': 1.7[email protected][email protected]
base64-js: 1.5.1 base64-js: 1.5.1
@ -74,7 +74,7 @@ dependencies:
react-dom: 17.0[email protected] react-dom: 17.0[email protected]
react-error-boundary: 3.1[email protected] react-error-boundary: 3.1[email protected]
react-file-icon: 1.1[email protected][email protected] react-file-icon: 1.1[email protected][email protected]
react-hook-form: 7.23[email protected] react-hook-form: 7.24[email protected]
react-i18next: 11.15.3_bc514be083f1f06b28df24d5713fc600 react-i18next: 11.15.3_bc514be083f1f06b28df24d5713fc600
react-icons: 4.3[email protected] react-icons: 4.3[email protected]
react-json-pretty: 2.2[email protected][email protected] react-json-pretty: 2.2[email protected][email protected]
@ -112,7 +112,7 @@ devDependencies:
gzipper: 6.2.1 gzipper: 6.2.1
postcss: 8.4.5 postcss: 8.4.5
prettier: 2.5.1 prettier: 2.5.1
tailwindcss: 3.0.13_ef48b3b8837f8a23677bffe8f9cd866d tailwindcss: 3.0.15_ef48b3b8837f8a23677bffe8f9cd866d
tar: 6.1.11 tar: 6.1.11
typescript: 4.5.4 typescript: 4.5.4
vite: 2.7.12 vite: 2.7.12
@ -1443,8 +1443,8 @@ packages:
- '@types/react' - '@types/react'
dev: false dev: false
/@headlessui/react/1.4.2[email protected][email protected]: /@headlessui/react/1.4.3[email protected][email protected]:
resolution: {integrity: sha512-N8tv7kLhg9qGKBkVdtg572BvKvWhmiudmeEpOCyNwzOsZHCXBtl8AazGikIfUS+vBoub20Fse3BjawXDVPPdug==} resolution: {integrity: sha512-n2IQkaaw0aAAlQS5MEXsM4uRK+w18CrM72EqnGRl/UBOQeQajad8oiKXR9Nk15jOzTFQjpxzrZMf1NxHidFBiw==}
engines: {node: '>=10'} engines: {node: '>=10'}
peerDependencies: peerDependencies:
react: ^16 || ^17 || ^18 react: ^16 || ^17 || ^18
@ -1524,8 +1524,8 @@ packages:
engines: {node: '>=6.0.0'} engines: {node: '>=6.0.0'}
dev: false dev: false
/@meshtastic/components/1.0.15_@[email protected]: /@meshtastic/components/1.0.17_@[email protected]:
resolution: {integrity: sha512-+ZT2I6shgtDTKBm3qpillRvG89wDxDf4gpD/EDhvECAjSTIFYjo0m3kiDSytVjJw/sLnj3LJljQ3U4o75J3uqw==} resolution: {integrity: sha512-e9ETFrzQUtpxVHc6NiiYMCkr7Ml4v7xlbILWK3LV48ALMDojBAFKLHdxuClpt0Rszo91ORACSSVpUkJNfWnp1A==}
dependencies: dependencies:
inter-ui: 3.19.3 inter-ui: 3.19.3
react: 17.0.2 react: 17.0.2
@ -1588,7 +1588,7 @@ packages:
reselect: 4.1.5 reselect: 4.1.5
dev: false dev: false
/@rollup/plugin-babel/5.3.0_@[email protected][email protected]3.0: /@rollup/plugin-babel/5.3.0_@[email protected][email protected]4.0:
resolution: {integrity: sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw==} resolution: {integrity: sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw==}
engines: {node: '>= 10.0.0'} engines: {node: '>= 10.0.0'}
peerDependencies: peerDependencies:
@ -1601,36 +1601,36 @@ packages:
dependencies: dependencies:
'@babel/core': 7.16.7 '@babel/core': 7.16.7
'@babel/helper-module-imports': 7.16.7 '@babel/helper-module-imports': 7.16.7
'@rollup/pluginutils': 3.1[email protected]3.0 '@rollup/pluginutils': 3.1[email protected]4.0
rollup: 2.63.0 rollup: 2.64.0
dev: true dev: true
/@rollup/plugin-node-resolve/[email protected]3.0: /@rollup/plugin-node-resolve/[email protected]4.0:
resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==} resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
engines: {node: '>= 10.0.0'} engines: {node: '>= 10.0.0'}
peerDependencies: peerDependencies:
rollup: ^1.20.0||^2.0.0 rollup: ^1.20.0||^2.0.0
dependencies: dependencies:
'@rollup/pluginutils': 3.1[email protected]3.0 '@rollup/pluginutils': 3.1[email protected]4.0
'@types/resolve': 1.17.1 '@types/resolve': 1.17.1
builtin-modules: 3.2.0 builtin-modules: 3.2.0
deepmerge: 4.2.2 deepmerge: 4.2.2
is-module: 1.0.0 is-module: 1.0.0
resolve: 1.21.0 resolve: 1.21.0
rollup: 2.63.0 rollup: 2.64.0
dev: true dev: true
/@rollup/plugin-replace/[email protected]3.0: /@rollup/plugin-replace/[email protected]4.0:
resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==} resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
peerDependencies: peerDependencies:
rollup: ^1.20.0 || ^2.0.0 rollup: ^1.20.0 || ^2.0.0
dependencies: dependencies:
'@rollup/pluginutils': 3.1[email protected]3.0 '@rollup/pluginutils': 3.1[email protected]4.0
magic-string: 0.25.7 magic-string: 0.25.7
rollup: 2.63.0 rollup: 2.64.0
dev: true dev: true
/@rollup/pluginutils/[email protected]3.0: /@rollup/pluginutils/[email protected]4.0:
resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==} resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
engines: {node: '>= 8.0.0'} engines: {node: '>= 8.0.0'}
peerDependencies: peerDependencies:
@ -1639,7 +1639,7 @@ packages:
'@types/estree': 0.0.39 '@types/estree': 0.0.39
estree-walker: 1.0.1 estree-walker: 1.0.1
picomatch: 2.3.1 picomatch: 2.3.1
rollup: 2.63.0 rollup: 2.64.0
dev: true dev: true
/@rollup/pluginutils/4.1.2: /@rollup/pluginutils/4.1.2:
@ -2313,7 +2313,7 @@ packages:
hasBin: true hasBin: true
dependencies: dependencies:
caniuse-lite: 1.0.30001299 caniuse-lite: 1.0.30001299
electron-to-chromium: 1.4.45 electron-to-chromium: 1.4.46
escalade: 3.1.1 escalade: 3.1.1
node-releases: 2.0.1 node-releases: 2.0.1
picocolors: 1.0.0 picocolors: 1.0.0
@ -2559,7 +2559,7 @@ packages:
object-is: 1.1.5 object-is: 1.1.5
object-keys: 1.1.1 object-keys: 1.1.1
object.assign: 4.1.2 object.assign: 4.1.2
regexp.prototype.flags: 1.3.2 regexp.prototype.flags: 1.4.1
side-channel: 1.0.4 side-channel: 1.0.4
which-boxed-primitive: 1.0.2 which-boxed-primitive: 1.0.2
which-collection: 1.0.1 which-collection: 1.0.1
@ -2678,8 +2678,8 @@ packages:
jake: 10.8.2 jake: 10.8.2
dev: true dev: true
/electron-to-chromium/1.4.45: /electron-to-chromium/1.4.46:
resolution: {integrity: sha512-czF9eYVuOmlY/vxyMQz2rGlNSjZpxNQYBe1gmQv7al171qOIhgyO9k7D5AKlgeTCSPKk+LHhj5ZyIdmEub9oNg==} resolution: {integrity: sha512-UtV0xUA/dibCKKP2JMxOpDtXR74zABevuUEH4K0tvduFSIoxRVcYmQsbB51kXsFTX8MmOyWMt8tuZAlmDOqkrQ==}
dev: true dev: true
/emoji-regex/8.0.0: /emoji-regex/8.0.0:
@ -3350,8 +3350,8 @@ packages:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
dev: true dev: true
/fast-glob/3.2.10: /fast-glob/3.2.11:
resolution: {integrity: sha512-s9nFhFnvR63wls6/kM88kQqDhMu0AfdjqouE2l5GVQPbqLgyFjjU5ry/r2yKsJxpb9Py1EYNqieFrmMaX4v++A==} resolution: {integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==}
engines: {node: '>=8.6.0'} engines: {node: '>=8.6.0'}
dependencies: dependencies:
'@nodelib/fs.stat': 2.0.5 '@nodelib/fs.stat': 2.0.5
@ -3576,7 +3576,7 @@ packages:
dependencies: dependencies:
array-union: 2.1.0 array-union: 2.1.0
dir-glob: 3.0.1 dir-glob: 3.0.1
fast-glob: 3.2.10 fast-glob: 3.2.11
ignore: 5.2.0 ignore: 5.2.0
merge2: 1.4.1 merge2: 1.4.1
slash: 3.0.0 slash: 3.0.0
@ -4707,8 +4707,8 @@ packages:
tinycolor2: 1.4.2 tinycolor2: 1.4.2
dev: false dev: false
/react-hook-form/7.23[email protected]: /react-hook-form/7.24[email protected]:
resolution: {integrity: sha512-bO1JCkPAjmpuKhfUpFhsjWn2RIPgWUpep8qpMAKCoc8NM8ytBA5nDx5p99wNhZWrblYQFvU+dVy9g1oYo/JKoQ==} resolution: {integrity: sha512-N2GT4wmdcgP5bw72q/a+vKUBqy14iNQz+4vaFBJLz9Bw+KNYKUjTzcV/kHfOYbcboMeHP2zgf4i4wTmAwrXssg==}
engines: {node: '>=12.22.0'} engines: {node: '>=12.22.0'}
peerDependencies: peerDependencies:
react: ^16.8.0 || ^17 react: ^16.8.0 || ^17
@ -4916,8 +4916,8 @@ packages:
'@babel/runtime': 7.16.7 '@babel/runtime': 7.16.7
dev: true dev: true
/regexp.prototype.flags/1.3.2: /regexp.prototype.flags/1.4.1:
resolution: {integrity: sha512-uaro52GSI5be7+ssxjxxnLlleDBN3VHIWQHvBhfeeSXRQkuV/0Jo/hBU+omYH6NUkM+LYpTHnRRf2W/v+x7LzQ==} resolution: {integrity: sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
dependencies: dependencies:
call-bind: 1.0.2 call-bind: 1.0.2
@ -5014,22 +5014,22 @@ packages:
magic-string: 0.25.7 magic-string: 0.25.7
dev: true dev: true
/rollup-plugin-terser/[email protected]3.0: /rollup-plugin-terser/[email protected]4.0:
resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==} resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
peerDependencies: peerDependencies:
rollup: ^2.0.0 rollup: ^2.0.0
dependencies: dependencies:
'@babel/code-frame': 7.16.7 '@babel/code-frame': 7.16.7
jest-worker: 26.6.2 jest-worker: 26.6.2
rollup: 2.63.0 rollup: 2.64.0
serialize-javascript: 4.0.0 serialize-javascript: 4.0.0
terser: 5.10.0 terser: 5.10.0
transitivePeerDependencies: transitivePeerDependencies:
- acorn - acorn
dev: true dev: true
/rollup/2.63.0: /rollup/2.64.0:
resolution: {integrity: sha512-nps0idjmD+NXl6OREfyYXMn/dar3WGcyKn+KBzPdaLecub3x/LrId0wUcthcr8oZUAcZAR8NKcfGGFlNgGL1kQ==} resolution: {integrity: sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==}
engines: {node: '>=10.0.0'} engines: {node: '>=10.0.0'}
hasBin: true hasBin: true
optionalDependencies: optionalDependencies:
@ -5231,7 +5231,7 @@ packages:
get-intrinsic: 1.1.1 get-intrinsic: 1.1.1
has-symbols: 1.0.2 has-symbols: 1.0.2
internal-slot: 1.0.3 internal-slot: 1.0.3
regexp.prototype.flags: 1.3.2 regexp.prototype.flags: 1.4.1
side-channel: 1.0.4 side-channel: 1.0.4
dev: true dev: true
@ -5357,8 +5357,8 @@ packages:
strip-ansi: 6.0.1 strip-ansi: 6.0.1
dev: true dev: true
/tailwindcss/3.0.13_ef48b3b8837f8a23677bffe8f9cd866d: /tailwindcss/3.0.15_ef48b3b8837f8a23677bffe8f9cd866d:
resolution: {integrity: sha512-raRPGFwQSGXn/3h0ttHND9jyPYfqk/ur2NXtlQuK25+ZnrCjlH1s1j4/oPswHGMoZzGNykUVycZ/LcROanUE0A==} resolution: {integrity: sha512-bT2iy7FtjwgsXik4ZoJnHXR+SRCiGR1W95fVqpLZebr64m4ahwUwRbIAc5w5+2fzr1YF4Ct2eI7dojMRRl8sVQ==}
engines: {node: '>=12.13.0'} engines: {node: '>=12.13.0'}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
@ -5374,7 +5374,7 @@ packages:
detective: 5.2.0 detective: 5.2.0
didyoumean: 1.2.2 didyoumean: 1.2.2
dlv: 1.1.3 dlv: 1.1.3
fast-glob: 3.2.10 fast-glob: 3.2.11
glob-parent: 6.0.2 glob-parent: 6.0.2
is-glob: 4.0.3 is-glob: 4.0.3
normalize-path: 3.0.0 normalize-path: 3.0.0
@ -5690,9 +5690,9 @@ packages:
vite: ^2.0.0 vite: ^2.0.0
dependencies: dependencies:
debug: 4.3.3 debug: 4.3.3
fast-glob: 3.2.10 fast-glob: 3.2.11
pretty-bytes: 5.6.0 pretty-bytes: 5.6.0
rollup: 2.63.0 rollup: 2.64.0
vite: 2.7.12 vite: 2.7.12
workbox-build: 6.4.2 workbox-build: 6.4.2
workbox-window: 6.4.2 workbox-window: 6.4.2
@ -5721,7 +5721,7 @@ packages:
esbuild: 0.13.15 esbuild: 0.13.15
postcss: 8.4.5 postcss: 8.4.5
resolve: 1.21.0 resolve: 1.21.0
rollup: 2.63.0 rollup: 2.64.0
optionalDependencies: optionalDependencies:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true dev: true
@ -5826,9 +5826,9 @@ packages:
'@babel/core': 7.16.7 '@babel/core': 7.16.7
'@babel/preset-env': 7.16.8_@[email protected] '@babel/preset-env': 7.16.8_@[email protected]
'@babel/runtime': 7.16.7 '@babel/runtime': 7.16.7
'@rollup/plugin-babel': 5.3.0_@[email protected][email protected]3.0 '@rollup/plugin-babel': 5.3.0_@[email protected][email protected]4.0
'@rollup/plugin-node-resolve': 11.2[email protected]3.0 '@rollup/plugin-node-resolve': 11.2[email protected]4.0
'@rollup/plugin-replace': 2.4[email protected]3.0 '@rollup/plugin-replace': 2.4[email protected]4.0
'@surma/rollup-plugin-off-main-thread': 2.2.3 '@surma/rollup-plugin-off-main-thread': 2.2.3
ajv: 8.8.2 ajv: 8.8.2
common-tags: 1.8.2 common-tags: 1.8.2
@ -5837,8 +5837,8 @@ packages:
glob: 7.2.0 glob: 7.2.0
lodash: 4.17.21 lodash: 4.17.21
pretty-bytes: 5.6.0 pretty-bytes: 5.6.0
rollup: 2.63.0 rollup: 2.64.0
rollup-plugin-terser: 7.0[email protected]3.0 rollup-plugin-terser: 7.0[email protected]4.0
source-map: 0.8.0-beta.0 source-map: 0.8.0-beta.0
source-map-url: 0.4.1 source-map-url: 0.4.1
stringify-object: 3.3.0 stringify-object: 3.3.0

28
src/App.tsx
View File

@ -3,13 +3,8 @@ import React from 'react';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
import { FiBell } from 'react-icons/fi'; import { FiBell } from 'react-icons/fi';
import { DeviceStatus } from '@app/components/menu/buttons/DeviceStatus';
import { Connection } from '@components/Connection'; import { Connection } from '@components/Connection';
import { MobileNavToggle } from '@components/menu/buttons/MobileNavToggle';
import { Notifications } from '@components/menu/buttons/Notifications';
import { ThemeToggle } from '@components/menu/buttons/ThemeToggle';
import { Logo } from '@components/menu/Logo'; import { Logo } from '@components/menu/Logo';
import { MobileNav } from '@components/menu/MobileNav';
import { Navigation } from '@components/menu/Navigation'; import { Navigation } from '@components/menu/Navigation';
import { useRoute } from '@core/router'; import { useRoute } from '@core/router';
import { requestNotificationPermission } from '@core/utils/notifications'; import { requestNotificationPermission } from '@core/utils/notifications';
@ -23,6 +18,7 @@ import { Settings } from '@pages/settings/Index';
import { ErrorFallback } from './components/ErrorFallback'; import { ErrorFallback } from './components/ErrorFallback';
import { MapboxProvider } from './components/MapBox/MapboxProvider'; import { MapboxProvider } from './components/MapBox/MapboxProvider';
import { BottomNav } from './components/menu/BottomNav';
import { addNotification, removeNotification } from './core/slices/appSlice'; import { addNotification, removeNotification } from './core/slices/appSlice';
export const App = (): JSX.Element => { export const App = (): JSX.Element => {
@ -65,27 +61,20 @@ export const App = (): JSX.Element => {
return ( return (
<div className={`h-screen w-screen ${darkMode ? 'dark' : ''}`}> <div className={`h-screen w-screen ${darkMode ? 'dark' : ''}`}>
<Connection /> <Connection />
<div className="flex flex-col h-full bg-gray-200 dark:bg-primaryDark"> <div className="flex flex-col h-full bg-gray-200 dark:bg-secondaryDark">
<div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary"> <div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary">
<div className="w-full overflow-hidden bg-white border-b border-gray-300 md:mt-6 md:mx-6 md:py-2 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark"> <div className="w-full overflow-hidden bg-white border-b border-gray-300 dark:border-gray-600 md:shadow-md dark:bg-secondaryDark">
<div className="flex items-center justify-between h-12 px-4 md:px-6"> <div className="flex items-center justify-between h-12 px-4">
<div className="hidden md:flex"> <div className="flex">
<Logo /> <Logo />
</div> </div>
<Navigation className="hidden md:flex" /> <Navigation className="flex" />
<MobileNavToggle />
<div className="flex items-center space-x-2">
<DeviceStatus />
<Notifications />
<ThemeToggle />
</div>
</div> </div>
</div> </div>
</div> </div>
<MobileNav />
<div className="flex flex-grow w-full min-h-0 md:px-6 md:mb-6"> <div className="flex flex-grow w-full min-h-0">
<div className="flex w-full bg-gray-100 md:shadow-xl md:overflow-hidden dark:bg-secondaryDark md:rounded-b-3xl"> <div className="flex w-full bg-gray-100 md:shadow-xl md:overflow-hidden dark:bg-secondaryDark">
<ErrorBoundary FallbackComponent={ErrorFallback}> <ErrorBoundary FallbackComponent={ErrorFallback}>
{route.name === 'messages' && <Messages />} {route.name === 'messages' && <Messages />}
{route.name === 'nodes' && ( {route.name === 'nodes' && (
@ -99,6 +88,7 @@ export const App = (): JSX.Element => {
</ErrorBoundary> </ErrorBoundary>
</div> </div>
</div> </div>
<BottomNav />
</div> </div>
</div> </div>
); );

97
src/components/menu/BottomNav.tsx
View File

@ -0,0 +1,97 @@
import React from 'react';
import {
FiBell,
FiBluetooth,
FiCpu,
FiGitBranch,
FiMoon,
FiSun,
FiWifi,
} from 'react-icons/fi';
import {
connType,
openConnectionModal,
setDarkModeEnabled,
} from '@app/core/slices/appSlice';
import { useAppDispatch } from '@hooks/useAppDispatch';
import { useAppSelector } from '@hooks/useAppSelector';
import { Types } from '@meshtastic/meshtasticjs';
// export interface BottomNavProps {
// }
export const BottomNav = (): JSX.Element => {
const dispatch = useAppDispatch();
const meshtasticState = useAppSelector((state) => state.meshtastic);
const appState = useAppSelector((state) => state.app);
// @ts-ignore define version string global
const version = window.__COMMIT_HASH__ as string;
return (
<div className="flex justify-between bg-white border-t border-gray-300 dark:bg-secondaryDark dark:border-gray-600">
<div
className={`flex p-1 cursor-pointer group w-min hover:bg-opacity-80 ${
[
Types.DeviceStatusEnum.DEVICE_CONNECTED,
Types.DeviceStatusEnum.DEVICE_CONFIGURED,
].includes(meshtasticState.deviceStatus)
? 'bg-primary'
: [
Types.DeviceStatusEnum.DEVICE_CONNECTING,
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
].includes(meshtasticState.deviceStatus)
? 'bg-yellow-400'
: 'bg-gray-400'
}`}
onClick={(): void => {
dispatch(dispatch(openConnectionModal()));
}}
>
{appState.connType === connType.BLE ? (
<FiBluetooth className="mr-1 p-0.5 group-active:scale-90" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="mr-1 p-0.5 group-active:scale-90" />
) : (
<FiWifi className="mr-1 p-0.5 group-active:scale-90" />
)}
<div className="text-xs font-medium truncate group-active:scale-90">
{meshtasticState.nodes.find(
(node) => node.number === meshtasticState.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Disconnected'}
</div>
</div>
<div className="flex">
<a
href={`https://github.com/meshtastic/meshtastic-web/commit/${version}`}
target="_blank"
rel="noreferrer"
className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark"
>
<FiGitBranch className="p-0.5 mr-1 group-active:scale-90" />
<p className="text-xs opacity-60">{version}</p>
</a>
<div className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark">
<FiBell className="p-0.5 mr-1 group-active:scale-90" />
<p className="text-xs opacity-60">Example Notification</p>
</div>
<div
className="p-1 border-l border-gray-300 cursor-pointer group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark"
onClick={(): void => {
dispatch(setDarkModeEnabled(!appState.darkMode));
}}
>
{appState.darkMode ? (
<FiSun className="p-0.5 group-active:scale-90" />
) : (
<FiMoon className="p-0.5 group-active:scale-90" />
)}
</div>
</div>
</div>
);
};

36
src/components/menu/MobileNav.tsx
View File

@ -1,36 +0,0 @@
import type React from 'react';
import { Drawer } from '@components/generic/Drawer';
import { closeMobileNav } from '@core/slices/appSlice';
import { useAppDispatch } from '@hooks/useAppDispatch';
import { useAppSelector } from '@hooks/useAppSelector';
import { Logo } from './Logo';
import { Navigation } from './Navigation';
export const MobileNav = (): JSX.Element => {
const dispatch = useAppDispatch();
const mobileNavOpen = useAppSelector((state) => state.app.mobileNavOpen);
return (
<Drawer
open={mobileNavOpen}
onClose={(): void => {
dispatch(closeMobileNav());
}}
className="z-50"
>
<div className="flex flex-col">
<div className="m-auto my-6">
<Logo />
</div>
<Navigation
onClick={(): void => {
dispatch(closeMobileNav());
}}
/>
</div>
</Drawer>
);
};

98
src/components/menu/Navigation.tsx
View File

@ -1,9 +1,9 @@
import type React from 'react'; import type React from 'react';
import { FiGrid, FiMessageSquare, FiPackage, FiSettings } from 'react-icons/fi'; import { FiGrid, FiMessageSquare, FiPackage, FiSettings } from 'react-icons/fi';
import type { Link } from 'type-route';
import { routes, useRoute } from '@core/router'; import { routes, useRoute } from '@core/router';
import { Button } from '@meshtastic/components';
type DefaultDivProps = JSX.IntrinsicElements['div']; type DefaultDivProps = JSX.IntrinsicElements['div'];
@ -15,51 +15,59 @@ export const Navigation = ({
...props ...props
}: NavigationProps): JSX.Element => { }: NavigationProps): JSX.Element => {
const route = useRoute(); const route = useRoute();
return ( return (
<div <div className="flex h-full mt-2 border-t border-l border-r border-gray-300 rounded-t dark:text-white dark:border-gray-600">
className={`px-4 md:space-x-2 space-y-2 md:space-y-0 ${className}`} <NavLink
{...props} name="Messages"
> icon={
<div onClick={onClick}> <FiMessageSquare className="w-5 h-5 my-auto group-active:scale-90" />
<Button }
icon={<FiMessageSquare className="w-5 h-5" />} active={route.name === 'messages'}
active={route.name === 'messages'} link={routes.messages().link}
className="w-full md:w-auto" />
{...routes.messages().link}
> <NavLink
Messages name="Nodes"
</Button> icon={<FiGrid className="w-5 h-5 my-auto group-active:scale-90" />}
</div> active={route.name === 'nodes'}
<div onClick={onClick}> link={routes.nodes().link}
<Button />
icon={<FiGrid className="w-5 h-5" />}
className="w-full md:w-auto" <NavLink
active={route.name === 'nodes'} name="Plugins"
{...routes.nodes().link} icon={<FiPackage className="w-5 h-5 my-auto group-active:scale-90" />}
> active={route.name === 'plugins'}
Nodes link={routes.plugins().link}
</Button> />
</div>
<div onClick={onClick}> <NavLink
<Button name="Settings"
icon={<FiPackage className="w-5 h-5" />} icon={<FiSettings className="w-5 h-5 my-auto group-active:scale-90" />}
className="w-full md:w-auto" active={route.name === 'settings'}
active={route.name === 'plugins'} link={routes.settings().link}
{...routes.plugins().link} />
>
Plugins
</Button>
</div>
<div onClick={onClick}>
<Button
icon={<FiSettings className="w-5 h-5" />}
className="w-full md:w-auto"
active={route.name === 'settings'}
{...routes.settings().link}
>
Settings
</Button>
</div>
</div> </div>
); );
}; };
interface NavLinkProps {
name: string;
icon: JSX.Element;
active: boolean;
link: Link;
}
const NavLink = ({ name, icon, active, link }: NavLinkProps): JSX.Element => {
return (
<a
className={`flex h-full gap-1 p-2 cursor-pointer group hover:bg-gray-200 dark:hover:bg-primaryDark ${
active ? 'dark:bg-primaryDark bg-gray-200' : 'bg-transparent'
}`}
{...link}
>
{icon}
<div className="hidden my-auto md:flex">{name}</div>
</a>
);
};

28
src/components/menu/buttons/ThemeToggle.tsx
View File

@ -1,28 +0,0 @@
import type React from 'react';
import { FiMoon, FiSun } from 'react-icons/fi';
import { setDarkModeEnabled } from '@core/slices/appSlice';
import { useAppDispatch } from '@hooks/useAppDispatch';
import { useAppSelector } from '@hooks/useAppSelector';
import { IconButton } from '@meshtastic/components';
export const ThemeToggle = (): JSX.Element => {
const dispatch = useAppDispatch();
const darkMode = useAppSelector((state) => state.app.darkMode);
return (
<IconButton
icon={
darkMode ? (
<FiSun className="w-5 h-5" />
) : (
<FiMoon className="w-5 h-5" />
)
}
onClick={(): void => {
dispatch(setDarkModeEnabled(!darkMode));
}}
/>
);
};

7
src/components/templates/PageLayout.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { FiXCircle } from 'react-icons/fi'; import { FiMenu, FiXCircle } from 'react-icons/fi';
import { Drawer } from '@components/generic/Drawer'; import { Drawer } from '@components/generic/Drawer';
import type { SidebarItemProps } from '@components/generic/SidebarItem'; import type { SidebarItemProps } from '@components/generic/SidebarItem';
@ -37,10 +37,11 @@ export const PageLayout = ({
}} }}
> >
<Tab.List className="flex flex-col border-b border-gray-300 divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600"> <Tab.List className="flex flex-col border-b border-gray-300 divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
<div className="flex items-center justify-between m-6 mr-6"> <div className="flex items-center justify-between m-4">
<div className="text-4xl font-extrabold leading-none tracking-tight"> <div className="text-2xl font-extrabold leading-none tracking-tight">
{title} {title}
</div> </div>
<IconButton icon={<FiMenu />} />
<div className="md:hidden"> <div className="md:hidden">
<IconButton <IconButton
icon={<FiXCircle className="w-5 h-5" />} icon={<FiXCircle className="w-5 h-5" />}

8
src/pages/Nodes/Index.tsx
View File

@ -14,6 +14,8 @@ import { IconButton } from '@meshtastic/components';
import { NodeCard } from './NodeCard'; import { NodeCard } from './NodeCard';
import { Sidebar } from './Sidebar'; import { Sidebar } from './Sidebar';
// const getMarkerRadius = ():number => {}
export const Nodes = (): JSX.Element => { export const Nodes = (): JSX.Element => {
const myNodeInfo = useAppSelector((state) => state.meshtastic.radio.hardware); const myNodeInfo = useAppSelector((state) => state.meshtastic.radio.hardware);
@ -99,7 +101,11 @@ export const Nodes = (): JSX.Element => {
setSelectedNode(node); setSelectedNode(node);
setSidebarOpen(true); setSidebarOpen(true);
}} }}
className="z-50 bg-blue-500 border-2 border-blue-500 rounded-full bg-opacity-30" className={`z-50 border-2 rounded-full bg-opacity-30 ${
node.number === selectedNode?.number
? 'bg-green-500 border-green-500'
: 'bg-blue-500 border-blue-500'
}`}
> >
<div className="m-4 "> <div className="m-4 ">
<FiMapPin className="w-5 h-5" /> <FiMapPin className="w-5 h-5" />

6
src/pages/Nodes/Sidebar.tsx
View File

@ -76,9 +76,9 @@ export const Sidebar = ({ node, closeSidebar }: SidebarProps): JSX.Element => {
<Tab.Panel className="p-2">Content 1</Tab.Panel> <Tab.Panel className="p-2">Content 1</Tab.Panel>
<Tab.Panel className="p-2"> <Tab.Panel className="p-2">
{node.currentPosition && ( {node.currentPosition && (
<div className="flex justify-between h-10 px-1 bg-transparent border border-gray-300 rounded-md select-none dark:border-gray-600"> <div className="flex justify-between h-10 px-1 text-gray-500 bg-transparent bg-gray-200 border border-gray-300 rounded-md select-none dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
<div className="my-auto"> <div className="px-1 my-auto">
{(node.currentPosition.latitudeI / 1e7).toPrecision(6)}, {(node.currentPosition.latitudeI / 1e7).toPrecision(6)},&nbsp;
{(node.currentPosition?.longitudeI / 1e7).toPrecision(6)} {(node.currentPosition?.longitudeI / 1e7).toPrecision(6)}
</div> </div>
<IconButton <IconButton

2
src/pages/Plugins/Files.tsx
View File

@ -74,7 +74,7 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
{data.data.files.map((file: IFile) => ( {data.data.files.map((file: IFile) => (
<div <div
key={file.name} key={file.name}
className="flex justify-between mx-4 bg-gray-300 rounded-md dark:bg-gray-600 " className="flex justify-between mx-4 bg-gray-300 rounded-md dark:bg-secondaryDark "
> >
<div className="flex p-2 max-h-12"> <div className="flex p-2 max-h-12">
<div className="flex w-12"> <div className="flex w-12">

6
tailwind.config.js
View File

@ -10,8 +10,10 @@ module.exports = {
extend: { extend: {
colors: { colors: {
primary: '#67ea94', primary: '#67ea94',
primaryDark: '#1E293B', // primaryDark: '#1E293B',
secondaryDark: '#0F172A', primaryDark: '#25262C',
// secondaryDark: '#0F172A',
secondaryDark: '#1C1D23',
}, },
boxShadow: { boxShadow: {
border: '0 0 0 1px #67ea94', border: '0 0 0 1px #67ea94',

6
vite.config.ts
View File

@ -1,3 +1,4 @@
import { execSync } from 'child_process';
import path from 'path'; import path from 'path';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import importToCDN from 'vite-plugin-cdn-import'; import importToCDN from 'vite-plugin-cdn-import';
@ -7,6 +8,11 @@ import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
define: {
__COMMIT_HASH__: JSON.stringify(
execSync('git rev-parse --short HEAD').toString().trim(),
),
},
plugins: [ plugins: [
react(), react(),
importToCDN({ importToCDN({

Write Preview
Loading…
Cancel
Save