From ef68b51da6c52abbbe7681bd8f187406471d2cc1 Mon Sep 17 00:00:00 2001
From: shm <m11c3.sh@gmail.com>
Date: Sun, 22 Dec 2024 03:41:37 +0900
Subject: [PATCH] Fix: Dashboard Opacity

---
 src/components/charts/DoughnutChart.tsx | 9 ++++++++-
 src/components/charts/ProcessTable.tsx  | 9 ++++++++-
 src/consts/index.ts                     | 2 ++
 src/consts/style.ts                     | 1 +
 src/template/Dashboard.tsx              | 9 ++++++++-
 5 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 src/consts/index.ts
 create mode 100644 src/consts/style.ts

diff --git a/src/components/charts/DoughnutChart.tsx b/src/components/charts/DoughnutChart.tsx
index ea77c59..6b88049 100644
--- a/src/components/charts/DoughnutChart.tsx
+++ b/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]}
           />
diff --git a/src/components/charts/ProcessTable.tsx b/src/components/charts/ProcessTable.tsx
index 06b03fb..f80a7ae 100644
--- a/src/components/charts/ProcessTable.tsx
+++ b/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>
diff --git a/src/consts/index.ts b/src/consts/index.ts
new file mode 100644
index 0000000..78c9ba1
--- /dev/null
+++ b/src/consts/index.ts
@@ -0,0 +1,2 @@
+export * from "./chart";
+export * from "./style";
diff --git a/src/consts/style.ts b/src/consts/style.ts
new file mode 100644
index 0000000..abe572a
--- /dev/null
+++ b/src/consts/style.ts
@@ -0,0 +1 @@
+export const minOpacity = 0.5;
diff --git a/src/template/Dashboard.tsx b/src/template/Dashboard.tsx
index 53c9ee1..f68e0e9 100644
--- a/src/template/Dashboard.tsx
+++ b/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">