Update SVG assets to use fill: currentColor

10 files changed, 33 insertions, 35 deletions

diff --git a/app/assets/images/icon-chevron-down.svg b/app/assets/images/icon-chevron-down.svg
index 7d7419a75d..e1e7af1104 100644
--- a/app/assets/images/icon-chevron-down.svg
+++ b/app/assets/images/icon-chevron-down.svg
@@ -1 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-cheveron-down</title><desc>Created with Sketch.</desc><defs><path d="M11.9497475,15.9497475 C11.6938252,15.9497475 11.4379028,15.8521164 11.2426407,15.6568542 L6.29289322,10.7071068 C5.90236893,10.3165825 5.90236893,9.68341751 6.29289322,9.29289322 C6.68341751,8.90236893 7.31658249,8.90236893 7.70710678,9.29289322 L11.9497475,13.5355339 L16.1923882,9.29289322 C16.5829124,8.90236893 17.2160774,8.90236893 17.6066017,9.29289322 C17.997126,9.68341751 17.997126,10.3165825 17.6066017,10.7071068 L12.6568542,15.6568542 C12.4615921,15.8521164 12.2056698,15.9497475 11.9497475,15.9497475 Z" id="path-1"/></defs><g id="Icons/chevron-down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><mask id="mask-2" fill="#fff"><use xlink:href="#path-1"/></mask><use id="Icon-shape" fill="#294D73" xlink:href="#path-1"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>icon-cheveron-down</title>
+  <path d="M11.9497475,15.9497475 C11.6938252,15.9497475 11.4379028,15.8521164 11.2426407,15.6568542 L6.29289322,10.7071068 C5.90236893,10.3165825 5.90236893,9.68341751 6.29289322,9.29289322 C6.68341751,8.90236893 7.31658249,8.90236893 7.70710678,9.29289322 L11.9497475,13.5355339 L16.1923882,9.29289322 C16.5829124,8.90236893 17.2160774,8.90236893 17.6066017,9.29289322 C17.997126,9.68341751 17.997126,10.3165825 17.6066017,10.7071068 L12.6568542,15.6568542 C12.4615921,15.8521164 12.2056698,15.9497475 11.9497475,15.9497475 Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/app/assets/images/icon-chevron-up.svg b/app/assets/images/icon-chevron-up.svg
index fa97da6e26..84d8b56350 100644
--- a/app/assets/images/icon-chevron-up.svg
+++ b/app/assets/images/icon-chevron-up.svg
@@ -1 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-cheveron-up</title><desc>Created with Sketch.</desc><defs><path d="M11.9497475,15.9497475 C11.6938252,15.9497475 11.4379028,15.8521164 11.2426407,15.6568542 L6.29289322,10.7071068 C5.90236893,10.3165825 5.90236893,9.68341751 6.29289322,9.29289322 C6.68341751,8.90236893 7.31658249,8.90236893 7.70710678,9.29289322 L11.9497475,13.5355339 L16.1923882,9.29289322 C16.5829124,8.90236893 17.2160774,8.90236893 17.6066017,9.29289322 C17.997126,9.68341751 17.997126,10.3165825 17.6066017,10.7071068 L12.6568542,15.6568542 C12.4615921,15.8521164 12.2056698,15.9497475 11.9497475,15.9497475 Z" id="path-1"/></defs><g id="Icons/chevron-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><mask id="mask-2" fill="#fff"><use xlink:href="#path-1"/></mask><use id="Icon-shape" fill="#294D73" transform="translate(11.949747, 12.474874) scale(1, -1) translate(-11.949747, -12.474874)" xlink:href="#path-1"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>icon-cheveron-up</title>
+  <path d="M11.9497475,9 C12.2056698,9 12.4615921,9.09763107 12.6568542,9.29289322 L17.6066017,14.2426407 C17.997126,14.633165 17.997126,15.26633 17.6066017,15.6568542 C17.2160774,16.0473785 16.5829124,16.0473785 16.1923882,15.6568542 L11.9497475,11.4142136 L7.70710678,15.6568542 C7.31658249,16.0473785 6.68341751,16.0473785 6.29289322,15.6568542 C5.90236893,15.26633 5.90236893,14.633165 6.29289322,14.2426407 L11.2426407,9.29289322 C11.4379028,9.09763107 11.6938252,9 11.9497475,9 Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/app/assets/images/icon-chevron.svg b/app/assets/images/icon-chevron.svg
index 5437127c33..923532cd28 100644
--- a/app/assets/images/icon-chevron.svg
+++ b/app/assets/images/icon-chevron.svg
@@ -2,5 +2,5 @@
     <title>icon-cheveron</title>
     <desc>Mullvad VPN app</desc>
     <defs></defs>
