site: update color picker position

site/theme/template/Color/ColorPicker.jsx

@@ -12,6 +12,7 @@ export default class ColorPicker extends Component {
   static defaultProps = {
     onChange: noop,
     onChangeComplete: noop,
+    position: 'bottom',
   }
 
   constructor(props) {
@@ -39,7 +40,7 @@ export default class ColorPicker extends Component {
     this.props.onChangeComplete(color.hex);
   };
   render() {
-    const { small, type } = this.props;
+    const { small, type, position } = this.props;
 
     const Picker = pickers[type];
 
@@ -74,25 +75,34 @@ export default class ColorPicker extends Component {
         zIndex: '100',
       },
     };
-    return (
+
-      <div>
+    if (position === 'top') {
-        <div style={styles.swatch} onClick={this.handleClick}>
+      styles.wrapper.transform = 'translateY(-100%)';
-          <div style={styles.color} />
+      styles.wrapper.paddingBottom = 8;
-        </div>
+    }
-        {this.state.displayColorPicker ? (
+
-          <div style={styles.popover}>
+    const swatch = (
-            <div style={styles.cover} onClick={this.handleClose} />
+      <div style={styles.swatch} onClick={this.handleClick}>
-            <div style={styles.wrapper}>
+        <div style={styles.color} />
-              <Picker
-                {...this.props}
-                color={this.state.color}
-                onChange={this.handleChange}
-                onChangeComplete={this.handleChangeComplete}
-              />
-            </div>
-          </div>
-        ) : null}
       </div>
     );
+    const picker = this.state.displayColorPicker ? (
+      <div style={styles.popover}>
+        <div style={styles.cover} onClick={this.handleClose} />
+        <div style={styles.wrapper}>
+          <Picker
+            {...this.props}
+            color={this.state.color}
+            onChange={this.handleChange}
+            onChangeComplete={this.handleChangeComplete}
+          />
+        </div>
+      </div>
+    ) : null;
+
+    if (position === 'top') {
+      return <div>{picker}{swatch}</div>;
+    }
+    return <div>{swatch}{picker}</div>;
   }
 }

site/theme/template/Layout/Footer.jsx

@@ -104,6 +104,7 @@ class Footer extends React.Component {
                 type="sketch"
                 small
                 color={this.state.color}
+                position="top"
                 presetColors={[
                   '#f04134',
                   '#00a854',