diff --git a/src/renderer/src/components/modal/modal.css.ts b/src/renderer/src/components/modal/modal.css.ts
index d6e4732d..54f856b9 100644
--- a/src/renderer/src/components/modal/modal.css.ts
+++ b/src/renderer/src/components/modal/modal.css.ts
@@ -2,22 +2,6 @@ import { keyframes, style } from "@vanilla-extract/css";
import { recipe } from "@vanilla-extract/recipes";
import { SPACING_UNIT, vars } from "../../theme.css";
-export const backdropFadeIn = keyframes({
- "0%": { backdropFilter: "blur(0px)", backgroundColor: "rgba(0, 0, 0, 0.5)" },
- "100%": {
- backdropFilter: "blur(2px)",
- backgroundColor: "rgba(0, 0, 0, 0.7)",
- },
-});
-
-export const backdropFadeOut = keyframes({
- "0%": { backdropFilter: "blur(2px)", backgroundColor: "rgba(0, 0, 0, 0.7)" },
- "100%": {
- backdropFilter: "blur(0px)",
- backgroundColor: "rgba(0, 0, 0, 0)",
- },
-});
-
export const modalSlideIn = keyframes({
"0%": { opacity: 0 },
"100%": {
@@ -32,34 +16,6 @@ export const modalSlideOut = keyframes({
},
});
-export const backdrop = recipe({
- base: {
- animationName: backdropFadeIn,
- animationDuration: "0.4s",
- backgroundColor: "rgba(0, 0, 0, 0.7)",
- position: "absolute",
- width: "100%",
- height: "100%",
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- zIndex: 1,
- top: 0,
- padding: `${SPACING_UNIT * 3}px`,
- backdropFilter: "blur(2px)",
- transition: "all ease 0.2s",
- },
- variants: {
- closing: {
- true: {
- animationName: backdropFadeOut,
- backdropFilter: "blur(0px)",
- backgroundColor: "rgba(0, 0, 0, 0)",
- },
- },
- },
-});
-
export const modal = recipe({
base: {
animationName: modalSlideIn,
@@ -69,7 +25,7 @@ export const modal = recipe({
maxWidth: "600px",
color: vars.color.bodyText,
maxHeight: "100%",
- border: `solid 1px ${vars.color.borderColor}`,
+ border: `solid 1px ${vars.color.border}`,
overflow: "hidden",
display: "flex",
flexDirection: "column",
@@ -94,13 +50,18 @@ export const modalHeader = style({
display: "flex",
gap: `${SPACING_UNIT}px`,
padding: `${SPACING_UNIT * 2}px`,
- borderBottom: `solid 1px ${vars.color.borderColor}`,
+ borderBottom: `solid 1px ${vars.color.border}`,
justifyContent: "space-between",
- alignItems: "flex-start",
+ alignItems: "center",
});
export const closeModalButton = style({
cursor: "pointer",
+ transition: "all ease 0.2s",
+ alignSelf: "flex-start",
+ ":hover": {
+ opacity: "0.75",
+ },
});
export const closeModalButtonIcon = style({
diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx
index b8b4e7ef..79308c1e 100644
--- a/src/renderer/src/components/modal/modal.tsx
+++ b/src/renderer/src/components/modal/modal.tsx
@@ -3,13 +3,14 @@ import { createPortal } from "react-dom";
import { XIcon } from "@primer/octicons-react";
import * as styles from "./modal.css";
-import { useAppDispatch } from "@renderer/hooks";
-import { toggleDragging } from "@renderer/features";
+
+import { Backdrop } from "../backdrop/backdrop";
+import { useTranslation } from "react-i18next";
export interface ModalProps {
visible: boolean;
title: string;
- description: string;
+ description?: string;
onClose: () => void;
children: React.ReactNode;
}
@@ -22,9 +23,10 @@ export function Modal({
children,
}: ModalProps) {
const [isClosing, setIsClosing] = useState(false);
- const dispatch = useAppDispatch();
const modalContentRef = useRef
(null);
+ const { t } = useTranslation("modal");
+
const handleCloseClick = useCallback(() => {
setIsClosing(true);
const zero = performance.now();
@@ -81,14 +83,10 @@ export function Modal({
return () => {};
}, [handleCloseClick, visible]);
- useEffect(() => {
- dispatch(toggleDragging(visible));
- }, [dispatch, visible]);
-
if (!visible) return null;
return createPortal(
-
+
{title}
-
{description}
+ {description &&
{description}
}
{children}
,
+ ,
document.body
);
}
diff --git a/src/renderer/src/components/sidebar/sidebar.css.ts b/src/renderer/src/components/sidebar/sidebar.css.ts
index e4ff22f8..b8527645 100644
--- a/src/renderer/src/components/sidebar/sidebar.css.ts
+++ b/src/renderer/src/components/sidebar/sidebar.css.ts
@@ -5,11 +5,11 @@ import { SPACING_UNIT, vars } from "../../theme.css";
export const sidebar = recipe({
base: {
backgroundColor: vars.color.darkBackground,
- color: "#c0c1c7",
+ color: vars.color.muted,
flexDirection: "column",
display: "flex",
transition: "opacity ease 0.2s",
- borderRight: `solid 1px ${vars.color.borderColor}`,
+ borderRight: `solid 1px ${vars.color.border}`,
position: "relative",
},
variants: {
@@ -65,7 +65,7 @@ export const menuItem = recipe({
textWrap: "nowrap",
display: "flex",
opacity: "0.9",
- color: "#DADBE1",
+ color: vars.color.muted,
":hover": {
opacity: "1",
},
@@ -130,7 +130,7 @@ export const section = recipe({
variants: {
hasBorder: {
true: {
- borderBottom: `solid 1px ${vars.color.borderColor}`,
+ borderBottom: `solid 1px ${vars.color.border}`,
},
},
},
@@ -157,10 +157,10 @@ export const footerSocialsItem = style({
height: "16px",
display: "flex",
alignItems: "center",
- transition: "all ease 0.15s",
+ transition: "all ease 0.2s",
+ cursor: "pointer",
":hover": {
- opacity: 0.75,
- cursor: "pointer",
+ opacity: "0.75",
},
});
diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx
index 5cdb2572..9906affb 100644
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@@ -16,21 +16,6 @@ import XLogo from "@renderer/assets/x-icon.svg?react";
import * as styles from "./sidebar.css";
-const socials = [
- {
- url: "https://discord.gg/hydralauncher",
- icon: 
- 
+ 
+ 
@@ -154,13 +168,21 @@ yarn make
+