jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix styling for guide popup

Browse source
This commit is contained in:
sylenien 2022-11-25 15:17:16 +01:00
parent 293aa4e1f9
commit 8579231f48
4 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
View file

@ -50,7 +50,7 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
>
<div className="rounded-3xl px-4 bg-gray-lightest relative z-10">{ind + 1}</div>
<div className="w-full">
<div className="flex items-center w-full gap-2">
<div className="flex items-start w-full gap-2">
<div className="px-1 text-disabled-text">{durationFromMs(step.time)}</div>
{/* @ts-ignore */}
<Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10" />

6
frontend/app/components/Session_/components/NotePopup.tsx
View file

@ -26,11 +26,7 @@ function NotePopup({
return (
<GuidePopup
title={
<div className="color-gray-dark">
Introducing <span className={''}>Notes</span>
</div>
}
title="Introducing Notes"
description={'Annotate session replays and share your feedback with the rest of your team.'}
>
<Button icon="quotes" variant="text" disabled={tooltipActive} onClick={toggleNotePopup}>

12
frontend/app/components/shared/GuidePopup/GuidePopup.tsx
View file

@ -38,13 +38,13 @@ export default function GuidePopup({ children, title, description }: IProps) {
style={{ zIndex: INDEXES.POPUP_GUIDE_BG, opacity: '0.7' }}
></div>
<Tooltip
offset={30}
offset={20}
className="!bg-white rounded text-center shadow !p-6"
title={
<div className="relative">
<div className="font-bold">{title}</div>
<div className="color-gray-medium w-80">{description}</div>
<div className="w-10 h-10 bg-white rotate-45 absolute right-0 left-0 m-auto" style={{ top: '-38px'}} />
<div className="font-bold text-figmaColors-text-primary">{title}</div>
<div className="color-gray-dark w-80">{description}</div>
<div className="w-4 h-4 bg-white rotate-45 absolute right-0 left-0 m-auto" style={{ top: '-28px'}} />
</div>
}
open={true}
@ -67,6 +67,8 @@ export default function GuidePopup({ children, title, description }: IProps) {
</Tooltip>
</div>
) : (
children
<>
{children}
</>
);
}

5
frontend/app/components/shared/XRayButton/XRayButton.tsx
View file

@ -12,7 +12,10 @@ interface Props {
}
function XRayButton(props: Props) {
const { isActive } = props;
const [showGuide, setShowGuide] = useState(!localStorage.getItem(FEATURE_KEYS.XRAY));
// const [showGuide, setShowGuide] = useState(!localStorage.getItem(FEATURE_KEYS.XRAY));
const showGuide = false;
const setShowGuide = (anyt: any) => anyt;
useEffect(() => {
if (!showGuide) {
return;