Fix: Dashboard Opacity

src/components/charts/DoughnutChart.tsx

@@ -1,6 +1,7 @@
 import { useSettingsAtom } from "@/atom/useSettingsAtom";
 import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
 import { Skeleton } from "@/components/ui/skeleton";
+import { minOpacity } from "@/consts";
 import type { HardwareDataType } from "@/types/hardwareDataType";
 import { Lightning, Speedometer, Thermometer } from "@phosphor-icons/react";
 import type { JSX } from "react";
@@ -76,7 +77,13 @@ export const DoughnutChart = ({
             stroke="none"
             className="first:fill-zinc-300 dark:first:fill-muted  last:fill-zinc-200 last:dark:fill-gray-900"
             style={{
-              opacity: (1 - settings.backgroundImgOpacity / 100) ** 2,
+              opacity:
+                settings.selectedBackgroundImg != null
+                  ? Math.max(
+                      (1 - settings.backgroundImgOpacity / 100) ** 2,
+                      minOpacity,
+                    )
+                  : 1,
             }}
             polarRadius={[70, 60]}
           />

src/components/charts/ProcessTable.tsx

@@ -6,6 +6,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { minOpacity } from "@/consts";
 import { useTauriDialog } from "@/hooks/useTauriDialog";
 import { type ProcessInfo, commands } from "@/rspc/bindings";
 import { ArrowsOut, CaretDown, CaretUp } from "@phosphor-icons/react";
@@ -101,7 +102,13 @@ export const ProcessesTable = () => {
     <div
       className="p-4 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-whit"
       style={{
-        opacity: (1 - settings.backgroundImgOpacity / 100) ** 2,
+        opacity:
+          settings.selectedBackgroundImg != null
+            ? Math.max(
+                (1 - settings.backgroundImgOpacity / 100) ** 2,
+                minOpacity,
+              )
+            : 1,
       }}
     >
       <Dialog>

src/consts/index.ts

@@ -0,0 +1,2 @@
+export * from "./chart";
+export * from "./style";

src/consts/style.ts

@@ -0,0 +1 @@
+export const minOpacity = 0.5;

src/template/Dashboard.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/charts/Bar";
 import { DoughnutChart } from "@/components/charts/DoughnutChart";
 import { ProcessesTable } from "@/components/charts/ProcessTable";
+import { minOpacity } from "@/consts";
 import type { StorageInfo } from "@/rspc/bindings";
 import type { NameValues } from "@/types/hardwareDataType";
 import { useAtom } from "jotai";
@@ -25,7 +26,13 @@ const InfoTable = ({ data }: { data: { [key: string]: string | number } }) => {
     <div
       className="px-4 pt-2 pb-4 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-white"
       style={{
-        opacity: (1 - settings.backgroundImgOpacity / 100) ** 2,
+        opacity:
+          settings.selectedBackgroundImg != null
+            ? Math.max(
+                (1 - settings.backgroundImgOpacity / 100) ** 2,
+                minOpacity,
+              )
+            : 1,
       }}
     >
       <table className="w-full text-left">