vpp-userdemo: Small changes to README/GUI

Changes to README:
*README flow changed (i.e intro first, setup next, then running)
*Changed CLI command help (tutorials directory needed to run demo)

Changes to GUI:
*Added fd.io colors to GUI interface
*Added more relevent icons to each tutorial
*Capitalized tutorial file names (Looks better on GUI)

Change-Id: Ib6c1347e24687d489f3b0be3808aefb4bbb622f2
Signed-off-by: Padraig Connolly <padraig.connolly@intel.com>

2 files changed, 22 insertions, 22 deletions

diff --git a/vpp-userdemo/ui/dist.prod/cssProd/style.css b/vpp-userdemo/ui/dist.prod/cssProd/style.css
index 4222468..9ade21c 100644
--- a/vpp-userdemo/ui/dist.prod/cssProd/style.css
+++ b/vpp-userdemo/ui/dist.prod/cssProd/style.css
@@ -23,7 +23,7 @@ html, body {
   color: white; }
 
 .nav {
-  background-color: #258dc4;
+  background-color: #ed1c24;
   position: relative;
   width: 100%;
   height: 50px; }
@@ -141,13 +141,13 @@ html, body {
     width: 50%;
     margin-right: 50%; }
   .progress-indicator > li.completed {
-    color: #258dc4; }
+    color: #ed1c24; }
     .progress-indicator > li.completed .bubble {
-      background-color: #258dc4;
-      color: #258dc4;
+      background-color: #ed1c24;
+      color: #ed1c24;
       border-color: #0d3043; }
       .progress-indicator > li.completed .bubble:before, .progress-indicator > li.completed .bubble:after {
-        background-color: #258dc4;
+        background-color: #ed1c24;
         border-color: #0d3043; }
   .progress-indicator > li.active {
     color: #337AB7; }
@@ -236,7 +236,7 @@ html, body {
   color: #a3a3a3;
   font-size: 15px;
   font-weight: bold;
-  font-family: "Roboto"; }
+  font-family: "Arial"; }
 
 .tutorials-icon {
   color: white;
@@ -265,10 +265,10 @@ html, body {
   outline: none; }
 
 .tutorials-row:hover {
-  background-color: #258dc4; }
+  background-color: #ed1c24; }
 
 .tutorials-active {
-  background-color: #258dc4; }
+  background-color: #ed1c24; }
 
 .card-footer {
   background-color: #fafafa;
@@ -314,7 +314,7 @@ html, body {
   position: relative;
   top: 18px;
   font-size: 18px;
-  font-family: "Roboto"; }
+  font-family: "Arial"; }
 
 .card-button:focus, .card-button-group:focus {
   outline: none; }
@@ -333,13 +333,13 @@ html, body {
   color: #434343;
   font-weight: 100;
   font-size: 18px;
-  font-family: "Roboto-Light";
+  font-family: "Arial";
   margin: 0; }
 
 .command-text {
   font-weight: bold;
   font-family: monospace;
-  color: #258dc4; }
+  color: #26cad3; }
 
 .command-response {
   display: block;
@@ -379,7 +379,7 @@ html, body {
   cursor: pointer; }
 
 .clipboard-div:hover > .clipboard-text, .clipboard-div:hover > .clipboard-icon {
-  color: #258dc4; }
+  color: #26cad3; }
 
 .code-block {
   display: inline-block;
@@ -957,13 +957,13 @@ html, body {
     width: 50%;
     margin-right: 50%; }
   .progress-indicator > li.completed {
-    color: #258dc4; }
+    color: #26cad3; }
     .progress-indicator > li.completed .bubble {
-      background-color: #258dc4;
-      color: #258dc4;
+      background-color: #1cede5;
+      color: #26cad3;
       border-color: #0d3043; }
       .progress-indicator > li.completed .bubble:before, .progress-indicator > li.completed .bubble:after {
-        background-color: #258dc4;
+        background-color: #1cede5;
         border-color: #0d3043; }
   .progress-indicator > li.active {
     color: #337AB7; }
diff --git a/vpp-userdemo/ui/dist.prod/html/main.html b/vpp-userdemo/ui/dist.prod/html/main.html
index b0ba597..3c5300c 100644
--- a/vpp-userdemo/ui/dist.prod/html/main.html
+++ b/vpp-userdemo/ui/dist.prod/html/main.html
@@ -9,9 +9,9 @@
 		<div layout layout-align="center" class="tutorials-row" ng-repeat="tutorial in tutorials" ng-click="selectTutorial(tutorial)" 
 		ng-class="{'tutorials-active': (tutorial == selectedTutorial)}">
 			<div flex="90">
-				<i class="material-icons tutorials-icon">insert_drive_file</i>
+				<i class="material-icons tutorials-icon">label</i>
 				<h5 class="tutorials-text">{{tutorial}}</h5>
-				<i ng-if="selectedTutorial == tutorial" class="material-icons tutorial-playing-icon">playlist_play</i>
+				<i ng-if="selectedTutorial == tutorial" class="material-icons tutorial-playing-icon">playlist_add_check</i>
 			</div>
 		</div>
 	</div>
@@ -26,11 +26,11 @@
 					    <md-card-header-text>
 					    	<div layout>
 					    		<div flex>
-					    			<span class="md-title card-title">{{selectedTutorial}}</span>
+					    			<span style="font-family:arial;"class="md-title card-title">{{selectedTutorial}}</span>
 					    		</div>
 					    		<div flex>
 					    			<div class="clipboard-div" ng-if="selectedTutorial" ngclipboard data-clipboard-text="{{commands[pointer]}}">
-					    				<span class="clipboard-text">Copy to clipboard</span>
+					    				<span style="font-family:arial;"class="clipboard-text">Copy to Clipboard</span>
 					    				<i class="material-icons clipboard-icon">content_paste</i>
 					    			</div>
 					    		</div>
@@ -52,7 +52,7 @@
 				 		<md-progress-circular ng-if="!stepDone" class="card-loader" md-mode="indeterminate"></md-progress-circular>
 				 		<div ng-if="stepDone" class="card-button-group" ng-click="nextStep()">
 				 			<i class="material-icons card-button">navigate_next</i>
-				 			<span class="card-button-text">next</span>
+				 			<span class="card-button-text">Next</span>
 				 		</div>
 					</md-card-footer>
 				</md-card>
@@ -102,4 +102,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>