diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss
index 2d4eda43..36c2ebd1 100644
--- a/src/components/OnboardingMenu/OnboardingMenu.scss
+++ b/src/components/OnboardingMenu/OnboardingMenu.scss
@@ -16,7 +16,7 @@ $block: '.#{variables.$ns}onboarding-menu';
overflow: hidden;
box-sizing: border-box;
- width: 210px;
+ width: 230px;
background-color: var(--g-color-base-brand);
border-radius: 16px;
@@ -25,13 +25,13 @@ $block: '.#{variables.$ns}onboarding-menu';
width: 280px;
border-radius: 20px;
height: fit-content;
- min-height: 300px;
+ min-height: 600px;
}
}
&__title {
display: flex;
- align-items: center;
+ align-items: start;
justify-content: center;
margin-block-end: var(--g-spacing-1);
@@ -42,22 +42,15 @@ $block: '.#{variables.$ns}onboarding-menu';
width: 100%;
padding: 0;
-
- color: var(--g-color-text-brand-contrast);
- @include mixins.text-subheader-2();
- overflow: hidden;
- text-overflow: ellipsis;
- text-wrap: nowrap;
-
- &_expand {
- margin-block-end: var(--g-spacing-2);
- @include mixins.text-subheader-3();
- }
}
&__title-icon {
flex-shrink: 0;
- margin-inline: var(--g-spacing-2) var(--g-spacing-2);
+ margin-inline: 0 var(--g-spacing-2);
+ }
+
+ &__title-text {
+ text-align: start;
}
&__header {
@@ -70,7 +63,7 @@ $block: '.#{variables.$ns}onboarding-menu';
&__lining {
overflow-y: auto;
- max-height: 530px;
+ height: 500px;
box-sizing: border-box;
diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx
index f5034f89..6e248c33 100644
--- a/src/components/OnboardingMenu/OnboardingMenu.tsx
+++ b/src/components/OnboardingMenu/OnboardingMenu.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import {Button, Icon, IconData, Progress} from '@gravity-ui/uikit';
+import {Button, Icon, IconData, Progress, Text} from '@gravity-ui/uikit';
import {block} from '../utils/cn';
@@ -24,6 +24,7 @@ export type OnboardingMenuProps = {
collapseButtonText?: string;
completeButtonText?: string;
className?: string;
+ liningClassName?: string;
onExpand?: (expanded: boolean) => void;
onCompleteClick: (event: React.MouseEvent) => void;
@@ -41,6 +42,7 @@ const OnboardingMenuParent = ({
collapseButtonText,
completeButtonText,
className,
+ liningClassName,
children,
}: OnboardingMenuProps) => {
const onExpandCallback = () => {
@@ -79,7 +81,13 @@ const OnboardingMenuParent = ({
className={cnOnboardingMenu('title-icon')}
/>
) : null}
- {title}
+
+ {title}
+