Skip to content

Commit 2ea9e37

Browse files
sachawsachaw
committed
Update deps & minor UI cleanup
1 parent a9d726c commit 2ea9e37

12 files changed

+1178
-118
lines changed

‎.vscode/settings.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"css.validate": false,
3+
"editor.quickSuggestions": {
4+
"strings": true
5+
}
6+
}

‎package.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,34 @@
22
"scripts": {
33
"start": "NODE_ENV=development snowpack dev",
44
"build": "snowpack build",
5-
"test": "web-test-runner \"src/**/*.test.tsx\"",
5+
"package": "yarn gzipper c build output",
66
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
77
"lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
88
},
99
"dependencies": {
10+
"@headlessui/react": "^1.1.1",
11+
"@heroicons/react": "^1.0.1",
1012
"@meshtastic/meshtasticjs": "^0.6.9",
11-
"add": "^2.0.6",
1213
"react": "^17.0.0",
1314
"react-dom": "^17.0.0",
1415
"react-flags-select": "^2.1.2",
15-
"react-icons": "^4.2.0",
1616
"yarn": "^1.22.10"
1717
},
1818
"devDependencies": {
1919
"@snowpack/plugin-dotenv": "^2.0.5",
2020
"@snowpack/plugin-postcss": "^1.2.2",
21-
"@snowpack/plugin-react-refresh": "^2.4.0",
21+
"@snowpack/plugin-react-refresh": "^2.5.0",
2222
"@snowpack/plugin-typescript": "^1.2.0",
23-
"@types/react": "^17.0.0",
23+
"@types/react": "^17.0.4",
2424
"@types/react-dom": "^17.0.0",
2525
"@types/snowpack-env": "^2.3.2",
2626
"autoprefixer": "^10.2.5",
27-
"gzipper": "^4.4.0",
28-
"postcss": "^8.2.10",
27+
"gzipper": "^4.5.0",
28+
"postcss": "^8.2.13",
2929
"postcss-cli": "^8.3.1",
3030
"prettier": "^2.0.5",
31-
"snowpack": "^3.0.1",
32-
"tailwindcss": "^2.1.1",
33-
"typescript": "^4.0.0"
31+
"snowpack": "^3.3.7",
32+
"tailwindcss": "^2.1.2",
33+
"typescript": "^4.2.4"
3434
}
3535
}

‎src/Main.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22