-    <path d="M0.335204989,1.95371785 L4.23669259,6 L0.335204989,10.0462822 C-0.111734996,10.4932221 -0.111734996,11.217855 0.335204989,11.664795 C0.782144974,12.111735 1.49826561,12.111735 1.9452056,11.664795 L6.66818642,6.80553188 C6.88657769,6.58714061 6.99779844,6.29559541 6.99881099,6.00303766 C6.99779844,5.70440459 6.88657769,5.41285939 6.66818642,5.19446812 L1.9452056,0.335204989 C1.49826561,-0.111734996 0.782144974,-0.111734996 0.335204989,0.335204989 C-0.111734996,0.782144974 -0.111734996,1.50677786 0.335204989,1.95371785 Z" id="path" fill-opacity="0.8" fill="#FFFFFF" fill-rule="evenodd"></path>
+    <path d="M0.335204989,1.95371785 L4.23669259,6 L0.335204989,10.0462822 C-0.111734996,10.4932221 -0.111734996,11.217855 0.335204989,11.664795 C0.782144974,12.111735 1.49826561,12.111735 1.9452056,11.664795 L6.66818642,6.80553188 C6.88657769,6.58714061 6.99779844,6.29559541 6.99881099,6.00303766 C6.99779844,5.70440459 6.88657769,5.41285939 6.66818642,5.19446812 L1.9452056,0.335204989 C1.49826561,-0.111734996 0.782144974,-0.111734996 0.335204989,0.335204989 C-0.111734996,0.782144974 -0.111734996,1.50677786 0.335204989,1.95371785 Z" id="path" fill="currentColor" fill-rule="evenodd"></path>
 </svg>
\ No newline at end of file
diff --git a/app/assets/images/icon-extLink.svg b/app/assets/images/icon-extLink.svg
index 2da2e2f932..bed3cb37b3 100644
--- a/app/assets/images/icon-extLink.svg
+++ b/app/assets/images/icon-extLink.svg
@@ -2,5 +2,5 @@
     <title>icon-extLink</title>
     <desc>Mullvad VPN app</desc>
     <defs></defs>
-    <path d="M12.5857864,2 L8.99077797,2 C8.45097518,2 8,1.55228475 8,1 C8,0.443864822 8.4463856,0 8.99703014,0 L15.0029699,0 C15.5469637,0 16,0.446385598 16,0.997030139 L16,7.00296986 C16,7.54696369 15.5522847,8 15,8 C14.4438648,8 14,7.55641359 14,7.00922203 L14,3.41421356 L6.70710678,10.7071068 C6.31658249,11.0976311 5.68341751,11.0976311 5.29289322,10.7071068 C4.90236893,10.3165825 4.90236893,9.68341751 5.29289322,9.29289322 L12.5857864,2 Z M8.46446609,4 L6.46446609,6 L2,6 L2,14 L10,14 L10,9.53553391 L12,7.53553391 L12,14.9975267 C12,15.5511774 11.544239,16 10.9975267,16 L1.00247329,16 C0.448822582,16 0,15.544239 0,14.9975267 L0,5.00247329 C0,4.44882258 0.455760956,4 1.00247329,4 L8.46446609,4 Z" id="path" fill="#FFFFFF" fill-rule="evenodd"></path>
+    <path d="M12.5857864,2 L8.99077797,2 C8.45097518,2 8,1.55228475 8,1 C8,0.443864822 8.4463856,0 8.99703014,0 L15.0029699,0 C15.5469637,0 16,0.446385598 16,0.997030139 L16,7.00296986 C16,7.54696369 15.5522847,8 15,8 C14.4438648,8 14,7.55641359 14,7.00922203 L14,3.41421356 L6.70710678,10.7071068 C6.31658249,11.0976311 5.68341751,11.0976311 5.29289322,10.7071068 C4.90236893,10.3165825 4.90236893,9.68341751 5.29289322,9.29289322 L12.5857864,2 Z M8.46446609,4 L6.46446609,6 L2,6 L2,14 L10,14 L10,9.53553391 L12,7.53553391 L12,14.9975267 C12,15.5511774 11.544239,16 10.9975267,16 L1.00247329,16 C0.448822582,16 0,15.544239 0,14.9975267 L0,5.00247329 C0,4.44882258 0.455760956,4 1.00247329,4 L8.46446609,4 Z" id="path" fill="currentColor" fill-rule="evenodd"></path>
 </svg>
