Fix styles for main table

css/style.css

@@ -16,7 +16,8 @@ body,html{
 	border-radius: 10px;
 }
 
-.error-container {
+.error-container,
+.info-container {
 	padding: 20px;
 	border: 1px solid #324875;
 	border-radius: 10px;
@@ -37,10 +38,51 @@ body,html{
 	color: white;
 	opacity: 1;
 }
+.user-icon {
+	width: 15px;
+	margin-right: 5px;
+}
 .error-icon {
 	width: 30px;
 }
 
+.status-label {
+    background-color: #c0c0c0;
+    padding: 3px;
+    font-size: 10px;
+    letter-spacing: 1px;
+    border-radius: 5px;
+}
+
+.status-label.ACEPTADO {
+	background-color: #79BD9A;
+	border: 1px solid #74AF8F;
+}
+
+.status-label.CREADO {
+	background-color: #ECD078;
+	border: 1px solid #E5C877
+}
+
+.status-label.CONFIRMADO {
+	background-color: #FF9F80;
+	border: 1px solid #E8927C;
+}
+
+.action-label {
+	margin: 0px 2px;
+	background-color: #324875;
+	color: white;
+	opacity: 0.9;
+}
+
+.action-label:hover,
+.action-label:focus,
+.action-label:active {
+	text-decoration: none;
+	color: white;
+	opacity: 1;
+}
 .no-disponible { color: #ccc; }
 .low { color: #c22;display:block;font-size:smaller; }
 

images/user.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="99.992px" height="131.475px" viewBox="219.93 0 99.992 131.475" enable-background="new 219.93 0 99.992 131.475"
+	 xml:space="preserve">
+<g>
+	<path fill="#324875" d="M269.93,64.3c14.618,0,26.469-14.394,26.469-32.15c0-17.756-3.891-32.15-26.469-32.15
+		s-26.47,14.394-26.47,32.15C243.46,49.906,255.312,64.3,269.93,64.3z"/>
+	<path fill="#324875" d="M219.935,113.389C219.931,112.306,219.926,113.084,219.935,113.389L219.935,113.389z"/>
+	<path fill="#324875" d="M319.922,114.235C319.937,113.939,319.927,112.178,319.922,114.235L319.922,114.235z"/>
+	<path fill="#324875" d="M319.866,112.091c-0.49-30.932-4.53-39.745-35.443-45.324c0,0-4.351,5.545-14.493,5.545
+		s-14.495-5.545-14.495-5.545c-30.576,5.519-34.861,14.201-35.424,44.319c-0.046,2.459-0.068,2.589-0.076,2.303
+		c0.002,0.535,0.004,1.524,0.004,3.25c0,0,7.359,14.836,49.991,14.836c42.63,0,49.99-14.836,49.99-14.836
+		c0-1.108,0.001-1.88,0.002-2.404C319.914,114.412,319.897,114.07,319.866,112.091z"/>
+</g>
+</svg>

views/main.html

@@ -1,23 +1,26 @@
-<div ng-if="error">
-	<h1 style="text-align:center">Link inv&aacute;lido</h1>
+<div class="error-container" ng-if="error">
+	<h1>
+		<object data="./images/error.svg" type="image/svg+xml" class="error-icon"></object> 
+		Link Inválido
+	</h1>
 </div>
 
 <div ng-if="!error">
 	<div class="row">
-		<div class="col-md-3 col-md-offset-2">
+		<div class="col-md-6">
 			<label>
-				<h3>Pedidos de {{userdata.nombre}} {{userdata.apellido}}</h3>
+				<h4><object data="./images/user.svg" type="image/svg+xml" class="user-icon"></object>{{::userdata.nombre}} {{::userdata.apellido}}</h4>
 			</label>
 		</div>
-		<div class="col-md-3 pull-right">
-			<a ng-href="/create/{{userdata.hash}}">
-				<button class="btn">Generar Pedido</button>
+		<div class="col-md-6">
+			<a ng-href="/create/{{userdata.hash}}" class="pull-right btn btn-eba">
+				Generar Pedido
 			</a>
 		</div>
 	</div>
 
-	<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
-		<div ng-if="pedidos == null || pedidos.length == 0">
+	<div class="row">
+		<div ng-if="pedidos == null || pedidos.length == 0" class="info-container">
 			No hay pedidos creados.
 		</div>
 		<table ng-if="pedidos && pedidos.length > 0" class="table table-striped">
@@ -36,10 +39,14 @@
 				<td>{{p.cant_productos}}</td>
 				<td>{{p.observaciones}}</td>
 				<td>${{p.subtotal}}</td>
-				<td>{{p.estado}}</td>
+				<td><span class="status-label" ng-class="[p.estado]">{{p.estado}}<span></td>
 				<td>
-					<a ng-if="p.estado==='CREADO'" href="#" ng-href="edit/{{userdata.hash}}/{{p.id}}">Editar</a>
-					<a ng-if="p.estado==='CREADO'" href="#" ng-click="openModal(p.id)">Confirmar</a>
+					<a ng-if="p.estado==='CREADO'" href="#" ng-href="edit/{{userdata.hash}}/{{p.id}}" title="Editar" class="status-label action-label">
+					Editar
+					</a>
+					<a ng-if="p.estado==='CREADO'" href="#" ng-click="openModal(p.id)" title="Confirmar" class="status-label action-label"> 
+						Confirmar
+					</a>
 				</td>
 			</tr>
 		</table>