Refactor error views and use svg logo text

3 files changed, 57 insertions, 87 deletions

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/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>
   );
 }