-
- {t("total_play_time", {
- amount: formatPlayTime(
- userStats.totalPlayTimeInSeconds.value
- ),
- })}
-
+
{formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
{t("top_percentile", {
percentile: userStats.totalPlayTimeInSeconds.topPercentile,
diff --git a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.css.ts b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.css.ts
new file mode 100644
index 00000000..a164c900
--- /dev/null
+++ b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.css.ts
@@ -0,0 +1,79 @@
+import { SPACING_UNIT, vars } from "../../../theme.css";
+import { style } from "@vanilla-extract/css";
+
+export const friendListDisplayName = style({
+ fontWeight: "bold",
+ fontSize: vars.size.body,
+ textAlign: "left",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ whiteSpace: "nowrap",
+});
+
+export const friendListContainer = style({
+ display: "flex",
+ gap: `${SPACING_UNIT * 3}px`,
+ alignItems: "center",
+ borderRadius: "4px",
+ border: `solid 1px ${vars.color.border}`,
+ width: "100%",
+ height: "54px",
+ minHeight: "54px",
+ transition: "all ease 0.2s",
+ position: "relative",
+ ":hover": {
+ backgroundColor: "rgba(255, 255, 255, 0.15)",
+ },
+});
+
+export const friendListButton = style({
+ display: "flex",
+ alignItems: "center",
+ position: "absolute",
+ cursor: "pointer",
+ height: "100%",
+ width: "100%",
+ flexDirection: "row",
+ color: vars.color.body,
+ gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
+ padding: `0 ${SPACING_UNIT}px`,
+});
+
+export const friendRequestItem = style({
+ color: vars.color.body,
+ ":hover": {
+ backgroundColor: "rgba(255, 255, 255, 0.15)",
+ },
+});
+
+export const acceptRequestButton = style({
+ cursor: "pointer",
+ color: vars.color.body,
+ width: "28px",
+ height: "28px",
+ ":hover": {
+ color: vars.color.success,
+ },
+});
+
+export const cancelRequestButton = style({
+ cursor: "pointer",
+ color: vars.color.body,
+ width: "28px",
+ height: "28px",
+ ":hover": {
+ color: vars.color.danger,
+ },
+});
+
+export const friendCodeButton = style({
+ color: vars.color.body,
+ cursor: "pointer",
+ display: "flex",
+ gap: `${SPACING_UNIT / 2}px`,
+ alignItems: "center",
+ transition: "all ease 0.2s",
+ ":hover": {
+ color: vars.color.muted,
+ },
+});
diff --git a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx
new file mode 100644
index 00000000..1f90669f
--- /dev/null
+++ b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx
@@ -0,0 +1,36 @@
+import { Button, Modal } from "@renderer/components";
+import { SPACING_UNIT } from "@renderer/theme.css";
+import { useTranslation } from "react-i18next";
+
+export interface HydraCloudModalProps {
+ visible: boolean;
+ onClose: () => void;
+}
+
+export const HydraCloudModal = ({ visible, onClose }: HydraCloudModalProps) => {
+ const { t } = useTranslation("hydra_cloud");
+
+ const handleClickOpenCheckout = () => {
+ window.electron.openCheckout();
+ };
+
+ return (
+
+
+ Você descobriu uma funcionalidade Hydra Cloud!
+
+
+
+ );
+};
diff --git a/src/renderer/src/store.ts b/src/renderer/src/store.ts
index 0f2bee9f..7be495cb 100644
--- a/src/renderer/src/store.ts
+++ b/src/renderer/src/store.ts
@@ -8,6 +8,7 @@ import {
toastSlice,
userDetailsSlice,
gameRunningSlice,
+ subscriptionSlice,
} from "@renderer/features";
export const store = configureStore({
@@ -20,6 +21,7 @@ export const store = configureStore({
toast: toastSlice.reducer,
userDetails: userDetailsSlice.reducer,
gameRunning: gameRunningSlice.reducer,
+ subscription: subscriptionSlice.reducer,
},
});