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);
 }
 
 /*