Edit profile

app/modules/profile/includes/profile-bar.jade

@@ -1,8 +1,10 @@
 section.profile-bar
     div.profile-image-wrapper
         img.profile-img(src="http://i.imgur.com/gPiHzHN.jpg", alt="{{ user.nickname }}")
-        a.edit-profile(href="", title="Edit profile")
+        div.edit-profile(title="Edit profile")
-            span.icon.icon-edit
+            a.profile-edition(title="Edit Profile", href="")
+                span.icon.icon-edit
+                span Edit Profile
     a.button-green
         span Follow
     div.profile-data
@@ -10,12 +12,11 @@ section.profile-bar
         // If user has no defined role in its profile use all its project defined roles followed by an &
         h2 Backend Developer & Stackeholder
         div.location
-            // span.icon.icon-location
+            include ../../../svg/location.svg
             span Madrid
         // Remove Abuse Flag when a user is seeing itself
         a.flag(href="", title="Report Abuse")
-            svg(xmlns:svg="http://www.w3.org/2000/svg", xmlns="http://www.w3.org/2000/svg", xml:space="preserve", enable-background="new 0 0 100 100" viewBox="0 0 14.7 20.3", y="0", x="0", version="1.1")
+            include ../../../svg/flag.svg
-                path(d="M2.9 4C2 4.5 1 5.4 0.8 5.6L0.7 5.5 0 5.9 8.3 20.3 9.1 19.9 5.4 13.6c0.2-0.2 1.2-1.1 2.1-1.6 1.8-1.1 2.7-0.8 4.5-1.9 1.8-1 2.6-2.3 2.6-2.3L10.2 0C10.2 0 9.3 1.2 7.5 2.2 5.7 3.3 4.7 2.9 2.9 4Z")
     // These values in profile stats are not defined yet in UX. Please ask
     div.profile-stats
         div.stat

app/modules/profile/profile-timeline/profile-timeline.scss

@@ -6,6 +6,7 @@
         position: relative;
         .activity-info {
             align-items: center;
+            color: $gray-light;
             display: flex;
             margin-right: 100px;
         }

app/modules/profile/styles/profile-bar.scss

@@ -1,19 +1,57 @@
 .profile-bar {
     .profile-image-wrapper {
+        height: 200px;
+        margin-bottom: .25rem;
+        overflow: hidden;
         position: relative;
+        &:hover {
+            .edit-profile {
+                opacity: 1;
+                transition: opacity .2s cubic-bezier(.01, .7, 1, 1);
+            }
+        }
     }
     .profile-img {
         max-width: 100%;
     }
     .edit-profile {
         @extend %large;
-        background: rgba(255, 255, 255, .6);
+        background: rgba($black, .6);
-        border-radius: 50%;
+        bottom: 0;
-        color: $grayer;
+        left: 0;
-        left: calc(50% - 1rem);
+        opacity: 0;
-        padding: 1rem;
         position: absolute;
-        top: calc(50% - 1rem);
+        right: 0;
+        top: 0;
+        &:hover {
+            .profile-edition {
+                opacity: 1;
+                transition: all .2s cubic-bezier(.01, .7, 1, 1);
+                transition-delay: .2s;
+            }
+        }
+
+    }
+    .profile-edition {
+        @extend %small;
+        background: rgba($white, .1);
+        color: $white;
+        height: 30px;
+        left: calc(50% - 55px);
+        opacity: 0;
+        padding: .4rem;
+        position: absolute;
+        top: calc(50% - 5px);
+        width: 110px;
+        .icon-edit {
+            color: $white;
+            margin-right: .3rem;
+        }
+        &:hover {
+            background: rgba($white, .4);
+            color: $white;
+            transition: all .2s cubic-bezier(.77, .01, .97, .85);
+        }
     }
     .button-green {
         display: block;
@@ -57,6 +95,14 @@
     .location {
         color: $gray-light;
         margin-bottom: 1rem;
+        svg {
+            position: relative;
+            top: 2px;
+            width: .75rem;
+        }
+        path {
+            fill: $gray-light;
+        }
     }
     .profile-stats {
         background: $whitish;

app/modules/profile/styles/profile-sidebar.scss

@@ -8,6 +8,7 @@
         .icon {
             color: $gray-light;
             margin-right: .3rem;
+            vertical-align: text-bottom;
         }
     }
     p {

app/svg/location.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 28 40">
+    <g transform="translate(-10, -4)">
+        <title>Location</title>
+        <path d="m24 4c-8 0-14 6-14 14 0 10 14 26 14 26s14-16 14-26c0-8-6-14-14-14zm0 19c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z"/>
+    </g>
+</svg>