Added an edit overlay to the user avatar.

app/assets/css/launcher.css

@@ -286,14 +286,48 @@ p {
     height: 75px;
 }
 
-/* User profile avater. */
+/* User profile avatar container. */
-#user_avatar {
+#avatarContainer {
     border-radius: 50%;
     border: 2px solid #cad7e1;
     background: rgba(1, 2, 1, 0.5);
     height: 70px;
+    width: 70px;
     width: auto;
     box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
+    overflow: hidden;
+    position: relative;
+}
+
+/* Avatar edit overlay. */
+#avatarOverlay {
+    opacity: 0;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Avenir Book';
+    color: #fff;
+    transition: 0.25s ease;
+    font-weight: bold;
+    letter-spacing: 2px;
+    background: linear-gradient(65deg, rgba(0, 0, 0, 0.4), rgba(136, 77, 77, 0.4) 60%);
+    -webkit-user-select: none;
+    cursor: pointer;
+}
+#avatarOverlay:hover {
+    opacity: 1;
+}
+
+/* User profile avater image. */
+#avatarImage {
+    height: 100%;
+    width: auto;
 }
 
 /* User profile name text. */

app/index.ejs

@@ -25,7 +25,10 @@
                 <div id="rightContainer">
                     <div id="user_content">
                         <span id="user_text">Username</span>
-                        <img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
+                        <div id="avatarContainer">
+                            <div id="avatarOverlay">Edit</div>
+                            <img id="avatarImage" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
+                        </div>
                     </div>
                     <div id="mediaContent">
                         <div id="internalMedia">