Merge branch 'use-real-logo'

5 files changed, 81 insertions, 103 deletions

diff --git a/gui/assets/images/logo-text.svg b/gui/assets/images/logo-text.svg
new file mode 100644
index 0000000000..c3296186c2
--- /dev/null
+++ b/gui/assets/images/logo-text.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg id="Mullvad_VPN_Logo_Positive" width="959.5" height="103.7" version="1.1" viewBox="0 0 959.5 103.7" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+<style type="text/css">
+	.st4{fill:#FFFFFF;}
+</style>
+<g transform="translate(-381.4,-143.1)">
+	<path class="st4" d="m381.4 144.7c0-0.9 0.6-1.5 1.5-1.5h17.8c1.2 0 2 0.4 2.4 1.5l25.8 58.2h0.6l25.3-58.2c0.4-1 1.2-1.5 2.4-1.5h17.5c0.9 0 1.5 0.6 1.5 1.5v99c0 0.9-0.6 1.5-1.5 1.5h-17c-0.9 0-1.5-0.6-1.5-1.5v-57.4h-0.6l-18.9 43c-0.6 1.4-1.5 2-2.8 2h-10.3c-1.3 0-2.2-0.6-2.8-2l-18.9-43h-0.6v57.4c0 0.9-0.6 1.5-1.5 1.5h-16.9c-0.9 0-1.5-0.6-1.5-1.5z"/>
+	<path class="st4" d="m498.4 207.7v-63c0-0.9 0.6-1.5 1.5-1.5h19c0.9 0 1.5 0.6 1.5 1.5v63.6c0 12.1 6.8 19 17.1 19 10.2 0 16.9-6.9 16.9-19v-63.6c0-0.9 0.6-1.5 1.5-1.5h19c0.9 0 1.5 0.6 1.5 1.5v63c0 25.3-16.2 39.1-39 39.1s-39-13.8-39-39.1z"/>
+	<path class="st4" d="m598.6 144.7c0-0.9 0.6-1.5 1.5-1.5h19c0.9 0 1.5 0.6 1.5 1.5v79.9c0 0.6 0.3 0.9 0.9 0.9h45c0.9 0 1.5 0.6 1.5 1.5v16.6c0 0.9-0.6 1.5-1.5 1.5h-66.4c-0.9 0-1.5-0.6-1.5-1.5z"/>
+	<path class="st4" d="m684.1 144.7c0-0.9 0.6-1.5 1.5-1.5h19c0.9 0 1.5 0.6 1.5 1.5v79.9c0 0.6 0.3 0.9 0.9 0.9h45c0.9 0 1.5 0.6 1.5 1.5v16.6c0 0.9-0.6 1.5-1.5 1.5h-66.4c-0.9 0-1.5-0.6-1.5-1.5z"/>
+	<path class="st4" d="m785.1 245.1c-1 0-1.6-0.6-1.9-1.5l-32.4-98.8c-0.3-1.1 0.3-1.6 1.3-1.6h19.5c1 0 1.7 0.4 2 1.5l20.4 66.9h0.4l19.8-66.9c0.3-1 0.9-1.5 1.9-1.5h19.3c0.9 0 1.5 0.6 1.2 1.6l-32.4 98.8c-0.3 0.9-0.9 1.5-1.8 1.5z"/>
+	<path class="st4" d="m872.5 144.7c0.3-0.9 0.9-1.5 2-1.5h18.9c1 0 1.6 0.6 1.9 1.5l34.5 99c0.3 0.9 0 1.5-1 1.5h-19.5c-1 0-1.7-0.5-2-1.5l-5.8-17.8h-35.7l-5.7 17.8c-0.3 1-0.9 1.5-2 1.5h-19.6c-1 0-1.3-0.6-1-1.5zm23 62.4-11.5-35.7h-0.4l-11.5 35.7z"/>
+	<path class="st4" d="m944.7 144.7c0-0.9 0.6-1.5 1.5-1.5h37.9c17.8 0 30.3 7.6 35.2 22.9 1.8 5.7 2.7 11.4 2.7 28s-0.9 22.3-2.7 28c-4.9 15.3-17.4 22.9-35.2 22.9h-37.9c-0.9 0-1.5-0.6-1.5-1.5zm22.9 80.8h11.5c10.2 0 16.3-3 18.9-11.2 1-3 1.7-6.9 1.7-20.1s-0.6-17.1-1.7-20.1c-2.5-8.2-8.7-11.2-18.9-11.2h-11.5c-0.6 0-0.9 0.3-0.9 0.9v60.9c0 0.5 0.3 0.8 0.9 0.8z"/>
+	<path class="st4" d="m1102.5 245.1c-1.1 0-1.7-0.6-2-1.5l-32.4-98.8c-0.3-1.1 0.3-1.6 1.3-1.6h19.5c1 0 1.7 0.4 2 1.5l20.4 66.9h0.4l19.8-66.9c0.3-1 0.9-1.5 1.9-1.5h19.3c0.9 0 1.5 0.6 1.2 1.6l-32.4 98.8c-0.3 0.9-0.9 1.5-1.8 1.5z"/>
+	<path class="st4" d="m1170 245.1c-0.9 0-1.5-0.6-1.5-1.5v-99c0-0.9 0.6-1.5 1.5-1.5h39.6c22.2 0 35.5 13.3 35.5 32.8 0 19.2-13.5 32.7-35.5 32.7h-18.1c-0.6 0-0.9 0.3-0.9 0.9v34c0 0.9-0.6 1.5-1.5 1.5h-19.1zm53.1-69.1c0-8.2-5.5-13.8-14.8-13.8h-16.8c-0.6 0-0.9 0.3-0.9 0.9v25.6c0 0.6 0.3 0.9 0.9 0.9h16.8c9.2 0.1 14.8-5.3 14.8-13.6z"/>
+	<path class="st4" d="m1262.2 144.7c0-0.9 0.6-1.5 1.5-1.5h18c1 0 2 0.4 2.5 1.5l36 64.2h0.8v-64.2c0-0.9 0.6-1.5 1.5-1.5h16.9c0.9 0 1.5 0.6 1.5 1.5v99c0 0.9-0.6 1.5-1.5 1.5h-17.8c-1.2 0-2-0.5-2.5-1.5l-36.1-64h-0.8v64c0 0.9-0.6 1.5-1.5 1.5h-16.9c-0.9 0-1.5-0.6-1.5-1.5v-99z"/>
+</g>
+</svg>
diff --git a/gui/src/renderer/components/ErrorBoundary.tsx b/gui/src/renderer/components/ErrorBoundary.tsx
index 1456612847..d29c029c93 100644
--- a/gui/src/renderer/components/ErrorBoundary.tsx
+++ b/gui/src/renderer/components/ErrorBoundary.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
-import { colors, supportEmail } from '../../config.json';
+import { supportEmail } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import PlatformWindowContainer from '../containers/PlatformWindowContainer';
-import { sourceSansPro } from './common-styles';
-import ImageView from './ImageView';
-import { Container, Layout } from './Layout';
+import ErrorView from './ErrorView';
 
 interface IProps {
   children?: React.ReactNode;
@@ -16,39 +14,10 @@ interface IState {
   hasError: boolean;
 }
 
-const StyledContainer = styled(Container)({
-  flex: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: colors.blue,
-});
-
-const Title = styled.h1({
-  ...sourceSansPro,
-  fontSize: '26px',
-  lineHeight: '30px',
-  color: colors.white60,
-  marginBottom: '4px',
-});
-
-const Subtitle = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '14px',
-  lineHeight: '20px',
-  color: colors.white40,
-  marginHorizontal: '22px',
-  textAlign: 'center',
-});
-
 const Email = styled.span({
   fontWeight: 900,
 });
 
