Migrate WebMVC app to bootstrap 4

src/Web/WebMVC/Views/Campaigns/Details.cshtml

@@ -15,14 +15,14 @@
 <div class="container">
     <div class="card esh-campaigns-items">
         <img class="card-img-top" src="@Model.PictureUri" alt="Card image cap">
-        <div class="card-block">
+        <div class="card-body">
             <h4 class="card-title">@Model.Name</h4>
             <p class="card-text">@Model.Description</p>            
-            <p class="card-text">
+        </div>
+        <div class="card-footer">
             <small class="text-muted">
                 From @Model.From.ToString("MMMM dd, yyyy") until @Model.To.ToString("MMMM dd, yyyy")
             </small>
-            </p>
         </div>
     </div>
 </div>

src/Web/WebMVC/Views/Campaigns/Index.cshtml

@@ -27,17 +27,21 @@
             <div class="esh-campaigns-items" style="font-weight: 300;">
                 UPDATE USER LOCATION
             </div>            
-
+            <br />
             <form class="form-inline" asp-action="CreateNewUserLocation" method="post">
                 <label class="sr-only" for="longitudeInput">Name</label>
 
-            <div class="input-group mb-2 mr-sm-2 mb-sm-0">
+                <div class="input-group mb-3">
-                <div class="input-group-addon">Lat</div>
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="inputGroup-sizing-default">Lat</span>
+                    </div>
                     <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="latitudeInput" asp-for="Lat" placeholder="Latitude">
                 </div>
 
-            <div class="input-group mb-2 mr-sm-2 mb-sm-0">
+                <div class="input-group mb-3">
-                <div class="input-group-addon">Lon</div>
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="inputGroup-sizing-default">Lon</span>
+                    </div>
                     <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="longitudeInput" asp-for="Lon" placeholder="Longitude">
                 </div>               
 

src/Web/WebMVC/Views/Campaigns/_campaign.cshtml

@@ -1,9 +1,10 @@
 @model CampaignItem
 
 <form asp-controller="Campaigns" asp-action="Details" asp-route-id="@Model.Id">
-        <div class="card-block">
+    <div class="card">
-            <h4 class="card-title esh-campaigns-name">@Model.Name</h4>
         <img class="card-img-top esh-campaigns-thumbnail" src="@Model.PictureUri" alt="@Model.Name">
+        <div class="card-body">
+            <h4 class="card-title esh-campaigns-name">@Model.Name</h4>
             @if (ViewBag.IsCampaignDetailFunctionActive == true)
             {
                 <input type="button" value="More Details" class="btn esh-campaigns-button" onClick="window.open('@Model.DetailsUri')">
@@ -13,9 +14,10 @@
                 <input class="esh-campaigns-button" type="submit" value="More details">
             }
         </div>
-        <div class="card-footer">
+        <div class="card-footer esh-campaigns-card-footer-text">
             <small class="text-muted">
                 From @Model.From.ToString("MMMM dd, yyyy") until @Model.To.ToString("MMMM dd, yyyy")
             </small>
         </div>
+    </div>
 </form>

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

@@ -87,7 +87,7 @@
         @await Html.PartialAsync("_OrderItems")
 
         <section class="esh-orders_new-section">
-            <div class="form-group">
+            <div class="form-group row">
                 <div class="col-md-9">
                 </div>
                 <div class="col-md-2">

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

@@ -13,51 +13,51 @@
     <div class="container">
         <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-3">Order number</section>
+                <section class="esh-orders_detail-title col-3">Order number</section>
-                <section class="esh-orders_detail-title col-xs-3">Date</section>
+                <section class="esh-orders_detail-title col-3">Date</section>
-                <section class="esh-orders_detail-title col-xs-3">Total</section>
+                <section class="esh-orders_detail-title col-3">Total</section>
-                <section class="esh-orders_detail-title col-xs-3">Status</section>
+                <section class="esh-orders_detail-title col-3">Status</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-3">@Model.OrderNumber</section>
+                <section class="esh-orders_detail-item col-3">@Model.OrderNumber</section>
-                <section class="esh-orders_detail-item col-xs-3">@Model.Date</section>
+                <section class="esh-orders_detail-item col-3">@Model.Date</section>
-                <section class="esh-orders_detail-item col-xs-3">$@Model.Total</section>
+                <section class="esh-orders_detail-item col-3">$@Model.Total</section>
-                <section class="esh-orders_detail-title col-xs-3">@Model.Status</section>
+                <section class="esh-orders_detail-title col-3">@Model.Status</section>
             </article>
         </section>
         
         <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-12">Description</section>
