diff --git a/src/main/services/window-manager.ts b/src/main/services/window-manager.ts index f51d0e39..dde51b5f 100644 --- a/src/main/services/window-manager.ts +++ b/src/main/services/window-manager.ts @@ -57,7 +57,7 @@ export class WindowManager { trafficLightPosition: { x: 16, y: 16 }, titleBarOverlay: { symbolColor: "#DADBE1", - color: "#151515", + color: "#00000000", height: 34, }, webPreferences: { diff --git a/src/renderer/src/pages/game-details/game-details-content.tsx b/src/renderer/src/pages/game-details/game-details-content.tsx index b2d1334a..e0cd168e 100644 --- a/src/renderer/src/pages/game-details/game-details-content.tsx +++ b/src/renderer/src/pages/game-details/game-details-content.tsx @@ -16,13 +16,8 @@ import { useUserDetails } from "@renderer/hooks"; import { useSubscription } from "@renderer/hooks/use-subscription"; import "./game-details.scss"; -const HERO_HEIGHT = 300; -const HERO_ANIMATION_THRESHOLD = 25; - export function GameDetailsContent() { const heroRef = useRef(null); - const containerRef = useRef(null); - const [isHeaderStuck, setIsHeaderStuck] = useState(false); const { t } = useTranslation("game_details"); @@ -61,7 +56,7 @@ export function GameDetailsContent() { return t("no_shop_details"); }, [shopDetails, t]); - const [backdropOpactiy, setBackdropOpacity] = useState(1); + const [backdropOpacity, setBackdropOpacity] = useState(1); const handleHeroLoad = async () => { const output = await average(steamUrlBuilder.libraryHero(objectId!), { @@ -80,26 +75,6 @@ export function GameDetailsContent() { setBackdropOpacity(1); }, [objectId]); - const onScroll: React.UIEventHandler = (event) => { - const heroHeight = heroRef.current?.clientHeight ?? HERO_HEIGHT; - - const scrollY = (event.target as HTMLDivElement).scrollTop; - const opacity = Math.max( - 0, - 1 - scrollY / (heroHeight - HERO_ANIMATION_THRESHOLD) - ); - - if (scrollY >= heroHeight && !isHeaderStuck) { - setIsHeaderStuck(true); - } - - if (scrollY <= heroHeight && isHeaderStuck) { - setIsHeaderStuck(false); - } - - setBackdropOpacity(opacity); - }; - const handleCloudSaveButtonClick = () => { if (!userDetails) { window.electron.openAuthWindow(AuthPage.SignIn); @@ -122,31 +97,25 @@ export function GameDetailsContent() {
- {game?.title} - -
+
+ {game?.title}
- +
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.tsx b/src/renderer/src/pages/game-details/hero/hero-panel.tsx index e9d110f0..3a07daa1 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel.tsx +++ b/src/renderer/src/pages/game-details/hero/hero-panel.tsx @@ -9,11 +9,7 @@ import { HeroPanelPlaytime } from "./hero-panel-playtime"; import { gameDetailsContext } from "@renderer/context"; import "./hero-panel.scss"; -export interface HeroPanelProps { - isHeaderStuck: boolean; -} - -export function HeroPanel({ isHeaderStuck }: HeroPanelProps) { +export function HeroPanel() { const { t } = useTranslation("game_details"); const { formatDate } = useDate(); @@ -54,10 +50,7 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) { game?.download?.status === "paused"; return ( -
+
{getInfo()}
diff --git a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx index 625f1a90..2cc5bec1 100644 --- a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx +++ b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx @@ -4,6 +4,7 @@ import { ThemeActions, ThemeCard, ThemePlaceholder } from "./index"; import type { Theme } from "@types"; import { ImportThemeModal } from "./modals/import-theme-modal"; import { settingsContext } from "@renderer/context"; +import { useNavigate } from "react-router-dom"; interface SettingsAppearanceProps { appearance: { @@ -24,8 +25,10 @@ export function SettingsAppearance({ authorId: string; authorName: string; } | null>(null); + const [hasShownModal, setHasShownModal] = useState(false); const { clearTheme } = useContext(settingsContext); + const navigate = useNavigate(); const loadThemes = useCallback(async () => { const themesList = await window.electron.getAllCustomThemes(); @@ -45,20 +48,37 @@ export function SettingsAppearance({ }, [loadThemes]); useEffect(() => { - if (appearance.theme && appearance.authorId && appearance.authorName) { + if ( + appearance.theme && + appearance.authorId && + appearance.authorName && + !hasShownModal + ) { setIsImportThemeModalVisible(true); setImportTheme({ theme: appearance.theme, authorId: appearance.authorId, authorName: appearance.authorName, }); + setHasShownModal(true); + + navigate("/settings", { replace: true }); + clearTheme(); } - }, [appearance.theme, appearance.authorId, appearance.authorName]); + }, [ + appearance.theme, + appearance.authorId, + appearance.authorName, + navigate, + hasShownModal, + clearTheme, + ]); const onThemeImported = useCallback(() => { setIsImportThemeModalVisible(false); + setImportTheme(null); loadThemes(); - }, [clearTheme, loadThemes]); + }, [loadThemes]); return (