🎨 User profile settings page layout updates (#695)

closes TryGhost/Ghost#7134

Overhaul of the user settings page to make it more consistent with other settings panels.
The hardly readable validation for user "Full Name" is redundant as well, as the input field for it now has the same styles as the other input fields.

app/helpers/gh-count-characters.js

@@ -16,9 +16,9 @@ export function countCharacters(params) {
     el.className = 'word-count';
 
     if (length > 180) {
-        el.style.color = '#E25440';
+        el.style.color = '#f05230';
     } else {
-        el.style.color = '#9E9D95';
+        el.style.color = '#738a94';
     }
 
     el.innerHTML = 200 - length;

app/styles/layouts/user.css

@@ -39,37 +39,16 @@
     padding: 0;
 }
 
-@media (min-width: 901px) {
-    .content.settings-user {
-        padding: 0 40px;
-    }
-}
-
 .user-cover {
-    position: relative;
+    display: block;
     overflow: hidden;
     margin: 0;
-    width: auto;
+    width: 100%;
     height: 300px;
+    margin-bottom: 30px;
     background: #fafafa no-repeat center center;
     background-size: cover;
-}
-
-@media (max-width: 900px) {
-    .user-cover {
-        margin: 0;
-    }
-}
-
-.user-cover:after {
-    /* Gradient overlay */
-    content: "";
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 110px;
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.18));
+    border-radius: 6px;
 }
 
 .user-cover-edit {
@@ -96,70 +75,19 @@
 /* Edit user
 /* ---------------------------------------------------------- */
 
-@media (min-width: 651px) {
-    .first-form-group {
-        margin-right: 20px;
-        padding-left: 40px;
-    }
-    .first-form-group input {
-        max-width: 100%;
-    }
-}
-
-.user-details-top {
-    position: relative;
-}
-
-@media (max-width: 650px) {
-    .user-details-top {
-        margin-top: 40px;
-        margin-bottom: 0;
-    }
-}
-
-@media (min-width: 651px) {
-    .user-details-top {
-        margin-top: -91px;
-        margin-bottom: 0;
-        padding: 0;
-    }
-    .user-details-top p {
-        color: #fff;
-    }
-    .user-details-top label[for="user-name"] {
-        color: transparent;
-    }
-    .user-details-top .user-name {
-        border-color: #fff;
-    }
-}
-
 .user-profile {
     position: relative;
     z-index: 1;
 }
 
-@media (min-width: 651px) {
-    .user-profile {
-        padding-right: 20px;
-        padding-left: 143px;
-    }
-}
-
-@media (max-width: 650px) {
-    .user-profile fieldset {
-        padding: 0 40px;
-    }
-}
-
 @media (max-width: 550px) {
     .user-profile fieldset {
         padding: 0 15px;
     }
 }
 
 .user-profile textarea {
-    min-width: 240px;
+    min-width: 100%;
 }
 
 
@@ -168,43 +96,24 @@
 
 .user-image {
     position: absolute;
+    top: 200px;
+    left: 0;
     z-index: 2;
-    display: block;
-    float: left;
-    overflow: hidden;
-    margin-right: 20px;
-    margin-left: -6px;
-    padding: 3px;
-    width: 126px;
-    height: 126px;
-    background: #fff;
-    border-radius: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100px;
+    height: 100px;
+    border-radius: 0 6px;
     text-align: center;
 }
 
-@media (min-width: 651px) {
-    .user-image {
-        top: -19px;
-        left: -98px;
-    }
-}
-
-@media (max-width: 650px) {
-    .user-image {
-        top: -135px;
-        left: 50%;
-        margin-right: 0;
-        margin-left: -63px;
-    }
-}
-
 .user-image .img {
     display: block;
-    width: 120px;
-    height: 120px;
+    width: 100%;
+    height: 100%;
     background-position: center center;
     background-size: cover;
-    border-radius: 100%;
+    border-radius: 0 6px;
 }
 
 .user-image:hover .edit-user-image {
@@ -213,17 +122,16 @@
 
 .edit-user-image {
     position: absolute;
-    top: 3px;
-    right: 3px;
-    bottom: 3px;
-    left: 3px;
-    width: calc(100% - 6px);
+    top: 0;
+    left: 0;
+    width: 100%;
     background: rgba(0, 0, 0, 0.5);
-    border-radius: 100%;
+    border-radius: 0 6px;
     color: #fff;
     text-decoration: none;
     text-transform: uppercase;
-    line-height: 120px;
+    font-size: 12px;
+    line-height: 100px;
     opacity: 0;
     transition: opacity 0.3s ease;
 }