+                <section class="esh-orders_detail-title col-12">Description</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-12">@Model.Description</section>
+                <section class="esh-orders_detail-item col-12">@Model.Description</section>
             </article>
         </section>
 
         <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-12">Shiping address</section>
+                <section class="esh-orders_detail-title col-12">Shiping address</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-12">@Model.Street</section>
+                <section class="esh-orders_detail-item col-12">@Model.Street</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-12">@Model.City</section>
+                <section class="esh-orders_detail-item col-12">@Model.City</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-12">@Model.Country</section>
+                <section class="esh-orders_detail-item col-12">@Model.Country</section>
             </article>
         </section>
 
         <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-12">ORDER DETAILS</section>
+                <section class="esh-orders_detail-title col-12">ORDER DETAILS</section>
             </article>
 
             @for (int i = 0; i < Model.OrderItems.Count; i++)
@@ -67,23 +67,23 @@
                     <section class="esh-orders_detail-item col-md-4 hidden-md-down">
                         <img class="esh-orders_detail-image" src="@item.PictureUrl">
                     </section>
-                    <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-4">@item.ProductName</section>
+                    <section class="esh-orders_detail-item esh-orders_detail-item--middle col-4">@item.ProductName</section>
-                    <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">$ @item.UnitPrice.ToString("N2")</section>
+                    <section class="esh-orders_detail-item esh-orders_detail-item--middle col-1">$ @item.UnitPrice.ToString("N2")</section>
-                    <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">@item.Units</section>
+                    <section class="esh-orders_detail-item esh-orders_detail-item--middle col-1">@item.Units</section>
-                    <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-2">$ @Math.Round(item.Units * item.UnitPrice, 2).ToString("N2")</section>
+                    <section class="esh-orders_detail-item esh-orders_detail-item--middle col-2">$ @Math.Round(item.Units * item.UnitPrice, 2).ToString("N2")</section>
                 </article>
             }
         </section>
 
         <section class="esh-orders_detail-section esh-orders_detail-section--right">
             <article class="esh-orders_detail-titles esh-basket-titles--clean row">
-                <section class="esh-orders_detail-title col-xs-9"></section>
+                <section class="esh-orders_detail-title col-9"></section>
-                <section class="esh-orders_detail-title col-xs-2">TOTAL</section>
+                <section class="esh-orders_detail-title col-2">TOTAL</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-9"></section>
+                <section class="esh-orders_detail-item col-9"></section>
-                <section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ @Model.Total</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--mark col-2">$ @Model.Total</section>
             </article>
         </section>
     </div>

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

@@ -14,25 +14,25 @@ new Header() { Controller = "OrderManagement", Text = "Orders Management" } })
 
     <div class="container">
         <article class="esh-orders-titles row">
