fix: changelog style

src/components/modals/main/scss/marketplace/_main.scss

@@ -57,7 +57,6 @@
       img {
         margin-left: 10px;
         height: 15px;
-        cursor: pointer;
       }
     }
 
@@ -165,9 +164,10 @@ p.description {
 }
 
 #item>img, .updateimage, .updatechangelog>p>img {
-  border-radius: 24px;
+  border-radius: 12px;
   height: 200px;
   width: auto;
+  cursor: pointer;
 }
 
 .featured {

src/components/modals/main/scss/settings/_main.scss

@@ -168,4 +168,12 @@ legend {
     padding: 0;
     margin-left: 20px;
   }
+
+  a {
+    color: var(--modal-link);
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 }

src/components/modals/main/settings/sections/Changelog.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
 
+import Modal from 'react-modal';
+
+import Lightbox from '../../marketplace/Lightbox';
+
 import WifiOffIcon from '@material-ui/icons/WifiOff';
 
 export default class Changelog extends React.PureComponent {
   constructor() {
     super();
     this.state = {
-      title: null
+      title: null,
+      showLightbox: false,
+      lightboxImg: null
     };
     this.language = window.language.modals.update;
     this.controller = new AbortController();
@@ -19,13 +25,38 @@ export default class Changelog extends React.PureComponent {
       return;
     }
 
+    let date = new Date(data.date);
+    date = date.toLocaleDateString(window.languagecode.replace('_', '-'), { 
+      year: 'numeric', month: 'long', day: 'numeric' 
+    });
+
     this.setState({
       title: data.title,
-      date: data.date.split(' ')[0],
+      date: date,
       image: data.featured_image || null,
       author: 'By ' + data.authors.join(', '),
       html: data.html
     });
+
+    // lightbox etc
+    const content = document.querySelector('.tab-content');
+    const images = content.getElementsByTagName('img');
+    const links = content.getElementsByTagName('a');
+
+    for (let img of images) {
+      img.draggable = false;
+      img.onclick = () => {
+        this.setState({
+          showLightbox: true,
+          lightboxImg: img.src
+        });
+      };
+    }
+
+    for (let link = 0; link < links.length; link++) {
+      links[link].target = '_blank';
+      links[link].rel = 'noopener noreferrer';
+    }
   }
   
   componentDidMount() {
@@ -72,6 +103,9 @@ export default class Changelog extends React.PureComponent {
         <h5 style={{ 'lineHeight': '0px' }}>{this.state.author} • {this.state.date}</h5>
         {this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title} className='updateimage'/> : null}
         <div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
+        <Modal onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
+          <Lightbox modalClose={() => this.setState({ showLightbox: false })} img={this.state.lightboxImg}/>
+        </Modal>
       </>
     );
   }