[GH-24843]: Fix customize_your_experience overlay position (#25053)

* fix: customize_your_experience tour point position

* fix: overlayPunchOut position

* fix: styling

* fix: styling

* fix: semi-colon typo

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Umar Abid 2023-11-10 19:01:02 +05:00 committed by GitHub
parent 7d92e71daf
commit 8e84adb176
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 4 deletions

View File

@ -40,6 +40,16 @@ const RightControlsContainer = styled.div`
}
`;
const StyledCustomizeYourExperienceTour = styled.div`
display: flex;
align-items: center;
height: 100%
`;
const StyledStatusDropdown = styled.div`
margin-left: 8px;
`;
export type Props = {
productId?: ProductIdentifier;
}
@ -60,8 +70,6 @@ const RightControls = ({productId = null}: Props): JSX.Element => {
<>
<AtMentionsButton/>
<SavedPostsButton/>
<SettingsButton/>
{showCustomizeTip && <CustomizeYourExperienceTour/>}
</>
) : (
<Pluggable
@ -70,7 +78,19 @@ const RightControls = ({productId = null}: Props): JSX.Element => {
pluggableId={productId}
/>
)}
<StatusDropdown/>
<StyledCustomizeYourExperienceTour id='CustomizeYourExperienceTour'>
{
isChannels(productId) ? (
<>
<SettingsButton/>
{showCustomizeTip && <CustomizeYourExperienceTour/>}
</>
) : null
}
<StyledStatusDropdown>
<StatusDropdown/>
</StyledStatusDropdown>
</StyledCustomizeYourExperienceTour>
</RightControlsContainer>
);
};

View File

@ -29,7 +29,7 @@ export const CustomizeYourExperienceTour = () => {
</p>
);
const overlayPunchOut = useMeasurePunchouts(['RightControlsContainer'], [], {y: 6, height: -6, x: 64, width: 0});
const overlayPunchOut = useMeasurePunchouts(['CustomizeYourExperienceTour'], []);
return (
<OnboardingTourTip