From d96766528eea7fb37772dd3d8e236a7a491d9599 Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Mon, 22 Jan 2018 01:17:56 -0500
Subject: [PATCH] Added an edit overlay to the user avatar.

---
 app/assets/css/launcher.css | 38 +++++++++++++++++++++++++++++++++++--
 app/index.ejs               |  5 ++++-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 87813ae..56812f2 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -286,14 +286,48 @@ p {
     height: 75px;
 }
 
-/* User profile avater. */
-#user_avatar {
+/* User profile avatar container. */
+#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. */
diff --git a/app/index.ejs b/app/index.ejs
index e81bacf..eafd503 100644
--- a/app/index.ejs
+++ b/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">