Merge pull request #2190 from mlorb/ml-sci-4023

Small improvements in the avatar settings [SCI-4023]

app/assets/stylesheets/themes/scinote.scss

@@ -1383,43 +1383,45 @@ table.dataTable {
 //edit avatar
 .avatar-container {
   background-color: lighten($color-concrete, 2%);
+  border-radius: 50%;
   height: 100px;
   position: relative;
   width: 100px;
-}
 
-.avatar-container:hover .avatar-edit {
-  display: block;
-}
-
-.avatar-image {
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.avatar-edit {
-  display: none;
-  margin-top: 70%;
-  opacity: .8;
-  position: absolute;
-  z-index: 10;
-
-  .btn-grey {
+  .avatar-edit {
     background-color: $color-silver-chalice;
-    border-color: $color-silver-chalice;
-    border-radius: 0;
-    color: $color-white;
-    width: 100px;
+    border-radius: inherit;
+    cursor: pointer;
+    display: none;
+    height: inherit;
+    opacity: .8;
+    position: absolute;
+    width: inherit;
+  }
 
-    &:hover,
-    &:focus {
-      background-color: darken($color-silver-chalice, 15%);
-      border-color: darken($color-silver-chalice, 15%);
-      color: $color-white;
+  .avatar-edit-text {
+    color: $color-white;
+    cursor: pointer;
+    display: none;
+    padding-top: 40%;
+    position: absolute;
+    text-align: center;
+    width: inherit;
+  }
+
+  &:hover {
+    .avatar-edit,
+    .avatar-edit-text {
+      display: block;
     }
   }
+
+  .avatar-image {
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
 .avatar-file-upload input[type=file] {

app/views/users/registrations/edit.html.erb

@@ -24,11 +24,10 @@
                     <div class="avatar-image">
                         <%= image_tag @user_avatar_url %>
                     </div>
-                    <div class="avatar-edit">
-                        <div class="btn btn-grey btn-sm">
-                          <span class="fas fa-pencil-alt"></span>
-                        <%=t "users.registrations.edit.avatar_btn" %>
-                      </div>
+                    <div class="avatar-edit"></div>
+                    <div class="avatar-edit-text">
+                      <span class="fas fa-pencil-alt"></span>
+                      <span><%=t "users.registrations.edit.avatar_btn" %></span>
                     </div>
                   </div>
                 </div>