Avatarapp: base 'SquareLabel' on button from Uit

interface/resources/qml/controls-uit/Button.qml

@@ -20,6 +20,7 @@ Original.Button {
     property int color: 0
     property int colorScheme: hifi.colorSchemes.light
     property int fontSize: hifi.fontSizes.buttonLabel
+    property int radius: hifi.buttons.radius
     property alias implicitTextWidth: buttonText.implicitWidth
     property string buttonGlyph: "";
     property int fontCapitalization: Font.AllUppercase
@@ -46,7 +47,7 @@ Original.Button {
     }
 
     background: Rectangle {
-        radius: hifi.buttons.radius
+        radius: control.radius
 
         border.width: (control.color === hifi.buttons.none ||
                        (control.color === hifi.buttons.noneBorderless && control.hovered) ||

interface/resources/qml/hifi/AvatarApp.qml

@@ -476,17 +476,13 @@ Rectangle {
             anchors.verticalCenter: avatarNameLabel.verticalCenter
             glyphText: "."
             glyphSize: 22
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    popup.showSpecifyAvatarUrl(currentAvatar.avatarUrl, function() {
-                        var url = popup.inputText.text;
-                        emitSendToScript({'method' : 'applyExternalAvatar', 'avatarURL' : url})
-                    }, function(link) {
-                        Qt.openUrlExternally(link);
-                    });
-                }
+            onClicked: {
+                popup.showSpecifyAvatarUrl(currentAvatar.avatarUrl, function() {
+                    var url = popup.inputText.text;
+                    emitSendToScript({'method' : 'applyExternalAvatar', 'avatarURL' : url})
+                }, function(link) {
+                    Qt.openUrlExternally(link);
+                });
             }
         }
 
@@ -496,12 +492,8 @@ Rectangle {
             glyphText: "\ue02e"
 
             visible: avatarWearablesCount !== 0
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    adjustWearables.open(currentAvatar);
-                }
+            onClicked: {
+                adjustWearables.open(currentAvatar);
             }
         }
 

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

@@ -1,25 +1,42 @@
 import "../../styles-uit"
+import "../../controls-uit" as HifiControlsUit
 import QtQuick 2.9
 import QtGraphicalEffects 1.0
 
-ShadowRectangle {
+Item {
+    id: root
     width: 44
     height: 28
-    AvatarAppStyle {
-        id: style
+    signal clicked();
+
+    HifiControlsUit.Button {
+        id: button
+
+        HifiConstants {
+            id: hifi
+        }
+
+        anchors.fill: parent
+        color: hifi.buttons.blue;
+        colorScheme: hifi.colorSchemes.light;
+        radius: 3
+        onClicked: root.clicked();
     }
 
-    gradient: Gradient {
-        GradientStop { position: 0.0; color: style.colors.blueHighlight }
-        GradientStop { position: 1.0; color: style.colors.blueAccent }
+    DropShadow {
+        id: shadow
+        anchors.fill: button
+        radius: 6
+        horizontalOffset: 0
+        verticalOffset: 3
+        color: Qt.rgba(0, 0, 0, 0.25)
+        source: button
     }
 
     property alias glyphText: glyph.text
     property alias glyphRotation: glyph.rotation
     property alias glyphSize: glyph.size
 
-    radius: 3
-
     HiFiGlyphs {
         id: glyph
         color: 'white'