Update avatars and small CSS fixes

app/assets/javascripts/sitewide/avatar_modal.js

@@ -89,7 +89,7 @@ var avatarsModal = (function() {
         initCropTool();
         initPredefinedAvatars();
         initUpdateButton();
-        $('.user-settings-edit-avatar img, .user-settings-edit-avatar').click(() => {
+        $('.user-settings-edit-avatar img, .avatar-container').click(() => {
           $(modal).modal('show');
         });
       }

app/assets/stylesheets/shared/avatar.scss

@@ -41,7 +41,7 @@
     display: grid;
     grid-template-columns: auto auto auto;
     height: 215px;
-    padding: 0 35px;
+    padding: 5px 35px 0;
     position: relative;
 
     .avatar {

app/assets/stylesheets/themes/scinote.scss

@@ -1385,6 +1385,7 @@ table.dataTable {
   background-color: lighten($color-concrete, 2%);
   border-radius: 50%;
   height: 100px;
+  margin-top: 5px;
   position: relative;
   width: 100px;
 
@@ -1417,10 +1418,11 @@ table.dataTable {
   }
 
   .avatar-image {
-    left: 50%;
     position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
+
+    img {
+      border-radius: 50%;
+    }
   }
 }
 

config/locales/en.yml

@@ -1413,9 +1413,9 @@ en:
         avatar_label: "Profile photo"
         avatar_btn: "Edit photo"
         avatar_modal:
-          title: 'Change your profile photo'
+          title: 'Change your profile image'
           upload_button: 'Upload a photo'
-          option_text_html: 'or<br>Select a profile icon below'
+          option_text_html: 'or<br>Select your avatar below'
         name_label: "Full name"
         name_title: "Change name"
         initials_label: "Initials"