-            <section class="esh-orders-title col-xs-2">Order number</section>
+            <section class="esh-orders-title col-2">Order number</section>
-            <section class="esh-orders-title col-xs-4">Date</section>
+            <section class="esh-orders-title col-4">Date</section>
-            <section class="esh-orders-title col-xs-2">Total</section>
+            <section class="esh-orders-title col-2">Total</section>
-            <section class="esh-orders-title col-xs-2">Status</section>
+            <section class="esh-orders-title col-2">Status</section>
-            <section class="esh-orders-title col-xs-2"></section>
+            <section class="esh-orders-title col-2"></section>
         </article>
         @if (Model != null && Model.Any())
         {
             foreach (var item in Model)
             {
                 <article class="esh-orders-items row">
-                    <section class="esh-orders-item col-xs-2">@Html.DisplayFor(modelItem => item.OrderNumber)</section>
+                    <section class="esh-orders-item col-2">@Html.DisplayFor(modelItem => item.OrderNumber)</section>
-                    <section class="esh-orders-item col-xs-4">@Html.DisplayFor(modelItem => item.Date)</section>
+                    <section class="esh-orders-item col-4">@Html.DisplayFor(modelItem => item.Date)</section>
-                    <section class="esh-orders-item col-xs-2">$ @Html.DisplayFor(modelItem => item.Total)</section>
+                    <section class="esh-orders-item col-2">$ @Html.DisplayFor(modelItem => item.Total)</section>
-                    <section class="esh-orders-item col-xs-2">@Html.DisplayFor(modelItem => item.Status)</section>
+                    <section class="esh-orders-item col-2">@Html.DisplayFor(modelItem => item.Status)</section>
-                    <section class="esh-orders-item col-xs-1">
+                    <section class="esh-orders-item col-1">
                         <a class="esh-orders-link" asp-controller="Order" asp-action="Detail" asp-route-orderId="@item.OrderNumber">Detail</a>
                     </section>
-                    <section class="esh-orders-item col-xs-1">
+                    <section class="esh-orders-item col-1">
                         @if (item.Status.ToLower() == "submitted")
                         {
                             <a class="esh-orders-link" asp-controller="Order" asp-action="cancel" asp-route-orderId="@item.OrderNumber">Cancel</a>

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

@@ -3,7 +3,7 @@
 
 <section class="esh-orders_new-section">
     <article class="esh-orders_new-titles row">
-        <section class="esh-orders_new-title col-xs-12">Order details</section>
+        <section class="esh-orders_new-title col-12">Order details</section>
     </article>
 
     @for (int i = 0; i < Model.OrderItems.Count; i++)
@@ -15,32 +15,32 @@
                 <img class="esh-orders_new-image" src="@item.PictureUrl">
                 <input type="hidden" value="@item.PictureUrl" name=@("orderitems[" + i + "].PictureUrl") />
             </section>
-            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">
+            <section class="esh-orders_new-item esh-orders_new-item--middle col-4">
                 @item.ProductName
                 <input type="hidden" value="@item.ProductName" name=@("orderitems[" + i + "].ProductName") />
             </section>
-            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">
+            <section class="esh-orders_new-item esh-orders_new-item--middle col-1">
                 $ @item.UnitPrice.ToString("N2")
                 <input type="hidden" value="@item.UnitPrice" name=@("orderitems[" + i + "].UnitPrice") />
             </section>
-            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">
+            <section class="esh-orders_new-item esh-orders_new-item--middle col-1">
                 @item.Units
                 <input type="hidden" value="@item.Units" name=@("orderitems[" + i + "].Units") />
             </section>
-            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ @Math.Round(item.Units * item.UnitPrice, 2).ToString("N2")</section>
+            <section class="esh-orders_new-item esh-orders_new-item--middle col-2">$ @Math.Round(item.Units * item.UnitPrice, 2).ToString("N2")</section>
         </article>
     }
 </section>
 
 <section class="esh-orders_new-section esh-orders_new-section--right">
     <article class="esh-orders_new-titles row">
-        <section class="esh-orders_new-title col-xs-9"></section>
+        <section class="esh-orders_new-title col-9"></section>
-        <section class="esh-orders_new-title col-xs-2">Total</section>
+        <section class="esh-orders_new-title col-2">Total</section>
     </article>
 
     <article class="esh-orders_new-items row">
-        <section class="esh-orders_new-item col-xs-9"></section>
+        <section class="esh-orders_new-item col-9"></section>
-        <section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">
+        <section class="esh-orders_new-item esh-orders_new-item--mark col-2">
             $ @Model.Total.ToString("N2")
             <input type="hidden" value="@Model.Total" name="Total"/>
         </section>

src/Web/WebMVC/Views/OrderManagement/Index.cshtml

@@ -12,21 +12,21 @@
 
     <div class="container">
         <article class="esh-orders-titles row">
-            <section class="esh-orders-title col-xs-2">Order number</section>
+            <section class="esh-orders-title col-2">Order number</section>
-            <section class="esh-orders-title col-xs-4">Date</section>
+            <section class="esh-orders-title col-4">Date</section>
-            <section class="esh-orders-title col-xs-2">Total</section>
+            <section class="esh-orders-title col-2">Total</section>
-            <section class="esh-orders-title col-xs-2">Status</section>
+            <section class="esh-orders-title col-2">Status</section>
-            <section class="esh-orders-title col-xs-2"></section>
+            <section class="esh-orders-title col-2"></section>
         </article>
 
         @foreach (var item in Model)
         {
             <article class="esh-orders-items row">
-                <section class="esh-orders-item col-xs-2">@Html.DisplayFor(modelItem => item.OrderNumber)</section>
+                <section class="esh-orders-item col-2">@Html.DisplayFor(modelItem => item.OrderNumber)</section>
-                <section class="esh-orders-item col-xs-4">@Html.DisplayFor(modelItem => item.Date)</section>
+                <section class="esh-orders-item col-4">@Html.DisplayFor(modelItem => item.Date)</section>
-                <section class="esh-orders-item col-xs-2">$ @Html.DisplayFor(modelItem => item.Total)</section>
+                <section class="esh-orders-item col-2">$ @Html.DisplayFor(modelItem => item.Total)</section>
-                <section class="esh-orders-item col-xs-2">@Html.DisplayFor(modelItem => item.Status)</section>
+                <section class="esh-orders-item col-2">@Html.DisplayFor(modelItem => item.Status)</section>
-                <section class="esh-orders-item col-xs-2">
+                <section class="esh-orders-item col-2">
                     <form asp-action="OrderProcess" id="orderForm+@item.OrderNumber" method="post">
                         <input type="hidden" name="orderId" value="@item.OrderNumber" />
                         <select name="actionCode" asp-items="@item.ActionCodeSelectList"

src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml

@@ -23,11 +23,11 @@
                 </div>
             }
 
-            <section class="esh-basket-title col-xs-3">Product</section>
+            <section class="esh-basket-title col-3">Product</section>
-            <section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
+            <section class="esh-basket-title col-3 hidden-lg-down"></section>
-            <section class="esh-basket-title col-xs-2">Price</section>
+            <section class="esh-basket-title col-2">Price</section>
-            <section class="esh-basket-title col-xs-2">Quantity</section>
+            <section class="esh-basket-title col-2">Quantity</section>
-            <section class="esh-basket-title col-xs-2">Cost</section>
+            <section class="esh-basket-title col-2">Cost</section>
         </article>
 
         @for (int i = 0; i < Model.Items.Count; i++)
@@ -35,21 +35,16 @@
             var item = Model.Items[i];
 
         <article class="esh-basket-items  row">
-                <div>
             <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-xs-3">@item.ProductName</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-xs-2">$ @item.UnitPrice.ToString("N2")</section>
+            <section class="esh-basket-item esh-basket-item--middle col-2">$ @item.UnitPrice.ToString("N2")</section>
-                    <section class="esh-basket-item esh-basket-item--middle col-xs-2">
+            <section class="esh-basket-item esh-basket-item--middle col-2">
                 <input type="hidden" name="@("quantities[" + i +"].Key")" value="@item.Id" />
                 <input type="number" class="esh-basket-input" min="1" name="@("quantities[" + i +"].Value")" value="@item.Quantity" />
             </section>
-                    <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ @Math.Round(item.Quantity * item.UnitPrice, 2).ToString("N2")</section>
+            <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-2">$ @Math.Round(item.Quantity * item.UnitPrice, 2).ToString("N2")</section>
-                </div>
-                <div class="row">
-
-                </div>
         </article>
 
             <div class="esh-basket-items--border row">
@@ -63,21 +58,21 @@
 
         <div class="container">
             <article class="esh-basket-titles esh-basket-titles--clean row">
-                <section class="esh-basket-title col-xs-10"></section>
+                <section class="esh-basket-title col-10"></section>
-                <section class="esh-basket-title col-xs-2">Total</section>
+                <section class="esh-basket-title col-2">Total</section>
             </article>
 
             <article class="esh-basket-items row">
-                <section class="esh-basket-item col-xs-10"></section>
+                <section class="esh-basket-item col-10"></section>
-                <section class="esh-basket-item esh-basket-item--mark col-xs-2">$ @Model.Total()</section>
+                <section class="esh-basket-item esh-basket-item--mark col-2">$ @Model.Total()</section>
             </article>
 
             <article class="esh-basket-items row">
-                <section class="esh-basket-item col-xs-7"></section>
+                <section class="esh-basket-item col-7"></section>
-                <section class="esh-basket-item col-xs-2">
+                <section class="esh-basket-item col-2">
                     <button class="btn esh-basket-checkout" name="name" value="" type="submit">[ Update ]</button>
                 </section>
-                <section class="esh-basket-item col-xs-3">
+                <section class="esh-basket-item col-3">
                     <input type="submit"
                            class="btn esh-basket-checkout"
                            value="[ Checkout ]" name="action" />

src/Web/WebMVC/Views/Shared/_Layout.cshtml

@@ -32,11 +32,11 @@
     </environment>
 </head>
 <body>
-    <header class="navbar navbar-light navbar-static-top">
+    <header class="esh-app-header">
         <div class="container">
             <article class="row">
 
-                <section class="col-lg-7 col-md-6 col-xs-12">
+                <section class="col-lg-7 col-md-6 col-12">
                     <a class="navbar-brand" routerLink="catalog">
                         <a asp-area="" asp-controller="Catalog" asp-action="Index">
                             <img src="~/images/brand.png" />

src/Web/WebMVC/WebMVC.csproj

@@ -20,6 +20,7 @@
 
   <ItemGroup>
     <PackageReference Include="BuildBundlerMinifier" Version="2.6.375" />
+    <PackageReference Include="BuildWebCompiler" Version="1.11.326" />
     <PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.2.1" />
     <PackageReference Include="Microsoft.ApplicationInsights.DependencyCollector" Version="2.6.1" />
     <PackageReference Include="Microsoft.ApplicationInsights.Kubernetes" Version="1.0.0-beta8" />

src/Web/WebMVC/libman.json

@@ -8,28 +8,14 @@
     },
     {
       "provider": "unpkg",
-      "library": "bootstrap@3.3.7",
+      "library": "bootstrap@4.1.3",
       "files": [
         "dist/css/bootstrap.css",
         "dist/css/bootstrap.css.map",
         "dist/css/bootstrap.min.css",
         "dist/css/bootstrap.min.css.map",
-        "dist/css/bootstrap-theme.css",
-        "dist/css/bootstrap-theme.css.map",
-        "dist/css/bootstrap-theme.min.css",
-        "dist/css/bootstrap-theme.min.css.map",
-        "dist/fonts/glyphicons-halflings-regular.eot",
-        "dist/fonts/glyphicons-halflings-regular.svg",
-        "dist/fonts/glyphicons-halflings-regular.ttf",
-        "dist/fonts/glyphicons-halflings-regular.woff",
-        "dist/fonts/glyphicons-halflings-regular.woff2",
         "dist/js/bootstrap.js",
-        "dist/js/bootstrap.min.js",
+        "dist/js/bootstrap.min.js"
-        "fonts/glyphicons-halflings-regular.eot",
-        "fonts/glyphicons-halflings-regular.svg",
-        "fonts/glyphicons-halflings-regular.ttf",
-        "fonts/glyphicons-halflings-regular.woff",
-        "fonts/glyphicons-halflings-regular.woff2"
       ],
       "destination": "wwwroot/lib/bootstrap/"
     },

src/Web/WebMVC/wwwroot/css/app.component.css

@@ -12,3 +12,7 @@
   width: 230px;
 }
 
