Fix uppercase text on some views on both websites

src/Web/WebMVC/Views/Order/Create.cshtml

@@ -11,32 +11,32 @@
 <div class="container">
     <form method="post" asp-controller="Order" asp-action="Create">
         <section class="esh-orders_new-section">
-            <h4>SHIPPING ADDRESS</h4>
+            <h4 class="esh-orders_new-title">Shipping address</h4>
             <div class="row">
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label asp-for="Street">ADDRESS</label>
+                        <label asp-for="Street" class="esh-orders_new-title">Address</label>
                         <input asp-for="Street" class="form-control form-input" type="text" placeholder="Street"/>
                         <span asp-validation-for="Street" class="alert alert-danger" />
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label asp-for="City">CITY</label>
+                        <label asp-for="City" class="esh-orders_new-title">City</label>
                         <input asp-for="City" class="form-control form-input" type="text" placeholder="City"/>
                         <span asp-validation-for="City" class="alert alert-danger" />
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label asp-for="State">STATE</label>
+                        <label asp-for="State" class="esh-orders_new-title">State</label>
                         <input asp-for="State" class="form-control form-input" type="text" placeholder="State"/>
                         <span asp-validation-for="State" class="alert alert-danger" />
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label asp-for="Country">COUNTRY</label>
+                        <label asp-for="Country" class="esh-orders_new-title">Country</label>
                         <input asp-for="Country" class="form-control form-input" type="text" placeholder="Country"/>
                         <span asp-validation-for="Country" class="alert alert-danger" />
                     </div>
@@ -44,32 +44,32 @@
             </div>
         </section>
         <section class="esh-orders_new-section">
-            <h4>PAYMENT METHOD</h4>
+            <h4 class="esh-orders_new-title">Payment method</h4>
             <div class="row">
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label asp-for="CardNumber">CARD NUMBER</label>
+                        <label asp-for="CardNumber" class="esh-orders_new-title">Card number</label>
                         <input asp-for="CardNumber" class="form-control form-input" type="text" placeholder="000000000"/>
                         <span asp-validation-for="CardNumber" class="alert alert-danger" />
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label asp-for="CardHolderName">CARDHOLDER NAME</label>
+                        <label asp-for="CardHolderName" class="esh-orders_new-title">Cardholder name</label>
                         <input asp-for="CardHolderName" class="form-control form-input" type="text" placeholder="Cardholder"/>
                         <span asp-validation-for="CardHolderName" class="alert alert-danger" />
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label asp-for="CardExpirationShort">EXPIRATION DATE</label>
+                        <label asp-for="CardExpirationShort" class="esh-orders_new-title">Expiration date</label>
                         <input asp-for="CardExpirationShort" class="form-control form-input" type="text" placeholder="00/00"/>
                         <span asp-validation-for="CardExpirationShort" class="alert alert-danger" />
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group">
-                        <label asp-for="CardSecurityNumber">SECURITY CODE</label>
+                        <label asp-for="CardSecurityNumber" class="esh-orders_new-title">Security code</label>
                         <input asp-for="CardSecurityNumber" class="form-control form-input" type="text" placeholder="000"/>
                         <span asp-validation-for="CardSecurityNumber" class="alert alert-danger" />
                     </div>

src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css

@@ -55,6 +55,7 @@
 
 .esh-orders_new-title {
     font-size: 1.25rem;
+    text-transform: uppercase;
 }
 
 .esh-orders_new-items--border {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html

@@ -7,32 +7,32 @@
 <div class="container">
     <form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)">
         <section class="esh-orders_new-section">
-            <h4>SHIPPING ADDRESS</h4>
+            <h4 class="esh-orders_new-title">Shipping Address</h4>
             <div class="row">
                 <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
-                        <label>ADDRESS</label>
+                        <label class="esh-orders_new-title">Address</label>
                         <input class="form-control form-input" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
                         <div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
-                        <label>CITY</label>
+                        <label class="esh-orders_new-title">City</label>
                         <input class="form-control form-input" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
                         <div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
-                        <label>STATE</label>
+                        <label class="esh-orders_new-title">State</label>
                         <input class="form-control form-input" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
                         <div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
-                        <label>COUNTRY</label>
+                        <label class="esh-orders_new-title">Country</label>
                         <input class="form-control form-input" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
                         <div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
                     </div>
@@ -40,32 +40,32 @@
             </div>
         </section>
         <section class="esh-orders_new-section">
-            <h4>PAYMENT METHOD</h4>
+            <h4 class="esh-orders_new-title">Payment method</h4>
             <div class="row">
                 <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
-                        <label>CARD NUMBER</label>
+                        <label class="esh-orders_new-title">Card number</label>
                         <input class="form-control form-input" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
                         <div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
-                        <label>CARDHOLDER NAME</label>
+                        <label class="esh-orders_new-title">Cardholder name</label>
                         <input class="form-control form-input" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
                         <div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
-                        <label>EXPIRATION DATE</label>
+                        <label class="esh-orders_new-title">Expiration date</label>
                         <input class="form-control form-input form-input-medium" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
                         <div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
-                        <label>SECURITY CODE</label>
+                        <label class="esh-orders_new-title">Security code</label>
                         <input class="form-control form-input form-input-small" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
                         <div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
                     </div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss

@@ -58,6 +58,7 @@
 
     &-title {
         font-size: $font-size-l;
+        text-transform: uppercase;
     }
 
     &-items {