Merge pull request #1705 from dotnet-architecture/feature/refresh-spa-theme

Refresh SPA theme

README.md

@@ -6,6 +6,12 @@
 
 Sample .NET Core reference application, powered by Microsoft, based on a simplified microservices architecture and Docker containers.
 
+## SPA Application (Angular)
+
+![](img/eshop-spa-app-home.png)
+
+## MVC application (ASP.NET Core)
+
 ![](img/eshop-webmvc-app-screenshot.png)
 
 ## Build Status (GitHub Actions)

src/Services/Catalog/Catalog.API/Setup/CatalogBrands.csv

@@ -1,8 +1,3 @@
 CatalogBrand
-Azure
 .NET 
-Visual Studio 
-SQL Server
 Other
-CatalogBrandTestOne
-CatalogBrandTestTwo

src/Services/Catalog/Catalog.API/Setup/CatalogItems.csv

@@ -3,12 +3,13 @@ T-Shirt,.NET,".NET Bot Black Hoodie, and more",.NET Bot Black Hoodie,19.5,1.png,
 Mug,.NET,.NET Black & White Mug,.NET Black & White Mug,8.50,2.png,89,true
 T-Shirt,Other,Prism White T-Shirt,Prism White T-Shirt,12,3.png,56,false
 T-Shirt,.NET,.NET Foundation T-shirt,.NET Foundation T-shirt,12,4.png,120,false
-Sheet,Other,Roslyn Red Sheet,Roslyn Red Sheet,8.5,5.png,55,false
+Pin,Other,Roslyn Red Pin,Roslyn Red Pin,8.5,5.png,55,false
 T-Shirt,.NET,.NET Blue Hoodie,.NET Blue Hoodie,12,6.png,17,false
 T-Shirt,Other,Roslyn Red T-Shirt,Roslyn Red T-Shirt,12,7.png,8,false
 T-Shirt,Other,Kudu Purple Hoodie,Kudu Purple Hoodie,8.5,8.png,34,false
 Mug,Other,Cup<T> White Mug,Cup<T> White Mug,12,9.png,76,false
-Sheet,.NET,.NET Foundation Sheet,.NET Foundation Sheet,12,10.png,11,false
-Sheet,.NET,Cup<T> Sheet,Cup<T> Sheet,8.5,11.png,3,false
+Pin,.NET,.NET Foundation Pin,.NET Foundation Pin,12,10.png,11,false
+Pin,.NET,Cup<T> Pin,Cup<T> Pin,8.5,11.png,3,false
 T-Shirt,Other,Prism White TShirt,Prism White TShirt,12,12.png,0,false
-Mug, Other, De los Palotes, pepito, 12, 12.png, 0, false
+Mug,.NET,Modern .NET Black & White Mug,Modern .NET Black & White Mug,8.50,13.png,89,true
+Mug,Other,Modern Cup<T> White Mug,Modern Cup<T> White Mug,12,14.png,76,false

src/Services/Catalog/Catalog.API/Setup/CatalogTypes.csv

@@ -1,7 +1,4 @@
 CatalogType
 Mug
 T-Shirt
-Sheet
-USB Memory Stick
-CatalogTypeTestOne
-CatalogTypeTestTwo
+Pin

src/Services/Catalog/Catalog.API/Setup/README.md

@@ -0,0 +1,10 @@
+# Catalog set up
+
+The catalog images have been updated to the new SPA looks.
+
+If you want to use the classical images:
+
+1. Drop the `Microsoft.eShopOnContainers.Services.CatalogDb` database from the `sqldata` container.
+2. Rename `CatalogItems-MVC.zip` as `CatalogItems.zip`
+3. Rebuild the `catalog-api` service with `docker-compose build catalog-api`
+4. Restart the application as usual

src/Services/Identity/Identity.API/Views/Account/Login.cshtml

@@ -1,61 +1,27 @@
 @model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.LoginViewModel
 
-
 @{
     ViewData["Title"] = "Log in";
+
+    var requestQuery = ViewContext.HttpContext.Request.Query;
+
+    requestQuery.TryGetValue("ReturnUrl", out var returnUrl);
+
+    string partialView;
+
+    if (returnUrl[0].Contains("client_id=js"))
+    {
+        Layout = "_Layout-SPA";
+        partialView = "_LoginPartial-SPA.cshtml";
+    }
+    else
+    {
+        partialView = "_LoginPartial-MVC.cshtml";
+    }
+
 }
