Merge branch 'create-dot-component-des-1896'

2 files changed, 33 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx
new file mode 100644
index 0000000000..b042de86c6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+import { Colors } from '../../foundations';
+
+export interface DotProps {
+  variant?: 'primary' | 'success' | 'warning' | 'error';
+  size?: 'tiny' | 'small' | 'medium';
+}
+
+const StyledDiv = styled.div<{ $size: string; $color: string }>`
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  border-radius: 50%;
+  background-color: ${({ $color }) => $color};
+`;
+
+const sizes = {
+  tiny: '8px',
+  small: '10px',
+  medium: '12px',
+};
+
+const colors = {
+  primary: Colors.white80,
+  success: Colors.green,
+  warning: Colors.yellow,
+  error: Colors.red,
+};
+
+export const Dot = ({ variant = 'primary', size = 'medium', ...props }: DotProps) => {
+  return <StyledDiv $size={sizes[size]} $color={colors[variant]} {...props} />;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/index.ts
new file mode 100644
index 0000000000..924823940f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/index.ts
@@ -0,0 +1 @@
+export * from './Dot';