Switch to new logo in desktop app

4 files changed, 53 insertions, 7 deletions

diff --git a/gui/assets/images/logo-icon.svg b/gui/assets/images/logo-icon.svg
index c00cd67fb5..10096f2a47 100644
--- a/gui/assets/images/logo-icon.svg
+++ b/gui/assets/images/logo-icon.svg
@@ -1 +1,44 @@
-<svg width="49" height="50" viewBox="0 0 49 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Elements/Logo Icon</title><defs><path d="M.1 6.833l1.467-2.047c.004.01-.092 2.947-.092 2.947l.413-2.22c1.225 2.474 4.217 5.897 6.96 7.718.296.197.528.406.707.625.346.133.703.212 1.059.27.187.034.379.048.565.065a7.42 7.42 0 0 0 1.12-.016 6.92 6.92 0 0 0 .554-.077 6.959 6.959 0 0 0 1.075-.273c.175-.053.35-.119.52-.186.173-.07.341-.144.508-.224.167-.084.333-.162.496-.252.166-.082.325-.178.49-.269.166-.084.318-.192.482-.283.163-.092.317-.2.481-.293.159-.102.317-.205.482-.303.158-.105.322-.205.491-.302l.152-.09.08.054 1.107.73-1.117-.29a7.07 7.07 0 0 1-.331.367c-.14.142-.288.277-.436.409-.154.129-.31.252-.471.373-.164.114-.329.232-.502.334a6.948 6.948 0 0 1-1.08.548 9.333 9.333 0 0 1-1.155.379c-.195.05-.397.084-.596.117-.201.03-.403.051-.604.07-.405.02-.813.01-1.211-.042a6.27 6.27 0 0 1-.595-.11 5.09 5.09 0 0 1-.573-.173 4.14 4.14 0 0 1-.936-.463c-.002.004-1.06.148-.633.941.428.79 1.073.72.769 1.651a7.54 7.54 0 0 1-.856 1.446c-.697.952-1.8 1.782-1.692 2.283 5.01 6.149 16.283 5.293 20.565-.191-.065-.794-1.314-1.173-2.19-3.11.241.075.607.185.607.171 0-.014-1.045-1.694-1.08-1.862l.669.045s-.895-1.1-.911-1.202l.898-.114s-1.13-1.298-1.15-1.401l1.15.182-1.258-1.513h.592l-.707-1.025a30.02 30.02 0 0 0-.36-.113c-.154-.05-.308-.096-.46-.144-1.722-.53-3.331-1.03-4.894-2.003-2.188-1.366-4.15-3.023-5.621-4.323L10.09 2.212c-2.831-.21-5.498-.141-7.116.179L4.015.613 2.424 2.522c-.113-.025-.14-.096-.14-.096l.11-2.35L1.891 2.2A1.274 1.274 0 0 0 .1 3.36c0 .64.477 1.172 1.098 1.258L.1 6.833z" id="a"/><path d="M1.887.156A1.274 1.274 0 0 0 .1 1.319c0 .617.443 1.133 1.031 1.246a.26.26 0 0 0 .027-.007C1.542 2.431 2.309 1.41 2.18.772a1.38 1.38 0 0 0-.294-.616z" id="c"/><path d="M4.594 5.277c-.228-.626-.172-1.442.156-2.197.457-1.048 1.325-1.75 2.157-1.75.169 0 .33.03.481.087A5.507 5.507 0 0 1 9.023.392c3.378-1.34 8.319 1.054 9.59 4.366.61 1.597.423 3.363-.1 4.955-.433 1.316-1.99 3.213-1.414 4.645-.236-.056-5.062-1.565-6.413-2.406-2.152-1.345-4.096-2.992-5.55-4.276l-.042-.04-4.91-2.328c-.058-.03-.115-.055-.173-.084.705 0 3.387.311 4.583.053" id="e"/><path d="M.199 3.717c.138.348.368.6.664.728.136.061.29.092.452.092.743 0 1.55-.669 1.966-1.626.255-.58.34-1.194.238-1.725C3.421.653 3.15.267 2.756.097a1.154 1.154 0 0 0-.454-.092C1.562.005.754.673.334 1.63.02 2.355-.03 3.134.2 3.717z" id="g"/><linearGradient x1="93.215%" y1="62.465%" x2="22.664%" y2="38.215%" id="i"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></linearGradient></defs><g transform="translate(0 .5)" fill="none" fill-rule="evenodd"><path d="M6 27c0 11.598 9.402 21 21 21s21-9.402 21-21S38.598 6 27 6 6 15.402 6 27zm-1 0C5 14.85 14.85 5 27 5s22 9.85 22 22-9.85 22-22 22S5 39.15 5 27z" fill="#192E45" fill-rule="nonzero"/><path d="M8 27c0 10.493 8.507 19 19 19s19-8.507 19-19S37.493 8 27 8 8 16.507 8 27z" fill="#192E45"/><g transform="translate(9.851 18.375)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#D0933A" fill-rule="nonzero" mask="url(#b)" d="M-0.54 -0.562H28.404V25.160999999999998H-0.54z"/></g><g transform="translate(9.851 20.417)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#FFCC86" fill-rule="nonzero" mask="url(#d)" d="M-0.54 -0.59H2.835V3.204H-0.54z"/></g><g transform="translate(18.295 13.654)"><mask id="f" fill="#fff"><use xlink:href="#e"/></mask><path fill="#FDD321" fill-rule="nonzero" mask="url(#f)" d="M-0.628 -0.625H19.635V14.995H-0.628z"/></g><g transform="translate(23.029 15.185)"><mask id="h" fill="#fff"><use xlink:href="#g"/></mask><g mask="url(#h)" fill-rule="nonzero"><path d="M1.315 4.346a.898.898 0 0 1-.373-.075C.69 4.162.496 3.947.377 3.647c-.211-.536-.161-1.26.134-1.94C.9.817 1.637.197 2.302.197c.132 0 .26.025.379.076.332.144.563.48.65.948.094.495.013 1.068-.226 1.613-.386.89-1.122 1.512-1.79 1.512z" fill="#FFF"/><path d="M2.302.388c.106 0 .208.02.302.06.272.119.463.405.538.81.087.456.011.989-.214 1.5-.35.81-1.029 1.396-1.613 1.396a.718.718 0 0 1-.294-.058l-.003-.001-.003-.002c-.2-.086-.36-.265-.459-.517-.193-.489-.144-1.159.13-1.792C1.041.975 1.72.388 2.302.388zm0-.383C1.562.005.754.673.334 1.63.02 2.355-.03 3.134.2 3.717c.138.348.368.6.664.728.136.061.29.092.452.092.742 0 1.55-.669 1.966-1.626.255-.58.339-1.194.238-1.725-.098-.533-.37-.919-.763-1.089a1.152 1.152 0 0 0-.454-.092z" fill="#1D2A3A"/></g></g><path d="M26.62 15.114s1.094 1.924-.024 3.583c-1.12 1.659-2.52 1.66-2.52 1.66L.25 12.672s-.952-4.115.85-7.526C2.899 1.733 6.837 0 6.837 0L26.62 15.114z" fill="url(#i)" fill-rule="nonzero" opacity=".3"/></g></svg>
\ No newline at end of file
+<svg version="1.1" id="brand" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="73.7 73.7 252.6 252.6" style="enable-background:new 0 0 400 400;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#192E45;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D0933A;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFCC86;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FDD321;}
+	.st4{fill:#FFFFFF;}
+	.st5{fill:#1D2A3A;}
+</style>
+<g id="Logo">
+	<path id="bg" class="st0" d="M73.7,200 c0,69.8,56.6,126.3,126.3,126.3 S326.3,269.8,326.3,200 S269.8,73.7,200,73.7
+		S73.7,130.2,73.7,200L73.7,200L73.7,200L73.7,200z"/>
+	<path id="Mullvad_Fur" class="st1" d="M90.6,184.9l9.6-13.4c0,0.1-0.6,19.3-0.6,19.3l2.7-14.5c8,16.2,27.6,38.6,45.5,50.6
+		c1.9,1.3,3.5,2.7,4.6,4.1c2.3,0.9,4.6,1.4,6.9,1.8c1.2,0.2,2.5,0.3,3.7,0.4c1.2,0.1,2.5,0.1,3.7,0.1c1.2,0,2.4-0.1,3.6-0.2
+		c1.2-0.1,2.4-0.3,3.6-0.5c1.2-0.2,2.4-0.4,3.5-0.8c1.2-0.3,2.3-0.6,3.5-1c1.1-0.3,2.3-0.8,3.4-1.2c1.1-0.5,2.2-0.9,3.3-1.5
+		c1.1-0.6,2.2-1.1,3.2-1.7c1.1-0.5,2.1-1.2,3.2-1.8c1.1-0.6,2.1-1.3,3.2-1.9c1.1-0.6,2.1-1.3,3.1-1.9c1-0.7,2.1-1.3,3.1-2
+		c1-0.7,2.1-1.3,3.2-2l1-0.6l0.5,0.3l7.2,4.8l-7.3-1.9c-0.7,0.8-1.4,1.6-2.2,2.4c-0.9,0.9-1.9,1.8-2.8,2.7c-1,0.8-2,1.7-3.1,2.4
+		c-1.1,0.8-2.1,1.5-3.3,2.2c-2.2,1.4-4.6,2.6-7.1,3.6c-1.2,0.5-2.5,1-3.7,1.4c-1.3,0.4-2.5,0.8-3.8,1.1c-1.3,0.3-2.6,0.6-3.9,0.8
+		c-1.3,0.2-2.6,0.3-3.9,0.5c-2.6,0.1-5.3,0.1-7.9-0.3c-1.3-0.2-2.6-0.4-3.9-0.7c-1.3-0.3-2.5-0.7-3.7-1.1c-2.1-0.8-4.2-1.8-6.1-3
+		c0,0-6.9,1-4.1,6.2c2.8,5.2,7,4.7,5,10.8c-1.4,3.3-3.4,6.5-5.6,9.5c-4.6,6.2-11.8,11.7-11.1,15c32.7,40.3,106.4,34.7,134.4-1.3
+		c-0.4-5.2-8.6-7.7-14.3-20.4c1.6,0.5,4,1.2,4,1.1c0-0.1-6.8-11.1-7.1-12.2l4.4,0.3c0,0-5.8-7.2-6-7.9l5.9-0.8c0,0-7.4-8.5-7.5-9.2
+		l7.5,1.2l-8.2-9.9h3.9l-4.6-6.7c-0.8-0.3-1.6-0.5-2.4-0.7c-1-0.3-2-0.6-3-0.9c-11.2-3.5-21.8-6.7-32-13.1
+		c-14.3-8.9-27.1-19.8-36.7-28.3l-19.3-9.4c-18.5-1.4-35.9-0.9-46.5,1.2l6.8-11.6l-10.4,12.5c-0.7-0.2-0.9-0.6-0.9-0.6l0.7-15.4
+		l-3.3,13.9c-1-0.5-2.2-0.7-3.4-0.7c-4.6,0-8.3,3.7-8.3,8.3c0,4.2,3.1,7.7,7.2,8.2L90.6,184.9L90.6,184.9L90.6,184.9L90.6,184.9z"/>
+	<path id="Mullvad_Nose" class="st2" d="M102.2,154.5c-1-0.4-2.2-0.7-3.3-0.7c-4.6,0-8.3,3.7-8.3,8.3c0,4,2.9,7.4,6.7,8.2
+		c0.1,0,0.1,0,0.2,0c2.5-0.8,7.5-7.5,6.7-11.7C103.9,157.1,103.2,155.7,102.2,154.5L102.2,154.5L102.2,154.5L102.2,154.5z"/>
+	<path id="Mullvad_Helmet" class="st3" d="M175.1,143.8c-1.5-4.1-1.1-9.4,1-14.4c3-6.9,8.7-11.5,14.1-11.5c1.1,0,2.1,0.2,3.1,0.6
+		c3.1-2.8,6.7-5.1,10.7-6.7c22.1-8.8,54.4,6.9,62.7,28.6c4,10.5,2.8,22-0.6,32.5c-2.8,8.6-13,21-9.2,30.4
+		c-1.5-0.4-33.1-10.2-41.9-15.8c-14.1-8.8-26.8-19.6-36.3-28l-0.3-0.3L146.3,144c-0.4-0.2-0.8-0.4-1.1-0.6
+		C149.8,143.4,167.3,145.5,175.1,143.8"/>
+	<g id="Helmet_Lamp">
+		<path class="st4" d="M184.6,147.4c-0.9,0-1.7-0.2-2.3-0.5c-1.6-0.7-2.8-2-3.6-4c-1.4-3.4-1-8.1,0.9-12.5c2.5-5.7,7.2-9.7,11.5-9.7
+			c0.8,0,1.6,0.2,2.4,0.5c2.1,0.9,3.6,3,4.1,6c0.6,3.2,0.1,6.9-1.5,10.4C193.6,143.3,188.8,147.4,184.6,147.4z"/>
+		<g>
+			<path class="st5" d="M191,122.3c0.6,0,1.2,0.1,1.8,0.4c1.6,0.7,2.8,2.5,3.2,4.9c0.5,2.9,0.1,6.3-1.4,9.5
+				c-2.2,5.1-6.5,8.8-10.1,8.8c-0.6,0-1.2-0.1-1.7-0.3l0,0l0,0c-1.5-0.6-2.3-2-2.7-3.1c-1.2-3-0.9-7.4,0.8-11.4
+				C183.2,126,187.4,122.3,191,122.3 M191,119.3c-4.8,0-10.1,4.4-12.9,10.7c-2.1,4.7-2.4,9.8-0.9,13.7c0.9,2.3,2.4,3.9,4.3,4.8
+				c0.9,0.4,1.9,0.6,3,0.6c4.8,0,10.1-4.4,12.8-10.7c1.7-3.8,2.2-7.8,1.6-11.3c-0.6-3.5-2.4-6-5-7.1
+				C193.1,119.5,192.1,119.3,191,119.3L191,119.3z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/gui/src/renderer/components/ErrorBoundary.tsx b/gui/src/renderer/components/ErrorBoundary.tsx
index abd5b53b6e..443eb6943a 100644
--- a/gui/src/renderer/components/ErrorBoundary.tsx
+++ b/gui/src/renderer/components/ErrorBoundary.tsx
@@ -24,7 +24,7 @@ const styles = {
     backgroundColor: colors.blue,
   }),
   logo: Styles.createViewStyle({
-    marginBottom: 4,
+    marginBottom: 5,
   }),
   title: Styles.createTextStyle({
     fontFamily: 'DINPro',
@@ -76,7 +76,7 @@ export default class ErrorBoundary extends Component<IProps, IState> {
           <Layout>
             <Container>
               <View style={styles.container}>
-                <ImageView height={120} width={120} source="logo-icon" style={styles.logo} />
+                <ImageView height={106} width={106} source="logo-icon" style={styles.logo} />
                 <Text style={styles.title}>{messages.pgettext('generic', 'MULLVAD VPN')}</Text>
                 <Text style={styles.subtitle}>{reachBackMessage}</Text>
               </View>
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 8698bdf3ff..912df6a01c 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -78,6 +78,9 @@ const brandStyles = {
     flexDirection: 'row',
     alignItems: 'center',
   }),
+  icon: Styles.createViewStyle({
+    marginLeft: 6,
+  }),
   title: Styles.createTextStyle({
     fontFamily: 'DINPro',
     fontSize: 24,
@@ -85,7 +88,7 @@ const brandStyles = {
     lineHeight: 30,
     letterSpacing: -0.5,
     color: colors.white80,
-    marginLeft: 8,
+    marginLeft: 9,
   }),
 };
 
@@ -93,7 +96,7 @@ export class Brand extends Component {
   public render() {
     return (
       <View style={brandStyles.container}>
-        <ImageView width={50} height={50} source="logo-icon" />
+        <ImageView width={44} height={44} source="logo-icon" style={brandStyles.icon} />
         <Text style={brandStyles.title}>{messages.pgettext('generic', 'MULLVAD VPN')}</Text>
       </View>
     );
diff --git a/gui/src/renderer/components/Launch.tsx b/gui/src/renderer/components/Launch.tsx
index 8ebc3f6cbf..3c1843fea9 100644
--- a/gui/src/renderer/components/Launch.tsx
+++ b/gui/src/renderer/components/Launch.tsx
@@ -15,7 +15,7 @@ const styles = {
     marginTop: -150,
   }),
   logo: Styles.createViewStyle({
-    marginBottom: 4,
+    marginBottom: 5,
   }),
   title: Styles.createTextStyle({
     fontFamily: 'DINPro',
@@ -47,7 +47,7 @@ export default class Launch extends Component<IProps> {
         </Header>
         <Container>
           <View style={styles.container}>
-            <ImageView height={120} width={120} source="logo-icon" style={styles.logo} />
+            <ImageView height={106} width={106} source="logo-icon" style={styles.logo} />
             <Text style={styles.title}>{messages.pgettext('generic', 'MULLVAD VPN')}</Text>
             <Text style={styles.subtitle}>
               {messages.pgettext('launch-view', 'Connecting to Mullvad system service...')}