fix rounded style of buttons and fix invite users to a team style errors

app/javascript/src/components/InviteUsersModal/index.jsx

@@ -55,7 +55,7 @@ class InviteUsersModal extends Component {
         team_id: this.props.team.id
       })
       .then(({ data }) => {
-        this.setState({ inviteResults: data, showInviteUsersResults: true});
+        this.setState({ inviteResults: data, showInviteUsersResults: true });
       })
       .catch(error => {
         console.log("Invite As Error: ", error);
@@ -89,17 +89,23 @@ class InviteUsersModal extends Component {
           <Modal.Title>
             <FormattedMessage
               id="invite_users.modal_title"
-              values={{ team: this.props.team.name }}
+              values={{
+                team: this.props.team.name
+              }}
             />
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>{modalBody}</Modal.Body>
         <Modal.Footer>
           <StyledButtonToolbar>
-            <Button onClick={this.handleCloseModal}>
-              <FormattedMessage id="general.cancel" />
-            </Button>
             {inviteButton}
+            <Button onClick={this.handleCloseModal}>
+              <FormattedMessage
+                id={`general.${this.state.showInviteUsersResults
+                  ? "close"
+                  : "cancel"}`}
+              />
+            </Button>
           </StyledButtonToolbar>
         </Modal.Footer>
       </Modal>
@@ -110,10 +116,7 @@ class InviteUsersModal extends Component {
 InviteUsersModal.propTypes = {
   showModal: bool.isRequired,
   onCloseModal: func.isRequired,
-  team: shape({
-    id: number.isRequired,
-    name: string.isRequired
-  }).isRequired,
+  team: shape({ id: number.isRequired, name: string.isRequired }).isRequired,
   updateUsersCallback: func.isRequired
 };
 

app/javascript/src/styles/main.scss

@@ -14,6 +14,10 @@ body {
   background-color: $color-theme-primary;
 }
 
+.btn {
+  border-radius: 1.5em;
+}
+
 .btn-primary {
   background-color: $color-theme-secondary;
   border-color: $primary-hover-color;
@@ -30,3 +34,23 @@ body {
     position: relative !important;
   }
 }
+
+// tags input
+.react-tagsinput--focused {
+  border-color: $color-theme-primary;
+}
+
+.react-tagsinput-input {
+  width: 100%;
+}
+
+.react-tagsinput-tag {
+  background-color: $color-theme-primary;
+  border: 0;
+  color: $color-white;
+  font-weight: bold;
+}
+
+.react-tagsinput-remove {
+  color: $color-white;
+}