-<div class="brand-header-block">
-    <ul class="container">
-        <li><a asp-area="" asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">REGISTER</a></li>
-        <li class="active" style="margin-right: 65px;">LOGIN</li>
-    </ul>
-</div>
-<div class="container account-login-container">
-    <div class="row">
-        <div class="col-md-12">
-            <section>
-                <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
-                    <input type="hidden" asp-for="ReturnUrl" />
-                    <h4>ARE YOU REGISTERED?</h4>
-                    <div asp-validation-summary="All" class="text-danger"></div>
-                    <div class="form-group">
-                        <label asp-for="Email" class="control-label form-label"></label>
-                        <input asp-for="Email" class="form-control form-input form-input-center" />
-                        <span asp-validation-for="Email" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="Password" class="control-label form-label"></label>
-                        <input asp-for="Password" class="form-control form-input form-input-center" />
-                        <span asp-validation-for="Password" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <div class="checkbox">
-                            <label asp-for="RememberMe">
-                                <input asp-for="RememberMe" />
-                                @Html.DisplayNameFor(m => m.RememberMe)
-                            </label>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <button type="submit" class="btn btn-default btn-brand btn-brand-big">&nbsp;LOG IN&nbsp;</button>
-                    </div>
-                    <p>
-                        <a asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" class="text">Register as a new user?</a>
-                    </p>
-                    <p>
-                        Note that for demo purposes you don't need to register and can login with these credentials:
-                    </p>
-                    <p>
-                        User:     <b>demouser@microsoft.com</b>
-                    </p>
-                    <p>
-                        Password: <b>Pass@word1</b>
-                    </p>
-                </form>
-            </section>
-        </div>
-    </div>
-</div>
+
+<partial name=@partialView model=@Model />
 
 @section Scripts {
     @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

src/Services/Identity/Identity.API/Views/Account/Register.cshtml

@@ -1,106 +1,28 @@
 @model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.RegisterViewModel
+
 @{
     ViewData["Title"] = "Register";
+
+    var requestQuery = ViewContext.HttpContext.Request.Query;
+
+    requestQuery.TryGetValue("ReturnUrl", out var returnUrl);
+
+    string partialView;
+
+    if (returnUrl[0].Contains("client_id=js"))
+    {
+        Layout = "_Layout-SPA";
+        partialView = "_RegisterPartial-SPA.cshtml";
+    }
+    else
+    {
+        partialView = "_RegisterPartial-MVC.cshtml";
+    }
+
 }
-<div class="brand-header-block">
-    <ul class="container">
-        <li class="active">REGISTER</li>
-        <li style="margin-right: 65px;"><a asp-area="" asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">LOGIN</a></li>
-    </ul>
-</div>
-<div class="container register-container">
-    <form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
-        <h4 class="order-create-section-title">CREATE NEW ACCOUNT</h4>
-        <div asp-validation-summary="All" class="text-danger"></div>
-        <div class="row">
-            <div class="form-group col-sm-6">
-                <label asp-for="User.Name" class="control-label form-label">NAME</label>
-                <input asp-for="User.Name" class="form-control form-input" />
-                <span asp-validation-for="User.Name" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.LastName" class="control-label form-label">LAST NAME</label>
-                <input asp-for="User.LastName" class="form-control form-input" />
-                <span asp-validation-for="User.LastName" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.Street" class="control-label form-label">ADDRESS</label>
-                <input asp-for="User.Street" class="form-control form-input" />
-                <span asp-validation-for="User.Street" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.City" class="control-label form-label"></label>
-                <input asp-for="User.City" class="form-control form-input" />
-                <span asp-validation-for="User.City" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.State" class="control-label form-label"></label>
-                <input asp-for="User.State" class="form-control form-input" />
-                <span asp-validation-for="User.State" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.Country" class="control-label form-label"></label>
-                <input asp-for="User.Country" class="form-control form-input" />
-                <span asp-validation-for="User.Country" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.ZipCode" class="control-label form-label">POSTCODE</label>
-                <input asp-for="User.ZipCode" class="form-control form-input" />
-                <span asp-validation-for="User.ZipCode" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.PhoneNumber" class="control-label form-label">PHONE NUMBER</label>
-                <input asp-for="User.PhoneNumber" class="form-control form-input" />
-                <span asp-validation-for="User.PhoneNumber" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.CardNumber" class="control-label form-label">Card Number</label>
-                <input asp-for="User.CardNumber" class="form-control form-input" />
-                <span asp-validation-for="User.CardNumber" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="User.CardHolderName" class="control-label form-label">Cardholder Name</label>
-                <input asp-for="User.CardHolderName" class="form-control form-input" />
-                <span asp-validation-for="User.CardHolderName" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-3">
-                <label asp-for="User.Expiration" class="control-label form-label">Expiration Date</label>
-                <input asp-for="User.Expiration" placeholder="MM/YY" class="form-control form-input form-input-small" />
-                <span asp-validation-for="User.Expiration" class="text-danger" />
-            </div>
-            <div class="form-group col-sm-3">
-                <label asp-for="User.SecurityNumber" class="control-label form-label">Security Code</label>
-                <input asp-for="User.SecurityNumber" class="form-control form-input form-input-small" />
-                <span asp-validation-for="User.SecurityNumber" class="text-danger" />
-            </div>
-        </div>
-        <br /><br />
-        <div class="row">
-            <div class="form-group col-sm-6">
-                <label asp-for="Email" class="control-label form-label"></label>
-                <input asp-for="Email" class="form-control form-input" />
-                <span asp-validation-for="Email" class="text-danger"></span>
-            </div>
-            <div class="form-group col-sm-offset-6"></div>
-            <div class="form-group col-sm-6">
-                <label asp-for="Password" class="control-label form-label"></label>
-                <input asp-for="Password" class="form-control form-input" />
-                <span asp-validation-for="Password" class="text-danger"></span>
-            </div>
-            <div class="form-group col-sm-6">
-                <label asp-for="ConfirmPassword" class="control-label form-label"></label>
-                <input asp-for="ConfirmPassword" class="form-control form-input" />
-                <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
-            </div>
-            </div>
-        <br /><br />
-        <div class="form-group">
-            <button type="submit" class="btn btn-default btn-brand">&nbsp;Register&nbsp;</button>
-        </div>
-        <br /><br />
-    </form>
-</div>
+
+<partial name=@partialView model=@Model />
+
 @section Scripts {
     @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
 }
-

src/Services/Identity/Identity.API/Views/Account/_LoginPartial-MVC.cshtml

@@ -0,0 +1,54 @@
+@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.LoginViewModel
+
+<div class="brand-header-block">
+    <ul class="container">
+        <li><a asp-area="" asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">REGISTER</a></li>
+        <li class="active" style="margin-right: 65px;">LOGIN</li>
+    </ul>
+</div>
+<div class="container account-login-container">
+    <div class="row">
+        <div class="col-md-12">
+            <section>
+                <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
+                    <input type="hidden" asp-for="ReturnUrl" />
+                    <h4>ARE YOU REGISTERED?</h4>
+                    <div asp-validation-summary="All" class="text-danger"></div>
+                    <div class="form-group">
+                        <label asp-for="Email" class="control-label form-label"></label>
+                        <input asp-for="Email" class="form-control form-input form-input-center" />
+                        <span asp-validation-for="Email" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="Password" class="control-label form-label"></label>
+                        <input asp-for="Password" class="form-control form-input form-input-center" />
+                        <span asp-validation-for="Password" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <div class="checkbox">
+                            <label asp-for="RememberMe">
+                                <input asp-for="RememberMe" />
+                                @Html.DisplayNameFor(m => m.RememberMe)
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <button type="submit" class="btn btn-default btn-brand btn-brand-big">&nbsp;LOG IN&nbsp;</button>
+                    </div>
+                    <p>
+                        <a asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" class="text">Register as a new user?</a>
+                    </p>
+                    <p>
+                        Note that for demo purposes you don't need to register and can login with these credentials:
+                    </p>
+                    <p>
+                        User:     <b>demouser@microsoft.com</b>
+                    </p>
+                    <p>
+                        Password: <b>Pass@word1</b>
+                    </p>
+                </form>
+            </section>
+        </div>
+    </div>
+</div>

src/Services/Identity/Identity.API/Views/Account/_LoginPartial-SPA.cshtml

@@ -0,0 +1,47 @@
+@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.LoginViewModel
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            <section>
+                <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-login">
+                    <input type="hidden" asp-for="ReturnUrl" />
+                    <h4 class="text-left mb-4">ARE YOU REGISTERED?</h4>
+                    <div asp-validation-summary="All" class="text-danger"></div>
+                    <div class="form-group">
+                        <label asp-for="Email" class="control-label form-label"></label>
+                        <input asp-for="Email" class="form-control form-input w-100" />
+                        <span asp-validation-for="Email" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="Password" class="control-label form-label"></label>
+                        <input asp-for="Password" class="form-control form-input w-100" />
+                        <span asp-validation-for="Password" class="text-danger"></span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="checkbox">
+                            <label asp-for="RememberMe">
+                                <input asp-for="RememberMe" class="mr-1" />
+                                @Html.DisplayNameFor(m => m.RememberMe)
+                            </label>
+                        </div>
+
+                        <button type="submit" class="btn btn-primary">LOG IN</button>
+                    </div>
+                    <div class="form-login-register-link text-center mt-3">
+                        <a class="text-link" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">Register as a new user?</a>
+                    </div>
+                    
+                </form>
+                <div class="form-login-details">
+                    <div>
+                        Note that for demo purposes you don't need to register and can login with these credentials:
+                    </div>
+                    <div>
+                        User: <strong>demouser@microsoft.com</strong> Password: <strong>Pass@word1</strong>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>

src/Services/Identity/Identity.API/Views/Account/_RegisterPartial-MVC.cshtml

@@ -0,0 +1,100 @@
+@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.RegisterViewModel
+
+<div class="brand-header-block">
+    <ul class="container">
+        <li class="active">REGISTER</li>
+        <li style="margin-right: 65px;"><a asp-area="" asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">LOGIN</a></li>
+    </ul>
+</div>
+<div class="container register-container">
+    <form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
+        <h4 class="order-create-section-title">CREATE NEW ACCOUNT</h4>
+        <div asp-validation-summary="All" class="text-danger"></div>
+        <div class="row">
+            <div class="form-group col-sm-6">
+                <label asp-for="User.Name" class="control-label form-label">NAME</label>
+                <input asp-for="User.Name" class="form-control form-input" />
+                <span asp-validation-for="User.Name" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.LastName" class="control-label form-label">LAST NAME</label>
+                <input asp-for="User.LastName" class="form-control form-input" />
+                <span asp-validation-for="User.LastName" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.Street" class="control-label form-label">ADDRESS</label>
+                <input asp-for="User.Street" class="form-control form-input" />
+                <span asp-validation-for="User.Street" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.City" class="control-label form-label"></label>
+                <input asp-for="User.City" class="form-control form-input" />
+                <span asp-validation-for="User.City" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.State" class="control-label form-label"></label>
+                <input asp-for="User.State" class="form-control form-input" />
+                <span asp-validation-for="User.State" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.Country" class="control-label form-label"></label>
+                <input asp-for="User.Country" class="form-control form-input" />
+                <span asp-validation-for="User.Country" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.ZipCode" class="control-label form-label">POSTCODE</label>
+                <input asp-for="User.ZipCode" class="form-control form-input" />
+                <span asp-validation-for="User.ZipCode" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.PhoneNumber" class="control-label form-label">PHONE NUMBER</label>
+                <input asp-for="User.PhoneNumber" class="form-control form-input" />
+                <span asp-validation-for="User.PhoneNumber" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.CardNumber" class="control-label form-label">Card Number</label>
+                <input asp-for="User.CardNumber" class="form-control form-input" />
+                <span asp-validation-for="User.CardNumber" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.CardHolderName" class="control-label form-label">Cardholder Name</label>
+                <input asp-for="User.CardHolderName" class="form-control form-input" />
+                <span asp-validation-for="User.CardHolderName" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-3">
+                <label asp-for="User.Expiration" class="control-label form-label">Expiration Date</label>
+                <input asp-for="User.Expiration" placeholder="MM/YY" class="form-control form-input form-input-small" />
+                <span asp-validation-for="User.Expiration" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-3">
+                <label asp-for="User.SecurityNumber" class="control-label form-label">Security Code</label>
+                <input asp-for="User.SecurityNumber" class="form-control form-input form-input-small" />
+                <span asp-validation-for="User.SecurityNumber" class="text-danger" />
+            </div>
+        </div>
+        <br /><br />
+        <div class="row">
+            <div class="form-group col-sm-6">
+                <label asp-for="Email" class="control-label form-label"></label>
+                <input asp-for="Email" class="form-control form-input" />
+                <span asp-validation-for="Email" class="text-danger"></span>
+            </div>
+            <div class="form-group col-sm-offset-6"></div>
+            <div class="form-group col-sm-6">
+                <label asp-for="Password" class="control-label form-label"></label>
+                <input asp-for="Password" class="form-control form-input" />
+                <span asp-validation-for="Password" class="text-danger"></span>
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="ConfirmPassword" class="control-label form-label"></label>
+                <input asp-for="ConfirmPassword" class="form-control form-input" />
+                <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
+            </div>
+            </div>
+        <br /><br />
+        <div class="form-group">
+            <button type="submit" class="btn btn-default btn-brand">&nbsp;Register&nbsp;</button>
+        </div>
+        <br /><br />
+    </form>
+</div>

src/Services/Identity/Identity.API/Views/Account/_RegisterPartial-SPA.cshtml

@@ -0,0 +1,100 @@
+@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.RegisterViewModel
+
+<div class="container">
+    <h1 class="mb-4 mt-5">[ New Account ]</h1>
+    <form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-register">
+        <h4 class="order-create-section-title">Information</h4>
+        <div asp-validation-summary="All" class="text-danger"></div>
+        <div class="row">
+            <div class="form-group col-sm-6">
+                <label asp-for="User.Name" class="control-label form-label">Name</label>
+                <input asp-for="User.Name" class="form-control form-input" />
+                <span asp-validation-for="User.Name" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.LastName" class="control-label form-label">Last Name</label>
+                <input asp-for="User.LastName" class="form-control form-input" />
+                <span asp-validation-for="User.LastName" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.Street" class="control-label form-label">Address</label>
+                <input asp-for="User.Street" class="form-control form-input" />
+                <span asp-validation-for="User.Street" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.City" class="control-label form-label"></label>
+                <input asp-for="User.City" class="form-control form-input" />
+                <span asp-validation-for="User.City" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.State" class="control-label form-label"></label>
+                <input asp-for="User.State" class="form-control form-input" />
+                <span asp-validation-for="User.State" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.Country" class="control-label form-label"></label>
+                <input asp-for="User.Country" class="form-control form-input" />
+                <span asp-validation-for="User.Country" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.ZipCode" class="control-label form-label">Postcode</label>
+                <input asp-for="User.ZipCode" class="form-control form-input" />
+                <span asp-validation-for="User.ZipCode" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.PhoneNumber" class="control-label form-label">Phone Number</label>
+                <input asp-for="User.PhoneNumber" class="form-control form-input" />
+                <span asp-validation-for="User.PhoneNumber" class="text-danger" />
+            </div>
+        </div>
+            <div class="mt-4">
+                <h4 class="order-create-section-title">Credit Card</h4>
+            </div>
+        <div class="row">
+            <div class="form-group col-sm-6">
+                <label asp-for="User.CardNumber" class="control-label form-label">Card Number</label>
+                <input asp-for="User.CardNumber" class="form-control form-input" />
+                <span asp-validation-for="User.CardNumber" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="User.CardHolderName" class="control-label form-label">Cardholder Name</label>
+                <input asp-for="User.CardHolderName" class="form-control form-input" />
+                <span asp-validation-for="User.CardHolderName" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-3">
+                <label asp-for="User.Expiration" class="control-label form-label">Expiration Date</label>
+                <input asp-for="User.Expiration" placeholder="MM/YY" class="form-control form-input form-input-small" />
+                <span asp-validation-for="User.Expiration" class="text-danger" />
+            </div>
+            <div class="form-group col-sm-3">
+                <label asp-for="User.SecurityNumber" class="control-label form-label">Security Code</label>
+                <input asp-for="User.SecurityNumber" class="form-control form-input form-input-small" />
+                <span asp-validation-for="User.SecurityNumber" class="text-danger" />
+            </div>
+        </div>
+        <br /><br />
+        <div class="row">
+            <div class="form-group col-sm-6">
+                <label asp-for="Email" class="control-label form-label"></label>
+                <input asp-for="Email" class="form-control form-input" />
+                <span asp-validation-for="Email" class="text-danger"></span>
+            </div>
+            <div class="form-group col-sm-offset-6"></div>
+            <div class="form-group col-sm-6">
+                <label asp-for="Password" class="control-label form-label"></label>
+                <input asp-for="Password" class="form-control form-input" />
+                <span asp-validation-for="Password" class="text-danger"></span>
+            </div>
+            <div class="form-group col-sm-6">
+                <label asp-for="ConfirmPassword" class="control-label form-label"></label>
+                <input asp-for="ConfirmPassword" class="form-control form-input" />
+                <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
+            </div>
+            </div>
+        <br /><br />
+        <div class="d-flex mt-3 justify-content-end">
+            <button type="submit" class="btn btn-primary">Register</button>
+        </div>
+        <br /><br />
+    </form>
+</div>

src/Services/Identity/Identity.API/Views/Shared/_Layout-SPA.cshtml

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-inline'; script-src-elem 'unsafe-inline'">
+    <title>eShopOnContainers - Identity</title>
+    <link rel="icon" type="image/x-icon" href="~/favicon.ico" />
+    <link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
+    <environment names="Development">
+        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
+        <link rel="stylesheet" href="~/css/site-spa.css" />
+    </environment>
+    <environment names="Staging,Production">
+        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
+              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
+              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
+        <link rel="stylesheet" href="~/css/site-spa.min.css" asp-append-version="true" />
+    </environment>
+</head>
+<body>
+    <div class="es-header">
+        <div class="container">
+            <article class="d-flex align-content-center justify-content-between">
+                <section>
+                    <a asp-controller="home" asp-action="ReturnToOriginalApplication" asp-route-returnUrl="@ViewData["ReturnUrl"]">
+                        <img class="es-header-brand" src="~/images/logo_color.svg">
+                    </a>
+                </section>
+            </article>
+        </div>
+    </div>
+
+    <div class="content">
+        @RenderBody()
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <article class="d-flex w-100 h-100 justify-content-between align-items-center">
+                <section>
+                    <img class="footer-brand" src="~/images/logo.svg">
+                </section>
+                <section> © e-Shoponcontainers. All rights reserved </section>
+            </article>
+        </div>
+    </footer>
+
+
+    <script src="~/lib/jquery/jquery.js"></script>
+    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
+    @RenderSection("scripts", required: false)
+</body>
+</html>

src/Web/WebMVC/Controllers/CatalogController.cs

@@ -16,7 +16,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
 
         public async Task<IActionResult> Index(int? BrandFilterApplied, int? TypesFilterApplied, int? page, [FromQuery] string errorMsg)
         {
-            var itemsPage = 10;
+            var itemsPage = 9;
             var catalog = await _catalogSvc.GetCatalogItems(page ?? 0, itemsPage, BrandFilterApplied, TypesFilterApplied);
             var vm = new IndexViewModel()
             {

src/Web/WebSPA/.gitignore

@@ -177,7 +177,8 @@ ClientBin/
 *.publishsettings
 node_modules/
 bower_components/
-wwwroot/
+wwwroot/*
+!wwwroot/favicon.ico
 
 
 orleans.codegen.cs

src/Web/WebSPA/AppSettings.cs

@@ -1,9 +1,15 @@
-namespace eShopOnContainers.WebSPA
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace eShopOnContainers.WebSPA
 {
     public class AppSettings
     {
         public string IdentityUrl { get; set; }
         public string BasketUrl { get; set; }
+        public string MarketingUrl { get; set; }
 
         public string PurchaseUrl { get; set; }
         public string SignalrHubUrl { get; set; }

src/Web/WebSPA/angular.json → src/Web/WebSPA/Client/angular.json

@@ -5,23 +5,23 @@
   "projects": {
     "WebSPA": {
       "root": "",
-      "sourceRoot": "Client",
+      "sourceRoot": "src",
       "projectType": "application",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "wwwroot",
-            "index": "Client/index.html",
-            "main": "Client/main.ts",
-            "tsConfig": "Client/tsconfig.app.json",
-            "polyfills": "Client/polyfills.ts",
+            "outputPath": "../wwwroot",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
             "assets": [
-              "Client/assets",
-              "Client/favicon.ico"
+              "src/assets",
+              "src/favicon.ico"
             ],
             "styles": [
-              "Client/globals.scss"
+              "src/styles/globals.scss"
             ],
             "scripts": []
           },
@@ -44,8 +44,8 @@
               "buildOptimizer": true,
               "fileReplacements": [
                 {
-                  "replace": "Client/environments/environment.ts",
-                  "with": "Client/environments/environment.prod.ts"
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
                 }
               ]
             }
@@ -71,17 +71,17 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "Client/test.ts",
+            "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
-            "polyfills": "Client/polyfills.ts",
-            "tsConfig": "Client/tsconfig.spec.json",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "Client/globals.scss"
+              "src/styles/globals.scss"
             ],
             "assets": [
-              "Client/assets",
-              "Client/favicon.ico"
+              "src/assets",
+              "src/favicon.ico"
             ]
           }
         },
@@ -89,8 +89,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "Client/tsconfig.app.json",
-              "Client/tsconfig.spec.json"
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
             ],
             "exclude": []
           }
@@ -130,8 +130,5 @@
     "@schematics/angular:directive": {
       "prefix": "app"
     }
-  },
-  "cli": {
-    "analytics": false
   }
 }

src/Web/WebSPA/Client/globals.scss

@@ -1,80 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-@import "~bootstrap/scss/bootstrap";
-@import "~ngx-toastr/toastr-bs4-alert.scss";
-
-@import './modules/variables';
-
-$dist: './fonts/Montserrat-Regular';
-
-@font-face {
-    font-family: Montserrat;
-    font-weight: 400;
-    src: url('./fonts/Montserrat-Regular.eot?') format('eot'), url('./fonts/Montserrat-Regular.woff') format('woff'), url('./fonts/Montserrat-Regular.ttf') format('truetype'), url('./fonts/Montserrat-Regular.svg#Montserrat') format('svg');
-}
-
-@font-face {
-    font-family: Montserrat;
-    font-weight: 700;
-    src: url('./fonts/Montserrat-Bold.eot?') format('eot'), url('./fonts/Montserrat-Bold.woff') format('woff'), url('./fonts/Montserrat-Bold.ttf') format('truetype'), url('./fonts/Montserrat-Bold.svg#Montserrat') format('svg');
-}
-
-html,
-body {
-    font-family: Montserrat, sans-serif;
-    font-size: 16px;
-    font-weight: $font-weight-normal;
-    z-index: 10;
-}
-
-*,
-*::after,
-*::before {
-    box-sizing: border-box;
-}
-
-.preloading {
-    color: $color-brand;
-    display: block;
-    font-size: $font-size-xl;
-    left: 50%;
-    position: fixed;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-select::-ms-expand {
-    display: none;
-}
-
-@media screen and (min-width: 992px) {
-    .form-input {
-        max-width: 360px;
-        width: 360px;
-    }
-}
-
-.form-input {
-    border-radius: 0;
-    height: 45px;
-    padding: 10px;
-}
-
-.form-input-small {
-    max-width: 100px !important;
-}
-
-.form-input-medium {
-    width: 150px !important;
-}
-
-.alert {
-    padding-left: 0;
-}
-
-.alert-danger {
-    background-color: transparent;
-    border: 0;
-    color: #FB0D0D;
-    font-size: 12px;
-}
-

src/Web/WebSPA/Client/modules/_variables.scss

@@ -1,58 +0,0 @@
-// Colors
-$color-brand: #00A69C;
-$color-brand-dark: darken($color-brand, 10%);
-$color-brand-darker: darken($color-brand, 20%);
-$color-brand-bright: lighten($color-brand, 10%);
-$color-brand-brighter: lighten($color-brand, 20%);
-
-$color-secondary: #83D01B;
-$color-secondary-dark: darken($color-secondary, 5%);
-$color-secondary-darker: darken($color-secondary, 20%);
-$color-secondary-bright: lighten($color-secondary, 10%);
-$color-secondary-brighter: lighten($color-secondary, 20%);
-
-$color-background-dark: #333333;
-$color-background-darker: #000000;
-$color-background-bright: #EEEEFF;
-$color-background-brighter: #FFFFFF;
-
-$color-foreground-dark: #333333;
-$color-foreground-darker: #000000;
-$color-foreground-bright: #EEEEEE;
-$color-foreground-brighter: #FFFFFF;
-
-// Animations
-$animation-speed-default: .35s;
-$animation-speed-slow: .5s;
-$animation-speed-fast: .15s;
-
-// Fonts
-$font-weight-light: 200;
-$font-weight-semilight: 300;
-$font-weight-normal: 400;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-
-$font-size-xs: .65rem;    // 10.4px
-$font-size-s: .85rem;    // 13.6px
-$font-size-m: 1rem;      // 16px
-$font-size-l: 1.25rem;   // 20px
-$font-size-xl: 1.5rem;   // 24px
-
-// Medias
-$media-screen-xxs: 360px;
-$media-screen-xs: 640px;
-$media-screen-s: 768px;
-$media-screen-m: 1024px;
-$media-screen-l: 1280px;
-$media-screen-xl: 1440px;
-$media-screen-xxl: 1680px;
-$media-screen-xxxl: 1920px;
-
-// Borders
-$border-light: 1px;
-
-// Images
-$image_path: '/assets/images/';
-$image-main_banner: '#{$image_path}main_banner.png';
-$image-arrow_down: '#{$image_path}arrow-down.png';

src/Web/WebSPA/Client/modules/app.component.html

@@ -1,40 +0,0 @@
-<header class="esh-app-header">
-    <div class="container">
-        <article class="row">
-            <section class="col-lg-7 col-md-6 col-12">
-                <a class="navbar-brand" routerLink="catalog">
-                    <img src="assets/images/brand.png" />
-                </a>
-            </section>
-
-            <section class="col-lg-4 col-md-5 col-12">
-                <esh-identity></esh-identity>
-            </section>
-
-            <section class="col-lg-1 col-12">
-                <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
-            </section>
-
-        </article>
-    </div>
-</header>
-
-<!-- component routing placeholder -->
-<router-outlet></router-outlet>
-
-<footer class="esh-app-footer">
-    <div class="container">
-        <article class="row">
-
-            <section class="col-sm-6">
-                <img class="esh-app-footer-brand" src="assets/images/brand_dark.png" />
-            </section>
-
-            <section class="col-sm-6">
-                <img class="esh-app-footer-text hidden" src="assets/images/main_footer_text.png" width="335" height="26" alt="footer text image" />
-            </section>
-
-        </article>
-    </div>
-</footer>
-

src/Web/WebSPA/Client/modules/app.component.scss

@@ -1,27 +0,0 @@
-@import './variables';
-
-.esh-app {
-    &-footer {
-        $margin: 2.5rem;
-        $padding: 2.5rem;
-
-        background-color: $color-background-darker;
-        border-top: $border-light solid $color-foreground-bright;
-        margin-top: $margin;
-        padding-bottom: $padding;
-        padding-top: $padding;
-        width: 100%;
-        bottom: 0;
-
-        $height: 50px;
-
-        &-brand {
-            height: $height;
-            width: 230px;
-        }
-    }
-
-    &-header {
-        margin: 15px;
-    }
-}

src/Web/WebSPA/Client/modules/basket/basket-status/basket-status.component.scss

@@ -1,41 +0,0 @@
-@import '../../variables';
-
-.esh-basketstatus {
-    cursor: pointer;
-    display: inline-block;
-    float: right;
-    position: relative;
-    transition: all $animation-speed-default;
-
-    &.is-disabled {
-        opacity: .5;
-        pointer-events: none;
-    }
-
-    &-image {
-        height: 36px;
-        margin-top: .5rem;
-    }
-
-    &-badge {
-        $size: 1.5rem;
-        background-color: $color-secondary;
-        border-radius: 50%;
-        color: $color-foreground-brighter;
-        display: block;
-        height: $size;
-        left: 50%;
-        position: absolute;
-        text-align: center;
-        top: 0;
-        transform: translateX(-38%);
-        transition: all $animation-speed-default;
-        width: $size;
-    }
-
-    &:hover &-badge {
-        background-color: transparent;
-        color: $color-secondary-dark;
-        transition: all $animation-speed-default;
-    }
-}

src/Web/WebSPA/Client/modules/basket/basket.component.html

@@ -1,65 +0,0 @@
-<div class="esh-basket">
-    <esh-header url="/catalog">Back to catalog</esh-header>
-    
-    <div class="container">
-        <div *ngFor="let errorMessage of errorMessages">
-            <div class="esh-basket-items-margin-left1 row">
-                <div class="alert alert-warning" role="alert">&nbsp;{{errorMessage}}</div>
-            </div>
-        </div>
- 
-        <article class="esh-basket-titles row">
-            <section class="esh-basket-title col-3">Product</section>
-            <section class="esh-basket-title col-3 hidden-lg-down"></section>
-            <section class="esh-basket-title col-2">Price</section>
-            <section class="esh-basket-title col-2">Quantity</section>
-            <section class="esh-basket-title col-2">Cost</section>
-        </article>
-
-        <div *ngFor="let item of basket?.items" class="esh-basket-items--border">
-            <article class="esh-basket-items row">
-
-                <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
-                    <img class="esh-basket-image" src="{{item.pictureUrl}}"/>
-                </section>
-                <section class="esh-basket-item esh-basket-item--middle col-3">{{item.productName}}</section>
-                <section class="esh-basket-item esh-basket-item--middle col-2">$ {{item.unitPrice | number:'.2-2'}}</section>
-                <section class="esh-basket-item esh-basket-item--middle col-2">
-                    <input id="quantity"
-                           class="esh-basket-input"
-                           type="number"
-                           min="1"
-                           [(ngModel)]="item.quantity"
-                           (change)="itemQuantityChanged(item)"/>
-                </section>
-                <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
-            </article>
-            <br/>
-            <div class="esh-basket-items-margin-left1 row">
-                <div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ {{item.oldUnitPrice}} </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="container">
-        <article class="esh-basket-titles esh-basket-titles--clean row">
-            <section class="esh-basket-title col-9"></section>
-            <section class="esh-basket-title col-2">Total</section>
-        </article>
-
-        <article class="esh-basket-items row">
-            <section class="esh-basket-item col-9"></section>
-            <section class="esh-basket-item esh-basket-item--mark col-2">$ {{totalPrice | number:'.2-2'}}</section>
-        </article>
-
-        <article class="esh-basket-items row">
-            <section class="esh-basket-item col-7"></section>
-            <section class="esh-basket-item col-2">
-                <button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
-            </section>
-            <section class="esh-basket-item col-3">
-                <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
-            </section>
-        </article>
-    </div>
-</div>

src/Web/WebSPA/Client/modules/basket/basket.component.scss

@@ -1,89 +0,0 @@
-@import '../variables';
-
-@mixin margin-left($distance) {
-    margin-left: $distance;
-}
-
-.esh-basket {
-    min-height: 80vh;
-
-    &-titles {
-        padding-bottom: 1rem;
-        padding-top: 2rem;
-
-        &--clean {
-            padding-bottom: 0;
-            padding-top: 0;
-        }
-    }
-
-    &-title {
-        text-transform: uppercase;
-    }
-
-    &-items {
-        &--border {
-            border-bottom: $border-light solid $color-foreground-bright;
-            padding: .5rem 0;
-
-            &:last-of-type {
-                border-color: transparent;
-            }
-        }
-
-        &-margin-left1 {
-            @include margin-left(1px);
-        }
-    }
-
-    $item-height: 8rem;
-
-    &-item {
-        font-size: $font-size-m;
-        font-weight: $font-weight-semilight;
-
-        &--middle {
-            line-height: $item-height;
-
-            @media screen and (max-width: $media-screen-m) {
-                line-height: $font-size-m;
-            }
-        }
-
-        &--mark {
-            color: $color-brand;
-        }
-    }
-
-    &-image {
-        height: $item-height;
-    }
-
-    &-input {
-        line-height: 1rem;
-        width: 100%;
-    }
-
-    &-checkout {
-        background-color: $color-secondary;
-        border: 0;
-        border-radius: 0;
-        color: $color-foreground-brighter;
-        display: inline-block;
-        font-size: 1rem;
-        font-weight: $font-weight-normal;
-        margin-top: 1rem;
-        padding: 1rem 1.5rem;
-        text-align: center;
-        text-transform: uppercase;
-        transition: all $animation-speed-default;
-
-        &:hover {
-            background-color: $color-secondary-darker;
-            transition: all $animation-speed-default;
-        }
-    }
-}
-
-
-

src/Web/WebSPA/Client/modules/catalog/catalog.component.html

@@ -1,54 +0,0 @@
-<section class="esh-catalog-hero">
-    <div class="container">
-        <!--<img class="esh-catalog-title" src="../../images/main_banner_text.png" />-->
-    </div>
-</section>
-
-<section class="esh-catalog-filters">
-    <div class="container">
-        <div class="alert alert-warning esh-catalog-alert" role="alert" [hidden]="!errorReceived">
-            Error requesting catalog products, please try later on
-        </div>
-        <label class="esh-catalog-label" data-title="brand">
-            <select class="esh-catalog-filter" (change)="onBrandFilterChanged($event, $event.target.value)">
-                <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
-            </select>
-        </label>
-        <label class="esh-catalog-label" data-title="type">
-            <select class="esh-catalog-filter" (change)="onTypeFilterChanged($event, $event.target.value)">
-                <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
-            </select>
-        </label>
-        <img class="esh-catalog-send" (click)="onFilterApplied($event)" src="/assets/images/arrow-right.svg" />
-    </div>
-</section>
-
-<div class="container">
-    <div *ngIf="catalog?.data.length > 0">
-        <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
-
-        <div class="esh-catalog-items row">
-            <div class="esh-catalog-item col-md-4"
-                 *ngFor="let item of catalog?.data">
-
-                <img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
-                <button [ngClass]="{'esh-catalog-button': true, 'is-disabled': !authenticated}" (click)="addToCart(item)">
-                    [ ADD TO CART ]
-                </button>
-
-                <div class="esh-catalog-name">
-                    <span>{{item.name}}</span>
-                </div>
-                <div class="esh-catalog-price">
-                    <span>{{item.price | number:'.2-2'}}</span>
-                </div>
-            </div>
-        </div>
-
-        <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
-    </div>
-    <div *ngIf="catalog?.data.length == 0">
-        <span>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</span>
-    </div>
-</div>
-

src/Web/WebSPA/Client/modules/catalog/catalog.component.scss

@@ -1,158 +0,0 @@
-@import '../variables';
-
-.esh-catalog {
-    $banner-height: 260px;
-
-    &-hero {
-        background-image: url($image-main_banner);
-        background-size: cover;
-        height: $banner-height;
-        width: 100%;
-    }
-
-    &-title {
-        position: relative;
-        top: $banner-height / 3.5;
-    }
- 
-    $filter-height: 65px;
-
-    &-filters {
-        background-color: $color-brand;
-        height: $filter-height;
-    }
-
-    $filter-padding: .5rem;
-
-    &-filter {
-        -webkit-appearance: none;
-        background-color: transparent;
-        border-color: $color-brand-bright;
-        color: $color-foreground-brighter;
-        cursor: pointer;
-        margin-right: 1rem;
-        margin-top: .5rem;
-        min-width: 140px;
-        outline-color: $color-secondary;
-        padding-bottom: 0;
-        padding-left: $filter-padding;
-        padding-right: $filter-padding;
-        padding-top: $filter-padding * 3;
-
-        option {
-            background-color: $color-brand;
-        }
-    }
-
-    &-label {
-        display: inline-block;
-        position: relative;
-        z-index: 0;
-
-        &::before {
-            color: rgba($color-foreground-brighter, .5);
-            content: attr(data-title);
-            font-size: $font-size-xs;
-            margin-left: $filter-padding;
-            margin-top: $font-size-xs;
-            position: absolute;
-            text-transform: uppercase;
-            z-index: 1;
-        }
-
-        &::after {
-            background-image: url($image-arrow_down);
-            content: '';
-            height: 7px; //png height
-            position: absolute;
-            right: $filter-padding * 3;
-            top: $filter-padding * 5;
-            width: 10px; //png width
-            z-index: 1;
-        }
-    }
-
-    &-send {
-        background-color: $color-secondary;
-        color: $color-foreground-brighter;
-        cursor: pointer;
-        font-size: $font-size-m;
-        margin-top: -$filter-padding * 3;
-        padding: $filter-padding;
-        transition: all $animation-speed-default;
-
-        &:hover {
-            background-color: $color-secondary-darker;
-            transition: all $animation-speed-default;
-        }
-    }
-
-    &-items {
-        margin-top: 1rem;
-    }
-
-    &-item {
-        margin-bottom: 1.5rem;
-        text-align: center;
-        width: 33%;
-        display: inline-block;
-        float: none !important;
-
-        @media screen and (max-width: $media-screen-m) {
-            width: 50%;
-        }
-
-        @media screen and (max-width: $media-screen-s) {
-            width: 100%;
-        }
-    }
-
-    &-thumbnail {
-        max-width: 370px;
-        width: 100%;
-    }
-
-    &-button {
-        background-color: $color-secondary;
-        border: 0;
-        color: $color-foreground-brighter;
-        cursor: pointer;
-        font-size: $font-size-m;
-        height: 3rem;
-        margin-top: 1rem;
-        transition: all $animation-speed-default;
-        width: 80%;
-
-        &.is-disabled {
-            opacity: .5;
-            pointer-events: none;
-        }
-
-        &:hover {
-            background-color: $color-secondary-darker;
-            transition: all $animation-speed-default;
-        }
-    }
-
-    &-name {
-        font-size: $font-size-m;
-        font-weight: $font-weight-semilight;
-        margin-top: .5rem;
-        text-align: center;
-        text-transform: uppercase;
-    }
-
-    &-price {
-        font-size: 28px;
-        font-weight: 900;
-        text-align: center;
-
-        &::before {
-            content: '$';
-        }
-    }
-
-    &-alert {
-        margin-top: 10px;
-    }
-}