-const Logo = styled(ImageView)({
-  marginBottom: '5px',
-});
-
 export default class ErrorBoundary extends React.Component<IProps, IState> {
   public state = { hasError: false };
 
@@ -75,13 +44,7 @@ export default class ErrorBoundary extends React.Component<IProps, IState> {
 
       return (
         <PlatformWindowContainer>
-          <Layout>
-            <StyledContainer>
-              <Logo height={106} width={106} source="logo-icon" />
-              <Title>MULLVAD VPN</Title>
-              <Subtitle role="alert">{reachBackMessage}</Subtitle>
-            </StyledContainer>
-          </Layout>
+          <ErrorView>{reachBackMessage}</ErrorView>
         </PlatformWindowContainer>
       );
     } else {
diff --git a/gui/src/renderer/components/ErrorView.tsx b/gui/src/renderer/components/ErrorView.tsx
new file mode 100644
index 0000000000..069e646e50
--- /dev/null
+++ b/gui/src/renderer/components/ErrorView.tsx
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { colors } from '../../config.json';
+import { HeaderBarSettingsButton } from './HeaderBar';
+import ImageView from './ImageView';
+import { Container, Header, Layout } from './Layout';
+
+const StyledContainer = styled(Container)({
+  flex: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginTop: '-150px',
+});
+
+const Logo = styled(ImageView)({
+  marginBottom: '12px',
+});
+
+const Title = styled(ImageView)({
+  opacity: 0.6,
+  marginBottom: '9px',
+});
+
+const Subtitle = styled.span({
+  fontFamily: 'Open Sans',
+  fontSize: '14px',
+  lineHeight: '20px',
+  marginHorizontal: '22px',
+  color: colors.white40,
+  textAlign: 'center',
+});
+
+interface ErrorViewProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export default function ErrorView(props: ErrorViewProps) {
+  return (
+    <Layout>
+      <Header>
+        <HeaderBarSettingsButton />
+      </Header>
+      <StyledContainer>
+        <Logo height={106} width={106} source="logo-icon" />
+        <Title height={18} source="logo-text" />
+        <Subtitle role="alert">{props.children}</Subtitle>
+      </StyledContainer>
+    </Layout>
+  );
+}
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index fc30c8fbae..d9d17a4744 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -7,7 +7,6 @@ import { messages } from '../../shared/gettext';
 import { useHistory } from '../lib/history';
 import { IReduxState } from '../redux/store';
 import { FocusFallback } from './Focus';
-import { sourceSansPro } from './common-styles';
 import ImageView from './ImageView';
 import { RoutePath } from '../lib/routes';
 
@@ -71,26 +70,16 @@ const BrandContainer = styled.div({
   alignItems: 'center',
 });
 
-const Title = styled.span({
-  ...sourceSansPro,
-  fontSize: '27px',
-  lineHeight: '30px',
-  color: colors.white80,
-  marginLeft: '7px',
-  letterSpacing: '0.015em',
-  position: 'relative',
-  top: '-1px',
-});
-
-const Logo = styled(ImageView)({
-  margin: '4px 0 3px',
+const Title = styled(ImageView)({
+  opacity: 0.8,
+  marginLeft: '9px',
 });
 
 export function Brand(props: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <BrandContainer {...props}>
-      <Logo width={44} height={44} source="logo-icon" />
-      <Title>MULLVAD VPN</Title>
+      <ImageView width={44} height={44} source="logo-icon" />
+      <Title height={18} source="logo-text" />
     </BrandContainer>
   );
 }
diff --git a/gui/src/renderer/components/Launch.tsx b/gui/src/renderer/components/Launch.tsx
index 96bdb7709e..a3145b8e16 100644
--- a/gui/src/renderer/components/Launch.tsx
+++ b/gui/src/renderer/components/Launch.tsx
@@ -1,53 +1,10 @@
-import styled from 'styled-components';
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
-import { sourceSansPro } from './common-styles';
-import { HeaderBarSettingsButton } from './HeaderBar';
-import ImageView from './ImageView';
-import { Container, Header, Layout } from './Layout';
-
-const StyledContainer = styled(Container)({
-  flex: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginTop: '-150px',
-});
-
-const Title = styled.h1({
-  ...sourceSansPro,
-  fontSize: '26px',
-  lineHeight: '30px',
-  color: colors.white60,
-  marginBottom: '4px',
-});
-
-const Subtitle = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '14px',
-  lineHeight: '20px',
-  marginHorizontal: '22px',
-  color: colors.white40,
-  textAlign: 'center',
-});
-
-const Logo = styled(ImageView)({
-  marginBottom: '5px',
-});
+import ErrorView from './ErrorView';
 
 export default function Launch() {
   return (
-    <Layout>
-      <Header>
-        <HeaderBarSettingsButton />
-      </Header>
-      <StyledContainer>
-        <Logo height={106} width={106} source="logo-icon" />
-        <Title>MULLVAD VPN</Title>
-        <Subtitle role="alert">
-          {messages.pgettext('launch-view', 'Connecting to Mullvad system service...')}
-        </Subtitle>
-      </StyledContainer>
-    </Layout>
+    <ErrorView>
+      {messages.pgettext('launch-view', 'Connecting to Mullvad system service...')}
+    </ErrorView>
   );
 }