Final tweaks before PR!

interface/resources/qml/hifi/NameCard.qml

@@ -15,10 +15,8 @@ import QtQuick.Controls.Styles 1.4
 import QtGraphicalEffects 1.0
 import "../styles-uit"
 
-Row {
+Item {
     id: thisNameCard
-    // Spacing
-    spacing: 10
     // Anchors
     anchors {
         verticalCenter: parent.verticalCenter
@@ -51,10 +49,11 @@ Row {
         }
     }
     */
-    Column {
+    Item {
         id: textContainer
         // Size
         width: parent.width - /*avatarImage.width - parent.spacing - */parent.anchors.leftMargin - parent.anchors.rightMargin
+        height: childrenRect.height
         anchors.verticalCenter: parent.verticalCenter
         // DisplayName Text
         FiraSansSemiBold {
@@ -64,6 +63,8 @@ Row {
             elide: Text.ElideRight
             // Size
             width: parent.width
+            // Anchors
+            anchors.top: parent.top
             // Text Size
             size: thisNameCard.displayTextHeight
             // Text Positioning
@@ -81,6 +82,8 @@ Row {
             visible: thisNameCard.displayName
             // Size
             width: parent.width
+            // Anchors
+            anchors.top: displayNameText.bottom
             // Text Size
             size: thisNameCard.usernameTextHeight
             // Text Positioning
@@ -91,25 +94,56 @@ Row {
 
         // Spacer
         Item {
-            height: 3
+            id: spacer
+            height: 4
             width: parent.width
+            // Anchors
+            anchors.top: userNameText.bottom
         }
 
         // VU Meter
-        Rectangle { // CHANGEME to the appropriate type!
+        Rectangle {
             id: nameCardVUMeter
             // Size
-            width: parent.width
+            width: ((gainSlider.value - gainSlider.minimumValue)/(gainSlider.maximumValue - gainSlider.minimumValue)) * parent.width
             height: 8
+            // Anchors
+            anchors.top: spacer.bottom
             // Style
             radius: 4
+            color: "#c5c5c5"
+            // Rectangle for the zero-gain point on the VU meter
+            Rectangle {
+                id: vuMeterZeroGain
+                visible: gainSlider.visible
+                // Size
+                width: 4
+                height: 18
+                // Style
+                color: hifi.colors.darkGray
+                // Anchors
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: (-gainSlider.minimumValue)/(gainSlider.maximumValue - gainSlider.minimumValue) * gainSlider.width - 4
+            }
+            // Rectangle for the VU meter line
+            Rectangle {
+                id: vuMeterLine
+                width: gainSlider.width
+                visible: gainSlider.visible
+                // Style
+                color: vuMeterBase.color
+                radius: nameCardVUMeter.radius
+                height: nameCardVUMeter.height / 2
+                anchors.verticalCenter: nameCardVUMeter.verticalCenter
+            }
             // Rectangle for the VU meter base
             Rectangle {
                 id: vuMeterBase
                 // Anchors
                 anchors.fill: parent
                 // Style
-                color: "#c5c5c5"
+                color: parent.color
                 radius: parent.radius
             }
             // Rectangle for the VU meter audio level
@@ -118,7 +152,7 @@ Row {
                 // Size
                 width: (thisNameCard.audioLevel) * parent.width
                 // Style
-                color: "#c5c5c5"
+                color: parent.color
                 radius: parent.radius
                 // Anchors
                 anchors.bottom: parent.bottom
@@ -140,22 +174,20 @@ Row {
             }
         }
 
-        // Per-Avatar Gain Slider Spacer
-        Item {
-            width: parent.width
-            height: 3
-            visible: !isMyCard && selected
-        }
         // Per-Avatar Gain Slider 
         Slider {
             id: gainSlider
-            visible: !isMyCard && selected
+            // Size
             width: parent.width
-            height: 18
+            height: 14
+            // Anchors
+            anchors.verticalCenter: nameCardVUMeter.verticalCenter
+            // Properties
+            visible: !isMyCard && selected
             value: pal.gainSliderValueDB[uuid] ? pal.gainSliderValueDB[uuid] : 0.0
             minimumValue: -60.0
             maximumValue: 20.0
-            stepSize: 2
+            stepSize: 5
             updateValueWhileDragging: true
             onValueChanged: updateGainFromQML(uuid, value)
             MouseArea {
@@ -177,16 +209,17 @@ Row {
             }
             style: SliderStyle {
                 groove: Rectangle {
-                    color: "#dbdbdb"
+                    color: "#c5c5c5"
                     implicitWidth: gainSlider.width
                     implicitHeight: 4
                     radius: 2
+                    opacity: 0
                 }
                 handle: Rectangle {
                     anchors.centerIn: parent
                     color: (control.pressed || control.hovered) ? "#00b4ef" : "#8F8F8F"
                     implicitWidth: 10
-                    implicitHeight: 18
+                    implicitHeight: 16
                 }
             }
         }

interface/resources/qml/hifi/Pal.qml

@@ -190,7 +190,7 @@ Rectangle {
         // This Rectangle refers to each Row in the table.
         rowDelegate: Rectangle { // The only way I know to specify a row height.
             // Size
-            height: rowHeight + (styleData.selected ? 20 : 0)
+            height: rowHeight
             color: styleData.selected
                    ? hifi.colors.orangeHighlight
                    : styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd