Variety of style fixes

- Modal button position tweaked, removed extraneous margin
- Fix user profile full name field and mobile profile-picture
- Added chevron to tag settings men, corrected chevron colour
- Fixed regression in delete-tag button caused by removing flexbox from buttons
- Fixed regression in button positioning on about-ghost page caused by removing flexbox from buttons

See #5652

core/client/app/styles/components/modals.css

@@ -152,6 +152,10 @@
     text-align: center;
 }
 
+.modal-footer button:first-of-type {
+    margin-left: 0;
+}
+
 
 /* Modifiers
 /* ---------------------------------------------------------- */

core/client/app/styles/layouts/about.css

@@ -24,6 +24,7 @@
 }
 
 .gh-env-help .btn {
+    display: block;
     margin: 5px 0;
 }
 
@@ -36,6 +37,9 @@
         margin: 1em 0;
         max-width: none;
     }
+    .gh-env-help .btn {
+        display: inline-block;
+    }
 }
 
 .gh-credits {

core/client/app/styles/layouts/user.css

@@ -63,8 +63,8 @@
 
 .user-cover-edit {
     position: absolute;
-    right: 35px;
-    bottom: 29px;
+    top: 30px;
+    left: 35px;
     z-index: 2;
     min-height: 37px;
     height: 37px;
@@ -75,12 +75,6 @@
     transition: color 0.3s ease, background 0.3s ease;
 }
 
-@media (max-width: 1000px) {
-    .user-cover-edit {
-        right: 15px;
-    }
-}
-
 .user-cover-edit:hover {
     background: rgba(0, 0, 0, 0.5);
     color: #fff;
@@ -90,26 +84,13 @@
 /* Edit user
 /* ---------------------------------------------------------- */
 
-.first-form-group {
-    max-width: 500px;
-}
-
 @media (min-width: 651px) {
     .first-form-group {
-        left: 40px;
-        min-width: 285px;
+        margin-right: 20px;
+        padding-left: 40px;
     }
-}
-
-@media (min-width: 651px) and (max-width: 1000px) {
-    .first-form-group {
-        width: calc(100% - 201px);
-    }
-}
-
-@media (min-width: 1001px) {
-    .first-form-group {
-        width: calc(100% - 181px);
+    .first-form-group input {
+        max-width: 100%;
     }
 }
 
@@ -141,12 +122,6 @@
     }
 }
 
-@media (min-width: 901px) {
-    .user-details-top .user-name {
-        width: calc(100% - 20px);
-    }
-}
-
 .user-profile {
     position: relative;
     z-index: 1;
@@ -154,6 +129,7 @@
 
 @media (min-width: 651px) {
     .user-profile {
+        padding-right: 20px;
         padding-left: 143px;
     }
 }
@@ -203,8 +179,10 @@
 
 @media (max-width: 650px) {
     .user-image {
-        top: -159px;
-        left: 21px;
+        top: -135px;
+        left: 50%;
+        margin-right: 0;
+        margin-left: -63px;
     }
 }
 

core/client/app/styles/patterns/buttons.css

@@ -59,6 +59,11 @@ fieldset[disabled] .btn {
     pointer-events: none;
 }
 
+.btn i {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 
 /* Blue button
 /* ---------------------------------------------------------- */

core/client/app/styles/patterns/navlist.css

@@ -22,6 +22,7 @@
 
 .nav-list-item:hover {
     background: color(#dfe1e3 lightness(+10%));
+    cursor: pointer;
 }
 
 .nav-list-item:first-of-type {
@@ -65,5 +66,6 @@
     top: 50%;
     right: 10px;
     margin-top: -0.9rem;
+    color: var(--midgrey);
     font-size: 1.4rem;
 }

core/client/app/templates/settings/tags/settings-menu.hbs

@@ -32,6 +32,7 @@
                                 <b>Meta Data</b>
                                 <span>Extra content for SEO and social media.</span>
                             </button>
+                            <i class="icon-arrow-right"></i>
                         {{/gh-tab}}
                     </ul>