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);