Merge pull request #590 from hydralauncher/feature/adding-animation-t…

…o-game-details Feature/adding animation to game details
hydralauncher · Jun 12, 2024 · 55d1bfb · 55d1bfb
2 parents 33e9caf + 713a3f4
commit 55d1bfb
Show file tree

Hide file tree

Showing 57 changed files with 542 additions and 579 deletions.
diff --git a/src/renderer/src/app.css.ts b/src/renderer/src/app.css.ts
@@ -7,6 +7,7 @@ globalStyle("*", {
 
 globalStyle("::-webkit-scrollbar", {
   width: "9px",
+  backgroundColor: vars.color.darkBackground,
 });
 
 globalStyle("::-webkit-scrollbar-track", {

diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx
@@ -10,7 +10,6 @@ import {
 } from "@renderer/hooks";
 
 import * as styles from "./app.css";
-import { themeClass } from "./theme.css";
 
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
@@ -21,8 +20,6 @@ import {
   closeToast,
 } from "@renderer/features";
 
-document.body.classList.add(themeClass);
-
 export interface AppProps {
   children: React.ReactNode;
 }

diff --git a/src/renderer/src/components/backdrop/backdrop.css.ts b/src/renderer/src/components/backdrop/backdrop.css.ts
@@ -1,5 +1,6 @@
 import { keyframes } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
+
 import { SPACING_UNIT } from "../../theme.css";
 
 export const backdropFadeIn = keyframes({

diff --git a/src/renderer/src/components/badge/badge.css.ts b/src/renderer/src/components/badge/badge.css.ts
@@ -1,4 +1,5 @@
 import { style } from "@vanilla-extract/css";
+
 import { SPACING_UNIT } from "../../theme.css";
 
 export const badge = style({

diff --git a/src/renderer/src/components/bottom-panel/bottom-panel.css.ts b/src/renderer/src/components/bottom-panel/bottom-panel.css.ts
@@ -1,4 +1,5 @@
 import { style } from "@vanilla-extract/css";
+
 import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const bottomPanel = style({

diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.css.ts b/src/renderer/src/components/checkbox-field/checkbox-field.css.ts
@@ -1,6 +1,7 @@
-import { SPACING_UNIT, vars } from "../../theme.css";
 import { style } from "@vanilla-extract/css";
 
+import { SPACING_UNIT, vars } from "../../theme.css";
+
 export const checkboxField = style({
   display: "flex",
   flexDirection: "row",

diff --git a/src/renderer/src/components/game-card/game-card.css.ts b/src/renderer/src/components/game-card/game-card.css.ts
@@ -1,4 +1,5 @@
 import { style } from "@vanilla-extract/css";
+
 import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const card = style({

diff --git a/src/renderer/src/components/hero/hero.css.ts b/src/renderer/src/components/hero/hero.css.ts
@@ -1,4 +1,5 @@
 import { style } from "@vanilla-extract/css";
+
 import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const hero = style({

diff --git a/src/renderer/src/components/modal/modal.css.ts b/src/renderer/src/components/modal/modal.css.ts
@@ -1,5 +1,6 @@
 import { keyframes, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
+
 import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const scaleFadeIn = keyframes({

diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx
@@ -14,6 +14,7 @@ export interface ModalProps {
   onClose: () => void;
   large?: boolean;
   children: React.ReactNode;
+  clickOutsideToClose?: boolean;
 }
 
 export function Modal({
@@ -23,6 +24,7 @@ export function Modal({
   onClose,
   large,
   children,
+  clickOutsideToClose = true,
 }: ModalProps) {
   const [isClosing, setIsClosing] = useState(false);
   const modalContentRef = useRef<HTMLDivElement | null>(null);
@@ -60,6 +62,18 @@ export function Modal({
         }
       };
 
+      window.addEventListener("keydown", onKeyDown);
+
+      return () => {
+        window.removeEventListener("keydown", onKeyDown);
+      };
+    }
+
+    return () => {};
+  }, [handleCloseClick, visible]);
+
+  useEffect(() => {
+    if (clickOutsideToClose) {
       const onMouseDown = (e: MouseEvent) => {
         if (!isTopMostModal()) return;
         if (modalContentRef.current) {
@@ -73,17 +87,15 @@ export function Modal({
         }
       };
 
-      window.addEventListener("keydown", onKeyDown);
       window.addEventListener("mousedown", onMouseDown);
 
       return () => {
-        window.removeEventListener("keydown", onKeyDown);
         window.removeEventListener("mousedown", onMouseDown);
       };
     }
 
     return () => {};
-  }, [handleCloseClick, visible]);
+  }, [clickOutsideToClose, handleCloseClick]);
 
   if (!visible) return null;
 

diff --git a/src/renderer/src/components/select-field/select-field.css.ts b/src/renderer/src/components/select-field/select-field.css.ts
@@ -1,7 +1,8 @@
-import { SPACING_UNIT, vars } from "../../theme.css";
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
+import { SPACING_UNIT, vars } from "../../theme.css";
+
 export const select = recipe({
   base: {
     display: "inline-flex",

diff --git a/src/renderer/src/components/sidebar/routes.tsx b/src/renderer/src/components/sidebar/routes.tsx
@@ -1,4 +1,5 @@
 import { AppsIcon, GearIcon, HomeIcon } from "@primer/octicons-react";
+
 import { DownloadIcon } from "./download-icon";
 
 export const routes = [

diff --git a/src/renderer/src/components/sidebar/sidebar.css.ts b/src/renderer/src/components/sidebar/sidebar.css.ts
@@ -1,5 +1,6 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
+
 import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const sidebar = recipe({
@@ -11,6 +12,7 @@ export const sidebar = recipe({
     transition: "opacity ease 0.2s",
     borderRight: `solid 1px ${vars.color.border}`,
     position: "relative",
+    overflow: "hidden",
   },
   variants: {
     resizing: {
@@ -123,3 +125,46 @@ export const section = style({
   flexDirection: "column",
   paddingBottom: `${SPACING_UNIT}px`,
 });
+
+export const profileButton = style({
+  display: "flex",
+  cursor: "pointer",
+  transition: "all ease 0.1s",
+  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
+  alignItems: "center",
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
+  color: vars.color.muted,
+  borderBottom: `solid 1px ${vars.color.border}`,
+  boxShadow: "0px 0px 15px 0px #000000",
+  ":hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+  },
+});
+
+export const profileAvatar = style({
+  width: "30px",
+  height: "30px",
+  borderRadius: "50%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: vars.color.background,
+  position: "relative",
+});
+
+export const profileButtonInformation = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+});
+
+export const statusBadge = style({
+  width: "9px",
+  height: "9px",
+  borderRadius: "50%",
+  backgroundColor: vars.color.danger,
+  position: "absolute",
+  bottom: "-2px",
+  right: "-3px",
+  zIndex: "1",
+});