Fix styling of h3 headings

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

css/_details.scss

@@ -251,12 +251,25 @@ contactdetails {
 	}
 }
 
-.propertyGroup__title {
-	margin-bottom: 5px;
+propertygroup {
 	display: inline-block;
+	padding-bottom: 36px;
+}
+
+.propertyGroup__title {
+	display: inline-block;
+	padding: 12px;
+	margin: 0;
+	margin-left: 68px;
+	opacity: .6;
+}
+
+.propertyGroup__title i {
+	display: inline-block;
+	vertical-align: middle;
 	background-size: 16px 16px;
-	background-position-x: 0;
-	padding-left: 20px;
+	margin-right: 8px;
+	opacity: .5;
 }
 
 detailsitem {

js/services/vCardProperties.js

@@ -23,7 +23,8 @@ angular.module('contactsApp')
 			defaultValue: {
 				value:['', '', '', '', '']
 			},
-			template: 'n'
+			template: 'n',
+			icon: 'icon-user'
 		},
 		note: {
 			readableName: t('contacts', 'Notes'),
@@ -33,7 +34,8 @@ angular.module('contactsApp')
 		url: {
 			multiple: true,
 			readableName: t('contacts', 'Website'),
-			template: 'url'
+			template: 'url',
+			icon: 'icon-public'
 		},
 		cloud: {
 			multiple: true,
@@ -52,7 +54,7 @@ angular.module('contactsApp')
 			multiple: true,
 			readableName: t('contacts', 'Address'),
 			template: 'adr',
-			icon: 'icon-link',
+			icon: 'icon-address',
 			defaultValue: {
 				value:['', '', '', '', '', '', ''],
 				meta:{type:['HOME']}
@@ -101,7 +103,7 @@ angular.module('contactsApp')
 			multiple: true,
 			readableName: t('contacts', 'Instant messaging'),
 			template: 'username',
-			icon: 'icon-mail',
+			icon: 'icon-comment',
 			defaultValue: {
 				value:[''],
 				meta:{type:['SKYPE']}

templates/propertyGroup.html

@@ -1,3 +1,6 @@
-<h3 class="propertyGroup__title" ng-class="ctrl.getIconClass()">{{ctrl.getReadableName()}}</h3>
+<h3 class="propertyGroup__title">
+	<i ng-class="ctrl.getIconClass()"></i>
+	{{ctrl.getReadableName()}}
+</h3>
 <detailsItem ng-repeat="property in ctrl.properties" name="ctrl.name" data="property" model="ctrl.contact" index="$index"
 			 class="details-item-{{ctrl.name}}" ng-class="{ 'failed': ctrl.contact.failedProps.indexOf(ctrl.name) !== -1 }"></detailsItem>