Add logo component

2 files changed, 42 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/atoms/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/atoms/index.ts
new file mode 100644
index 0000000000..95c029cdb9
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/atoms/index.ts
@@ -0,0 +1 @@
+export * from './logo/Logo';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/atoms/logo/Logo.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/atoms/logo/Logo.tsx
new file mode 100644
index 0000000000..edc0c5aec3
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/atoms/logo/Logo.tsx
@@ -0,0 +1,41 @@
+import ImageView from '../../../../components/ImageView';
+import { Spacings } from '../../../foundations';
+import { Flex } from '../../layout';
+
+export interface LogoProps {
+  variant?: 'icon' | 'text' | 'both';
+  size?: '1' | '2';
+}
+
+const logoSizes = {
+  '1': 38,
+  '2': 106,
+};
+
+const textSizes = {
+  '1': 15.4,
+  '2': 18,
+};
+
+export const Logo = ({ variant = 'icon', size: sizeProp = '1' }: LogoProps) => {
+  switch (variant) {
+    case 'icon': {
+      const logoSize = logoSizes[sizeProp];
+      return <ImageView source="logo-icon" height={logoSize} />;
+    }
+    case 'text': {
+      const textSize = textSizes[sizeProp];
+      return <ImageView source="logo-text" height={textSize} />;
+    }
+    case 'both': {
+      const logoSize = logoSizes[sizeProp];
+      const textSize = textSizes[sizeProp];
+      return (
+        <Flex $flex={1} $alignItems="center" $gap={Spacings.spacing3}>
+          <ImageView source="logo-icon" height={logoSize} />
+          <ImageView source="logo-text" height={textSize} />
+        </Flex>
+      );
+    }
+  }
+};