Updated front-end authentication.

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

@@ -659,8 +659,14 @@ code {
     .j-chip.is-clickable {
         cursor: pointer;
         user-select: none;
+        --chip-hover-alpha: 0.2;
+        transition: .2s linear;
     }
 
+        .j-chip.is-clickable:hover {
+            background: rgb(var(--chip-rgb) / var(--chip-hover-alpha));
+        }
+
     .j-chip.varient-filled {
         padding: .4rem .8rem;
         border-radius: 1rem;
@@ -703,6 +709,21 @@ code {
     width: 16px;
 }
 
+.j-icon.size-small {
+    width: 1rem;
+    height: 1rem;
+}
+
+.j-icon.size-medium {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.j-icon.size-large {
+    width: 2rem;
+    height: 2rem;
+}
+
 .j-icon-color-yellow {
     background: #ffe073;
 }
@@ -784,6 +805,14 @@ code {
     mask-image: url("../svg/person-fill.svg");
 }
 
+.j-icon-avatar {
+    mask-image: url("../svg/person-circle.svg");
+}
+
+.j-icon-avatar-fill {
+    mask-image: url("../svg/person-circle.svg");
+}
+
 .j-icon-sort {
     mask-image: url("../svg/sort.svg");
 }

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
+	<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
+	<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/>
+</svg>