refactor: resize all text fields and buttons to be 32px (#7)

resize all text fields and buttons to be 32px. Adjust text field label
margins to account for resized text fields and realign adjacent elements

issue-6222886

src/App.scss

@@ -152,4 +152,14 @@
     color: inherit;
     font-weight: inherit;
     font-size: inherit;
+}
+
+.form-control {
+    height: 32px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.form-group label {
+    margin-bottom: 4px;
 }

src/react/components/common/alert/alert.tsx

@@ -2,7 +2,6 @@
 // Licensed under the MIT license.
 
 import React, { RefObject } from "react";
-import { Button } from "reactstrap";
 import MessageBox, { IMessageBoxProps } from "../messageBox/messageBox";
 
 /**
@@ -56,13 +55,14 @@ export default class Alert extends React.Component<IAlertProps, IAlertState> {
                 params={this.state.params}
                 show={this.props.show}
             >
-                <Button
+                <button
+                    className="btn32px btn-info pr-3 pl-3"
                     autoFocus={true}
                     color={this.props.closeButtonColor || "primary"}
                     onClick={this.onCloseClick}
                 >
                     {this.props.closeButtonText || "OK"}
-                </Button>
+                </button>
             </MessageBox>
         );
     }

src/react/components/common/arrayField/arrayFieldTemplate.tsx

@@ -10,7 +10,7 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
         <div>
             {props.canAdd &&
                 <div className="array-field-toolbar my-3">
-                    <button type="button" className="btn btn-info flex-center" onClick={props.onAddClick}>
+                    <button type="button" className="btn32px btn-info flex-center" onClick={props.onAddClick}>
                         <i className="ms-Icon ms-Icon--AddTo"></i>
                         <span className="ml-1">Add {props.schema.title}</span>
                     </button>
@@ -21,9 +21,10 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
                     {item.children}
                     {item.hasRemove &&
                         <div className="array-item-toolbar">
+                            <label className="labelClose">Delete</label>
                             <button
                                 type="button"
-                                className="btn btn-sm btn-danger flex-center"
+                                className="btn32px btn-danger flex-center"
                                 onClick={item.onDropIndexClick(item.index)}>
                                 <i className="ms-Icon ms-Icon--Delete"></i>
                                 <span className="ml-1">{strings.common.delete}</span>

src/react/components/common/common.scss

@@ -103,3 +103,16 @@
   display: flex;
   align-items: center;
 }
+
+.array-item-toolbar {
+  label {
+    visibility: hidden;
+  }
+  button {
+    margin-bottom: 16px;
+  }
+}
+
+.labelClose {
+  margin-bottom: 4px;
+}

src/react/components/common/connectionPicker/connectionPicker.tsx

@@ -66,9 +66,11 @@ export class ConnectionPicker extends React.Component<IConnectionPickerProps, IC
                     }
                 </select>
                 <div className="input-group-append">
-                    <button className="btn btn-primary add-connection"
+                    <button className="btn32px btn-primary add-connection"
                         type="button"
-                        onClick={this.createConnection}>Add Connection</button>
+                        onClick={this.createConnection}>
+                    Add Connection
+                    </button>
                 </div>
             </div>
         );

src/react/components/common/protectedInput/protectedInput.tsx

@@ -67,13 +67,13 @@ export class ProtectedInput extends React.Component<IProtectedInputProps, IProte
                 <div className="input-group-append">
                     <button type="button"
                         title={showKey ? "Hide" : "Show"}
-                        className="btn btn-primary btn-visibility"
+                        className="btn32px btn-primary btn-visibility"
                         onClick={this.toggleKeyVisibility}>
                         <i className={showKey ? "ms-Icon ms-Icon--Hide3" : "ms-Icon ms-Icon--View"}></i>
                     </button>
                     <button type="button"
                         title="Copy"
-                        className="btn btn-primary btn-copy"
+                        className="btn32px btn-primary btn-copy"
                         onClick={this.copyKey}>
                         <i className="ms-Icon ms-Icon--Copy"></i>
                     </button>

src/react/components/pages/appSettings/appSettingsForm.tsx

@@ -83,10 +83,15 @@ export class AppSettingsForm extends React.Component<IAppSettingsFormProps, IApp
                         formData={this.state.appSettings}
                         onSubmit={(form) => this.props.onSubmit(form.formData)}>
                         <div>
-                            <button type="submit" className="btn btn-success mr-1">{strings.appSettings.save}</button>
+                            <button
+                                type="submit" 
+                                className="btn32px btn-success mr-1">
+                                {strings.appSettings.save}
+                            </button>
                             <button type="button"
-                                className="btn btn-secondary btn-cancel"
-                                onClick={this.onFormCancel}>{strings.common.cancel}</button>
+                                className="btn32px btn-secondary btn-cancel"
+                                onClick={this.onFormCancel}>{strings.common.cancel}
+                            </button>
                         </div>
                     </Form>
                 </div>