2016-06-17 19:37:29 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
var Isvg = require('react-inlinesvg');
|
2016-06-20 18:04:58 +02:00
|
|
|
var exitUrl = require('../../../images/exit.svg');
|
2016-06-20 20:58:15 +02:00
|
|
|
var plusUrl = require('../../../images/plus.svg');
|
|
|
|
var minusUrl = require('../../../images/minus.svg');
|
2016-06-17 19:37:29 +02:00
|
|
|
var classNames = require('classnames');
|
|
|
|
|
|
|
|
class Preferences extends React.Component {
|
|
|
|
render() {
|
2016-06-17 20:31:33 +02:00
|
|
|
let preferencesContainerClass = classNames({
|
2016-06-17 19:37:29 +02:00
|
|
|
"preferences": true,
|
|
|
|
"preferences--selected": this.props.isPreferencesShowing
|
|
|
|
});
|
|
|
|
return (
|
2016-06-20 18:04:58 +02:00
|
|
|
<div className={preferencesContainerClass} tabindex="0">
|
2016-06-20 20:58:15 +02:00
|
|
|
<div className="preferences__heading">
|
2016-06-20 21:23:42 +02:00
|
|
|
<h2 className="preferences__title">Preferences</h2>
|
2016-06-20 20:58:15 +02:00
|
|
|
<button className="preferences__exit-button" onClick={this.props.closePreferences}>
|
|
|
|
<Isvg src={exitUrl} alt="Exit Preferences" />
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div className="preference">
|
2016-06-21 05:04:41 +02:00
|
|
|
<h3 className="preference__title">Text Size</h3>
|
2016-06-20 21:23:42 +02:00
|
|
|
<button className="preference__plus-button" onClick={this.props.decreaseFont}>
|
2016-06-20 20:58:15 +02:00
|
|
|
<Isvg src={minusUrl} alt="Decrease Font Size" />
|
|
|
|
</button>
|
|
|
|
<p className="preference__value">{this.props.fontSize}</p>
|
2016-06-20 21:23:42 +02:00
|
|
|
<button className="preference__minus-button" onClick={this.props.increaseFont}>
|
2016-06-20 20:58:15 +02:00
|
|
|
<Isvg src={plusUrl} alt="Increase Font Size" />
|
|
|
|
</button>
|
|
|
|
</div>
|
2016-06-17 19:37:29 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Preferences;
|