Fix image background

Author: FallingSnow

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
 build/
 tools/settings.json
-lightm-webkit2-material2*.tar.gz
+lightdm-webkit2-material2*.tar.gz

package.json

@@ -7,10 +7,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
-    "build": "cross-env NODE_ENV=production webpack -p --progress",
+    "build": "tools/build.js",
     "clean": "rm -rf build/*",
-    "package": "npm run build && tar -C build -cvzf lightdm-webkit2-material2-0.0.1-3.tar.gz .",
-    "translate": "node tools/translate.js",
+    "translate": "tools/translate.js",
     "preinstall": "git submodule update --init --recursive"
   },
   "repository": {

src/components/About.jsx

@@ -14,6 +14,7 @@ import {
     CardText
 } from 'material-ui/Card';
 import {FormattedMessage} from 'react-intl';
+const PackageConfig = require('../../package.json');
 
 export default class About extends React.PureComponent {
     constructor(props) {
@@ -39,23 +40,25 @@ export default class About extends React.PureComponent {
                     }}><FormattedMessage id="settingAProfileIcon" defaultMessage="Setting a profile icon"/></h4>
                     <br/>
                     <small><FormattedMessage id="seeForMoreInfo" defaultMessage="See {link} for more info." values={{
-                            link: <i key="link" style={{
-                                wordBreak: 'break-all'
-                            }}>https://github.com/Antergos/lightdm-webkit2-greeter/tree/master/themes/antergos#user-icons-management</i>
-                        }}/></small>
+                link: <i key="link" style={{
+                        wordBreak: 'break-all'
+                    }}>https://github.com/Antergos/lightdm-webkit2-greeter/tree/master/themes/antergos#user-icons-management</i>
+            }}/></small>
                     <br/><br/>
-                    <div style={{
+                    <section style={{
                         textAlign: 'center'
                     }}>
-                        <small>Crafted with
-                            &nbsp;<i className="fa fa-heart"></i>&nbsp;
-                            in the USA.</small>
-                    </div>
+                    <small>Crafted with &nbsp;<i className="fa fa-heart"></i>&nbsp; in the USA.</small>
+                        <br/>
+                            <small style={{fontSize: '0.6em', color: 'grey'}}><FormattedMessage id="version" defaultMessage="Version {version}" values={{
+                    version: PackageConfig.version + '-' + PackageConfig.subversion
+                }}/></small>
+        </section>
                 </div>https://github.com/Antergos/lightdm-webkit2-greeter/tree/master/themes/antergos#user-icons-management
                 <CardActions>
                     <FlatButton style={{
                         width: 100 + '%'
-                    }} icon={< i className = "fa fa-undo" > </i>} onTouchTap={() => this.props.router.push('/login')} label={<FormattedMessage id="back" defaultMessage="Back"/>}/>
+                    }} icon={< i className = "fa fa-undo" > </i>} onTouchTap={() => this.props.router.push('/login')} label={< FormattedMessage id = "back" defaultMessage = "Back" />}/>
                 </CardActions>
             </Card>
         );

src/components/Background.jsx

@@ -4,6 +4,7 @@ import Clock from 'react-clockwall';
 import Trianglify from './background/Trianglify.jsx';
 import Zodiac from './background/Zodiac.jsx';
 import RandomImage from './background/RandomImage.jsx';
+import Image from './background/Image.jsx';
 
 const Denque = require("denque");
 
@@ -78,16 +79,13 @@ class Background extends React.PureComponent {
         return true;
     }
     updateBackground(settings = this.props.settings) {
-        this.style = Style;
         this.background = null;
         switch (settings.backgroundEngine) {
             case 'zodiac':
                 this.background = <Zodiac colors={settings.backgroundColorScheme} density={settings.zodiacDensity}/>;
                 break;
             case 'image':
-                this.style = Object.assign({}, Style, {
-                    backgroundImage: 'url(\'file://' + settings.backgroundImageLocation + '\'), url(\'' + require('../static/no-mans-sky.jpg') + '\')'
-                });
+                this.background = <Image path={settings.backgroundImageLocation}/>;
                 break;
             case 'random-image':
                 this.background = <RandomImage directory={settings.backgroundImagesDirectory}/>;
@@ -130,7 +128,7 @@ class Background extends React.PureComponent {
     }
     render() {
         return (
-            <div style={this.style}>
+            <div style={Style}>
                 {this.background}
                 {this.clock}
             </div>