Browse Source

Renaming, UI tweaks

pull/618/head
philon- 1 year ago
parent
commit
193cea3427
  1. 16
      src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx
  2. 4
      src/components/UI/Avatar.tsx
  3. 4
      src/components/generic/Table/index.tsx
  4. 6
      src/core/hooks/useFavoriteNode.ts
  5. 6
      src/core/hooks/useIgnoreNode.ts

16
src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

@ -12,8 +12,8 @@ import { DeviceImage } from "@components/generic/DeviceImage.tsx";
import { TimeAgo } from "@components/generic/TimeAgo.tsx";
import { Uptime } from "@components/generic/Uptime.tsx";
import { toast } from "@core/hooks/useToast.ts";
import { useUpdateFavorite } from "../../../core/hooks/useUpdateFavorite.ts";
import { useUpdateIgnored } from "../../../core/hooks/useUpdateIgnored.ts";
import { useFavoriteNode } from "../../../core/hooks/useFavoriteNode.ts";
import { useIgnoreNode } from "../../../core/hooks/useIgnoreNode.ts";
import { cn } from "@core/utils/cn.ts";
import {
@ -64,10 +64,10 @@ export const NodeDetailsDialog = ({
const { setNodeNumToBeRemoved } = useAppStore();
const { setChatType, setActiveChat } = useMessageStore();
const { updateFavorite } = useUpdateFavorite();
const { updateFavorite } = useFavoriteNode();
const [isFavoriteState, setIsFavoriteState] = useState<boolean>(false);
const { updateIgnored } = useUpdateIgnored();
const { updateIgnored } = useIgnoreNode();
const [isIgnoredState, setIsIgnoredState] = useState<boolean>(false);
useEffect(() => {
@ -186,7 +186,9 @@ export const NodeDetailsDialog = ({
</Button>
<Button className="mr-1" onClick={handleToggleFavorite}>
<StarIcon
className={isFavoriteState ? " fill-yellow-400" : ""}
className={cn(
isFavoriteState ? " fill-yellow-400 stroke-yellow-400" : "",
)}
/>
</Button>
<div className="flex flex-1 justify-start"></div>
@ -198,8 +200,8 @@ export const NodeDetailsDialog = ({
className={cn(
"flex justify-end mr-1 text-white",
isIgnoredState
? ""
: "bg-red-500 dark:bg-red-500 hover:bg-red-600 hover:dark:bg-red-600 text-white dark:text-white",
? "bg-red-500 dark:bg-red-500 hover:bg-red-600 hover:dark:bg-red-600 text-white dark:text-white"
: "",
)}
onClick={handleToggleIgnored}
>

4
src/components/UI/Avatar.tsx

@ -112,7 +112,7 @@ export const Avatar = ({
</TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
Favorite
<TooltipArrow className="fill-slate-800" />
<TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent>
</Tooltip>
</TooltipProvider>
@ -130,7 +130,7 @@ export const Avatar = ({
</TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
Node error
<TooltipArrow className="fill-slate-800" />
<TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent>
</Tooltip>
</TooltipProvider>

4
src/components/generic/Table/index.tsx

@ -7,13 +7,13 @@ interface FavoriteIconProps {
showFavorite: boolean;
}
interface WrapperProps {
interface AvatarCellProps {
children: React.ReactElement<FavoriteIconProps>;
}
export interface TableProps {
headings: Heading[];
rows: React.ReactElement<WrapperProps>[][];
rows: React.ReactElement<AvatarCellProps>[][];
}
export interface Heading {

6
src/core/hooks/useUpdateFavorite.ts → src/core/hooks/useFavoriteNode.ts

@ -2,17 +2,17 @@ import { useCallback } from "react";
import { useDevice } from "@core/stores/deviceStore.ts";
import { useToast } from "@core/hooks/useToast.ts";
interface UpdateFavoriteOptions {
interface FavoriteNodeOptions {
nodeNum: number;
isFavorite: boolean;
}
export function useUpdateFavorite() {
export function useFavoriteNode() {
const { updateFavorite, getNode } = useDevice();
const { toast } = useToast();
const updateFavoriteCB = useCallback(
({ nodeNum, isFavorite }: UpdateFavoriteOptions) => {
({ nodeNum, isFavorite }: FavoriteNodeOptions) => {
updateFavorite(nodeNum, isFavorite);
const node = getNode(nodeNum);

6
src/core/hooks/useUpdateIgnored.ts → src/core/hooks/useIgnoreNode.ts

@ -2,17 +2,17 @@ import { useCallback } from "react";
import { useDevice } from "@core/stores/deviceStore.ts";
import { useToast } from "@core/hooks/useToast.ts";
interface UpdateIgnoredOptions {
interface IgnoreNodeOptions {
nodeNum: number;
isIgnored: boolean;
}
export function useUpdateIgnored() {
export function useIgnoreNode() {
const { updateIgnored, getNode } = useDevice();
const { toast } = useToast();
const updateIgnoredCB = useCallback(
({ nodeNum, isIgnored }: UpdateIgnoredOptions) => {
({ nodeNum, isIgnored }: IgnoreNodeOptions) => {
updateIgnored(nodeNum, isIgnored);
const node = getNode(nodeNum);
Loading…
Cancel
Save