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,12 +75,18 @@ export default class ColorPicker extends Component {
         zIndex: '100',
       },
     };
-    return (
-      <div>
+
+    if (position === 'top') {
+      styles.wrapper.transform = 'translateY(-100%)';
+      styles.wrapper.paddingBottom = 8;
+    }
+
+    const swatch = (
       <div style={styles.swatch} onClick={this.handleClick}>
         <div style={styles.color} />
       </div>
-        {this.state.displayColorPicker ? (
+    );
+    const picker = this.state.displayColorPicker ? (
       <div style={styles.popover}>
         <div style={styles.cover} onClick={this.handleClose} />
         <div style={styles.wrapper}>
@@ -91,8 +98,11 @@ export default class ColorPicker extends Component {
           />
         </div>
       </div>
-        ) : null}
-      </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',