Implement UI theme colors.

1 files changed, 55 insertions, 0 deletions

diff --git a/web/react/components/user_settings/premade_theme_chooser.jsx b/web/react/components/user_settings/premade_theme_chooser.jsx
new file mode 100644
index 000000000..e36503053
--- /dev/null
+++ b/web/react/components/user_settings/premade_theme_chooser.jsx
@@ -0,0 +1,55 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var Utils = require('../../utils/utils.jsx');
+var Constants = require('../../utils/constants.jsx');
+
+export default class PremadeThemeChooser extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    render() {
+        const theme = this.props.theme;
+
+        const premadeThemes = [];
+        for (const k in Constants.THEMES) {
+            if (Constants.THEMES.hasOwnProperty(k)) {
+                const premadeTheme = $.extend(true, {}, Constants.THEMES[k]);
+
+                let activeClass = '';
+                if (premadeTheme.type === theme.type) {
+                    activeClass = 'active';
+                }
+
+                premadeThemes.push(
+                    <div className='col-sm-3 premade-themes'>
+                        <div
+                            className={activeClass}
+                            onClick={() => this.props.updateTheme(premadeTheme)}
+                        >
+                            <label>
+                                <img
+                                    className='img-responsive'
+                                    src={'/static/images/themes/' + premadeTheme.type + '.png'}
+                                />
+                                <div className='theme-label'>{Utils.toTitleCase(premadeTheme.type)}</div>
+                            </label>
+                        </div>
+                    </div>
+                );
+            }
+        }
+
+        return (
+            <div className='row'>
+                {premadeThemes}
+            </div>
+        );
+    }
+}
+
+PremadeThemeChooser.propTypes = {
+    theme: React.PropTypes.object.isRequired,
+    updateTheme: React.PropTypes.func.isRequired
+};