diff --git a/package.json b/package.json index 0fce540b..d3be2a32 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,6 @@ "jsonwebtoken": "^9.0.2", "knex": "^3.1.0", "lodash-es": "^4.17.21", - "lottie-react": "^2.4.0", "parse-torrent": "^11.0.17", "piscina": "^4.5.1", "react-hook-form": "^7.53.0", @@ -110,6 +109,7 @@ "prettier": "^3.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "sass-embedded": "^1.80.6", "ts-node": "^10.9.2", "typescript": "^5.3.3", "vite": "^5.0.12", diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx index 905bb943..098d5f45 100644 --- a/src/renderer/src/app.tsx +++ b/src/renderer/src/app.tsx @@ -29,11 +29,6 @@ import { UserFriendModal } from "./pages/shared-modals/user-friend-modal"; import { downloadSourcesWorker } from "./workers"; import { repacksContext } from "./context"; import { logger } from "./logger"; -import { SubscriptionTourModal } from "./pages/shared-modals/subscription-tour-modal"; - -interface TourModals { - subscriptionModal?: boolean; -} export interface AppProps { children: React.ReactNode; @@ -77,9 +72,6 @@ export function App() { const { showSuccessToast } = useToast(); - const [showSubscritionTourModal, setShowSubscritionTourModal] = - useState(false); - useEffect(() => { Promise.all([window.electron.getUserPreferences(), updateLibrary()]).then( ([preferences]) => { @@ -125,16 +117,6 @@ export function App() { }); }, [fetchUserDetails, syncFriendRequests, updateUserDetails, dispatch]); - useEffect(() => { - const tourModalsString = window.localStorage.getItem("tourModals") || "{}"; - - const tourModals = JSON.parse(tourModalsString) as TourModals; - - if (!tourModals.subscriptionModal) { - setShowSubscritionTourModal(true); - } - }, []); - const onSignIn = useCallback(() => { fetchUserDetails().then((response) => { if (response) { @@ -280,14 +262,6 @@ export function App() { }); }, [indexRepacks]); - const handleCloseSubscriptionTourModal = () => { - setShowSubscritionTourModal(false); - window.localStorage.setItem( - "tourModals", - JSON.stringify({ subscriptionModal: true } as TourModals) - ); - }; - const handleToastClose = useCallback(() => { dispatch(closeToast()); }, [dispatch]); @@ -307,11 +281,6 @@ export function App() { onClose={handleToastClose} /> - - {userDetails && ( +
{src ? ( - {alt} + {alt} ) : ( )} diff --git a/src/renderer/src/components/button/button.css.ts b/src/renderer/src/components/button/button.css.ts deleted file mode 100644 index 51f7509e..00000000 --- a/src/renderer/src/components/button/button.css.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { style, styleVariants } from "@vanilla-extract/css"; -import { SPACING_UNIT, vars } from "../../theme.css"; - -const base = style({ - padding: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px`, - backgroundColor: vars.color.muted, - borderRadius: "8px", - border: "solid 1px transparent", - transition: "all ease 0.2s", - cursor: "pointer", - minHeight: "40px", - display: "flex", - alignItems: "center", - justifyContent: "center", - gap: `${SPACING_UNIT}px`, - ":active": { - opacity: vars.opacity.active, - }, - ":disabled": { - opacity: vars.opacity.disabled, - cursor: "not-allowed", - }, -}); - -export const button = styleVariants({ - primary: [ - base, - { - ":hover": { - backgroundColor: "#DADBE1", - }, - ":disabled": { - backgroundColor: vars.color.muted, - }, - }, - ], - outline: [ - base, - { - backgroundColor: "transparent", - border: `solid 1px ${vars.color.border}`, - color: vars.color.muted, - ":hover": { - backgroundColor: "rgba(255, 255, 255, 0.1)", - }, - ":disabled": { - backgroundColor: "transparent", - }, - }, - ], - dark: [ - base, - { - backgroundColor: vars.color.darkBackground, - color: "#c0c1c7", - }, - ], - danger: [ - base, - { - borderColor: "transparent", - backgroundColor: "#a31533", - color: "#c0c1c7", - ":hover": { - backgroundColor: "#b3203f", - }, - }, - ], -}); diff --git a/src/renderer/src/components/button/button.scss b/src/renderer/src/components/button/button.scss new file mode 100644 index 00000000..0dea5576 --- /dev/null +++ b/src/renderer/src/components/button/button.scss @@ -0,0 +1,63 @@ +@use "../../scss/globals.scss"; + +.button { + padding: globals.$spacing-unit globals.$spacing-unit * 2; + background-color: globals.$muted-color; + border-radius: 8px; + border: solid 1px transparent; + transition: all ease 0.2s; + cursor: pointer; + min-height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: globals.$spacing-unit; + + &:active { + opacity: globals.$active-opacity; + } + + &:disabled { + opacity: globals.$disabled-opacity; + cursor: not-allowed; + } + + &--primary { + &:hover { + background-color: #dadbe1; + } + + &:disabled { + background-color: globals.$muted-color; + } + } + + &--outline { + background-color: transparent; + border: solid 1px globals.$border-color; + color: globals.$muted-color; + + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } + + &:disabled { + background-color: transparent; + } + } + + &--dark { + background-color: globals.$dark-background-color; + color: globals.$muted-color; + } + + &--danger { + border-color: transparent; + background-color: globals.$danger-color; + color: globals.$muted-color; + + &:hover { + background-color: #b3203f; + } + } +} diff --git a/src/renderer/src/components/button/button.tsx b/src/renderer/src/components/button/button.tsx index 66a67889..8d8bf1dd 100644 --- a/src/renderer/src/components/button/button.tsx +++ b/src/renderer/src/components/button/button.tsx @@ -1,12 +1,13 @@ import cn from "classnames"; -import * as styles from "./button.css"; + +import "./button.scss"; export interface ButtonProps extends React.DetailedHTMLProps< React.ButtonHTMLAttributes, HTMLButtonElement > { - theme?: keyof typeof styles.button; + theme?: "primary" | "outline" | "dark" | "danger"; } export function Button({ @@ -18,7 +19,7 @@ export function Button({ return ( 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 d24051e4..70ce165f 100644 --- a/src/renderer/src/pages/game-details/game-details-content.tsx +++ b/src/renderer/src/pages/game-details/game-details-content.tsx @@ -11,9 +11,8 @@ import * as styles from "./game-details.css"; import { useTranslation } from "react-i18next"; import { cloudSyncContext, gameDetailsContext } from "@renderer/context"; import { steamUrlBuilder } from "@shared"; -import Lottie from "lottie-react"; -import cloudAnimation from "@renderer/assets/lottie/cloud.json"; +import cloudIconAnimated from "@renderer/assets/icons/cloud-animated.gif"; import { useUserDetails } from "@renderer/hooks"; const HERO_ANIMATION_THRESHOLD = 25; @@ -165,10 +164,9 @@ export function GameDetailsContent() { position: "relative", }} > -
diff --git a/src/renderer/src/pages/game-details/game-details.tsx b/src/renderer/src/pages/game-details/game-details.tsx index a4b64225..4fbcc855 100644 --- a/src/renderer/src/pages/game-details/game-details.tsx +++ b/src/renderer/src/pages/game-details/game-details.tsx @@ -6,9 +6,8 @@ import type { GameRepack, GameShop, Steam250Game } from "@types"; import { Button, ConfirmationModal } from "@renderer/components"; import { buildGameDetailsPath } from "@renderer/helpers"; -import starsAnimation from "@renderer/assets/lottie/stars.json"; +import starsIconAnimated from "@renderer/assets/icons/stars-animated.gif"; -import Lottie from "lottie-react"; import { useTranslation } from "react-i18next"; import { SkeletonTheme } from "react-loading-skeleton"; import { GameDetailsSkeleton } from "./game-details-skeleton"; @@ -194,15 +193,15 @@ export default function GameDetails() {
-
{t("next_suggestion")} diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx index 88eb7c63..c1b8cff3 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx +++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx @@ -1,4 +1,9 @@ -import { GearIcon, PlayIcon, PlusCircleIcon } from "@primer/octicons-react"; +import { + DownloadIcon, + GearIcon, + PlayIcon, + PlusCircleIcon, +} from "@primer/octicons-react"; import { Button } from "@renderer/components"; import { useDownload, useLibrary } from "@renderer/hooks"; import { useContext, useState } from "react"; @@ -6,7 +11,6 @@ import { useTranslation } from "react-i18next"; import * as styles from "./hero-panel-actions.css"; import { gameDetailsContext } from "@renderer/context"; -import { DownloadIcon } from "@renderer/components/sidebar/download-icon"; export function HeroPanelActions() { const [toggleLibraryGameDisabled, setToggleLibraryGameDisabled] = @@ -125,7 +129,7 @@ export function HeroPanelActions() { disabled={isGameDownloading || !repacks.length} className={styles.heroPanelAction} > - + {t("download")} ); diff --git a/src/renderer/src/pages/shared-modals/subscription-tour-modal.tsx b/src/renderer/src/pages/shared-modals/subscription-tour-modal.tsx deleted file mode 100644 index 5e8c9d1a..00000000 --- a/src/renderer/src/pages/shared-modals/subscription-tour-modal.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { useTranslation } from "react-i18next"; -import { Button, Modal } from "../../components"; -import { SPACING_UNIT } from "../../theme.css"; - -export interface UserFriendsModalProps { - visible: boolean; - onClose: () => void; -} - -export const SubscriptionTourModal = ({ - visible, - onClose, -}: UserFriendsModalProps) => { - const { t } = useTranslation("tour"); - - const handleSubscribeClick = () => { - window.electron.openCheckout().finally(onClose); - }; - - return ( - -
-
-
-

Hydra Cloud

-
    -
  • - {t("cloud_saving")} -
    • -
  • - {t("cloud_achievements")} -
    • -
  • - {t("show_and_compare_achievements")} -
    • -
  • - {t("animated_profile_banner")} -
    • -
  • - {t("animated_profile_picture")} -
    • -
  • - {t("premium_support")} -
    • -
-
-
- -
- - ); -}; diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx index 91126923..23444e70 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx @@ -101,6 +101,7 @@ export const UserFriendModalAddFriend = ({ > {isAddingFriend ? t("sending") : t("add")} +