feat(download): add download details popup

src/components/DownloadDetailsPopup.tsx

@@ -0,0 +1,113 @@
+import { createPortal } from 'react-dom'
+import { DownloadUrl } from '../types'
+
+export const DownloadDetailsPopup = ({
+  title,
+  url,
+  hash,
+  signatureKey,
+  malwareScanLink,
+  modVersion,
+  customNote,
+  mediaUrl,
+  handleClose
+}: DownloadUrl & {
+  handleClose: () => void
+}) => {
+  return createPortal(
+    <div className='popUpMain'>
+      <div className='ContainerMain'>
+        <div className='popUpMainCardWrapper'>
+          <div className='popUpMainCard'>
+            <div className='popUpMainCardTop'>
+              <div className='popUpMainCardTopInfo'>
+                <h3>{title || 'Authentication Details'}</h3>
+              </div>
+              <div className='popUpMainCardTopClose' onClick={handleClose}>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-96 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                  style={{ zIndex: 1 }}
+                >
+                  <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
+                </svg>
+              </div>
+            </div>
+            <div className='pUMCB_Zaps'>
+              <div className='pUMCB_ZapsInside'>
+                <div className='IBMSMSMBSSDownloadsElementInsideAltTable'>
+                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                      <p>Download URL</p>
+                    </div>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                      <p>{url}</p>
+                    </div>
+                  </div>
+                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                      <p>SHA-256 hash</p>
+                    </div>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                      <p>{hash}</p>
+                    </div>
+                  </div>
+                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                      <p>Signature from</p>
+                    </div>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                      <p>{signatureKey}</p>
+                    </div>
+                  </div>
+                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                      <p>Scan</p>
+                    </div>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                      <p>{malwareScanLink}</p>
+                    </div>
+                  </div>
+                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                      <p>Mod Version</p>
+                    </div>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                      <p>{modVersion}</p>
+                    </div>
+                  </div>
+                  <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                      <p>Note</p>
+                    </div>
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                      <p>{customNote}</p>
+                    </div>
+                  </div>
+                  {typeof mediaUrl !== 'undefined' && mediaUrl !== '' && (
+                    <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
+                      <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
+                        <p>Media</p>
+                      </div>
+                      <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
+                        <img
+                          src={mediaUrl}
+                          className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol_Img'
+                          alt=''
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

src/pages/mod/index.tsx

@@ -41,6 +41,7 @@ import { RouterLoadingSpinner } from 'components/LoadingSpinner'
 import { OriginalAuthor } from 'components/OriginalAuthor'
 import { Viewer } from 'components/Markdown/Viewer'
 import { PostWarnings } from 'components/PostWarning'
+import { DownloadDetailsPopup } from 'components/DownloadDetailsPopup'
 
 const MOD_REPORT_REASONS = [
   { label: 'Actually CP', key: 'actuallyCP' },
@@ -566,16 +567,8 @@ const Body = ({
   )
 }
 
-const Download = ({
-  url,
-  title,
-  hash,
-  signatureKey,
-  malwareScanLink,
-  modVersion,
-  customNote,
-  mediaUrl
-}: DownloadUrl) => {
+const Download = (props: DownloadUrl) => {
+  const { url, title, malwareScanLink } = props
   const [showAuthDetails, setShowAuthDetails] = useState(false)
   const [showNotice, setShowNotice] = useState(false)
   const [showScanNotice, setShowCanNotice] = useState(false)
@@ -812,56 +805,10 @@ const Download = ({
           Authentication Details
         </p>
         {showAuthDetails && (
-          <div className='IBMSMSMBSSDownloadsElementInsideAltTable'>
-            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                <p>Download URL</p>
-              </div>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                <p>{url}</p>
-              </div>
-            </div>
-            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                <p>SHA-256 hash</p>
-              </div>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                <p>{hash}</p>
-              </div>
-            </div>
-            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                <p>Signature from</p>
-              </div>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                <p>{signatureKey}</p>
-              </div>
-            </div>
-            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                <p>Scan</p>
-              </div>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                <p>{malwareScanLink}</p>
-              </div>
-            </div>
-            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                <p>Mod Version</p>
-              </div>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                <p>{modVersion}</p>
-              </div>
-            </div>
-            <div className='IBMSMSMBSSDownloadsElementInsideAltTableRow'>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst'>
-                <p>Note</p>
-              </div>
-              <div className='IBMSMSMBSSDownloadsElementInsideAltTableRowCol'>
-                <p>{customNote}</p>
-              </div>
-            </div>
-          </div>
+          <DownloadDetailsPopup
+            {...props}
+            handleClose={() => setShowAuthDetails(false)}
+          />
         )}
       </div>
     </div>

src/styles/downloads.css

@@ -11,7 +11,7 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 15px;
-  border: solid 1px rgba(255,255,255,0.05);
+  border: solid 1px rgba(255, 255, 255, 0.05);
   overflow: auto;
   max-height: 550px;
   padding: 15px;
@@ -27,7 +27,7 @@
 }
 
 .IBMSMSMBSSDownloadsTitle {
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 
 .IBMSMSMBSSDownloadsElement {
@@ -36,11 +36,11 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 10px;
-  border: solid 1px rgba(255,255,255,0);
-  background: rgba(255,255,255,0.05);
+  border: solid 1px rgba(255, 255, 255, 0);
+  background: rgba(255, 255, 255, 0.05);
   padding: 10px;
   border-radius: 10px;
-  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+  box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
 }
 
 @media (max-width: 768px) {
@@ -50,7 +50,7 @@
 }
 
 .btnMain.IBMSMSMBSSDownloadsElementBtn {
-  background: rgba(255,255,255,0.05);
+  background: rgba(255, 255, 255, 0.05);
   border-radius: 10px;
   width: 100%;
 }
@@ -62,8 +62,8 @@
 }
 
 .btnMain.IBMSMSMBSSDownloadsElementBtn:hover {
-  background: rgba(255,255,255,0.1);
-  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
 }
 
 .IBMSMSMBSSDownloadsElementInside {
@@ -71,7 +71,7 @@
   flex-direction: column;
   justify-content: start;
   align-items: start;
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
   grid-gap: 10px;
 }
 
@@ -97,27 +97,30 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  background: rgba(255,255,255,0);
+  background: rgba(255, 255, 255, 0);
   overflow: hidden;
   border-radius: 10px;
-  border: solid 1px rgba(255,255,255,0.05);
+  border: solid 1px rgba(255, 255, 255, 0.05);
   cursor: pointer;
 }
 
 .IBMSMSMBSSDEIReactionsElement:hover {
   transition: ease 0.4s;
-  background: rgba(255,255,255,0.05);
-  color: rgba(255,255,255,0.75);
-  border: solid 1px rgba(255,255,255,0);
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.75);
+  border: solid 1px rgba(255, 255, 255, 0);
 }
 
-.IBMSMSMBSSDEIReactionsElement:hover > .IBMSMSMBSSDEIReactionsElementIconWrapper {
+.IBMSMSMBSSDEIReactionsElement:hover
+  > .IBMSMSMBSSDEIReactionsElementIconWrapper {
   transition: ease 0.4s;
-  background: rgba(255,255,255,0.05);
-  border-right: solid 1px rgba(255,255,255,0);
+  background: rgba(255, 255, 255, 0.05);
+  border-right: solid 1px rgba(255, 255, 255, 0);
 }
 
-.IBMSMSMBSSDEIReactionsElement:hover > .IBMSMSMBSSDEIReactionsElementIconWrapper > .IBMSMSMBSSDEIReactionsElementIcon {
+.IBMSMSMBSSDEIReactionsElement:hover
+  > .IBMSMSMBSSDEIReactionsElementIconWrapper
+  > .IBMSMSMBSSDEIReactionsElementIcon {
   transform: scale(1.1);
 }
 
@@ -147,9 +150,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  background: rgba(255,255,255,0);
+  background: rgba(255, 255, 255, 0);
   padding: 10px 5px;
-  border-right: solid 1px rgba(255,255,255,0.05);
+  border-right: solid 1px rgba(255, 255, 255, 0.05);
 }
 
 .IBMSMSMBSSDownloadsElementInsideDetails {
@@ -160,17 +163,20 @@
 }
 
 .IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive {
-  background: rgba(255,255,255,0.05);
-  border: solid 1px rgba(255,255,255,0);
+  background: rgba(255, 255, 255, 0.05);
+  border: solid 1px rgba(255, 255, 255, 0);
 }
 
-.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive > .IBMSMSMBSSDEIReactionsElementIconWrapper {
-  background: rgba(255,255,255,0.05);
-  border-right: solid 1px rgba(255,255,255,0);
+.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive
+  > .IBMSMSMBSSDEIReactionsElementIconWrapper {
+  background: rgba(255, 255, 255, 0.05);
+  border-right: solid 1px rgba(255, 255, 255, 0);
 }
 
-.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive > .IBMSMSMBSSDEIReactionsElementIconWrapper > .IBMSMSMBSSDEIReactionsElementIcon {
-  color: rgba(255,255,255,0.75);
+.IBMSMSMBSSDEIReactionsElement.IBMSMSMBSSDEIReactionsElementActive
+  > .IBMSMSMBSSDEIReactionsElementIconWrapper
+  > .IBMSMSMBSSDEIReactionsElementIcon {
+  color: rgba(255, 255, 255, 0.75);
 }
 
 .IBMSMSMBSSDownloadsActions {
@@ -188,7 +194,7 @@
   display: flex;
   flex-direction: column;
   border-radius: 10px;
-  border: solid 1px rgba(255,255,255,0.1);
+  border: solid 1px rgba(255, 255, 255, 0.1);
   overflow: auto;
   grid-gap: 1px;
 }
@@ -202,7 +208,7 @@
 
 .IBMSMSMBSSDownloadsElementInsideAltTableRow:hover {
   transition: ease 0.4s;
-  background: rgba(255,255,255,0.05);
+  background: rgba(255, 255, 255, 0.05);
 }
 
 @media (max-width: 576px) {
@@ -216,12 +222,17 @@
   text-align: start;
   padding: 10px 15px;
 }
+.IBMSMSMBSSDownloadsElementInsideAltTableRowCol_Img {
+  width: 100%;
+  max-width: 300px;
+  border-radius: 6px;
+}
 
 .IBMSMSMBSSDownloadsElementInsideAltTableRowCol.IBMSMSMBSSDownloadsElementInsideAltTableRowColFirst {
   text-align: center;
   font-weight: bold;
   max-width: 200px;
-  background: rgba(255,255,255,0.05);
+  background: rgba(255, 255, 255, 0.05);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -237,13 +248,12 @@
   transition: ease 0.4s;
   cursor: pointer;
   font-weight: 400;
-  color: rgba(255,255,255,0.25);
+  color: rgba(255, 255, 255, 0.25);
 }
 
 .IBMSMSMBSSDownloadsElementInsideAltText:hover {
   transition: ease 0.4s;
   cursor: pointer;
   font-weight: 600;
-  color: rgba(255,255,255,0.75);
+  color: rgba(255, 255, 255, 0.75);
 }
-