update UI based on the latest zeplin mockups

interface/resources/qml/hifi/AvatarApp.qml

@@ -252,7 +252,7 @@ Rectangle {
             anchors.left: parent.left
             anchors.leftMargin: 30
             anchors.top: parent.top
-            anchors.topMargin: 34
+            anchors.topMargin: 25
             text: 'Display Name'
         }
 
@@ -262,7 +262,7 @@ Rectangle {
             anchors.leftMargin: 30
             anchors.verticalCenter: displayNameLabel.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: 36
+            anchors.rightMargin: 30
             width: 232
 
             property bool error: text === '';
@@ -327,8 +327,8 @@ Rectangle {
 
         Row {
             id: star
-            anchors.top: parent.top
+            anchors.top: avatarImage.top
-            anchors.topMargin: 119
+            anchors.topMargin: 11
             anchors.left: avatarImage.right
             anchors.leftMargin: 30.5
 
@@ -369,8 +369,8 @@ Rectangle {
             text: avatarName
             anchors.left: avatarImage.right
             anchors.leftMargin: 30
-            anchors.top: parent.top
+            anchors.top: star.bottom
-            anchors.topMargin: 154
+            anchors.topMargin: 11
         }
 
         TextStyle3 {
@@ -379,6 +379,7 @@ Rectangle {
             anchors.leftMargin: 30
             anchors.top: avatarNameLabel.bottom
             anchors.topMargin: 16
+            color: 'black'
             text: 'Wearables'
         }
 
@@ -431,6 +432,7 @@ Rectangle {
             anchors.verticalCenter: wearablesLabel.verticalCenter
             font.underline: true
             text: "Add"
+            color: 'black'
             visible: avatarWearablesCount === 0
 
             MouseArea {
@@ -490,7 +492,7 @@ Rectangle {
 
     Rectangle {
         id: favoritesBlock
-        height: 369
+        height: 407
 
         anchors.left: parent.left
         anchors.right: parent.right
@@ -501,7 +503,7 @@ Rectangle {
         TextStyle1 {
             id: favoritesLabel
             anchors.top: parent.top
-            anchors.topMargin: 9
+            anchors.topMargin: 15
             anchors.left: parent.left
             anchors.leftMargin: 30
             text: "Favorites"
@@ -510,7 +512,7 @@ Rectangle {
         TextStyle8 {
             id: manageLabel
             anchors.top: parent.top
-            anchors.topMargin: 9
+            anchors.topMargin: 20
             anchors.right: parent.right
             anchors.rightMargin: 30
             text: isInManageState ? "Back" : "Manage"
@@ -529,7 +531,7 @@ Rectangle {
             anchors.rightMargin: 0
 
             anchors.top: favoritesLabel.bottom
-            anchors.topMargin: 9
+            anchors.topMargin: 20
             anchors.bottom: parent.bottom
 
             GridView {
@@ -868,7 +870,7 @@ Rectangle {
             }
 
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 19
+            anchors.bottomMargin: 20
         }
     }
 

interface/resources/qml/hifi/avatarapp/AdjustWearables.qml

@@ -292,6 +292,7 @@ Rectangle {
                 }
 
                 HifiControlsUit.Button {
+                    fontSize: 18
                     anchors.right: parent.right
                     color: hifi.buttons.red;
                     colorScheme: hifi.colorSchemes.dark;

interface/resources/qml/hifi/avatarapp/AvatarAppHeader.qml

@@ -6,7 +6,7 @@ ShadowRectangle {
     id: header
     anchors.left: parent.left
     anchors.right: parent.right
-    height: 84
+    height: 60
 
     property alias pageTitle: title.text
     property alias avatarIconVisible: avatarIcon.visible
@@ -24,8 +24,7 @@ ShadowRectangle {
         id: avatarIcon
         anchors.left: parent.left
         anchors.leftMargin: 23
-        anchors.top: parent.top
+        anchors.verticalCenter: header.verticalCenter
-        anchors.topMargin: 29
 
         size: 38
         text: "<"

interface/resources/qml/hifi/avatarapp/BlueButton.qml

@@ -7,6 +7,8 @@ HifiControlsUit.Button {
         id: hifi
     }
 
+    width: Math.max(hifi.dimensions.buttonWidth, implicitTextWidth + 20)
+    fontSize: 18
     color: hifi.buttons.blue;
     colorScheme: hifi.colorSchemes.light;
     height: 40

interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml

@@ -4,6 +4,7 @@ import QtGraphicalEffects 1.0
 
 Item {
     property alias color: rectangle.color
+    property alias gradient: rectangle.gradient
     property alias border: rectangle.border
     property alias radius: rectangle.radius
 

interface/resources/qml/hifi/avatarapp/SquareLabel.qml

@@ -5,17 +5,24 @@ import QtGraphicalEffects 1.0
 ShadowRectangle {
     width: 44
     height: 28
-    color: 'white'
+    AvatarAppStyle {
+        id: style
+    }
+
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: style.colors.blueHighlight }
+        GradientStop { position: 1.0; color: style.colors.blueAccent }
+    }
+
     property alias glyphText: glyph.text
     property alias glyphRotation: glyph.rotation
     property alias glyphSize: glyph.size
 
     radius: 3
-    border.color: 'black'
-    border.width: 1.5
 
     HiFiGlyphs {
         id: glyph
+        color: 'white'
         anchors.centerIn: parent
         size: 30
     }

interface/resources/qml/hifi/avatarapp/TextStyle8.qml

@@ -5,6 +5,6 @@ RalewaySemiBold {
     AvatarAppStyle {
         id: style
     }
-    color: style.colors.blueHightlight
+    color: style.colors.blueHighlight
     size: 20;
 }

interface/resources/qml/hifi/avatarapp/WhiteButton.qml

@@ -7,6 +7,8 @@ HifiControlsUit.Button {
         id: hifi
     }
 
+    width: Math.max(hifi.dimensions.buttonWidth, implicitTextWidth + 20)
+    fontSize: 18
     color: hifi.buttons.noneBorderlessGray;
     colorScheme: hifi.colorSchemes.light;
     height: 40