Use real logo text in header bar

1 files changed, 5 insertions, 16 deletions

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