Added various icons to use for input prefixes. Updated pagination cocmponent.

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

@@ -224,11 +224,13 @@ code {
 .pagination > .page-sizes {
     justify-content: flex-end;
     display: inline-flex;
+    align-items: center;
+    gap: 1rem;
 }
 
-.pagination > .page-sizes > * {
+/*.pagination > .page-sizes > * {
     max-width: 6rem;
-}
+}*/
 
 /* Circle */
 .j-circle-image-container {
@@ -351,6 +353,14 @@ code {
     background-image: var(--card-background-image);
 }
 
+.j-card-2 {
+    background-image: linear-gradient(0deg, var(--surface-container-low), var(--surface-container-high));
+    border-top-color: var(--surface-container-outline-high);
+    border-left-color: var(--surface-container-outline);
+    border-right-color: var(--surface-container-outline);
+    border-bottom-color: var(--surface-container-outline-low);
+}
+
 /* Input */
 .j-input-prefix {
     display: flex;
@@ -658,6 +668,10 @@ code {
     mask-image: url("../svg/warning-fill.svg");
 }
 
+.j-icon-search {
+    mask-image: url("../svg/search.svg");
+}
+
 .j-icon-globe {
     mask-image: url("../svg/globe.svg");
 }
@@ -666,6 +680,30 @@ code {
     mask-image: url("../svg/translate.svg");
 }
 
+.j-icon-cart {
+    mask-image: url("../svg/shopping-cart.svg");
+}
+
+.j-icon-circle {
+    mask-image: url("../svg/circle.svg");
+}
+
+.j-icon-tag {
+    mask-image: url("../svg/tag.svg");
+}
+
+.j-icon-person {
+    mask-image: url("../svg/person.svg");
+}
+
+.j-icon-sort {
+    mask-image: url("../svg/sort.svg");
+}
+
+.j-icon-grid {
+    mask-image: url("../svg/grid-view.svg");
+}
+
 .j-icon-2 {
     background-repeat: no-repeat;
     background-position: center;
@@ -720,6 +758,22 @@ code {
 }
 
 /* Background Colors */
+.background-color-surface {
+    background-color: var(--color-black);
+}
+
+.background-color-surface-container {
+    background-color: var(--surface-container);
+}
+
+.background-color-surface-container-high {
+    background-color: var(--surface-container-high);
+}
+
+.background-color-surface-container-low {
+    background-color: var(--surface-container-low);
+}
+
 .background-color-black {
     background-color: var(--color-black);
 }

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

@@ -53,8 +53,13 @@
     /* Background Colors */
     --background-color-primary: rgb(57, 79, 94);
     --background-color-secondary: rgb(30, 53, 69);
-
     /* Official */
+    --surface: rgb(16, 36, 50);
+    --surface-container-high: rgb(57, 79, 94);
+    --surface-container-low: rgb(30, 53, 69);
+    --surface-container-outline-high: rgb(83, 99, 109);
+    --surface-container-outline: rgb(72, 88, 99);
+    --surface-container-outline-low: rgb(63, 78, 88);
 }
 
 /*

JSMR.UI.Blazor/wwwroot/svg/circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle" viewBox="0 0 16 16">
+	<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/grid-view.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
+	<path d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
+	<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/person.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
+	<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+	<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/shopping-cart.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
+	<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/sort.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
+	<path d="M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/tag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
+	<path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/>
+</svg>