add dynamic gradient colors

src/renderer/components/modal/modal.component.tsx

@@ -1,20 +1,22 @@
 import { ModalExitCode, ModalService, ModalType } from "renderer/services/modale.service";
-
-import { useEffect, useState } from "react"
 import { AnimatePresence, motion } from "framer-motion";
-
 import { LoginModal } from "./modal-types/login-modal.component";
 import { GuardModal } from "./modal-types/guard-modal.component";
 import { UninstallModal } from "./modal-types/uninstall-modal.component";
 import { InstallationFolderModal } from "./modal-types/installation-folder-modal.component";
 import { EditVersionModal } from "./modal-types/edit-version-modal.component";
 import { useObservable } from "renderer/hooks/use-observable.hook";
+import { ConfigurationService } from "renderer/services/configuration.service";
+import { DefaultConfigKey } from "renderer/config/default-configuration.config";
 
 export function Modal() {
 
    const modalSevice = ModalService.getInsance();
+   const configService = ConfigurationService.getInstance();
 
    const modalType = useObservable(modalSevice.modalType$);
+   const firstColor = useObservable(configService.watch("first-color" as DefaultConfigKey));
+   const secondColor = useObservable(configService.watch("second-color" as DefaultConfigKey));
 
   return  (
       <AnimatePresence>
@@ -23,7 +25,7 @@ export function Modal() {
                <motion.span key="modal-overlay" onClick={() => modalSevice.resolve({exitCode: ModalExitCode.NO_CHOICE})} className="absolute top-0 bottom-0 right-0 left-0 bg-black" initial={{opacity: 0}} animate={{opacity: modalType && .60}} exit={{opacity: 0}} transition={{duration: .2}}/>
                <motion.div key="modal" initial={{y: "100vh"}} animate={{y: 0}} exit={{y: "100vh"}}>
                   <div className="relative p-4 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-light-main-color-3 to-light-main-color-2 dark:from-main-color-3 dark:to-main-color-2">
-                     <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"/>
+                     <span className="absolute top-0 w-full left-0 h-1" style={{backgroundImage: `linear-gradient(to right, ${firstColor}, ${secondColor})`}}/>
                      {modalType === ModalType.STEAM_LOGIN && <LoginModal resolver={modalSevice.getResolver()}/>}
                      {modalType === ModalType.GUARD_CODE && <GuardModal resolver={modalSevice.getResolver()}/>}
                      {modalType === ModalType.UNINSTALL && <UninstallModal resolver={modalSevice.getResolver()}/>}