Add automatic indent based on level to ListItem

4 files changed, 23 insertions, 10 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/ListItemContent.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/ListItemContent.tsx
index 6065e56871..71b9527d03 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/ListItemContent.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/ListItemContent.tsx
@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components';
 
+import { spacings } from '../../../../foundations';
 import { Flex, FlexProps } from '../../../flex';
+import { useIndent } from './hooks';
 
 const sizes = {
   full: '100%',
@@ -11,13 +13,16 @@ type Size = keyof typeof sizes;
 
 const StyledFlex = styled(Flex)<{
   $size: Size;
+  $paddingLeft: string;
 }>`
-  ${({ $size }) => {
+  ${({ $size, $paddingLeft }) => {
     const size = sizes[$size];
     return css`
       --size: ${size};
       width: var(--size);
       height: 100%;
+      padding-left: ${$paddingLeft};
+      padding-right: ${spacings.medium};
       &&:has(> :last-child:nth-child(1)) {
         &&:has(img) {
           justify-content: center;
@@ -32,15 +37,15 @@ export interface ListItemContentProps extends FlexProps {
 }
 
 export function ListItemContent({ size = 'full', ...props }: ListItemContentProps) {
+  const leftPadding = useIndent();
+
   return (
     <StyledFlex
       $size={size}
       $alignItems="center"
       $justifyContent="space-between"
       $gap="small"
-      $padding={{
-        horizontal: 'medium',
-      }}
+      $paddingLeft={leftPadding}
       {...props}
     />
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/hooks/index.ts
new file mode 100644
index 0000000000..2dafc71f24
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-indent';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/hooks/use-indent.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/hooks/use-indent.ts
new file mode 100644
index 0000000000..43225a6936
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/hooks/use-indent.ts
@@ -0,0 +1,7 @@
+import { levels } from '../../../levels';
+import { useListItem } from '../../../ListItemContext';
+
+export const useIndent = () => {
+  const { level } = useListItem();
+  return levels[level].indent;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/levels.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/levels.ts
index c3700a3761..aa9268ee83 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/levels.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/levels.ts
@@ -1,9 +1,9 @@
-import { colors } from '../../foundations';
+import { colors, spacings } from '../../foundations';
 
 export const levels = {
-  0: { enabled: colors.blue, disabled: colors.blue40 },
-  1: { enabled: colors.blue60, disabled: colors.blue40 },
-  2: { enabled: colors.blue40, disabled: colors.blue20 },
-  3: { enabled: colors.blue20, disabled: colors.blue10 },
-  4: { enabled: colors.blue10, disabled: colors.blue10 },
+  0: { enabled: colors.blue, disabled: colors.blue40, indent: spacings.medium },
+  1: { enabled: colors.blue60, disabled: colors.blue40, indent: spacings.medium },
+  2: { enabled: colors.blue40, disabled: colors.blue20, indent: spacings.big },
+  3: { enabled: colors.blue20, disabled: colors.blue10, indent: '48px' },
+  4: { enabled: colors.blue10, disabled: colors.blue10, indent: '64px' },
 } as const;