Added support for profile pictures

static/css/login.css

@@ -25,14 +25,27 @@ main > h1 {
     justify-content: center;
     align-items: center;
 }
-.userlist li {
+.userlist > li {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: center;
-    padding: .8rem 1.1rem;
     margin-bottom: .5rem;
+    padding: 0 .5rem;
+}
+.userlist > li > img {
+    margin-right: auto;
+    margin-left: 0;
+    height: 2rem;
+    width: 2rem;
+}
+.userlist > li > div {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
     text-align: center;
+    padding: .8rem 1.1rem;
 }
 .userlistButton {
     font-size: 1.1rem;
@@ -102,11 +115,6 @@ form .horizontalButtonList {
     .userlist {
         width: 100%;
     }
-    .userlist li {
-        width: 100%;
-        padding-left: 0;
-        padding-right: 0;
-    }
     .pinpad table tr td button {
         height: 4.2rem;
         width: 4.2rem;

static/css/main.css

@@ -67,10 +67,17 @@ main {
     align-items: center;
     margin-top: 1rem;
     font-size: 1rem;
-    width: 90%;
+    width: 94%;
 }
-.userInfo span {
+.userInfo > span {
     font-size: 1.1rem;
+    vertical-align: middle;
+}
+.userInfo > img {
+    vertical-align: middle;
+    width: 1.8rem;
+    height: 1.8rem;
+    margin: .5rem;
 }
 .userPanel > .horizontalButtonList {
     margin-left: auto;