\ No newline at end of file
diff --git a/app/assets/images/icon-tick.svg b/app/assets/images/icon-tick.svg
index 65e354e2a3..16c701574a 100755
--- a/app/assets/images/icon-tick.svg
+++ b/app/assets/images/icon-tick.svg
@@ -1,14 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="17px" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>icon-tick</title>
-    <desc>Mullvad VPN app</desc>
-    <defs>
-        <path d="M2.92646877,7.29791847 C2.25699855,6.63402718 1.17157288,6.63402718 0.502102661,7.29791847 C-0.167367554,7.96180977 -0.167367554,9.03819023 0.502102661,9.70208153 L7.35924552,16.5020815 C8.02871573,17.1659728 9.11414141,17.1659728 9.78361162,16.5020815 L23.4978973,2.90208153 C24.1673676,2.23819023 24.1673676,1.16180977 23.4978973,0.497918472 C22.8284271,-0.165972824 21.7430014,-0.165972824 21.0735312,0.497918472 L8.57142857,12.8958369 L2.92646877,7.29791847 Z" id="path-1"></path>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-        <use id="path" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
-    </g>
+    <path d="M2.92646877,10.7979185 C2.25699855,10.1340272 1.17157288,10.1340272 0.502102661,10.7979185 C-0.167367554,11.4618098 -0.167367554,12.5381902 0.502102661,13.2020815 L7.35924552,20.0020815 C8.02871573,20.6659728 9.11414141,20.6659728 9.78361162,20.0020815 L23.4978973,6.40208153 C24.1673676,5.73819023 24.1673676,4.66180977 23.4978973,3.99791847 C22.8284271,3.33402718 21.7430014,3.33402718 21.0735312,3.99791847 L8.57142857,16.3958369 L2.92646877,10.7979185 Z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index b4306b81c8..3836ff9ca1 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -4,6 +4,8 @@ import React from 'react';
 import { Layout, Container, Header } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 
