hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start consistancy fixing

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-03-01 22:19:57 +11:00
parent 115ff9d4bf
commit 4dc39623dc
31 changed files with 404 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+9 -9
View File
@@ -23,17 +23,17 @@
"@emeraldpay/hashicon-react": "^0.5.2",
"@meshtastic/eslint-config": "^1.0.6",
"@meshtastic/meshtasticjs": "^0.6.48",
"@reduxjs/toolkit": "^1.7.2",
"@reduxjs/toolkit": "^1.8.0",
"@tippyjs/react": "^4.2.6",
"base64-js": "^1.5.1",
"framer-motion": "^6.2.7",
"framer-motion": "^6.2.8",
"mapbox-gl": "^2.7.0",
"prettier": "^2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.4",
"react-error-boundary": "^3.1.4",
"react-flow-renderer": "^10.0.0-next.39",
"react-flow-renderer": "^10.0.0-next.45",
"react-hook-form": "^7.27.1",
"react-icons": "^4.3.1",
"react-json-pretty": "^2.2.0",
@@ -49,7 +49,7 @@
},
"devDependencies": {
"@hookform/devtools": "^4.0.2",
"@types/mapbox-gl": "^2.6.1",
"@types/mapbox-gl": "^2.6.2",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/w3c-web-serial": "^1.0.2",
@@ -57,15 +57,15 @@
"@vitejs/plugin-react": "^1.2.0",
"autoprefixer": "^10.4.2",
"gzipper": "^7.0.0",
"postcss": "^8.4.6",
"rollup-plugin-visualizer": "^5.5.4",
"postcss": "^8.4.7",
"rollup-plugin-visualizer": "^5.6.0",
"tailwindcss": "^3.0.23",
"tar": "^6.1.11",
"typescript": "^4.5.5",
"typescript": "^4.6.2",
"unimported": "^1.19.1",
"vite": "^2.8.4",
"vite": "^2.8.5",
"vite-plugin-cdn-import": "^0.3.5",
"vite-plugin-pwa": "^0.11.13",
"workbox-window": "^6.4.2"
"workbox-window": "^6.5.0"
}
}
pnpm-lock.yaml
Generated
+283 -298
View File
File diff suppressed because it is too large Load Diff
src/App.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const App = (): JSX.Element => {
<div className={`h-screen w-screen ${appState.darkMode ? 'dark' : ''}`}>
<ContextMenu>
<Connection />
<div className="flex h-full flex-col bg-gray-200 dark:bg-secondaryDark">
<div className="flex h-full flex-col">
<div className="flex min-h-0 w-full flex-grow">
{route.name === 'messages' && <Messages />}
{route.name === 'nodes' && <Nodes />}
src/components/Connection.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ export const Connection = (): JSX.Element => {
</div>
</div>
<div className="md:w-1/2">
<div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark dark:text-gray-400">
<div className="h-96 overflow-y-auto rounded-md border border-gray-400 bg-gray-200 p-2 drop-shadow-md dark:border-gray-600 dark:bg-tertiaryDark dark:text-gray-400">
{meshtasticState.logs.length === 0 && (
<div className="flex h-full w-full">
<m.img
src/components/MapBox/MapboxProvider.tsx
+1 -2
View File
@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react';
import { ScaleControl } from 'mapbox-gl';
import { MapboxContext } from '@components/MapBox/mapboxContext';
import { MapStyles } from '@core/mapStyles';
import {
setBearing,
setLatLng,
@@ -15,8 +16,6 @@ import { useAppDispatch } from '@hooks/useAppDispatch';
import { useAppSelector } from '@hooks/useAppSelector';
import { useCreateMapbox } from '@hooks/useCreateMapbox';
import { MapStyles } from '../../pages/Map/styles';
export type MapboxProviderProps = {
children: React.ReactNode;
};
src/components/Tab.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ export const Tab = ({
<div
className={`max-w-[10rem] md:flex-grow ${
active
? 'bg-gray-100 dark:bg-primaryDark'
? 'bg-white dark:bg-primaryDark'
: 'bg-gray-300 dark:bg-secondaryDark'
}`}
>
@@ -32,7 +32,7 @@ export const Tab = ({
className={`group flex flex-grow cursor-pointer select-none py-2 hover:underline dark:text-white ${
active
? 'z-10 rounded-t-lg bg-gray-300 shadow-inner dark:bg-secondaryDark'
: 'bg-gray-100 shadow-md dark:bg-primaryDark'
: 'bg-white drop-shadow-md dark:bg-primaryDark'
} ${activeRight ? 'rounded-br-lg' : ''} ${
activeLeft ? 'rounded-bl-lg' : ''
}`}
src/components/Tabs.tsx
+35
View File
@@ -0,0 +1,35 @@
import type React from 'react';
import { Tab, TabProps } from './Tab';
export interface TabsProps {
tabs: Omit<TabProps, 'activeLeft' | 'activeRight'>[];
}
export const Tabs = ({ tabs }: TabsProps): JSX.Element => {
return (
<div className="flex flex-grow bg-gray-300 dark:bg-secondaryDark">
<div
className={`h-full w-2 bg-white dark:bg-primaryDark ${
tabs[0].active ? 'rounded-br-lg' : ''
}`}
/>
{tabs.map((tab, index) => (
<Tab
key={index}
link={tab.link}
title={tab.title}
icon={tab.icon}
active={tab.active}
activeLeft={tabs[index - 1]?.active}
activeRight={tabs[index + 1]?.active}
/>
))}
<div
className={`h-full flex-grow bg-white drop-shadow-md dark:bg-primaryDark ${
tabs[tabs.length - 1].active ? 'rounded-bl-lg' : ''
}`}
/>
</div>
);
};
src/components/connection/BLE.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
return (
<form onSubmit={onSubmit} className="flex flex-grow flex-col">
<div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
<div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-400 bg-gray-200 p-2 dark:border-gray-600 dark:bg-tertiaryDark dark:text-gray-400">
{bleDevices.length > 0 ? (
bleDevices.map((device, index) => (
<div
src/components/connection/Serial.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
return (
<form onSubmit={onSubmit} className="flex flex-grow flex-col">
<div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
<div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-400 bg-gray-200 p-2 dark:border-gray-600 dark:bg-tertiaryDark dark:text-gray-400">
{serialDevices.length > 0 ? (
serialDevices.map((device, index) => (
<div
src/components/generic/Card.tsx
+5 -5
View File
@@ -23,13 +23,13 @@ export const Card = ({
return (
<Draggable handle=".handle" disabled={!draggable}>
<div
className={`flex h-full w-full flex-col rounded-md shadow-md ${
border ? 'border border-gray-300 dark:border-gray-600' : ''
className={`flex h-full w-full flex-col rounded-md drop-shadow-md ${
border ? 'border border-gray-400 dark:border-gray-600' : ''
} ${className ?? ''}`}
>
{(title || actions) && (
<div
className={`w-full select-none justify-between rounded-t-md border-b border-gray-300 bg-gray-200 p-2 px-2 text-lg font-medium dark:border-gray-600 dark:bg-primaryDark dark:text-white ${
className={`w-full select-none justify-between rounded-t-md border-b border-gray-400 bg-gray-200 p-2 px-2 text-lg font-medium dark:border-gray-600 dark:bg-tertiaryDark dark:text-white ${
draggable ? 'cursor-move' : ''
}`}
>
@@ -41,9 +41,9 @@ export const Card = ({
)}
<m.div
className={`flex flex-grow select-none flex-col gap-4 bg-white p-4 dark:bg-secondaryDark ${
className={`flex flex-grow select-none flex-col gap-4 bg-white p-4 dark:bg-primaryDark ${
title || actions ? 'rounded-b-md' : 'rounded-md'
} ${draggable ? '' : 'bg-white dark:bg-primaryDark'}`}
}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
src/components/generic/ContextMenu.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const ContextMenu = ({
{visible && (
<div
style={{ top: position.y, left: position.x }}
className="fixed z-50 w-60 gap-2 divide-y divide-gray-300 rounded-md border border-gray-300 font-medium shadow-md backdrop-blur-xl dark:divide-gray-600 dark:border-gray-600 dark:text-gray-400"
className="fixed z-50 w-60 gap-2 divide-y divide-gray-300 rounded-md border border-gray-400 font-medium drop-shadow-md backdrop-blur-xl dark:divide-gray-600 dark:border-gray-600 dark:text-gray-400"
>
{items}
<ContextItem title="Menu item" icon={<FiActivity />} />
src/components/generic/Modal.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ export const Modal = ({
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.1 }}
className="fixed h-full w-full backdrop-blur-md backdrop-filter"
className="fixed h-full w-full backdrop-blur-md backdrop-brightness-75 backdrop-filter"
onClick={(): void => {
bgDismiss && onClose();
}}
src/components/generic/Sidebar/CollapsibleSection.tsx
+4 -2
View File
@@ -21,8 +21,10 @@ export const CollapsibleSection = ({
<m.div>
<m.div
layout
className={`w-full cursor-pointer select-none overflow-hidden border-l-4 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark dark:bg-secondaryDark dark:text-gray-400 ${
open ? 'dark:border-l-primary' : 'dark:border-secondaryDark'
className={`w-full cursor-pointer select-none overflow-hidden border-l-4 border-b bg-gray-200 p-2 text-sm font-medium dark:border-primaryDark dark:bg-tertiaryDark dark:text-gray-400 ${
open
? 'border-l-primary dark:border-l-primary'
: 'border-gray-400 dark:border-secondaryDark'
}`}
>
<m.div
src/components/generic/Sidebar/ExternalSection.tsx
+5 -3
View File
@@ -27,8 +27,10 @@ export const ExternalSection = ({
>
<m.div
layout
className={`w-full cursor-pointer select-none overflow-hidden border-l-4 dark:bg-secondaryDark dark:text-gray-400 ${
active ? 'border-primary' : 'dark:border-secondaryDark'
className={`w-full cursor-pointer select-none overflow-hidden border-l-4 bg-gray-200 dark:bg-tertiaryDark dark:text-gray-400 ${
active
? 'border-l-primary dark:border-l-primary'
: 'border-gray-400 dark:border-secondaryDark'
}`}
>
<m.div
@@ -36,7 +38,7 @@ export const ExternalSection = ({
onClick={toggleOpen}
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className="flex justify-between gap-2 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark"
className="flex justify-between gap-2 border-b border-gray-400 p-2 text-sm font-medium dark:border-primaryDark"
>
<m.div className="flex gap-2 ">
<m.div className="my-auto">{icon}</m.div>
src/components/generic/Sidebar/SidebarOverlay.tsx
+15 -10
View File
@@ -24,7 +24,7 @@ export const SidebarOverlay = ({
<AnimatePresence>
{open && (
<m.div
className="absolute z-30 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
className="absolute z-30 flex h-full w-full flex-col bg-white dark:bg-primaryDark"
animate={direction === 'x' ? { translateX: 0 } : { translateY: 0 }}
initial={
direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }
@@ -35,15 +35,20 @@ export const SidebarOverlay = ({
transition={{ type: 'just' }}
>
<AnimateSharedLayout>
<div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
<IconButton
onClick={(): void => {
close();
}}
icon={<FiArrowLeft />}
/>
<div className="my-auto text-lg font-medium dark:text-white">
{title}
{/* <div className="flex gap-2 border-b border-gray-400 p-2 dark:border-gray-600"> */}
<div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark">
<div className="flex h-10 gap-1">
<div className="my-auto">
<IconButton
onClick={(): void => {
close();
}}
icon={<FiArrowLeft />}
/>
</div>
<div className="my-auto text-lg font-medium dark:text-white">
{title}
</div>
</div>
</div>
<div className="flex-grow overflow-y-auto">{children}</div>
src/components/generic/button/Button.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export const Button = ({
${
disabled
? 'cursor-not-allowed bg-white dark:bg-primaryDark'
: 'cursor-pointer hover:bg-gray-100 hover:shadow-md dark:hover:bg-secondaryDark'
: 'cursor-pointer hover:bg-white hover:drop-shadow-md dark:hover:bg-secondaryDark'
} ${border ? 'border-gray-400 dark:border-gray-200' : ''} ${
className ?? ''
}`}
src/components/layout/Sidebar/index.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export const Sidebar = ({
appState.mobileNavOpen ? 'flex' : 'hidden'
}`}
>
<div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
<div className="flex h-full w-full flex-col drop-shadow-xl dark:bg-primaryDark">
<div className="relative flex-grow gap-1">
<div className="absolute h-full w-full">{children}</div>
<Settings open={settingsOpen} setOpen={setSettingsOpen} />
src/components/layout/index.tsx
+17 -29
View File
@@ -2,7 +2,7 @@ import type React from 'react';
import { useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { FiMessageCircle, FiSettings, FiTag } from 'react-icons/fi';
import { FiMessageCircle, FiSettings } from 'react-icons/fi';
import { RiMindMap, RiRoadMapLine } from 'react-icons/ri';
import { VscExtensions } from 'react-icons/vsc';
@@ -11,7 +11,8 @@ import { IconButton } from '@components/generic/button/IconButton';
import { Sidebar } from '@components/layout/Sidebar';
import { ErrorFallback } from '../ErrorFallback';
import { Tab } from '../Tab';
import type { TabProps } from '../Tab';
import { Tabs } from '../Tabs';
export interface LayoutProps {
title: string;
@@ -30,7 +31,7 @@ export const Layout = ({
const route = useRoute();
const tabs = [
const tabs: Omit<TabProps, 'activeLeft' | 'activeRight'>[] = [
{
title: 'Messages',
icon: <FiMessageCircle />,
@@ -55,22 +56,20 @@ export const Layout = ({
link: routes.extensions().link,
active: route.name === 'extensions',
},
{
title: 'Temp',
icon: <FiTag />,
link: routes.extensions().link,
active: route.name === 'map',
},
];
return (
<div className="relative flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
<div className="relative flex w-full bg-white dark:bg-secondaryDark ">
<div className="flex flex-grow">
<Sidebar settingsOpen={settingsOpen} setSettingsOpen={setSettingsOpen}>
<div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
<IconButton icon={icon} />
<div className="my-auto text-lg font-medium dark:text-white">
{title}
<div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark">
<div className="flex h-10 gap-1">
<div className="my-auto">
<IconButton icon={icon} />
</div>
<div className="my-auto text-lg font-medium dark:text-white">
{title}
</div>
</div>
</div>
<div className="flex flex-col gap-2">{sidebarContents}</div>
@@ -78,10 +77,10 @@ export const Layout = ({
</div>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<div className="flex h-full w-full flex-col bg-gray-300 dark:bg-secondaryDark">
<div className="flex w-full bg-gray-100 pt-1 dark:bg-primaryDark">
<div className="h-8">
<div className="flex w-full bg-white pt-1 dark:bg-primaryDark">
<div className="z-10 -mr-2 h-8">
<IconButton
className="mx-1 rounded-b-none p-3"
className="m-1"
icon={<FiSettings />}
onClick={(): void => {
setSettingsOpen(!settingsOpen);
@@ -89,18 +88,7 @@ export const Layout = ({
active={settingsOpen}
/>
</div>
{tabs.map((tab, index) => (
<Tab
key={index}
link={tab.link}
title={tab.title}
icon={tab.icon}
active={tab.active}
activeLeft={tabs[index - 1]?.active}
activeRight={tabs[index + 1]?.active}
/>
))}
<div className="-z-10 flex-grow shadow-md" />
<Tabs tabs={tabs} />
</div>
<div className="flex flex-grow">{children}</div>
</div>
src/components/menu/BottomNav.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const BottomNav = (): JSX.Element => {
).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
return (
<div className="z-20 flex justify-between divide-x divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
<div className="z-20 flex justify-between divide-x divide-gray-400 border-t border-gray-400 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
<BottomNavItem tooltip="Meshtastic WebUI">
<img
title="Logo"
src/components/menu/BottomNavItem.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const BottomNavItem = ({
<Tooltip disabled={!tooltip} content={tooltip}>
<div
onClick={onClick}
className={`group flex h-full cursor-pointer select-none p-1 hover:bg-gray-200 dark:text-white dark:hover:bg-primaryDark ${className}`}
className={`group flex h-full cursor-pointer select-none p-1 hover:bg-gray-300 dark:text-white dark:hover:bg-primaryDark ${className}`}
>
<m.div className="flex w-full gap-1" whileTap={{ scale: 0.99 }}>
{children}
src/pages/Map/styles.ts → src/core/mapStyles.ts
+1 -1
View File
@@ -28,7 +28,7 @@ export const MapStyles: MapStyleType = {
Light: {
title: 'Light',
data: 'mapbox://styles/mapbox/light-v10?optimize=true',
data: 'mapbox://styles/sachaw/cl03ij03g001414l20w0w0ivj?optimize=true',
} as MapStyle,
Dark: {
title: 'Dark',
src/pages/Extensions/FileBrowser.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ export const FileBrowser = (): JSX.Element => {
{data?.data.files.map((file) => (
<div
key={file.name}
className="flex h-10 w-full border-b border-gray-300 px-4 font-medium dark:border-gray-600 dark:text-white"
className="flex h-10 w-full border-b border-gray-400 px-4 font-medium dark:border-gray-600 dark:text-white"
>
<div className="my-auto w-1/3">
<a
src/pages/Extensions/Info.tsx
+3 -2
View File
@@ -1,10 +1,11 @@
import type React from 'react';
import { FiClipboard, FiRefreshCw } from 'react-icons/fi';
import { FiRefreshCw } from 'react-icons/fi';
import JSONPretty from 'react-json-pretty';
import { IconButton } from '@app/components/generic/button/IconButton';
import { Card } from '@app/components/generic/Card';
import { CopyButton } from '@app/components/menu/buttons/CopyButton';
import { Hashicon } from '@emeraldpay/hashicon-react';
import { useAppSelector } from '@hooks/useAppSelector';
@@ -40,7 +41,7 @@ export const Info = (): JSX.Element => {
<Card
title="Debug Information"
className="flex-grow"
actions={<IconButton icon={<FiClipboard />} />}
actions={<CopyButton data={JSON.stringify(hardwareInfo)} />}
>
<JSONPretty className="overflow-y-auto" data={hardwareInfo} />
</Card>
src/pages/Extensions/Logs.tsx
+1 -9
View File
@@ -87,21 +87,13 @@ export const Logs = (): JSX.Element => {
)}
{meshtasticState.logs.map((log, index) => (
// <ContextMenu
// key={index}
// items={
// <>
// <ContextItem title="Test" icon={<FiGitBranch />} />
// </>
// }
// >
<m.tr
key={index}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
className="group hover:bg-gray-200 dark:hover:bg-secondaryDark"
className="group hover:bg-gray-300 dark:hover:bg-secondaryDark"
>
<m.td
className="w-6 cursor-pointer"
src/pages/Map/MapContainer.tsx
+4 -4
View File
@@ -5,6 +5,8 @@ import { FaDirections, FaGlobeAfrica, FaMountain } from 'react-icons/fa';
import { MdFullscreen, MdRadar, MdWbShade } from 'react-icons/md';
import { IconButton } from '@components/generic/button/IconButton';
import type { MapStyle } from '@core/mapStyles';
import { MapStyles } from '@core/mapStyles';
import {
setExaggeration,
setHillShade,
@@ -13,8 +15,6 @@ import {
import { useAppDispatch } from '@hooks/useAppDispatch';
import { useAppSelector } from '@hooks/useAppSelector';
import { useMapbox } from '@hooks/useMapbox';
import type { MapStyle } from '@pages/Map/styles';
import { MapStyles } from '@pages/Map/styles';
export const MapContainer = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -46,7 +46,7 @@ export const MapContainer = (): JSX.Element => {
e.stopPropagation();
}}
>
<div className="absolute right-0 z-10 m-4 space-y-2 rounded-md border border-gray-300 bg-white p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark">
<div className="absolute right-0 z-10 m-4 space-y-2 rounded-md border border-gray-400 bg-white p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark">
<IconButton
active={mapState.style === 'Satellite'}
onClick={(): void => {
@@ -56,7 +56,7 @@ export const MapContainer = (): JSX.Element => {
/>
<div
className={`-m-1 space-y-2 rounded-md border-gray-300 p-1 dark:border-gray-600 ${
className={`-m-1 space-y-2 rounded-md border-gray-400 p-1 dark:border-gray-600 ${
mapState.style === 'Outdoors' ? 'border' : ''
}`}
>
src/pages/Messages/ChannelChat.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export const ChannelChat = ({
: `CH: ${channel.index}`
}
>
<div className="flex h-8 w-8 rounded-full bg-gray-200 dark:bg-primaryDark dark:text-white">
<div className="flex h-8 w-8 rounded-full bg-gray-300 dark:bg-primaryDark dark:text-white">
<div className="m-auto">
{channel.role === Protobuf.Channel_Role.PRIMARY ? (
<MdPublic />
src/pages/Messages/Message.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export const Message = ({
sender,
}: MessageProps): JSX.Element => {
return (
<div className="group mb-3 hover:bg-gray-200 dark:hover:bg-primaryDark">
<div className="group mb-3 hover:bg-gray-200 dark:hover:bg-tertiaryDark">
{lastMsgSameUser ? (
<div
className={`mx-6 -mt-3 flex justify-between ${
src/pages/Messages/MessageBar.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
}
};
return (
<div className="mx-auto flex w-full space-x-2 bg-gray-50 p-3 text-gray-500 dark:bg-transparent dark:text-gray-400">
<div className="mx-auto flex w-full space-x-2 bg-gray-50 bg-transparent p-3 text-gray-500 dark:text-gray-400">
<div className="mx-auto flex w-full max-w-4xl">
<form
className="flex w-full space-x-2"
src/pages/Messages/index.tsx
+3 -3
View File
@@ -49,7 +49,7 @@ export const Messages = (): JSX.Element => {
/>
))}
{nodes.length !== 0 && channels.length !== 0 && (
<div className="mx-2 rounded-md border-2 border-gray-300 dark:border-gray-600" />
<div className="mx-2 border-b border-gray-400 dark:border-gray-600" />
)}
{nodes
.filter((node) => node.number !== myNodeNum)
@@ -65,7 +65,7 @@ export const Messages = (): JSX.Element => {
}
>
<div className="flex w-full flex-col">
<div className="flex w-full justify-between border-b border-gray-300 px-2 dark:border-gray-600 dark:text-gray-300">
<div className="flex w-full justify-between border-b border-gray-400 px-2 dark:border-gray-600 dark:text-gray-300">
<div className="my-auto flex gap-2 py-2 text-sm">
<IconButton nested icon={<FiHash className="h-4 w-4" />} />
<div className="my-auto">
@@ -90,7 +90,7 @@ export const Messages = (): JSX.Element => {
</div>
<div
ref={chatRef}
className="flex flex-grow flex-col space-y-2 overflow-y-auto border-b border-gray-300 bg-white pb-6 dark:border-gray-600 dark:bg-secondaryDark"
className="flex flex-grow flex-col space-y-2 overflow-y-auto border-b border-gray-400 bg-gray-300 pb-6 dark:border-gray-600 dark:bg-secondaryDark"
>
<div className="mt-auto">
{chats[selectedChatIndex]?.messages.map((message, index) => (
src/pages/Nodes/NodeCard.tsx
+1 -1
View File
@@ -145,7 +145,7 @@ export const NodeCard = ({
</CollapsibleSection>
<CollapsibleSection title="Location" icon={<FiMapPin />}>
<>
<div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
<div className="flex h-10 select-none justify-between rounded-md border border-gray-400 bg-transparent bg-gray-300 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
{node.currentPosition ? (
<>
<div className="my-auto px-1">
tailwind.config.cjs
+1 -1
View File
@@ -13,7 +13,7 @@ module.exports = {
primary: '#67ea94',
primaryDark: '#25262C',
secondaryDark: '#1C1D23',
accentDark: '25262C',
tertiaryDark: '#323438',
},
boxShadow: {
border: '0 0 0 1px #67ea94',