worked on simualtion browser ui

www/app/controller/Main.js

@@ -48,6 +48,10 @@ Ext.define('app.controller.Main', {
 
             '#overlay': {
                 hide: 'callRemoveImages',
+            },
+
+            '#opensimulations': {
+                tap: 'openSimulations'
             }
 
         }
@@ -230,7 +234,10 @@ Ext.define('app.controller.Main', {
                  console.log('failed to create images');
             }
         });
+    },
 
+    openSimulations: function(){
+        console.log('opensimulations');
     }
 });
 

www/app/view/List.js

@@ -13,6 +13,7 @@ Ext.define("app.view.List",
 	title: 'Simulations',
 
 	config: {
+		ui: 'lighter_blue',
 		items: [
 			{
 				id: 'cities',

www/app/view/Simulation.js

@@ -8,13 +8,21 @@ Ext.define('app.view.Simulation', {
         {   
             docked: 'top',
             xtype: 'toolbar',
+            ui: 'darker_blue',
             title: 'Flood Simulation Browser',
+            items : [{
+                  id: 'simulationOptions',
+                  xtype: 'button',
+                  text: 'simulations',
+                  right: 0,
+                  top: 7,
+                  ui: ['square','blue'],
+            }]
         },
         {
             xtype: 'SimulationMap',
             flex: 2,
         }],
-
     }
 });
 

www/app/view/StepsOverlay.js

@@ -19,8 +19,8 @@ Ext.define('app.view.StepsOverlay', {
     	//draggable: true,
     	autoDestroy: true,
     	hidden: true,
-	    width: 80,
-	    height: 150,
+	    width: 120,
+	    height: 100,
 	    scroll: false,
 	    items: [
 	    {
@@ -28,7 +28,8 @@ Ext.define('app.view.StepsOverlay', {
 	        id: 'closebutton',
 	        iconCls: 'delete',
 	        iconMask: true,
-	        height: 10,                  
+	        height: 10,   
+	        ui: 'red',               
 	        top: 0,
 	        right: 0,
 	        border: 'solid',
@@ -36,30 +37,31 @@ Ext.define('app.view.StepsOverlay', {
 	        scope: this,
 	    },
 	    {
-	        top: 50,
+	        top: 10,
+	        left: 20,
 	        align: 'center',
 	        items : [
 	        {
 	            xtype: "button",
 	            id: 'forward',
+	            ui: 'blue',
 	            cls: 'overlay-button',
 	            width: 45,
 	            iconCls: 'arrow_up',
 	            floating: 'right',
 	            iconMask: true,
 	            align: 'center',
-	            left: 20,
 
 	        },
 	        {
 	        	top: 50,
 	            xtype: "button",
 	            id: 'backwards',
+	            ui: 'blue',
 	            cls: 'overlay-button',
 	            width: 45,
 	            floating: 'left',
 	            iconCls: 'arrow_down',
-	            left: 20,
 	            align: 'center',
 	            iconMask: true,
 	        }]

www/resources/sass/app.scss

 @import 'sencha-touch/default/all';
+@include pictos-iconmask('close_overlay');
+@include sencha-toolbar-ui('darker_blue', #003F69, 'glossy');
+@include sencha-toolbar-ui('lighter_blue', #386EBA, 'glossy');
+@include sencha-button-ui('blue', #003F69, 'glossy');
+@include sencha-button-ui('red', #C40000, 'glossy');
 
 // You may remove any of the following modules that you
 // do not use in order to create a smaller css file.
@@ -17,44 +22,4 @@
 //@include sencha-msgbox;
 
 
-// Your custom code goes here...
-#overlay {
-	//@include border-radius(10px);
-// needs latest Compass, add '@import "compass"' to your scss
-background-color: rgb(255,255,255); // Old browsers
-@include filter-gradient(#ffffff, #b2b2b2, vertical); // IE6-9
-@include background-image(linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 65%,rgba(225,225,225,1) 82%,rgba(178,178,178,1) 100%));
 
-}
-
-#forward {
-	// needs latest Compass, add '@import "compass"' to your scss
-background-color: rgb(255,48,25); // Old browsers
-@include filter-gradient(#ff3019, #cf0404, vertical); // IE6-9
-@include background-image(linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%));
-
-}
-
-#backwards {
-	// needs latest Compass, add '@import "compass"' to your scss
-background-color: rgb(255,48,25); // Old browsers
-@include filter-gradient(#ff3019, #cf0404, vertical); // IE6-9
-@include background-image(linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%));
-}
-.x-button-pressed.overlay-button {
-	// needs latest Compass, add '@import "compass"' to your scss
-background-color: rgb(207,4,4); // Old browsers
-@include filter-gradient(#cf0404, #ff3019, vertical); // IE6-9
-@include background-image(linear-gradient(top,  rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%));
-
-}
-.x-button-pressed.overlay-button  {
-	// needs latest Compass, add '@import "compass"' to your scss
-	background-color: rgb(207,4,4); // Old browsers
-	@include filter-gradient(#cf0404, #ff3019, vertical); // IE6-9
-	@include background-image(linear-gradient(top,  rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%));
-}
-
-#closebutton {
-	background: none;
-}