+.esh-app-header {
+  margin: 15px;
+}
+

src/Web/WebMVC/wwwroot/css/app.component.min.css

@@ -1 +1 @@
-.esh-app-footer{background-color:#000;border-top:1px solid #eee;margin-top:2.5rem;padding-bottom:2.5rem;padding-top:2.5rem;width:100%;}.esh-app-footer-brand{height:50px;width:230px;}
+.esh-app-footer{background-color:#000;border-top:1px solid #eee;margin-top:2.5rem;padding-bottom:2.5rem;padding-top:2.5rem;width:100%;}.esh-app-footer-brand{height:50px;width:230px;}.esh-app-header{margin:15px;}

src/Web/WebMVC/wwwroot/css/app.component.scss

@@ -20,4 +20,8 @@
         }
 
     }
+
+    &-header{
+        margin:15px;
+    }
 }

src/Web/WebMVC/wwwroot/css/campaigns/campaigns.component.css

@@ -73,6 +73,12 @@
     width: 80%;
 }
 
+.esh-campaigns-card-footer-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .esh-campaigns-form-button {
     background-color: #83D01B;
     border: none;
@@ -81,6 +87,7 @@
     font-size: 1rem;
     transition: all 0.35s;
     width: 80%;
+    margin-top: -15px;
 }
 
     .esh-campaigns-button.is-disabled {

src/Web/WebMVC/wwwroot/css/catalog/catalog.component.css

@@ -71,6 +71,7 @@
   margin-top: -1.5rem;
   padding: 0.5rem;
   transition: all 0.35s;
+  margin-bottom: -6px;
 }
 
 .esh-catalog-send:hover {

src/Web/WebMVC/wwwroot/css/catalog/catalog.component.min.css

@@ -1 +1 @@
-.esh-catalog-hero{background-image:url("../../images/main_banner.png");background-size:cover;height:260px;width:100%;}.esh-catalog-title{position:relative;top:74.28571px;}.esh-catalog-filters{background-color:#00a69c;height:65px;}.esh-catalog-filter{-webkit-appearance:none;background-color:transparent;border-color:#00d9cc;color:#fff;cursor:pointer;margin-right:1rem;margin-top:.5rem;min-width:140px;outline-color:#83d01b;padding-bottom:0;padding-left:.5rem;padding-right:.5rem;padding-top:1.5rem;}.esh-catalog-filter option{background-color:#00a69c;}.esh-catalog-label{display:inline-block;position:relative;z-index:0;}.esh-catalog-label::before{color:rgba(255,255,255,.5);content:attr(data-title);font-size:.65rem;margin-left:.5rem;margin-top:.65rem;position:absolute;text-transform:uppercase;z-index:1;}.esh-catalog-label::after{background-image:url("../../images/arrow-down.png");content:'';height:7px;position:absolute;right:1.5rem;top:2.5rem;width:10px;z-index:1;}.esh-catalog-send{background-color:#83d01b;color:#fff;cursor:pointer;font-size:1rem;margin-top:-1.5rem;padding:.5rem;transition:all .35s;}.esh-catalog-send:hover{background-color:#4a760f;transition:all .35s;}.esh-catalog-items{margin-top:1rem;}.esh-catalog-item{margin-bottom:1.5rem;text-align:center;width:33%;display:inline-block;float:none !important;}@media screen and (max-width:1024px){.esh-catalog-item{width:50%;}}@media screen and (max-width:768px){.esh-catalog-item{width:100%;}}.esh-catalog-thumbnail{max-width:370px;width:100%;}.esh-catalog-button{background-color:#83d01b;border:0;color:#fff;cursor:pointer;font-size:1rem;height:3rem;margin-top:1rem;transition:all .35s;width:80%;}.esh-catalog-button.is-disabled{opacity:.5;pointer-events:none;}.esh-catalog-button:hover{background-color:#4a760f;transition:all .35s;}.esh-catalog-name{font-size:1rem;font-weight:300;margin-top:.5rem;text-align:center;text-transform:uppercase;}.esh-catalog-price{font-size:28px;font-weight:900;text-align:center;}.esh-catalog-price::before{content:'$';}
+.esh-catalog-hero{background-image:url("../../images/main_banner.png");background-size:cover;height:260px;width:100%;}.esh-catalog-title{position:relative;top:74.28571px;}.esh-catalog-filters{background-color:#00a69c;height:65px;}.esh-catalog-filter{-webkit-appearance:none;background-color:transparent;border-color:#00d9cc;color:#fff;cursor:pointer;margin-right:1rem;margin-top:.5rem;min-width:140px;outline-color:#83d01b;padding-bottom:0;padding-left:.5rem;padding-right:.5rem;padding-top:1.5rem;}.esh-catalog-filter option{background-color:#00a69c;}.esh-catalog-label{display:inline-block;position:relative;z-index:0;}.esh-catalog-label::before{color:rgba(255,255,255,.5);content:attr(data-title);font-size:.65rem;margin-left:.5rem;margin-top:.65rem;position:absolute;text-transform:uppercase;z-index:1;}.esh-catalog-label::after{background-image:url("../../images/arrow-down.png");content:'';height:7px;position:absolute;right:1.5rem;top:2.5rem;width:10px;z-index:1;}.esh-catalog-send{background-color:#83d01b;color:#fff;cursor:pointer;font-size:1rem;margin-top:-1.5rem;padding:.5rem;transition:all .35s;margin-bottom:-6px;}.esh-catalog-send:hover{background-color:#4a760f;transition:all .35s;}.esh-catalog-items{margin-top:1rem;}.esh-catalog-item{margin-bottom:1.5rem;text-align:center;width:33%;display:inline-block;float:none !important;}@media screen and (max-width:1024px){.esh-catalog-item{width:50%;}}@media screen and (max-width:768px){.esh-catalog-item{width:100%;}}.esh-catalog-thumbnail{max-width:370px;width:100%;}.esh-catalog-button{background-color:#83d01b;border:0;color:#fff;cursor:pointer;font-size:1rem;height:3rem;margin-top:1rem;transition:all .35s;width:80%;}.esh-catalog-button.is-disabled{opacity:.5;pointer-events:none;}.esh-catalog-button:hover{background-color:#4a760f;transition:all .35s;}.esh-catalog-name{font-size:1rem;font-weight:300;margin-top:.5rem;text-align:center;text-transform:uppercase;}.esh-catalog-price{font-size:28px;font-weight:900;text-align:center;}.esh-catalog-price::before{content:'$';}

src/Web/WebMVC/wwwroot/css/catalog/catalog.component.scss

@@ -80,6 +80,7 @@
         margin-top: -$filter-padding * 3;
         padding: $filter-padding;
         transition: all $animation-speed-default;
+        margin-bottom: -6px;
 
         &:hover {
             background-color: $color-secondary-darker;