diff -r 2b40d63a9c3d -r 90517678cc4f qtmobility/examples/qmlcontacts/example.qml
--- a/qtmobility/examples/qmlcontacts/example.qml	Fri Apr 16 15:51:22 2010 +0300
+++ b/qtmobility/examples/qmlcontacts/example.qml	Mon May 03 13:18:40 2010 +0300
@@ -6,34 +6,30 @@
     id: topItem
     width: 320
     height: 480
-//    border.color: "bg
-//    border.width: 5
-//    radius: 10
     x: 0
     y: 0
 
+    color: "#080808";
+
     Script {
         function startup() {
-            print("Hello");
-
-            print("Num contacts: " + blah.numContacts);            
-            blah.contacts();
+            manager.contacts();
         }
         function gotContacts(c) {
             if(c == undefined){
-                //print("Error, got null object for gotContacts");
                 return;
             }
+/*
             print("Got contacts: " + c.name);
             print(" Available actions: " + c.availableActions);
             print(" details: " + c.details);detailsOpacity
-
+*/
             var o = c.values("OnlineAccount");
             var q = c.values("Presence");
 
+            nameModel.append({"name": c.name, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email, "avatarSource": "qrc:/default.svg"});
 
-            nameModel.append({"name": c.name, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email});
-
+/*
             var j;
             for(j in c.details){                
                 var o = c.values(c.details[j]);
@@ -42,15 +38,18 @@
                     print(" "+ c.details[j] + "/" + i + ": " + o[i]);
                 }
             }
+*/
+
         }
         function clickedList(index) {
             mainList.currentIndex = index;
         }
     }
+
     Component.onCompleted: startup();
 
     QMLContactManagerAsync {
-        id: "blah"
+        id: "manager"
 
         manager: "memory"
         onDataChanged: print("Data changed!");
@@ -63,53 +62,108 @@
         Rectangle {
             id: wrapper            
             border.width: 2
-            radius: 5
-            height: 40
-            width: topItem.width-2;            
+            height: 30;
+
+            property color topColor: "#333333";
+            property color bottomColor: "#111111";
             property real detailsOpacity: 0
-            Row {
-                Item {
-                    property real contactId: 0
+
+            gradient: Gradient {
+                 GradientStop { position: 0.0; color: topColor }
+                 GradientStop { position: 1.0; color: bottomColor }
+             }
+
+            Item {
+                id: mainAvatar;
+                anchors.left: parent.left;
+                anchors.top: parent.top;
+                width: avatarFrame.width;
+                height: avatarFrame.height;
+                anchors.leftMargin:4;
+
+                Rectangle {
+                    id: avatarFrame;
+                    border.width: 2;
+                    radius: 4;
+                    height: wrapper.height-6
+                    width: height;
+                    x: 3; y: 3;
                 }
+
+                Image {
+                    id: avatar
+                    anchors.fill: avatarFrame;
+                    anchors.leftMargin: 3;
+                    anchors.rightMargin: 3;
+                    anchors.topMargin: 3;
+                    anchors.bottomMargin: 3;
+
+                    source: avatarSource
+                    fillMode: Image.PreserveAspectFit
+                }
+            }
+
+            Item {
+                id: mainLabel;
+                height: nameTxt.height + 16;
+                property real contactId: 0;
+                anchors.left: mainAvatar.right;
+                anchors.right: parent.right;
+                anchors.leftMargin:8;
+                anchors.rightMargin: 4;
+                anchors.topMargin: 4;
+                anchors.bottomMargin: 4;
+
                 Text {
+                    x:8; y:8;
+                    anchors.left: parent.left;
+                    anchors.right: parent.right;
                     id: nameTxt
                     text: name
+                    color: "white";
                 }
-                Item {
-                    id: details
-                    opacity: wrapper.detailsOpacity
+            }
+
+            Item {
+                id: details
+                property color textColor: "#ffffdd";
+                anchors.top: mainLabel.bottom;
+                anchors.bottom: parent.bottom;
+                anchors.left: mainAvatar.right;
+                anchors.right: parent.right;
+                anchors.leftMargin:8;
+                anchors.rightMargin: 4;
+                anchors.bottomMargin: 4;
+                opacity: wrapper.detailsOpacity
+
+                Column {
                     Text {
-                        y: nameTxt.height
                         id: emailId
                         text: email
-                    }
-                    Text {
-                        y: emailId.y + emailId.height
-                        id: accountPathId
-                        text: accountPath
-                    }
-                    Text {
-                        y: accountPathId.y
-                        x: accountPathId.x + accountPathId.width + 5
-                        id: presenceId
-                        text: presence
+                        color: details.textColor;
                     }
-                }                
+                    Row {
+                        spacing: 5
+                        Text {
+                            id: accountPathId
+                            text: accountPath
+                            color: details.textColor;
+                        }
+                        Text {
+                            id: presenceId
+                            text: presence
+                            color: details.textColor;
+                        }
+                    }
+                }
             }
-            /*
-            Image {
-                id: avatar
-                height: wrapper.height-6
-                source: avatarsource
-                x: wrapper.width - avatar.width - 3
-                y: 3                
-                opacity: details.opacity
-                fillMode: Image.PreserveAspectFit
-            }*/
+
             states: State {
                 name: "Details"
-                PropertyChanges { target: wrapper; height: presenceId.y + presenceId.height }
                 PropertyChanges { target: wrapper; detailsOpacity: 1; }
+                PropertyChanges { target: wrapper; topColor: "#666666"; }
+                PropertyChanges { target: wrapper; bottomColor: "#222222"; }
+                PropertyChanges { target: wrapper; height: mainLabel.height + emailId.height + accountPathId.height + presenceId.height; }
             }
 
             transitions: Transition {
@@ -117,13 +171,11 @@
                 to: "Details"
                 reversible: true
                 ParallelAnimation {
-                    NumberAnimation {
-                        duration: 300; property: "detailsOpacity" }
-                    NumberAnimation {
-                        duration: 300; property: "height"  }
+                    ColorAnimation { duration: 150; properties: "topColor, bottomColor";}
+                    NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
                 }
             }
-            MouseRegion {
+            MouseArea {
                 id: mr
                 width: topItem.width;
                 height: wrapper.height;
@@ -149,13 +201,12 @@
         width: parent.width; height: parent.height
         delegate: listdelegate
         highlight: listhighlight
-        //highlightFollowsCurrentItem: true
+        highlightFollowsCurrentItem: true
         focus: true
         anchors.fill: parent
         highlightMoveSpeed: 5000
     }
 
-
     ListModel {
         id: nameModel
     }
@@ -163,13 +214,14 @@
     // Attach scrollbar to the right edge of the view.
     ScrollBar {
         id: verticalScrollBar
-        opacity: 0.1
+        opacity: 0
         orientation: "Vertical"
         position: mainList.visibleArea.yPosition
         pageSize: mainList.visibleArea.heightRatio
-        width: 40
+        width: 20
         height: mainList.height
         anchors.right: mainList.right
+        fgColor: "white"
         // Only show the scrollbar when the view is moving.
         states: [
             State {
@@ -179,9 +231,6 @@
         ]
         transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ]
     }
-
-
-
 }