From 091201756b88425f9e1ed801ad0684040729bbb6 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Mon, 23 Oct 2017 10:35:30 -0400
Subject: [PATCH] Add UI formatting for edit fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This adds formatting and icons to the edit field buttons at the top of the ui, as well as some additional components for abstraction – such as `InputGroup`, `ButtonGroup` and `EditFieldButton` (which is a subcomponent of the paint editor)
---
 src/components/paint-editor/paint-editor.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index 38d15f81..3be5884d 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@@ -101,13 +101,13 @@ class PaintEditorComponent extends React.Component {
                             </ButtonGroup>
                         </InputGroup>
 
-                        {/* To be Group/Ungroup */}
+                        {/* Group/Ungroup */}
                         <InputGroup className={styles.modDashedBorder}>
                             <EditFieldButton
                                 imgAlt="Group Icon"
                                 imgSrc={groupIcon}
                                 title="Group"
-                                onClick={function () {}}
+                                onClick={this.props.onGroup}
                             />
                             <EditFieldButton
                                 imgAlt="Ungroup Icon"
@@ -150,14 +150,14 @@ class PaintEditorComponent extends React.Component {
                         </InputGroup>
 
                         {/* To be rotation point */}
-                        {/* <InputGroup>
+                        <InputGroup>
                             <EditFieldButton
                                 imgAlt="Rotation Point Icon"
                                 imgSrc={rotationPointIcon}
                                 title="Rotation Point"
                                 onClick={function () {}}
                             />
-                        </InputGroup> */}
+                        </InputGroup>
                     </div>
 
                     {/* Second Row */}
@@ -236,12 +236,14 @@ class PaintEditorComponent extends React.Component {
 PaintEditorComponent.propTypes = {
     intl: intlShape,
     name: PropTypes.string,
+    onGroup: PropTypes.func.isRequired,
     onRedo: PropTypes.func.isRequired,
     onSendBackward: PropTypes.func.isRequired,
     onSendForward: PropTypes.func.isRequired,
     onSendToBack: PropTypes.func.isRequired,
     onSendToFront: PropTypes.func.isRequired,
     onUndo: PropTypes.func.isRequired,
+    onUngroup: PropTypes.func.isRequired,
     onUpdateName: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired,
     rotationCenterX: PropTypes.number,