fix: inline styles

client/src/app/onboarding/onboarding.module.scss

@@ -0,0 +1,3 @@
+.spacer {
+  margin-bottom: 32px;
+}

client/src/app/onboarding/page.tsx

@@ -3,14 +3,17 @@
 import { Flex } from '@/shared/ui';
 import { ProgressSection } from '@/app/onboarding/ui/progress-section/progress-section';
 import { ActionSection } from '@/app/onboarding/ui/action-section/action-section';
+import styles from './onboarding.module.scss';
 
 const OnboardingPage = () => {
   return (
     <Flex width={'100vw'} height={'100dvh'}>
       <ProgressSection>
-        <Flex style={{ flex: 1, flexDirection: 'column' }}>
-          <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>Image</div>
-          <div style={{ marginBottom: '32px' }}>Description</div>
+        <Flex direction='column' flex={1}>
+          <Flex align='center' flex={1}>
+            Image
+          </Flex>
+          <div className={styles.spacer}>Description</div>
         </Flex>
       </ProgressSection>
       <ActionSection stepTitle={'Step Title'}>ActionSection</ActionSection>

client/src/app/onboarding/ui/action-section/action-section.tsx

@@ -2,7 +2,7 @@ import { Button, Flex, Typography } from '@/shared/ui';
 import { ReactNode } from 'react';
 import { ArrowLeft, ArrowRight } from '@/shared/assets';
 import styles from './action-section.module.scss';
-import { NeedHelp } from '../../../../shared/ui/need-help';
+import { NeedHelp } from '@/shared/ui/need-help';
 
 interface ActionSectionProps {
   children: ReactNode;
@@ -18,11 +18,11 @@ export const ActionSection = ({ children, stepTitle }: ActionSectionProps) => {
         </Typography>
         <NeedHelp />
       </Flex>
-      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Flex flex={1} align='center' justify='center'>
         {children}
-      </div>
+      </Flex>
       <Flex justify={'space-between'}>
-        <Button className={styles.button} typeBtn={'secondary'}>
+        <Button className={styles.button} typeBtn='secondary'>
           <ArrowLeft />
           Back
         </Button>

client/src/shared/ui/flex/flex.tsx

@@ -68,6 +68,8 @@ export interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
    * props.className - Additional classnames you want to add to flex if needed
    */
   className?: string;
+
+  flex?: string | number | undefined;
 }
 
 /**
@@ -114,6 +116,7 @@ export const Flex: React.FC<FlexProps> = props => {
     shrink,
     children,
     className,
+    flex,
     ...rest
   } = props;
 
@@ -131,6 +134,7 @@ export const Flex: React.FC<FlexProps> = props => {
     flexWrap: wrap,
     height: height,
     flexShrink: shrink,
+    flex: flex,
   } as React.CSSProperties;
 
   return (