diff options
| author | xXJSONDeruloXx <danielhimebauch@gmail.com> | 2026-09-06 19:06:52 -0400 |
|---|---|---|
| committer | xXJSONDeruloXx <danielhimebauch@gmail.com> | 2026-09-06 19:06:52 -0400 |
| commit | 170d183fdafc1ec1a686c006fd6a2431c1f30c71 (patch) | |
| tree | 3732287c0d1a96bfb44508139f0e5687265730e9 /src/components/StatusDisplay.tsx | |
| parent | c9be32287ad5b72fcd86b10fa726d09dbd97d7fd (diff) | |
| download | decky-lsfg-vk-170d183fdafc1ec1a686c006fd6a2431c1f30c71.tar.gz decky-lsfg-vk-170d183fdafc1ec1a686c006fd6a2431c1f30c71.zip | |
refactor: align secondary tabs with Decky UI
Diffstat (limited to 'src/components/StatusDisplay.tsx')
| -rw-r--r-- | src/components/StatusDisplay.tsx | 61 |
1 files changed, 12 insertions, 49 deletions
diff --git a/src/components/StatusDisplay.tsx b/src/components/StatusDisplay.tsx index 767e5fc..b1a98e5 100644 --- a/src/components/StatusDisplay.tsx +++ b/src/components/StatusDisplay.tsx @@ -1,8 +1,7 @@ -import { PanelSectionRow } from "@decky/ui"; +import { Field, PanelSectionRow } from "@decky/ui"; import type { SteamBranchStatus } from "../api/lsfgApi"; interface StatusDisplayProps { - isInstalled: boolean; installationStatus: string; losslessScalingInstalled: boolean; losslessScalingStatus: string; @@ -10,7 +9,6 @@ interface StatusDisplayProps { } export function StatusDisplay({ - isInstalled, installationStatus, losslessScalingInstalled, losslessScalingStatus, @@ -21,56 +19,21 @@ export function StatusDisplay({ return ( <> <PanelSectionRow> - <div style={{ marginBottom: "8px", fontSize: "14px" }}> - <div - style={{ - color: losslessScalingAppInstalled ? "#4CAF50" : "#F44336", - fontWeight: "600", - marginBottom: "6px", - display: "flex", - alignItems: "center", - gap: "6px" - }} - > - {losslessScalingAppInstalled ? "Lossless Scaling Installed" : "Lossless Scaling Not Installed"} - </div> - {!losslessScalingAppInstalled && losslessScalingStatus && ( - <div style={{ color: "#B8B8B8", fontSize: "12px", margin: "0 0 6px 22px" }}> - {losslessScalingStatus} - </div> - )} - <div - style={{ - color: isInstalled ? "#4CAF50" : "#FF9800", - fontWeight: "600", - display: "flex", - alignItems: "center", - gap: "6px" - }} - > - {installationStatus} - </div> - </div> + <Field + label="Lossless Scaling" + description={losslessScalingAppInstalled ? "Installed" : losslessScalingStatus || "Not installed"} + /> + </PanelSectionRow> + <PanelSectionRow> + <Field label="LSFG-VK" description={installationStatus} /> </PanelSectionRow> {steamBranchStatus?.installed && ( <PanelSectionRow> - <div style={{ width: "100%" }}> - <div - style={{ - color: steamBranchStatus.needs_switch ? "#FF9800" : "#4CAF50", - fontSize: "12px", - margin: "0 0 6px 22px" - }} - > - Steam branch: {steamBranchStatus.current_branch || "public"} - {steamBranchStatus.needs_switch && ( - <div style={{ color: "#B8B8B8", marginTop: "3px" }}> - {steamBranchStatus.message} - </div> - )} - </div> - </div> + <Field + label="Steam branch" + description={`${steamBranchStatus.current_branch || "public"}${steamBranchStatus.needs_switch ? ` - ${steamBranchStatus.message}` : ""}`} + /> </PanelSectionRow> )} </> |