+
@if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) {
- @for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
- string image = Products[currentProduct].ImagesUrls[i];
- if (currentImage == image) {
-

+ @if(Products[currentProduct].ImagesUrls.Length > 0) {
+ @for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
+ string image = Products[currentProduct].ImagesUrls[i];
+ if (currentImage == image) {
+

+ }
}
+

ShowNextImage(currentImage))"/>
+

ShowPreviousImage(currentImage))"/>
+ }
+ else
+ {
+
![product image]()
}
-

ChangeImage(currentImage))"/>
-

ChangeImage(currentImage))"/>
+
@for (var i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
@@ -76,15 +55,15 @@
}
@for(int i = 0; i < 5; i++) {
if(i < whole) {
-

+

continue;
}
if(fractal != 0.0) {
-

+

fractal -= fractal;
}
else {
-

+

}
}
@@ -93,16 +72,15 @@
- if(!isProductsNull) {
- isProductsNull = true;
- StateHasChanged();
- }
}
else {
-
- if(isProductsNull) {
- isProductsNull = false;
- StateHasChanged();
- }
}
+
@code {
[Parameter] public string wishlistName { get; set; }
[Parameter] public string chatId {get; set;}
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- await JSRuntime.InvokeVoidAsync("adjustButtonContainerPosition");
- }
-
private void NavigateToMain() {
navigationManager.NavigateTo($"/chat/{chatId}");
}
diff --git a/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs
index f1f000b..2a9fd60 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs
@@ -23,43 +23,69 @@ public partial class Cards
private string currentImage {get; set;}
private bool isProductsNull = false;
-
- //private static string[] Images = {
- // "/images/image2.png",
- // "/images/image1.png",
- // "/images/return-card.png",
- // "/images/amazon.png",
- // "/images/avatar.png"
- //};
-
- //public List
Products = new()
- //{
- // new Product {Id = "0", Url = "some link", Name = "Belkin USB C to VGA + Charge Adapter - USB C to VGA Cable for MacBook",
- // Description = "The USB C to VGA + Charge Adapter connects to your laptop or tablet via USB-C port, giving you both a VGA port for video display and a USB-C port for power", Rating = 3.8, Price = 120, ImagesUrls = Images, WasOpened = false, WishlistId = "0"},
- // new Product {Id = "1", Url = "some link", Name = "Second product",
- // Description = "Test description", Rating = 4.2, Price = 30, ImagesUrls = Images, WasOpened = false, WishlistId = "0"}
- //};
- public List Products {get; set;}
- public List productsNames {get; set;}
+ public List Products {get; set;} = new List();
+
+ public List ProductsNames {get; set;}
+
+ private List isProductSaved { get; set; }
protected override async Task OnInitializedAsync()
{
- if (Products != null) {
+ ProductsNames = _searchService.Products;
+
+ if (ProductsNames != null && ProductsNames.Any())
+ {
+
+ foreach (var productName in ProductsNames)
+ {
+ var newProduct = new Product
+ {
+ Id = "",
+ Url = "link",
+ Name = productName,
+ Description = "",
+ Rating = 0.0,
+ Price = 0.0,
+ ImagesUrls = new string[0],
+ WasOpened = false,
+ WishlistId = chatId
+ };
+
+ Products.Add(newProduct);
+ }
+
+ isProductSaved = new List(new bool[Products.Count]);
+ }
+
+ if (Products[currentProduct].ImagesUrls.Length > 0)
+ {
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
}
else {
- productsNames = _searchService.Products;
currentImage = "";
isProductsNull = true;
- }
+ }
}
- private void ChangeImage(string image)
+ private void ShowNextImage(string image)
{
currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
currentIndex = (currentIndex + 1) % Products[currentProduct].ImagesUrls.Length;
- currentIndex = currentIndex >= 3 ? 0 : currentIndex;
+ if(currentIndex >= 3 || currentIndex >= Products[currentProduct].ImagesUrls.Length) {
+ currentIndex = 0;
+ }
+ currentImage = Products[currentProduct].ImagesUrls[currentIndex];
+ StateHasChanged();
+ }
+
+ private void ShowPreviousImage(string image)
+ {
+ currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
+ currentIndex = (currentIndex - 1) % Products[currentProduct].ImagesUrls.Length;
+ if(currentIndex < 0) {
+ currentIndex = Products[currentProduct].ImagesUrls.Length > 2 ? 2 : Products[currentProduct].ImagesUrls.Length - 1;
+ }
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
StateHasChanged();
}
@@ -73,17 +99,72 @@ public partial class Cards
}
}
- private async void LoadNextProduct()
+ private async void LoadNextProduct(string type)
{
+ if(type == "like" && isProductSaved[currentProduct] == false) {
+ isProductSaved[currentProduct] = true;
+ await AddProductToCart(Products[currentProduct]);
+ }
currentProduct += 1;
StateHasChanged();
}
private async void LoadPreviousProduct() {
- currentProduct -= 1;
+ currentProduct = currentProduct == 0 ? 0 : --currentProduct;
StateHasChanged();
}
+ private async Task AddProductToCart(Product product) {
+ try {
+ var request = new GraphQLRequest {
+ Query = @"mutation AddProductToPersonalWishlist($wishlistId: String!, $url: String!, $name: String!, $description: String!, $rating: Float!, $price: Float!, $imagesUrls: [String!]!, $wasOpened: Boolean!) {
+ addProductToPersonalWishlist(
+ wishlistId: $wishlistId
+ dto: {
+ url: $url
+ name: $name
+ description: $description
+ rating: $rating
+ price: $price
+ imagesUrls: $imagesUrls
+ wasOpened: $wasOpened
+ }
+ ) {
+ id
+ url
+ name
+ description
+ rating
+ price
+ imagesUrls
+ wasOpened
+ wishlistId
+ }
+ }",
+ Variables = new {
+ wishlistId = product.WishlistId,
+ url = product.Url,
+ name = product.Name,
+ description = product.Description,
+ rating = product.Rating,
+ price = product.Price,
+ imagesUrls = product.ImagesUrls,
+ wasOpened = product.WasOpened
+ }
+ };
+
+ Console.WriteLine("Sending GraphQL request: " + request);
+
+ var response = await _apiClient.QueryAsync(request);
+ var responseData = response.Data;
+
+ }
+ catch(Exception ex)
+ {
+ Console.WriteLine($"Error in AddProductToCart: {ex}");
+ }
+ }
+
private void LoadMoreProducts() {
}
diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.razor b/ShoppingAssistantWebClient.Web/Pages/Cart.razor
index 678e702..acacd75 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cart.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Cart.razor
@@ -18,23 +18,28 @@
@if (!isError) {
- @if (Products != null) {
+ @if (Products.Count > 0) {
@foreach (var product in Products) {
-

-
+ @if(product.ImagesUrls != null && product.ImagesUrls.Length > 0) {
+

+ }
+ else {
+
![product image]()
+ }
+
}
}
- else{
+ else {
Cart is empty
}
}
diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs
index 19c4fe0..e4a987b 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs
@@ -12,7 +12,7 @@ public partial class Cart : ComponentBase
[Inject]
private ApiClient _apiClient { get; set; }
- public List
Products { get; set; }
+ public List Products { get; set; } = new List();
public bool isError = false;
diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.css b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.css
index bf3641a..8e3bdd1 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.css
@@ -31,7 +31,7 @@
.back-button {
width: 15px;
height: 15px;
- background-image: url("/images/back-button.png");
+ background-image: url("/images/back-button.svg");
background-size: cover;
border: none;
background-color: transparent;
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
index 5e1f65a..99eee0a 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
@@ -26,6 +26,7 @@ public partial class Chat : ComponentBase
public List Products { get; set; } = new List();
+
public List Suggestion { get; set; } = new List();
public Messages Message { get; set; }
@@ -39,7 +40,7 @@ public partial class Chat : ComponentBase
protected override async Task OnInitializedAsync()
{
try{
- var input = _searchServise.firstMassage;
+ var input = _searchServise.FirstMessage;
if (input!=null){
@@ -64,7 +65,7 @@ public partial class Chat : ComponentBase
};
var response = await _apiClient.QueryAsync(request);
- _searchServise.SetFirstMassage(null);
+ _searchServise.SetFirstMessage(null);
isLoading = false;
await UpdateSideMenu(wishlistId);
StateHasChanged();
@@ -201,8 +202,12 @@ public partial class Chat : ComponentBase
StateHasChanged();
} else if(sseEvent.Event == SearchEventType.Product){
+
+ string pattern = "[\\\\\"]";
- Products.Add(result);
+ input = Regex.Replace(input, pattern, "");
+
+ Products.Add(input);
} else if(sseEvent.Event == SearchEventType.Suggestion){
@@ -213,6 +218,7 @@ public partial class Chat : ComponentBase
if(Products.Count!=0) {
string n = name;
_searchServise.SetProducts(Products);
+ Products = null;
var url = $"/cards/{name}/{chatId}";
Navigation.NavigateTo(url);
}
diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
index fdf4235..c6cd6ab 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
@@ -62,7 +62,7 @@ namespace ShoppingAssistantWebClient.Web.Pages
string wishlistId = chatId;
- _searchServise.SetFirstMassage(inputValue);
+ _searchServise.SetFirstMessage(inputValue);
await UpdateSideMenu(wishlistId);
var url = $"/chat/{chatId}";
diff --git a/ShoppingAssistantWebClient.Web/Services/SearchService.cs b/ShoppingAssistantWebClient.Web/Services/SearchService.cs
index aee9aea..7a2f2f8 100644
--- a/ShoppingAssistantWebClient.Web/Services/SearchService.cs
+++ b/ShoppingAssistantWebClient.Web/Services/SearchService.cs
@@ -5,13 +5,13 @@ public class SearchService
{
public List Products { get; set; }
- public string firstMassage { get; set; }
+ public string FirstMessage { get; set; }
public void SetProducts(List products) {
Products = products;
}
- public void SetFirstMassage(string massage) {
- firstMassage = massage;
+ public void SetFirstMessage(string message) {
+ FirstMessage = message;
}
}
\ No newline at end of file
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css b/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
index 541d3fe..bf7549a 100644
--- a/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
+++ b/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
@@ -46,18 +46,22 @@
text-align: center;
font-size: 24px;
color: rgba(0, 82, 204, 0.8);
+ max-width: 500px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.back-button {
width: 20px;
height: 20px;
- background-image: url("/images/back-button.png");
+ background-image: url("/images/back-button.svg");
background-size: cover;
border: none;
background-color: transparent;
position: absolute;
left: 2%;
- top: 30px;
+ top: 25px;
}
.back-card,
@@ -110,12 +114,13 @@
width: 40% !important;
position: absolute;
z-index: 3;
+ top: calc(400px + 8% + 60px) !important;
}
.cancel-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/cancel-button.png");
+ background-image: url("/images/cancel-button.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -124,7 +129,7 @@
.return-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/return-card.png");
+ background-image: url("/images/return-card.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -133,7 +138,7 @@
.like-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/like-button.png");
+ background-image: url("/images/like-button.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -142,7 +147,7 @@
.exit-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/exit.png");
+ background-image: url("/images/exit.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -151,7 +156,7 @@
.more-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/load-more.png");
+ background-image: url("/images/load-more.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -205,6 +210,17 @@
}
@media only screen and (max-width: 769px) {
+
+ .header-text {
+ text-align: center;
+ font-size: 1.4em !important;
+ color: rgba(0, 82, 204, 0.8);
+ max-width: 250px !important;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
.back-card,
.card,
.card-text {
@@ -254,12 +270,13 @@
width: 50vw !important;
position: absolute;
z-index: 3;
+ top: calc(368px + 12% + 60px) !important;
}
.cancel-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/cancel-button.png");
+ background-image: url("/images/cancel-button.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -268,7 +285,7 @@
.return-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/return-card.png");
+ background-image: url("/images/return-card.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -277,7 +294,7 @@
.like-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/like-button.png");
+ background-image: url("/images/like-button.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -286,7 +303,7 @@
.exit-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/exit.png");
+ background-image: url("/images/exit.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -295,7 +312,7 @@
.more-button {
width: 25px !important;
height: 25px !important;
- background-image: url("/images/load-more.png");
+ background-image: url("/images/load-more.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -332,6 +349,29 @@
}
@media only screen and (max-width: 440px) {
+
+ .back-button {
+ width: 15px !important;
+ height: 15px !important;
+ background-image: url("/images/back-button.svg");
+ background-size: cover;
+ border: none;
+ background-color: transparent;
+ position: absolute;
+ left: 2%;
+ top: 27px;
+ }
+
+ .header-text {
+ text-align: center;
+ font-size: 1.2em !important;
+ color: rgba(0, 82, 204, 0.8);
+ max-width: 200px !important;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
.back-card,
.card,
.card-text {
@@ -340,7 +380,7 @@
aspect-ratio: 1 / 1.6;
border-radius: 15px;
position: absolute;
- top: 20% !important;
+ top: 15% !important;
}
.card,
@@ -379,12 +419,13 @@
width: 70vw;
position: absolute;
z-index: 3;
+ top: calc(340px + 15% + 60px) !important;
}
.cancel-button {
width: 20px !important;
height: 20px !important;
- background-image: url("/images/cancel-button.png");
+ background-image: url("/images/cancel-button.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -393,7 +434,7 @@
.return-button {
width: 20px !important;
height: 20px !important;
- background-image: url("/images/return-card.png");
+ background-image: url("/images/return-card.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -402,7 +443,7 @@
.like-button {
width: 20px !important;
height: 20px !important;
- background-image: url("/images/like-button.png");
+ background-image: url("/images/like-button.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -411,7 +452,7 @@
.exit-button {
width: 20px !important;
height: 20px !important;
- background-image: url("/images/exit.png");
+ background-image: url("/images/exit.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -420,7 +461,7 @@
.more-button {
width: 20px !important;
height: 20px !important;
- background-image: url("/images/load-more.png");
+ background-image: url("/images/load-more.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -598,6 +639,7 @@
width: 300px;
position: absolute;
z-index: 3;
+ top: calc(480px + 3% + 60px);
}
.buttons-row {
@@ -620,7 +662,7 @@
.cancel-button {
width: 30px;
height: 30px;
- background-image: url("/images/cancel-button.png");
+ background-image: url("/images/cancel-button.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -629,7 +671,7 @@
.return-button {
width: 30px;
height: 30px;
- background-image: url("/images/return-card.png");
+ background-image: url("/images/return-card.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -638,7 +680,7 @@
.like-button {
width: 30px;
height: 30px;
- background-image: url("/images/like-button.png");
+ background-image: url("/images/like-button.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -647,7 +689,7 @@
.exit-button {
width: 30px;
height: 30px;
- background-image: url("/images/exit.png");
+ background-image: url("/images/exit.svg");
background-size: cover;
border: none;
background-color: transparent;
@@ -656,7 +698,7 @@
.more-button {
width: 30px;
height: 30px;
- background-image: url("/images/load-more.png");
+ background-image: url("/images/load-more.svg");
background-size: cover;
border: none;
background-color: transparent;
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/amazon.png b/ShoppingAssistantWebClient.Web/wwwroot/images/amazon.png
deleted file mode 100644
index 34a951b..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/amazon.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/amazon.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/amazon.svg
new file mode 100644
index 0000000..e1ba179
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/amazon.svg
@@ -0,0 +1,3 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/back-button.png b/ShoppingAssistantWebClient.Web/wwwroot/images/back-button.png
deleted file mode 100644
index 54a32f4..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/back-button.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/back-button.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/back-button.svg
new file mode 100644
index 0000000..d6d7b77
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/back-button.svg
@@ -0,0 +1,3 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/cancel-button.png b/ShoppingAssistantWebClient.Web/wwwroot/images/cancel-button.png
deleted file mode 100644
index 4e6d248..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/cancel-button.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/cancel-button.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/cancel-button.svg
new file mode 100644
index 0000000..c3c8c94
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/cancel-button.svg
@@ -0,0 +1,3 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/empty-star.png b/ShoppingAssistantWebClient.Web/wwwroot/images/empty-star.png
deleted file mode 100644
index c865c5c..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/empty-star.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/empty-star.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/empty-star.svg
new file mode 100644
index 0000000..e2c08e8
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/empty-star.svg
@@ -0,0 +1,10 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/exit.png b/ShoppingAssistantWebClient.Web/wwwroot/images/exit.png
deleted file mode 100644
index 1044cb8..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/exit.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/exit.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/exit.svg
new file mode 100644
index 0000000..7f64e76
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/exit.svg
@@ -0,0 +1,3 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/half-star.png b/ShoppingAssistantWebClient.Web/wwwroot/images/half-star.png
deleted file mode 100644
index 26febb3..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/half-star.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/half-star.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/half-star.svg
new file mode 100644
index 0000000..a22bcee
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/half-star.svg
@@ -0,0 +1,9 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/image1.png b/ShoppingAssistantWebClient.Web/wwwroot/images/image1.png
deleted file mode 100644
index 8bbd16b..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/image1.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/image2.png b/ShoppingAssistantWebClient.Web/wwwroot/images/image2.png
deleted file mode 100644
index 1c25710..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/image2.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/like-button.png b/ShoppingAssistantWebClient.Web/wwwroot/images/like-button.png
deleted file mode 100644
index 313e152..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/like-button.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/like-button.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/like-button.svg
new file mode 100644
index 0000000..3782ac4
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/like-button.svg
@@ -0,0 +1,10 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/load-more-small.png b/ShoppingAssistantWebClient.Web/wwwroot/images/load-more-small.png
deleted file mode 100644
index 3b53979..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/load-more-small.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/load-more-small.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/load-more-small.svg
new file mode 100644
index 0000000..ebab4bb
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/load-more-small.svg
@@ -0,0 +1,3 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/load-more.png b/ShoppingAssistantWebClient.Web/wwwroot/images/load-more.png
deleted file mode 100644
index 3040205..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/load-more.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/load-more.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/load-more.svg
new file mode 100644
index 0000000..27cb73a
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/load-more.svg
@@ -0,0 +1,3 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png b/ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png
deleted file mode 100644
index 8e1d219..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/next-image.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/next-image.svg
new file mode 100644
index 0000000..5b8319a
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/next-image.svg
@@ -0,0 +1,3 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png b/ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png
deleted file mode 100644
index c89fce9..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.svg
new file mode 100644
index 0000000..e40cac0
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.svg
@@ -0,0 +1,3 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/return-card.png b/ShoppingAssistantWebClient.Web/wwwroot/images/return-card.png
deleted file mode 100644
index b853bf6..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/return-card.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/return-card.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/return-card.svg
new file mode 100644
index 0000000..46ad245
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/return-card.svg
@@ -0,0 +1,4 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/return-small.png b/ShoppingAssistantWebClient.Web/wwwroot/images/return-small.png
deleted file mode 100644
index 60144a4..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/return-small.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/return-small.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/return-small.svg
new file mode 100644
index 0000000..c478314
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/return-small.svg
@@ -0,0 +1,9 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/star-cards.png b/ShoppingAssistantWebClient.Web/wwwroot/images/star-cards.png
deleted file mode 100644
index d94f609..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/star-cards.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/star-cards.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/star-cards.svg
new file mode 100644
index 0000000..23d6b92
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/star-cards.svg
@@ -0,0 +1,10 @@
+
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/star.png b/ShoppingAssistantWebClient.Web/wwwroot/images/star.png
deleted file mode 100644
index 248a5fa..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/star.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/star.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/star.svg
new file mode 100644
index 0000000..99a4a61
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/star.svg
@@ -0,0 +1,10 @@
+