Add tabs for different integrations

angular.json

@@ -39,8 +39,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "5mb",
+                  "maximumError": "10mb"
                 },
                 {
                   "type": "anyComponentStyle",

src/app/settings/settings.component.html

@@ -77,6 +77,8 @@
 		<mat-tab *ngIf="proVersion"
 		         label="Integrations"
 				 style="align-items: center;">
+			<mat-tab-group mat-tab-align-tabs="start">
+				<mat-tab label="Xero">
 					<div class="container" style="margin-bottom:  20px;">
 						<mat-dialog-content [formGroup]="accCodForm">
 							<div style="height: 10px;
@@ -143,9 +145,6 @@
 										   placeholder="9999999999" 
 										   formControlName="xAcc"
 										   (keyup)="checkStatus($event)">
-<!--   
-							   (change)="xeroAccCodChanged($event)">
--->
 								</mat-form-field>
 
 							</div>	
@@ -170,5 +169,10 @@
 								margin-top: 10px;">
 					</div>			
 				</mat-tab>
+				<mat-tab label="WooCommerce">
+					<p>Woo va aqui</p>
+				</mat-tab>
+			</mat-tab-group>
+		</mat-tab>
 	</mat-tab-group>
 </div>