Fix Settings Header Back Button and update "Add Contacts" position (#14103)

* Settings: use IconCaretLeft
- fix missing icon and fix icon position

* IconCaretLeft: fix onClick handler

* Settings: fix Add Contacts btn position

* Settings: update back btn paddings
- shrink padding a little because IconCaretLeft adds more width

ui/components/ui/icon/icon-caret-left.js

@@ -6,6 +6,7 @@ const IconCaretLeft = ({
   color = 'currentColor',
   ariaLabel,
   className,
+  onClick,
 }) => (
   <svg
     width={size}
@@ -13,6 +14,7 @@ const IconCaretLeft = ({
     fill={color}
     className={className}
     aria-label={ariaLabel}
+    onClick={onClick}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
   >
@@ -33,6 +35,10 @@ IconCaretLeft.propTypes = {
    * An additional className to assign the Icon
    */
   className: PropTypes.string,
+  /**
+   * The onClick handler
+   */
+  onClick: PropTypes.func,
   /**
    * The aria-label of the icon for accessibility purposes
    */

ui/pages/settings/contact-list-tab/index.scss

@@ -222,12 +222,12 @@
 .address-book-add-button {
   &__button {
     position: absolute;
-    top: 85px;
+    top: 80px;
     right: 16px;
     width: auto;
 
     @media screen and (max-width: $break-small) {
-      top: 16px;
+      top: 8px;
       right: 60px;
 
       &--hidden {

ui/pages/settings/index.scss

@@ -193,17 +193,11 @@
 
     @media screen and (max-width: $break-small) {
       display: block;
-      background-image: url('/images/caret-left-black.svg');
-      width: 18px;
-      height: 18px;
-      opacity: 0.5;
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center;
-      margin-right: 16px;
+      margin-right: 8px;
       cursor: pointer;
 
       [dir='rtl'] & {
+        margin: 0 0 0 8px;
         transform: rotate(180deg);
       }
     }

ui/pages/settings/settings.component.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { Switch, Route, matchPath } from 'react-router-dom';
 import classnames from 'classnames';
 import TabBar from '../../components/app/tab-bar';
+import IconCaretLeft from '../../components/ui/icon/icon-caret-left';
+
 import {
   ALERTS_ROUTE,
   ADVANCED_ROUTE,
@@ -112,13 +114,16 @@ class SettingsPage extends PureComponent {
         })}
       >
         <div className="settings-page__header">
-          {currentPath !== SETTINGS_ROUTE && (
-            <div
-              className="settings-page__back-button"
-              onClick={() => history.push(backRoute)}
-            />
-          )}
           <div className="settings-page__header__title-container">
+            {currentPath !== SETTINGS_ROUTE && (
+              <IconCaretLeft
+                className="settings-page__back-button"
+                color="var(--color-icon-default)"
+                size={32}
+                onClick={() => history.push(backRoute)}
+              />
+            )}
+
             {this.renderTitle()}
 
             <div