Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dark mode to application #424

Merged
merged 6 commits into from
Jul 27, 2023
Merged

Add dark mode to application #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c6b1dd7
Implemented dark mode for connect page
ajmcquilkin Jul 25, 2023
60bd23d
Styled remainder of application for dark mode
ajmcquilkin Jul 26, 2023
5ef9488
Refactored map style config into appConfig
ajmcquilkin Jul 26, 2023
fe5e2e4
Added manual color mode selector with persistence
ajmcquilkin Jul 27, 2023
4beae91
Removed WIP button from app settings page
ajmcquilkin Jul 27, 2023
ed36968
Minor tweaks
ajmcquilkin Jul 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/assets/Mesh_Logo_Dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions src/assets/Mesh_Logo_Light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 0 additions & 12 deletions src/assets/Mesh_Logo_White.svg
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/components/DefaultTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ const DefaultTooltip = ({
<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className="z-50 px-3 py-1.5 shadow-lg rounded-lg bg-white border border-gray-200 text-xs font-normal text-gray-400"
className="z-50 px-3 py-1.5 shadow-lg rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-500 text-xs font-normal text-gray-400 dark:text-gray-300"
sideOffset={5}
avoidCollisions
collisionPadding={20}
side={rest.side ?? "top"}
>
{text}
<Tooltip.Arrow className="fill-gray-200" />
<Tooltip.Arrow className="fill-gray-200 dark:fill-gray-600" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
Expand Down
62 changes: 37 additions & 25 deletions src/components/Map/CreateWaypointDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import {
import { selectMapState } from "@features/map/mapSelectors";

import { dateTimeLocalFormatString } from "@utils/form";
import { useIsDarkMode } from "@utils/hooks";
import { MapIDs, formatLocation, getFlyToConfig } from "@utils/map";
import { getChannelName } from "@utils/messaging";

Expand Down Expand Up @@ -73,6 +74,8 @@ const CreateWaypointDialog = ({
}: ICreateWaypointDialogProps) => {
const { t } = useTranslation();

const { isDarkMode } = useIsDarkMode();

const dispatch = useDispatch();
const primaryDeviceKey = useSelector(selectPrimaryDeviceKey());
const deviceChannels = useSelector(selectDeviceChannels());
Expand Down Expand Up @@ -238,8 +241,8 @@ const CreateWaypointDialog = ({
return (
<Dialog.Portal>
{/* Tracking https://github.com/radix-ui/primitives/issues/1159 */}
<div className="fixed inset-0 bg-gray-900/[0.4]" />
<Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col bg-white default-overlay">
<div className="fixed inset-0 bg-gray-900/[0.4] dark:bg-gray-600/[0.7]" />
<Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col bg-white dark:bg-gray-800 default-overlay">
<div className="flex flex-row max-h-[80vh]">
<div className="relative w-[600px]">
<Map
Expand Down Expand Up @@ -296,15 +299,18 @@ const CreateWaypointDialog = ({
tooltipText={t("map.waypoints.centerWaypointTooltip")}
tooltipProps={{ side: "left" }}
>
<Locate strokeWidth={1} className="text-gray-600" />
<Locate
strokeWidth={1}
className="text-gray-600 dark:text-gray-400"
/>
</MapOverlayButton>
</Map>
<div className=" w-[480px] h-full" />
</div>

<div className="flex flex-col gap-4 px-9 py-7 w-96">
<div className="flex flex-col">
<Dialog.Title className="text-base font-medium text-gray-700">
<Dialog.Title className="text-base font-medium text-gray-700 dark:text-gray-300">
{existingWaypoint
? t("map.waypoints.editWaypointTitle")
: t("map.waypoints.createWaypointTitle")}
Expand All @@ -322,7 +328,9 @@ const CreateWaypointDialog = ({
<label className="flex flex-col flex-1">
<p
className={`flex flex-row justify-between ${
name.isValid ? "text-gray-600" : "text-red-500"
name.isValid
? "text-gray-600 dark:text-gray-400"
: "text-red-500 dark:text-red-400"
}`}
>
<span>{t("map.waypoints.nameLabel")}</span>
Expand All @@ -332,7 +340,7 @@ const CreateWaypointDialog = ({
</p>

<ConnectionInput
className="w-full invalid:border-red-400 invalid:text-red-400"
className="w-full invalid:border-red-400 dark:invalid:border-red-400 invalid:text-red-400 dark:invalid:text-red-400"
placeholder={t("map.waypoints.namePlaceholder")}
value={name.value}
onChange={handleNameChange}
Expand All @@ -345,7 +353,9 @@ const CreateWaypointDialog = ({
<label className="flex flex-col flex-1">
<p
className={`flex flex-row justify-between ${
desc.isValid ? "text-gray-600" : "text-red-500"
desc.isValid
? "text-gray-600 dark:text-gray-400"
: "text-red-500 dark:text-red-400"
}`}
>
<span>{t("map.waypoints.descriptionLabel")}</span>
Expand All @@ -355,7 +365,7 @@ const CreateWaypointDialog = ({
</p>

<ConnectionInput
className="w-full invalid:border-red-400 invalid:text-red-400"
className="w-full invalid:border-red-400 dark:invalid:border-red-400 invalid:text-red-400 dark:invalid:text-red-400"
placeholder={t("map.waypoints.descriptionPlaceholder")}
value={desc.value}
onChange={handleDescChange}
Expand All @@ -365,7 +375,7 @@ const CreateWaypointDialog = ({
</fieldset>

<fieldset className="">
<label className="text-gray-600">
<label className="text-gray-600 dark:text-gray-400">
<p>{t("map.waypoints.blockWaypointEditing")}</p>
<ConnectionSwitch
checked={waypointLocked}
Expand All @@ -375,7 +385,7 @@ const CreateWaypointDialog = ({
</fieldset>

<fieldset className="">
<label className="text-gray-600">
<label className="text-gray-600 dark:text-gray-400">
<p>{t("map.waypoints.waypointExpires")}</p>
<ConnectionSwitch
checked={waypointExpires}
Expand All @@ -386,11 +396,11 @@ const CreateWaypointDialog = ({

<fieldset className="">
<label className="">
<p className="text-gray-600">
<p className="text-gray-600 dark:text-gray-400">
{t("map.waypoints.expireTime")}
</p>
<ConnectionInput
className="w-full disabled:cursor-not-allowed disabled:text-gray-300"
className="w-full disabled:cursor-not-allowed disabled:text-gray-300 dark:disabled:text-gray-700"
type="datetime-local"
disabled={!waypointExpires}
min={moment().format(dateTimeLocalFormatString)}
Expand All @@ -402,15 +412,15 @@ const CreateWaypointDialog = ({

<fieldset className="">
<label className="">
<p className="text-gray-600">
<p className="text-gray-600 dark:text-gray-400">
{t("map.waypoints.deviceChannel")}
</p>
<Select.Root
value={`${channelNum}`}
onValueChange={(e) => setChannelNum(parseInt(e))}
>
<Select.Trigger
className="flex-1 border px-5 py-4 border-gray-400 rounded-lg text-gray-700 h-full bg-transparent focus:outline-none disabled:cursor-wait inline-flex items-center justify-center"
className="flex-1 border px-5 py-4 border-gray-400 rounded-lg text-gray-700 dark:text-gray-400 h-full bg-transparent focus:outline-none disabled:cursor-wait inline-flex items-center justify-center"
aria-label={t("map.waypoints.channelAriaLabel")}
asChild
>
Expand All @@ -431,13 +441,13 @@ const CreateWaypointDialog = ({
<ChevronUpIcon />
</Select.ScrollUpButton>

<Select.Viewport className="bg-white p-2 rounded-lg shadow-lg">
<Select.Viewport className="bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg">
<Select.Group>
{deviceChannels.map((c) => (
<Select.Item
key={c.config.index}
value={`${c.config.index}`}
className={`relative flex items-center select-none h-6 pl-7 pr-5 py-4 text-gray-700 cursor-pointer radix-disabled:cursor-default radix-disabled:opacity-50`}
className={`relative flex items-center select-none h-6 pl-7 pr-5 py-4 text-gray-700 dark:text-gray-300 cursor-pointer radix-disabled:cursor-default radix-disabled:opacity-50 dark:radix-disabled:opacity-100 dark:radix-disabled:text-gray-700`}
disabled={c.config.role === 0} // DISABLED role
>
<Select.ItemText>
Expand All @@ -461,7 +471,9 @@ const CreateWaypointDialog = ({
</fieldset>

<div className="mb-2">
<p className="text-gray-600">{t("map.waypoints.pinEmoji")}</p>
<p className="text-gray-600 dark:text-gray-400">
{t("map.waypoints.pinEmoji")}
</p>
<Popover.Root
open={isEmojiPickerOpen}
onOpenChange={(e) => setIsEmojiPickerOpen(e)}
Expand All @@ -470,14 +482,14 @@ const CreateWaypointDialog = ({
<Popover.Trigger asChild>
<div className="relative mr-auto">
<button
className="relative w-9 h-9 flex align-middle justify-center border border-gray-200 rounded-full"
className="relative w-9 h-9 flex align-middle justify-center border border-gray-200 dark:border-gray-500 rounded-full"
aria-label="Select emoji"
>
<p className="m-auto text-xl">
{emoji ?? (
<Plus
strokeWidth={1.5}
className="text-gray-400 p-0.5"
className="text-gray-400 dark:text-gray-500 p-0.5"
/>
)}
</p>
Expand All @@ -492,7 +504,7 @@ const CreateWaypointDialog = ({
setEmoji(null);
}}
>
<Cross2Icon className="w-4 h-4 p-0.5 bg-white rounded-full shadow-md border border-gray-200 text-gray-400" />
<Cross2Icon className="w-4 h-4 p-0.5 bg-white dark:bg-gray-800 rounded-full shadow-md border border-gray-200 dark:border-gray-500 text-gray-400 dark:text-gray-400" />
</button>
)}
</div>
Expand All @@ -509,10 +521,10 @@ const CreateWaypointDialog = ({
setEmoji(e.native);
setIsEmojiPickerOpen(false);
}}
theme="light"
theme={isDarkMode ? "dark" : "light"}
previewPosition="none"
/>
<Popover.Arrow className="fill-gray-200" />
<Popover.Arrow className="fill-gray-200 dark:fill-gray-800" />
</div>
</Popover.Content>
</Popover.Portal>
Expand All @@ -525,15 +537,15 @@ const CreateWaypointDialog = ({
type="button"
onClick={handleSubmit}
disabled={!(name.isValid && desc.isValid)}
className=" text-gray-600 hover:text-gray-700 disabled:text-gray-300 disabled:cursor-not-allowed transition-colors"
className=" text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 disabled:text-gray-300 dark:disabled:text-gray-700 disabled:cursor-not-allowed transition-colors"
>
{existingWaypoint
? t("map.waypoints.saveChanges")
: t("map.waypoints.createWaypoint")}
</button>

<Dialog.Close asChild>
<button className="text-red-400 hover:text-red-500 transition-colors">
<button className="text-red-400 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300 transition-colors">
{t("map.waypoints.cancel")}
</button>
</Dialog.Close>
Expand All @@ -543,7 +555,7 @@ const CreateWaypointDialog = ({

<Dialog.Close asChild>
<button
className="fixed top-7 right-9 w-6 h-6 text-gray-500 hover:text-gray-600 transition-colors"
className="fixed top-7 right-9 w-6 h-6 text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
aria-label={t("map.waypoints.closeAriaLabel")}
>
<X strokeWidth={1.5} />
Expand Down
6 changes: 4 additions & 2 deletions src/components/Map/MapContextOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,16 @@ const MapContextOption = forwardRef<HTMLButtonElement, IMapContextOptionProps>(
function MapContextOption({ text, onClick, renderIcon }, ref) {
return (
<button
className="px-1 pr-2 py-1 bg-white hover:bg-gray-100 rounded-lg"
className="px-1 pr-2 py-1 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
type="button"
onClick={onClick}
ref={ref}
>
<div className="flex flex-row gap-2 align-middle">
{renderIcon("my-auto w-5 h-5 text-gray-400")}
<p className="text-sm font-normal text-gray-500">{text}</p>
<p className="text-sm font-normal text-gray-500 dark:text-gray-400">
{text}
</p>
</div>
</button>
);
Expand Down
4 changes: 3 additions & 1 deletion src/components/Map/MapOverlayButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ const MapOverlayButton = ({
type="button"
onClick={handleClick}
className={`p-2 default-overlay ${
selected ? "!bg-gray-700 !border-gray-500" : ""
selected
? "!bg-gray-700 dark:!bg-gray-300 !border-gray-500 dark:!border-gray-400"
: "!bg-white dark:!bg-gray-800"
} ${className}`}
>
{children}
Expand Down
25 changes: 14 additions & 11 deletions src/components/Map/MapSelectedNodeMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,17 +82,20 @@ const MapSelectedNodeMenu = () => {
};

return (
<div className="absolute top-24 right-9 bg-white p-5 pl-4 rounded-lg drop-shadow-lg w-80">
<div className="absolute top-24 right-9 bg-white dark:bg-gray-800 p-5 pl-4 rounded-lg drop-shadow-lg w-80">
<div className="flex justify-between">
<h1 className="text-gray-600 text-2xl leading-5 font-semibold">
<h1 className="text-gray-600 dark:text-gray-400 text-2xl leading-5 font-semibold">
{deviceName}
</h1>
<button type="button" onClick={clearActiveNode}>
<X strokeWidth={1.5} className="w-5 h-5 text-gray-500" />
<X
strokeWidth={1.5}
className="w-5 h-5 text-gray-500 dark:text-gray-400"
/>
</button>
</div>

<p className="text-gray-500 text-sm leading-5 font-normal pt-1">
<p className="text-gray-500 dark:text-gray-400 text-sm leading-5 font-normal pt-1">
<Trans
i18nKey="map.panes.nodeInfo.lastHeard"
components={{
Expand All @@ -108,17 +111,17 @@ const MapSelectedNodeMenu = () => {
/>
</p>

<h2 className="text-gray-500 text-base leading-6 font-semibold pt-2 pb-1">
<h2 className="text-gray-500 dark:text-gray-400 text-base leading-6 font-semibold pt-2 pb-1">
{t("map.panes.nodeInfo.generalInfo")}
</h2>
<div className="flex flex-col">
<div className="flex justify-between pb-1">
<div className="flex justify-start">
<MapPin
className="w-5 h-5 text-gray-500 mt-0.5"
className="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5"
strokeWidth={1.5}
/>
<h2 className="text-gray-500 text-base leading-6 font-normal pl-2">
<h2 className="text-gray-500 dark:text-gray-400 text-base leading-6 font-normal pl-2">
{!deviceLatCoord || !deviceLngCoord ? (
<span>{t("map.panes.nodeInfo.unknownValue")}</span>
) : (
Expand All @@ -142,7 +145,7 @@ const MapSelectedNodeMenu = () => {
>
<Copy
strokeWidth={1.5}
className="w-5 h-5 float-right text-gray-500"
className="w-5 h-5 float-right text-gray-500 dark:text-gray-400"
/>
</button>
</div>
Expand All @@ -151,9 +154,9 @@ const MapSelectedNodeMenu = () => {
<div className="flex justify-start">
<BatteryLevelIcon
batteryLevel={batteryLevel}
className="w-5 h-5 text-gray-500 mt-0.5"
className="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5"
/>
<h2 className="text-gray-500 text-base leading-6 font-normal pl-2">
<h2 className="text-gray-500 dark:text-gray-400 text-base leading-6 font-normal pl-2">
{getBatteryStateString(batteryLevel)}
</h2>
</div>
Expand All @@ -165,7 +168,7 @@ const MapSelectedNodeMenu = () => {
>
<Copy
strokeWidth={1.5}
className="w-5 h-5 float-right text-gray-500"
className="w-5 h-5 float-right text-gray-500 dark:text-gray-400"
/>
</button>
</div>
Expand Down
Loading
Loading