Added more UI styling. Updated voice work search provider to send back English tag names, if applicable.

JSMR.UI.Blazor/wwwroot/css/app.css

@@ -355,6 +355,10 @@ code {
     flex-shrink: 0;
 }
 
+.j-voice-work-image-overlay {
+    border-radius: 20px;
+}
+
 .j-voice-work-image {
     border-radius: 20px;
 }
@@ -377,6 +381,11 @@ code {
     text-shadow: 1px 1px 2px black;
 }
 
+.j-product-contributors {
+    font-size: 1rem;
+    font-family: "Poppins", "M+ 1p";
+}
+
 .j-product-description {
     /* color: #7C8099; */
     font-size: 1rem;
@@ -389,15 +398,96 @@ code {
 
 .j-voice-work-info {
     width: 240px;
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+    padding: .5rem;
+    /*background: black;*/
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    gap: .5rem;
+    font-size: 1rem;
+    text-shadow: 1px 1px 2px rgb(16, 36, 50);
 }
 
 .j-voice-work-card > .j-voice-work-info {
     flex-shrink: 0;
 }
 
+.j-release-date-container {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+.j-wishlist-container {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #ffe073;
+}
+
+.j-downloads-container {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
 /* Tags */
 .j-tags {
     display: flex;
-    gap: 1rem;
+    gap: .75rem .5rem;
     flex-wrap: wrap;
+    /*gap: .5rem 1rem;*/
+}
+
+.j-tag {
+    background-color: var(--tag-background-color);
+    color: var(--tag-text-color);
+    border: var(--tag-border);
+    border-radius: var(--tag-border-radius);
+    padding: var(--tag-padding);
+    /*padding: 0;
+    background-color: transparent;
+    text-shadow: 1px 1px 2px black;
+    font-weight: 500;*/
+}
+
+/* Icons */
+.j-icon {
+    mask-size: auto;
+    align-self: center;
+    background: rgb(180,200, 214);
+    height: 16px;
+    width: 16px;
+}
+
+.j-icon-color-yellow {
+    background: #ffe073;
+}
+
+.j-icon-color-green {
+    background: #388E3C;
+}
+
+.j-icon-calendar {
+    mask-image: url("../svg/calendar.svg");
+}
+
+.j-icon-star {
+    mask-image: url("../svg/star-fill.svg");
+}
+
+.j-icon-bag {
+    mask-image: url("../svg/bag.svg");
+}
+
+.j-icon-bag-fill {
+    mask-image: url("../svg/bag-fill.svg");
 }

JSMR.UI.Blazor/wwwroot/css/theme-frozen.css

@@ -13,7 +13,8 @@
     --tag-text-color: rgb(210,220,230);
     --tag-border: none;
     --tag-border-radius: 0.8em;
-    --tag-padding: 0.3em 1em;
+    --tag-padding-old: 0.3em 1em;
+    --tag-padding: 0.5em 1em;
     --tag-margin: 1em 0.5em 0 0;
     --tag-hover-background-color: #596f7e;
     --tag-hover-text-color: rgb(240,250,254);

JSMR.UI.Blazor/wwwroot/svg/bag-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
+	<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4z"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/bag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
+	<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/calendar.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar3" viewBox="0 0 16 16">
+	<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z"/>
+	<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
+</svg>