+import TickSVG from '../assets/images/icon-tick.svg';
+
 export class AdvancedSettings extends React.Component {
 
   props: {
@@ -90,11 +92,11 @@ class Selector extends React.Component {
 
     return <div
       key={ value }
-      className={ 'settings__cell--selected settings__cell' }
+      className="settings__cell--selected settings__cell"
       onClick={ onCellClick } >
       <div className="settings__cell-label">
-        <div className={ 'settings__sub-cell--label' }>
-          <img src='./assets/images/icon-tick.svg' />
+        <div className="settings__sub-cell--label">
+          <TickSVG />
           { value }
         </div>
       </div>
diff --git a/app/components/SelectLocation.css b/app/components/SelectLocation.css
index 2bf7ec8adc..f9e55ddc60 100644
--- a/app/components/SelectLocation.css
+++ b/app/components/SelectLocation.css
@@ -92,10 +92,7 @@
   align-items: center;
   justify-content: center;
   display: flex;
-}
-
-.select-location__cities {
-  margin-top: 1px;
+  color: #fff;
 }
 
 .select-location__collapse-button {
@@ -108,11 +105,10 @@
   padding: 12px;
 }
 
-.select-location__collapse-icon path {
-  fill: #fff;
+.select-location__collapse-icon {
+  color: #fff;
 }
 
-
 .select-location__sub-cell {
   background-color: rgb(36, 57, 84);
   padding: 15px 24px 15px 40px;
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 952d3882ea..f383d09189 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -5,6 +5,7 @@ import CustomScrollbars from './CustomScrollbars';
 
 import ChevronDownSVG from '../assets/images/icon-chevron-down.svg';
 import ChevronUpSVG from '../assets/images/icon-chevron-up.svg';
+import TickSVG from '../assets/images/icon-tick.svg';
 
 import type { SettingsReduxState } from '../redux/settings/reducers';
 import type { RelayLocation, RelayListCity, RelayListCountry } from '../lib/ipc-facade';
@@ -162,7 +163,7 @@ export default class SelectLocation extends Component {
 
             <div className="select-location__cell-icon">
               { isSelected ?
-                <img src="./assets/images/icon-tick.svg" /> :
+                <TickSVG /> :
                 this._relayStatusIndicator(countryHasActiveRelays) }
             </div>
 
@@ -209,7 +210,7 @@ export default class SelectLocation extends Component {
 
         <div className="select-location__cell-icon">
           { isSelected ?
-            <img src="./assets/images/icon-tick.svg" /> :
+            <TickSVG /> :
             this._relayStatusIndicator(relayCity.has_active_relays) }
         </div>
 
diff --git a/app/components/Settings.css b/app/components/Settings.css
index ee4a90b6b9..b6bde605c7 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -57,6 +57,7 @@
 .settings__cell-disclosure {
   display: block;
   margin-left: 8px;
+  color: rgba(255, 255, 255, 0.8);
 }
 
 .settings__cell-spacer {
@@ -88,8 +89,7 @@
 .settings__cell-icon {
   width: 16px;
   flex: 0 0 auto;
-  margin-right: 8px;
-  opacity: 0.8;
+  color: rgba(255, 255, 255, 0.8);
 }
 
 .settings__cell-value {
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 95506cddc2..492b2bd403 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -5,6 +5,9 @@ import { If, Then, Else } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 
+import ChevronRightSVG from '../assets/images/icon-chevron.svg';
+import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
+
 import type { AccountReduxState } from '../redux/account/reducers';
 import type { SettingsReduxState } from '../redux/settings/reducers';
 
@@ -65,7 +68,7 @@ export default class Settings extends Component {
                                 </Else>
                               </If>
                             </div>
-                            <img className="settings__cell-disclosure" src="assets/images/icon-chevron.svg" />
+                            <div className="settings__cell-disclosure"><ChevronRightSVG /></div>
                           </div>
                           <div className="settings__cell-spacer"></div>
                         </div>
@@ -78,7 +81,7 @@ export default class Settings extends Component {
                           <div className="settings__cell settings__cell--active" onClick={ this.props.onViewAdvancedSettings }>
                             <div className="settings__cell-label">Advanced</div>
                             <div className="settings__cell-value">
-                              <img className="settings__cell-disclosure" src="assets/images/icon-chevron.svg" />
+                              <div className="settings__cell-disclosure"><ChevronRightSVG /></div>
                             </div>
                           </div>
                           <div className="settings__cell-spacer"></div>
@@ -89,15 +92,15 @@ export default class Settings extends Component {
                     <div className="settings__external">
                       <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'faq') }>
                         <div className="settings__cell-label">FAQs</div>
-                        <img className="settings__cell-icon" src="./assets/images/icon-extLink.svg" />
+                        <div className="settings__cell-icon"><ExternalLinkSVG /></div>
                       </div>
                       <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'guides') }>
                         <div className="settings__cell-label">Guides</div>
-                        <img className="settings__cell-icon" src="./assets/images/icon-extLink.svg" />
+                        <div className="settings__cell-icon"><ExternalLinkSVG /></div>
                       </div>
                       <div className="settings__view-support settings__cell settings__cell--active" onClick={ this.props.onViewSupport }>
                         <div className="settings__cell-label">Report a problem</div>
-                        <img className="settings__cell-disclosure" src="assets/images/icon-chevron.svg" />
+                        <div className="settings__cell-disclosure"><ChevronRightSVG /></div>
                       </div>
                     </div>
                   </div>