From 3f141ed58b609736bbaabcca891f174882c57391 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Tue, 21 Jan 2025 15:47:05 +0100
Subject: [PATCH 1/3] feat(download): add title and remove show more links

---
 src/components/ModForm.tsx | 24 ++++++++++++++
 src/pages/mod/index.tsx    | 64 +++++++++-----------------------------
 src/types/mod.ts           |  1 +
 3 files changed, 39 insertions(+), 50 deletions(-)

diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx
index b9a476f..1d17a72 100644
--- a/src/components/ModForm.tsx
+++ b/src/components/ModForm.tsx
@@ -524,6 +524,7 @@ export const ModForm = () => {
 type DownloadUrlFieldsProps = {
   index: number
   url: string
+  title?: string
   hash: string
   signatureKey: string
   malwareScanLink: string
@@ -537,6 +538,7 @@ const DownloadUrlFields = React.memo(
   ({
     index,
     url,
+    title,
     hash,
     signatureKey,
     malwareScanLink,
@@ -579,6 +581,28 @@ const DownloadUrlFields = React.memo(
             </svg>
           </button>
         </div>
+        <div className='inputWrapperMain'>
+          <div className='inputWrapperMainBox'>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='-96 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
+            </svg>
+          </div>
+          <input
+            type='text'
+            className='inputMain'
+            name='title'
+            placeholder='Download Title'
+            value={title}
+            onChange={handleChange}
+          />
+          <div className='inputWrapperMainBox'></div>
+        </div>
         <div className='inputWrapperMain'>
           <div className='inputWrapperMainBox'>
             <svg
diff --git a/src/pages/mod/index.tsx b/src/pages/mod/index.tsx
index 5b97147..a0774b9 100644
--- a/src/pages/mod/index.tsx
+++ b/src/pages/mod/index.tsx
@@ -70,25 +70,6 @@ export const ModPage = () => {
 
   const [commentCount, setCommentCount] = useState(0)
 
-  const oldDownloadListRef = useRef<HTMLDivElement>(null)
-
-  const handleViewOldLinks = () => {
-    if (oldDownloadListRef.current) {
-      // Toggle styles
-      if (oldDownloadListRef.current.style.height === '0px') {
-        // Enable styles
-        oldDownloadListRef.current.style.padding = ''
-        oldDownloadListRef.current.style.height = ''
-        oldDownloadListRef.current.style.border = ''
-      } else {
-        // Disable styles
-        oldDownloadListRef.current.style.padding = '0'
-        oldDownloadListRef.current.style.height = '0'
-        oldDownloadListRef.current.style.border = 'unset'
-      }
-    }
-  }
-
   return (
     <>
       <RouterLoadingSpinner />
@@ -136,37 +117,16 @@ export const ModPage = () => {
                           </div>
                         )}
                         {mod.downloadUrls.length > 1 && (
-                          <>
-                            <div className='IBMSMSMBSSDownloadsActions'>
-                              <button
-                                className='btn btnMain'
-                                id='viewOldLinks'
-                                type='button'
-                                onClick={handleViewOldLinks}
-                              >
-                                View other links
-                              </button>
-                            </div>
-                            <div
-                              ref={oldDownloadListRef}
-                              id='oldDownloadList'
-                              className='IBMSMSMBSSDownloads'
-                              style={{
-                                padding: 0,
-                                height: '0px',
-                                border: 'unset'
-                              }}
-                            >
-                              {mod.downloadUrls
-                                .slice(1)
-                                .map((download, index) => (
-                                  <Download
-                                    key={`downloadUrl-${index}`}
-                                    {...download}
-                                  />
-                                ))}
-                            </div>
-                          </>
+                          <div className='IBMSMSMBSSDownloads'>
+                            {mod.downloadUrls
+                              .slice(1)
+                              .map((download, index) => (
+                                <Download
+                                  key={`downloadUrl-${index}`}
+                                  {...download}
+                                />
+                              ))}
+                          </div>
                         )}
                       </div>
                     </div>
@@ -608,6 +568,7 @@ const Body = ({
 
 const Download = ({
   url,
+  title,
   hash,
   signatureKey,
   malwareScanLink,
@@ -645,6 +606,9 @@ const Download = ({
 
   return (
     <div className='IBMSMSMBSSDownloadsElement'>
+      {typeof title !== 'undefined' && title !== '' && (
+        <span className=''>{title}</span>
+      )}
       <div className='IBMSMSMBSSDownloadsElementInside'>
         <button
           className='btn btnMain IBMSMSMBSSDownloadsElementBtn'
diff --git a/src/types/mod.ts b/src/types/mod.ts
index a62fe5b..555bdf0 100644
--- a/src/types/mod.ts
+++ b/src/types/mod.ts
@@ -41,6 +41,7 @@ export interface ModFormState {
 
 export interface DownloadUrl {
   url: string
+  title?: string
   hash: string
   signatureKey: string
   malwareScanLink: string
-- 
2.34.1


From 4bec281ea0dc876de94681c12fdf6b6d7668441e Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Tue, 21 Jan 2025 16:27:03 +0100
Subject: [PATCH 2/3] feat(download): add media url

---
 src/components/ModForm.tsx    | 38 +++++++++++++++++++++++++++++++++++
 src/pages/mod/index.tsx       |  3 ++-
 src/pages/submitMod/action.ts | 13 ++++++++++++
 src/types/mod.ts              |  1 +
 4 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx
index 1d17a72..45c3985 100644
--- a/src/components/ModForm.tsx
+++ b/src/components/ModForm.tsx
@@ -457,12 +457,14 @@ export const ModForm = () => {
           <Fragment key={`download-${index}`}>
             <DownloadUrlFields
               index={index}
+              title={download.title}
               url={download.url}
               hash={download.hash}
               signatureKey={download.signatureKey}
               malwareScanLink={download.malwareScanLink}
               modVersion={download.modVersion}
               customNote={download.customNote}
+              mediaUrl={download.mediaUrl}
               onUrlChange={handleDownloadUrlChange}
               onRemove={removeDownloadUrl}
             />
@@ -530,6 +532,7 @@ type DownloadUrlFieldsProps = {
   malwareScanLink: string
   modVersion: string
   customNote: string
+  mediaUrl?: string
   onUrlChange: (index: number, field: keyof DownloadUrl, value: string) => void
   onRemove: (index: number) => void
 }
@@ -544,6 +547,7 @@ const DownloadUrlFields = React.memo(
     malwareScanLink,
     modVersion,
     customNote,
+    mediaUrl,
     onUrlChange,
     onRemove
   }: DownloadUrlFieldsProps) => {
@@ -713,6 +717,40 @@ const DownloadUrlFields = React.memo(
           />
           <div className='inputWrapperMainBox'></div>
         </div>
+        <div className='inputWrapperMain'>
+          <div className='inputWrapperMainBox'>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='-96 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
+            </svg>
+          </div>
+          <div
+            style={{
+              width: '100%'
+            }}
+          >
+            <ImageUpload
+              onChange={(values) => {
+                onUrlChange(index, 'mediaUrl', values[0])
+              }}
+            />
+
+            <input
+              type='text'
+              className='inputMain'
+              placeholder='Media URL'
+              name='mediaUrl'
+              value={mediaUrl}
+              onChange={handleChange}
+            />
+          </div>
+          <div className='inputWrapperMainBox'></div>
+        </div>
       </div>
     )
   }
diff --git a/src/pages/mod/index.tsx b/src/pages/mod/index.tsx
index a0774b9..1d8d826 100644
--- a/src/pages/mod/index.tsx
+++ b/src/pages/mod/index.tsx
@@ -573,7 +573,8 @@ const Download = ({
   signatureKey,
   malwareScanLink,
   modVersion,
-  customNote
+  customNote,
+  mediaUrl
 }: DownloadUrl) => {
   const [showAuthDetails, setShowAuthDetails] = useState(false)
   const [showNotice, setShowNotice] = useState(false)
diff --git a/src/pages/submitMod/action.ts b/src/pages/submitMod/action.ts
index 5e51df4..51c16ef 100644
--- a/src/pages/submitMod/action.ts
+++ b/src/pages/submitMod/action.ts
@@ -256,6 +256,19 @@ const validateState = async (
 
         errors.downloadUrls![i] = 'Download url must be valid and reachable'
       }
+
+      if (
+        downloadUrl.mediaUrl &&
+        downloadUrl.mediaUrl.trim() !== '' &&
+        (!isValidUrl(downloadUrl.mediaUrl) ||
+          !isValidImageUrl(downloadUrl.mediaUrl) ||
+          !(await isReachable(downloadUrl.mediaUrl)))
+      ) {
+        if (!errors.downloadUrls)
+          errors.downloadUrls = Array(formState.downloadUrls.length)
+
+        errors.downloadUrls![i] = 'Media URLs must be valid and reachable image'
+      }
     }
   }
 
diff --git a/src/types/mod.ts b/src/types/mod.ts
index 555bdf0..fdd9036 100644
--- a/src/types/mod.ts
+++ b/src/types/mod.ts
@@ -47,6 +47,7 @@ export interface DownloadUrl {
   malwareScanLink: string
   modVersion: string
   customNote: string
+  mediaUrl?: string
 }
 
 export interface ModDetails extends Omit<ModFormState, 'tags'> {
-- 
2.34.1


From d75e3508ea5d069ca64c0fa48b34ee15e774cc58 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Tue, 21 Jan 2025 17:19:35 +0100
Subject: [PATCH 3/3] feat(download): add download details popup

---
 src/components/DownloadDetailsPopup.tsx | 113 ++++++++++++++++++++++++
 src/pages/mod/index.tsx                 |  67 ++------------
 src/styles/downloads.css                |  76 +++++++++-------
 3 files changed, 163 insertions(+), 93 deletions(-)
 create mode 100644 src/components/DownloadDetailsPopup.tsx

diff --git a/src/components/DownloadDetailsPopup.tsx b/src/components/DownloadDetailsPopup.tsx
new file mode 100644
index 0000000..20f320f
--- /dev/null
+++ b/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
+  )
+}
diff --git a/src/pages/mod/index.tsx b/src/pages/mod/index.tsx
index 1d8d826..f5c4a14 100644
--- a/src/pages/mod/index.tsx
+++ b/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>
diff --git a/src/styles/downloads.css b/src/styles/downloads.css
index 0ff3847..66c7db4 100644
--- a/src/styles/downloads.css
+++ b/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);
 }
-
-- 
2.34.1