From 40b0a0088c0839080216980d5d9a7770dde383ee Mon Sep 17 00:00:00 2001
From: piratefinn <toyou1995@gmail.com>
Date: Mon, 12 Mar 2018 17:43:15 +0000
Subject: [PATCH] applied new category style to fixed category view

---
 src/app/dashboard/add-data.component.html | 25 ++++++++++-------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/app/dashboard/add-data.component.html b/src/app/dashboard/add-data.component.html
index 329c7d9..6d57253 100644
--- a/src/app/dashboard/add-data.component.html
+++ b/src/app/dashboard/add-data.component.html
@@ -78,21 +78,18 @@
             <label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
             <div class="col-md-9">
               <div class="row">
-                <div class="col-md-6">
-                  <div>
-                    <input value="" type="radio" name="radios" [(ngModel)]="categoryId">
-                    <label>Uncategorised</label>
-                  </div>
-                  <div class="radio" *ngFor="let category of leftCategoryIdList, let i=index">
-                    <input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId">
-                    <label>{{ leftCategoryNameList[i] }}</label>
-                  </div>
+                <div class="col-md-6 btn-group-vertical">
+                  <label class="btn btn-secondary mb-0" [class.active]="categoryId == ''">
+                    <input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
+                  </label>
+                  <label *ngFor="let category of leftCategoryIdList, let i=index" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
+                    <input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ leftCategoryNameList[i] }}
+                  </label>
                 </div>
-                <div class="col-md-6">
-                  <div class="radio" *ngFor="let category2 of rightCategoryIdList, let i=index">
-                    <input [value]="category2" type="radio" name="radios" [(ngModel)]="categoryId">
-                    <label>{{ rightCategoryNameList[i] }}</label>
-                  </div>
+                <div class="col-md-6 btn-group-vertical"> 
+                  <label *ngFor="let category2 of rightCategoryIdList, let i=index" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
+                    <input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ rightCategoryNameList[i] }}
+                  </label>
                 </div>
               </div>
               <span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>