style: improve item page, update photo width/height code

src/components/modals/main/marketplace/Item.jsx

@@ -45,27 +45,26 @@ export default class Item extends React.PureComponent {
         <ArrowBackIcon className='backArrow' onClick={this.props.toggleFunction}/>
         <br/>
         <h1>{this.props.data.display_name}</h1>
-        <br/>
         {this.props.button}
-        <br/>
+        <br/><br/>
         {iconsrc ? <img alt='product' draggable='false' src={iconsrc} onClick={() => this.setState({ showLightbox: true })}/> : null}
+        <div className='side'>
+          <div className='productInformation'>
+            <ul>
+              <li className='header'>{language.version}</li>
+              <li>{this.props.data.version}</li>
+              <br/>
+              <li className='header'>{language.author}</li>
+              <li>{this.props.data.author}</li>
+             </ul>
+          </div>
+          <br/>
+          {warningHTML} 
+        </div>
+        <br/><br/>
         <div className='informationContainer'>
           <h1 className='overview'>{language.overview}</h1>
           <p className='description' dangerouslySetInnerHTML={{ __html: this.props.data.description }}></p>
-            <div className='productInformation'>
-              <ul>
-                {/* <li className='header'>{language.last_updated}</li>
-                <li>{this.props.data.updated}</li>
-                <br/>*/}
-                <li className='header'>{language.version}</li>
-                <li>{this.props.data.version}</li>
-                <br/>
-                <li className='header'>{language.author}</li>
-               <li>{this.props.data.author}</li>
-             </ul>
-            </div>
-            <br/>
-            {warningHTML} 
         </div>
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
           <Lightbox modalClose={() => this.setState({ showLightbox: false })} img={iconsrc}/>

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

@@ -39,7 +39,8 @@
 
 .addToMue {
   @extend %storebutton;
-  margin-top: 12px;
+  float: right;
+  margin-top: -10px;
 }
 
 .sideload {

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

@@ -98,6 +98,15 @@ p.author {
     font-size: 40px;
     line-height: 20px;
   }
+
+  img {
+    float: left;
+  }
+}
+
+.side {
+  float: right;
+  margin-left: 20px;
 }
 
 #item>h1,
@@ -107,7 +116,7 @@ p.author {
 
 p.description {
   margin-top: 0px;
-  max-width: 400px;
+  max-width: 800px;
 }
 
 .emptyMessage {
@@ -136,7 +145,8 @@ p.description {
 }
 
 .informationContainer {
-  margin-top: 20px;
+  margin-top: 150px;
+  position: absolute;
 }
 
 .productInformation {

src/components/widgets/background/PhotoInformation.jsx

@@ -52,9 +52,9 @@ export default function PhotoInformation(props) {
 
   // get resolution
   const img = new Image();
-  img.onload = function() {
-    setWidth(this.width);
-    setHeight(this.height);
+  img.onload = (event) => {
+    setWidth(event.target.width);
+    setHeight(event.target.height);
   }
   img.src = props.url;