From e4a15076f458be1416de25b2c45578975b914de5 Mon Sep 17 00:00:00 2001
From: JoramWilander <jwawilander@gmail.com>
Date: Wed, 23 Sep 2015 10:12:40 -0400
Subject: Implement UI theme colors.

---
 .../user_settings/premade_theme_chooser.jsx        | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 web/react/components/user_settings/premade_theme_chooser.jsx

(limited to 'web/react/components/user_settings/premade_theme_chooser.jsx')

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
+};
-- 
cgit v1.2.3-1-g7c22


From e79e66c0a41dd4aaf0bf2873689120253c9339a7 Mon Sep 17 00:00:00 2001
From: JoramWilander <jwawilander@gmail.com>
Date: Wed, 23 Sep 2015 15:29:39 -0400
Subject: Fix theme images 404ing.

---
 web/react/components/user_settings/premade_theme_chooser.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'web/react/components/user_settings/premade_theme_chooser.jsx')

diff --git a/web/react/components/user_settings/premade_theme_chooser.jsx b/web/react/components/user_settings/premade_theme_chooser.jsx
index e36503053..e6aa2f5b9 100644
--- a/web/react/components/user_settings/premade_theme_chooser.jsx
+++ b/web/react/components/user_settings/premade_theme_chooser.jsx
@@ -31,7 +31,7 @@ export default class PremadeThemeChooser extends React.Component {
                             <label>
                                 <img
                                     className='img-responsive'
-                                    src={'/static/images/themes/' + premadeTheme.type + '.png'}
+                                    src={'/static/images/themes/' + premadeTheme.type.toLowerCase() + '.png'}
                                 />
                                 <div className='theme-label'>{Utils.toTitleCase(premadeTheme.type)}</div>
                             </label>
-- 
cgit v1.2.3-1-g7c22