3-
import { FaBars, FaPaperPlane } from 'react-icons/fa';
4-
3+
import { MenuIcon, PaperAirplaneIcon } from '@heroicons/react/outline';
54
import type {
65
IHTTPConnection,
76
Protobuf,
@@ -76,10 +75,10 @@ const Main = (props: MainProps) => {
7675
props.IsReady ? 'cursor-text' : 'cursor-not-allowed'
7776
}`}
7877
/>
79-
<span className="z-10 h-full text-gray-400 absolute w-8 right-0 py-4">
80-
<FaPaperPlane
78+
<span className="flex z-10 h-full text-gray-400 absolute w-8 right-0">
79+
<PaperAirplaneIcon
8180
onClick={sendMessage}
82-
className={`text-xl hover:text-gray-500 ${
81+
className={`text-xl hover:text-gray-500 h-6 w-6 my-auto ${
8382
props.IsReady ? 'cursor-pointer' : 'cursor-not-allowed'
8483
}`}
8584
/>
@@ -91,7 +90,7 @@ const Main = (props: MainProps) => {
9190
setMobileNavOpen(!mobileNavOpen);
9291
}}
9392
>
94-
<FaBars className="m-auto" />
93+
<MenuIcon className="m-auto h-6 2-6" />
9594
</div>
9695
</div>
9796
</div>

‎src/components/ChatMessage.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import React from 'react';
22

3-
import { FaCheckCircle, FaCircle, FaUser } from 'react-icons/fa';
4-
3+
import {
4+
CheckCircleIcon,
5+
DotsCircleHorizontalIcon,
6+
UserIcon,
7+
} from '@heroicons/react/outline';
58
import type { Types } from '@meshtastic/meshtasticjs';
69

710
interface ChatMessageProps {
@@ -20,7 +23,7 @@ const ChatMessage = (props: ChatMessageProps) => {
2023
: 'bg-green-200'
2124
}`}
2225
>
23-
<FaUser className="m-auto" />
26+
<UserIcon className="m-auto w-5 h-5" />
2427
</div>
2528
<div className="flex flex-col container px-2 items-start">
2629
<div
@@ -50,9 +53,9 @@ const ChatMessage = (props: ChatMessageProps) => {
5053
<div className="flex justify-between text-gray-600">
5154
<span className="inline-block">{props.message.message.data}</span>
5255
{props.message.ack ? (
53-
<FaCheckCircle className="my-auto" />
56+
<CheckCircleIcon className="my-auto w-5 h-5" />
5457
) : (
55-
<FaCircle className=" text-lg my-auto animate-pulse" />
58+
<DotsCircleHorizontalIcon className="my-auto animate-pulse w-5 h-5" />
5659
)}
5760
</div>
5861
</div>

‎src/components/Header.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import React from 'react';
22

3-
import { FaBroadcastTower, FaMobileAlt } from 'react-icons/fa';
4-
3+
import {
4+
DeviceMobileIcon,
5+
StatusOfflineIcon,
6+
StatusOnlineIcon,
7+
} from '@heroicons/react/outline';
58
import { Types } from '@meshtastic/meshtasticjs';
69

710
import typelogo from '../../public/typelogo.svg';
@@ -32,7 +35,12 @@ const Header = (props: HeaderProps) => {
3235
: 'bg-green-400'
3336
}`}
3437
></div>
35-
<FaBroadcastTower className="m-auto ml-1 text-xl" />
38+
{new Date(props.LastMeshInterraction) >
39+
new Date(Date.now() - 40000) ? (
40+
<StatusOnlineIcon className="m-auto ml-1 h-5 w-5" />
41+
) : (
42+
<StatusOfflineIcon className="m-auto ml-1 h-5 w-5" />
43+
)}
3644
</div>
3745

3846
<div className="flex pl-4">
@@ -48,7 +56,7 @@ const Header = (props: HeaderProps) => {
4856
: 'bg-gray-400'
4957
}`}
5058
></div>
51-
<FaMobileAlt className="m-auto ml-1 text-xl" />
59+
<DeviceMobileIcon className="m-auto ml-1 w-5 h-5" />
5260
</div>
5361
</div>
5462
</div>

‎src/components/NavItem.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { FaCaretDown, FaCaretRight, FaSpinner } from 'react-icons/fa';
3+
import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';
44

55
interface NavItemProps {
66
isDropdown: boolean;
@@ -41,13 +41,14 @@ const NavItem = (props: NavItemProps) => {
4141
{props.titleContent}
4242
{props.isDropdown && !props.isLoading ? (
4343
navItemOpen ? (
44-
<FaCaretDown className="my-auto group-hover:text-gray-700" />
44+
<ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
4545
) : (
46-
<FaCaretRight className="my-auto group-hover:text-gray-700" />
46+
<ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
4747
)
4848
) : null}
4949
{props.isLoading ? (
50-
<FaSpinner className="animate-spin my-auto" />
50+
// <FaSpinner className="animate-spin my-auto" />
51+
<div>loading</div>
5152
) : null}
5253
</div>
5354
{props.isDropdown ? (

‎src/components/Sidebar/SidebarChannels.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22

3-
import { FaStream } from 'react-icons/fa';
4-
3+
import { HashtagIcon } from '@heroicons/react/outline';
54
import { Protobuf } from '@meshtastic/meshtasticjs';
65

76
import type { languageTemplate } from '../../App';
@@ -21,7 +20,7 @@ const SidebarChannels = (props: SidebarChannelsProps) => {
2120
isNested={false}
2221
titleContent={
2322
<div className="flex">
24-
<FaStream className="my-auto mr-2" />
23+
<HashtagIcon className="my-auto mr-2 2-5 h-5" />
2524
{props.Translations.device_channels_title}
2625
</div>
2726
}

‎src/components/Sidebar/SidebarDeviceSettings.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22

3-
import { FaSave, FaUserCog } from 'react-icons/fa';
4-
3+
import { AdjustmentsIcon, SaveIcon } from '@heroicons/react/outline';
54
import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs';
65

76
import type { languageTemplate } from '../../App';
@@ -22,7 +21,7 @@ const SidebarDeviceSettings = (props: SidebarDeviceSettingsProps) => {
2221
isNested={false}
2322
titleContent={
2423
<div className="flex">
25-
<FaUserCog className="my-auto mr-2" />
24+
<AdjustmentsIcon className="my-auto mr-2 w-5 h-5" />
2625
{props.Translations.device_settings_title}
2726
</div>
2827
}
@@ -93,7 +92,7 @@ const SidebarDeviceSettings = (props: SidebarDeviceSettingsProps) => {
9392
props.Connection.setPreferences(props.Preferences);
9493
}}
9594
>
96-
<FaSave className="m-auto mr-2 group-hover:text-gray-700" />
95+
<SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" />
9796
{props.Translations.save_changes_button}
9897
</div>
9998
</div>

‎src/components/Sidebar/SidebarNodes.tsx

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import React from 'react';
22

33
import {
4-
FaBatteryHalf,
5-
FaClock,
6-
FaCrown,
7-
FaDesktop,
8-
FaMapMarkerAlt,
9-
FaMountain,
10-
FaUsers,
11-
} from 'react-icons/fa';
12-
4+
ClockIcon,
5+
DesktopComputerIcon,
6+
FlagIcon,
7+
GlobeIcon,
8+
LightningBoltIcon,
9+
UsersIcon,
10+
} from '@heroicons/react/outline';
1311
import type { Types } from '@meshtastic/meshtasticjs';
1412

1513
import type { languageTemplate } from '../../App';
@@ -30,7 +28,7 @@ const SidebarNodes = (props: sidebarNodesProps) => {
3028
isNested={false}
3129
titleContent={
3230
<div className="flex">
33-
<FaUsers className="my-auto mr-2" />
31+
<UsersIcon className="my-auto mr-2 w-5 h-5" />
3432
{props.Translations.nodes_title}
3533
<div className="flex m-auto rounded-full bg-gray-300 w-6 h-6 text-sm ml-2">
3634
<div className="m-auto">{props.Nodes.length ?? 0}</div>
@@ -49,9 +47,9 @@ const SidebarNodes = (props: sidebarNodesProps) => {
4947
titleContent={
5048
<div key={index} className="flex">
5149
{node.data.num === props.myId ? (
52-
<FaCrown className="text-yellow-500 my-auto mr-2" />
50+
<FlagIcon className="text-yellow-500 my-auto mr-2 w-5 h-5" />
5351
) : (
54-
<FaDesktop className="my-auto mr-2" />
52+
<DesktopComputerIcon className="my-auto mr-2 w-5 h-5" />
5553
)}
5654
<div className="m-auto">{node.data.user?.longName}</div>
5755
</div>
@@ -80,24 +78,24 @@ const SidebarNodes = (props: sidebarNodesProps) => {
8078
{}
8179
</p>
8280
<div className="flex">
83-
<FaMapMarkerAlt className="my-auto mr-2" />
81+
<GlobeIcon className="my-auto mr-2 w-5 h-5" />
8482
<p>
8583
{node.data.position?.latitudeI},
8684
{node.data.position?.longitudeI}
8785
</p>
8886
</div>
8987

9088
<div className="flex">
91-
<FaMountain className="my-auto mr-2" />
89+
<GlobeIcon className="my-auto mr-2 w-5 h-5" />
9290
<p>{node.data.position?.altitude}</p>
9391
</div>
9492

9593
<div className="flex">
96-
<FaClock className="my-auto mr-2" />
94+
<ClockIcon className="my-auto mr-2 w-5 h-5" />
9795
<p>{node.data.position?.time}</p>
9896
</div>
9997
<div className="flex">
100-
<FaBatteryHalf className="my-auto mr-2" />
98+
<LightningBoltIcon className="my-auto mr-2 w-5 h-5" />
10199
<p>{node.data.position?.batteryLevel}</p>
102100
</div>
103101
</div>

‎src/components/Sidebar/SidebarUISettings.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22

3-
import { Jp, Us, Br } from 'react-flags-select';
4-
import { FaCog, FaLaptop, FaMoon, FaSun } from 'react-icons/fa';
3+
import { Br, Jp, Us } from 'react-flags-select';
4+
5+
import { CogIcon } from '@heroicons/react/outline';
56

67
import type { languageTemplate } from '../../App';
78
import { LanguageEnum } from '../../App';
@@ -22,7 +23,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
2223
open={false}
2324
titleContent={
2425
<div className="flex">
25-
<FaCog className="my-auto mr-2" />
26+
<CogIcon className="my-auto mr-2 w-5 h-5" />
2627
{props.Translations.ui_settings_title}
2728
</div>
2829
}
@@ -38,15 +39,15 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
3839
{props.Translations.color_scheme_title}
3940
</div>
4041
<div className="flex shadow-md rounded-md ml-2">
41-
<div className="bg-gray-200 flex group p-2 rounded-l-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
42+
{/* <div className="bg-gray-200 flex group p-2 rounded-l-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
4243
<FaSun className="m-auto group-hover:text-gray-700" />
4344
</div>
4445
<div className="flex group p-2 border border-gray-300 hover:bg-gray-200 cursor-pointer">
4546
<FaMoon className="m-auto group-hover:text-gray-700" />
4647
</div>
4748
<div className="flex group p-2 rounded-r-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
4849
<FaLaptop className="m-auto group-hover:text-gray-700" />
49-
</div>
50+
</div> */}
5051
</div>
5152
</>
5253
}

‎web-test-runner.config.js

-6
This file was deleted.

0 commit comments

Comments
 (0)