Merge pull request 'Fixes' (#8) from 3971-modernizeStyle into test

Reviewed-on: verdnatura/hedera-web#8

forms/cms/home/style.css

@@ -48,7 +48,6 @@
 .new-text {
 	margin: 1.5em 0;
 	font-family: 'Open Sans';
-	line-height: 1.3em;
 }
 .new-text a {
 	color: #6a1;

forms/ecomerce/catalog/style.css

@@ -30,9 +30,11 @@
 }
 .right-panel .basket-info > button {
 	color: white;
+	background-color: rgba(0, 0, 0, .1);
 	margin: 0 auto;
 	display: block;
-	margin-top: .4em;
+	margin-top: 10px;
+	padding: 10px 15px;
 }
 .right-panel .basket-info > button:hover {
 	background-color: white;
@@ -41,7 +43,6 @@
 .right-panel .basket-info > p {
 	margin: 0;
 	padding: .4em 0;
-	font-size: 1.1em;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;

forms/ecomerce/catalog/ui.xml

@@ -178,7 +178,7 @@
 			<span id="method"/> 
 			<htk-text form="basket" column="agency"/>
 		</p>
-		<button class="thin" on-click="onConfigureClick">
+		<button class="thin" on-click="this.onConfigureClick()">
 			<t>Modify</t>
 		</button>
 	</div>

forms/ecomerce/confirm/locale/ca.yml

@@ -1,5 +1,7 @@
 Checkout: Finalitzar comanda
 Order summary: Resum de la comanda
+ShippingInformation: Dades d'enviament
+DeliveryAddress: Adreça de lliurament
 Delivery at: Lliurament el
 Agency: Agència
 Warehouse: Magatzem

forms/ecomerce/confirm/locale/en.yml

@@ -1,5 +1,7 @@
 Checkout: Checkout
 Order summary: Order summary
+ShippingInformation: Shipping information
+DeliveryAddress: Delivery address
 Delivery at: Delivery at
 Agency: Agency
 Warehouse: Store

forms/ecomerce/confirm/locale/es.yml

@@ -1,5 +1,7 @@
 Checkout: Finalizar pedido
 Order summary: Resumen del pedido
+ShippingInformation: Datos de envío
+DeliveryAddress: Dirección de entrega
 Delivery at: Entrega el
 Agency: Agencia
 Warehouse: Almacén

forms/ecomerce/confirm/locale/fr.yml

@@ -1,5 +1,7 @@
 Checkout: Finir la commande
 Order summary: Résumé de la commande
+ShippingInformation: Informations sur la livraison
+DeliveryAddress: Addresse de livraison
 Delivery at: Livraison à
 Agency: Agence
 Warehouse: Entrepôt

forms/ecomerce/confirm/locale/pt.yml

@@ -1,5 +1,7 @@
 Checkout: Finalizar encomenda
 Order summary: Resumo da encomenda
+ShippingInformation: Dados de envio
+DeliveryAddress: Endereço de entrega
 Delivery at: Entrega na
 Agency: Agência
 Warehouse: Armazém

forms/ecomerce/confirm/style.css

@@ -2,36 +2,9 @@
 .confirm .summary {
 	margin-bottom: 16px;
 }
-.confirm .address {
-	margin-top: .8em;
-}
-.confirm h2 {
-	font-size: 1.1em;
-	font-weight: normal;
-	padding: 0;
-	margin: 0;
-	margin-bottom: .5em;
-	color: #333;
-}
-.confirm button {
-	font-size: 1.4em;
-}
 .confirm p {
 	margin: .2em 0;
 }
-.confirm .modify-order {
-	float: left;
-}
-.confirm .confirm-order {
-	float: right;
-}
-.confirm .payment > div {
-	margin-bottom: 1.4em;
-}
-.confirm .payment > .button-bar {
-	margin: 0;
-	margin-top: 1.8em;
-}
 
 /* Table */
 
@@ -86,3 +59,35 @@
 .confirm .transfer-account > p {
 	margin: .1em 0;
 }
+
+.confirm .payment > div {
+	margin-bottom: 1.4em;
+}
+.confirm .payment > .button-bar {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 0;
+	margin-top: 32px;
+}
+.confirm .payment > .button-bar button{
+	font-size: 1.2rem;
+	border-radius: 2rem;
+	padding: .5rem 1rem;
+	margin: 0;
+}
+.confirm .modify-order {
+	border: 1px solid #1a1a1a;
+}
+.confirm .modify-order:hover {
+	color: white;
+	background-color: #1a1a1a;
+}
+.confirm .confirm-order {
+	border: 1px solid #8cc63f;
+	background-color: #8cc63f;
+	color: white;
+}
+.confirm .confirm-order:hover {
+	background-color: transparent;
+	color: #6b5;
+}

forms/ecomerce/confirm/ui.xml

@@ -34,6 +34,7 @@
 		<div class="box vn-pa-lg summary">
 			<div>
 				<div class="delivery">
+					<h6><t>ShippingInformation</t></h6>
 					<p>
 						<t>Delivery at</t> 
 						<htk-text format="%D" form="order-form" column="sent"/>
@@ -43,7 +44,8 @@
 						<htk-text form="order-form" column="agency"/>
 					</p>
 				</div>
-				<div id="address" class="address">
+				<div id="address" class="address vn-mt-md">
+					<h6><t>DeliveryAddress</t></h6>
 					<p>
 						<htk-text form="order-form" column="nickname"/>
 					</p>
@@ -136,9 +138,7 @@
 				</div>
 			</div>
 			<div>
-				<h2>
+				<h6><t>Pay method</t></h6>
-					<t>Pay method</t>
-				</h2>
 				<div class="pay-methods">
 					<htk-radio-group
 						id="pay-method"
@@ -198,14 +198,19 @@
 					</div>
 				</div>
 			</div>
-			<div class="button-bar">
+			<div class="button-bar vn-mt-md">
-				<button on-click="onModifyClick" id="modify" class="thin modify-order">
+				<button
+					id="modify"
+					on-click="this.onModifyClick()"
+					class="modify-order">
 					<t>Modify</t>
 				</button>
-				<button on-click="onConfirmClick" id="confirm" class="thin confirm-order">
+				<button
+					id="confirm"
+					on-click="this.onConfirmClick()"
+					class="confirm-order">
 					<t>Confirm</t>
 				</button>
-				<div class="clear"/>
 			</div>
 		</div>
 	</div>

js/hedera/login.scss

@@ -4,7 +4,6 @@
 	align-items: center;
 	justify-content: center;
 	color: #333;
-	font-size: 1.1em;
 	font-weight: normal;
 	height: inherit;
 	background-color: white;
@@ -52,21 +51,25 @@
 			background-color: #3d3f42;
 		}
 	}
-	@media (max-height: 50em) {
+	@media (max-height: 680px) {
 		height: initial;
 	}
 }
 
+$login-margin-top: 50px;
+$login-margin-between: 55px;
+
 .vn-login > .column {
 	max-width: 300px;
 
 	& > .header {
-		margin-top: 60px;
+		margin-top: $login-margin-top;
-		margin-bottom: 80px;
+		margin-bottom: $login-margin-between;
 		
 		img {
 			display: block;
-			width: 100%;
+			margin: 0 auto;
+			width: 90%;
 		}
 		.version-code {
 			color: red;
@@ -78,10 +81,10 @@
 		}
 	}
 	& > .footer {
-		margin-bottom: 60px;
+		margin-bottom: $login-margin-top;
-		margin-top: 80px;
+		margin-top: $login-margin-between;
-		font-size: 14px;
 		text-align: center;
+		font-size: .85rem;
 		
 		.contact {
 			margin-top: 15px;
@@ -98,13 +101,6 @@
 		p {
 			margin: 5px 0;
 		}
-		label {
-			margin: 0;
-		}
-		& > .form-group > label {
-			display: block;
-			font-size: 14px;
-		}
 		& > .remind-block {
 			margin-top: 20px;
 			margin-bottom: 40px;
@@ -126,7 +122,7 @@
 		}
 		.password-forgotten {
 			text-align: center;
-			font-size: 14px;
+			font-size: .85rem;
 			margin-top: 30px;
 		}
 		.enter {

js/hedera/login.xml

@@ -7,16 +7,18 @@
 		</div>
 		<form id="form">
 			<div class="form-group">
-				<label>
+				<input 
-					<t>User</t>
+					placeholder="_User"
-					<input type="text" id="user" name="user"/>
+					type="text"
-				</label>
+					id="user"
+					name="user"/>
 			</div>
 			<div class="form-group">
-				<label>
+				<input
-					<t>Password</t>
+					placeholder="_Password"
-					<input type="password" id="pass" name="password"/>
+					type="password"
-				</label>
+					id="pass"
+					name="password"/>
 			</div>
 			<div class="remind-block">
 				<label>
@@ -47,7 +49,7 @@
 				<a href="_Sign up link" target="_blank"><t>Sign up</t></a>
 			</p>
 			<p class="contact">
-				Tel. <t>Login phone</t> - <t>Login mail</t>
+				<t>Login phone</t> · <t>Login mail</t>
 			</p>
 		</div>
 	</div>

js/htk/style/components.scss

@@ -634,11 +634,11 @@ td.cell-image .htk-image {
 .htk-search-entry {
 	display: flex;
 	align-items: center;
-	gap: 10px;
+	gap: 6px;
 	background-color: white;
 	height: 40px;
 	border-radius: 20px;
-	padding: 0 15px;
+	padding: 0 12px;
 	overflow: hidden;
 
 	& > * {
@@ -653,7 +653,7 @@ td.cell-image .htk-image {
 	& > .entry {
 		margin: 0;
 		border: none;
-		width: 100px;
+		width: 80px;
 		box-shadow: none;
 		padding-right: 0;
 		padding-left: 0;