diff --git a/src/routes/Installs.css b/src/routes/Installs.css index 12169cb..8b384a4 100644 --- a/src/routes/Installs.css +++ b/src/routes/Installs.css @@ -27,7 +27,11 @@ } .popup-box { - @apply relative w-[85vw] h-[80vh] shadow-[0_0_20px_rgba(0,0,0,0.2)] overflow-auto p-6 rounded-lg bg-[#191919]; + @apply relative w-[85vw] h-[80vh] shadow-[0_0_20px_rgba(0,0,0,0.2)] rounded-lg bg-[#191919] flex flex-col p-6; +} + +.popup-content { + @apply flex-1 overflow-auto border border-[#323232] rounded-lg mt-4; } .close-button { diff --git a/src/routes/Installs.tsx b/src/routes/Installs.tsx index 76fa007..df81e71 100644 --- a/src/routes/Installs.tsx +++ b/src/routes/Installs.tsx @@ -3,16 +3,16 @@ import './Installs.css' import { useState } from 'react' import { faX } from '@fortawesome/free-solid-svg-icons' -export default function Installs() { +export default function Installs () { const [showPopup, setShowPopup] = useState(false) const [fadeOut, setFadeOut] = useState(false) - function downloadVersion() { + function downloadVersion () { setShowPopup(true) setFadeOut(false) } - function handleOverlayClick(e: React.MouseEvent) { + function handleOverlayClick (e: React.MouseEvent) { if (e.target === e.currentTarget) { setFadeOut(true) setTimeout(() => setShowPopup(false), 200) @@ -22,7 +22,10 @@ export default function Installs() { return ( <>

Installs

- {showPopup && ( @@ -41,6 +44,9 @@ export default function Installs() {

Select versions to download

+
+

Downloading version list...

+
)}