add danger style to button

src/renderer/src/components/button/button.css.ts

@@ -55,4 +55,16 @@ export const button = styleVariants({
       color: "#c0c1c7",
     },
   ],
+  danger: [
+    base,
+    {
+      border: `solid 1px #a31533`,
+      backgroundColor: "transparent",
+      color: "white",
+      ":hover": {
+        backgroundColor: "#a31533",
+        color: "white",
+      },
+    },
+  ],
 });

src/renderer/src/pages/game-details/modals/game-options-modal.tsx

@@ -174,7 +174,7 @@ export function GameOptionsModal({
             <Button
               onClick={() => setShowRemoveGameModal(true)}
               style={{ alignSelf: "flex-end" }}
-              theme="outline"
+              theme="danger"
               disabled={deleting}
             >
               {t("remove_from_library")}
@@ -184,7 +184,7 @@ export function GameOptionsModal({
                 setShowDeleteModal(true);
               }}
               style={{ alignSelf: "flex-end" }}
-              theme="outline"
+              theme="danger"
               disabled={isGameDownloading || deleting || !game.downloadPath}
             >
               {t("remove_files")}