diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss
index 6e3bcaed..6c943b99 100644
--- a/src/components/OnboardingMenu/OnboardingMenu.scss
+++ b/src/components/OnboardingMenu/OnboardingMenu.scss
@@ -1,9 +1,7 @@
@use '../variables.scss';
@use '@gravity-ui/uikit/styles/mixins';
-$block: '.#{variables.$ns}guide';
-
-$layer-popup: 1000;
+$block: '.#{variables.$ns}onboarding-menu';
#{$block} {
max-width: 280px;
@@ -12,7 +10,7 @@ $layer-popup: 1000;
width: fit-content;
&__content {
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
+ box-shadow: 0 2px 8px 0 var(--g-color-sfx-shadow-light);
display: flex;
flex-direction: column;
overflow: hidden;
@@ -31,19 +29,6 @@ $layer-popup: 1000;
}
}
- &__title-text {
- color: var(--g-color-text-brand-contrast);
- @include mixins.text-subheader-2();
-
- overflow: hidden;
- text-overflow: ellipsis;
- text-wrap: nowrap;
-
- &_expand {
- @include mixins.text-subheader-3();
- }
- }
-
&__title {
display: flex;
align-items: center;
@@ -51,7 +36,6 @@ $layer-popup: 1000;
margin-block-end: var(--g-spacing-1);
- color: var(--g-color-text-light-primary);
background: none;
border: none;
cursor: pointer;
@@ -59,15 +43,21 @@ $layer-popup: 1000;
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);
- color: var(--g-color-text-brand-contrast);
}
&__header {
diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx
index 55df8edc..70ed6be0 100644
--- a/src/components/OnboardingMenu/OnboardingMenu.tsx
+++ b/src/components/OnboardingMenu/OnboardingMenu.tsx
@@ -8,7 +8,7 @@ import i18n from './i18n';
import './OnboardingMenu.scss';
-const cnOnboardingMenu = block('guide');
+const cnOnboardingMenu = block('onboarding-menu');
export type OnboardingMenuProps = {
title: React.ReactNode;
@@ -23,8 +23,8 @@ export type OnboardingMenuProps = {
className?: string;
onExpand?: (expanded: boolean) => void;
- onCompleteClick: () => void;
- onRollUpClick?: (event: React.MouseEvent) => void;
+ onCompleteClick: (event: React.MouseEvent) => void;
+ onCollapseClick?: (event: React.MouseEvent) => void;
};
export const OnboardingMenu = ({
@@ -33,7 +33,7 @@ export const OnboardingMenu = ({
icon,
defaultExpanded,
onExpand,
- onRollUpClick,
+ onCollapseClick,
onCompleteClick,
collapseButtonText,
completeButtonText,
@@ -51,12 +51,12 @@ export const OnboardingMenu = ({
}
};
- const onRollUpClickCallback = (event: React.MouseEvent) => {
+ const onCollapseClickCallback = (event: React.MouseEvent) => {
const newExpand = !expand;
setExpand(newExpand);
- if (onRollUpClick) {
- onRollUpClick(event);
+ if (onCollapseClick) {
+ onCollapseClick(event);
}
if (onExpand) {
onExpand(newExpand);
@@ -81,9 +81,10 @@ export const OnboardingMenu = ({
/>
) : null}
-
+ {/*
{title}
-
+ */}
+ {title}