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

fix(ui): some design fixes

Browse source
This commit is contained in:
sylenien 2022-11-04 14:34:56 +01:00
parent d8c6538ce6
commit a35f7f5862
4 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Session_/BugReport/BugReportModal.tsx
View file

@ -181,7 +181,7 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
<MetaInfo envObject={envObject} metadata={metadata} />
<Steps xrayProps={xrayProps} notes={notes} members={members} />
<Comments />
<Session user={userDisplayName} sessionId={sessionId} sessionUrl={sessionUrl} />
<Session user={userDisplayName} sessionUrl={sessionUrl} />
<div id="pdf-ignore" className="flex items-center gap-2 mt-4">
<Button icon="file-pdf" variant="primary" onClick={onGen} loading={isRendering}>
Download Bug Report

8
frontend/app/components/Session_/BugReport/components/Session.tsx
View file

@ -1,9 +1,9 @@
import React from 'react'
import SectionTitle from './SectionTitle';
import PlayLink from 'Shared/SessionItem/PlayLink';
import { Icon } from 'UI'
import { Tooltip } from 'react-tippy'
export default function Session({ user, sessionId, sessionUrl }: { user: string, sessionId: string, sessionUrl: string }) {
export default function Session({ user, sessionUrl }: { user: string, sessionUrl: string }) {
const onSessionClick = () => {
window.open(sessionUrl, '_blank').focus();
@ -14,14 +14,14 @@ export default function Session({ user, sessionId, sessionUrl }: { user: string,
<SectionTitle>Session recording</SectionTitle>
{/* @ts-ignore */}
<Tooltip title="Play session in new tab">
<div className="border hover:border-main cursor-pointer rounded flex items-center justify-between p-2" onClick={onSessionClick}>
<div className="border hover:border-main hover:bg-active-blue cursor-pointer rounded flex items-center justify-between p-2" onClick={onSessionClick}>
<div className="flex flex-col">
<div className="text-lg">{user}</div>
<div className="text-disabled-text">
{sessionUrl}
</div>
</div>
<PlayLink newTab isAssist={false} viewed={false} sessionId={sessionId} />
<Icon name="play-fill" size={38} color="teal" />
</div>
</Tooltip>
</div>

6
frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx
View file

@ -37,7 +37,7 @@ export const NetworkComp = ({ item }: { item: INetworkReq }) => (
<div>{safeStr(item.url)}</div>
</div>
<div className="flex items-center gap-2">
<div className="px-1 bg-light-blue-bg rounded-xl font-mono">{item.status}</div>
<div className="rounded bg-active-blue px-2 whitespace-nowrap overflow-hidden text-clip font-mono">{item.status}</div>
<div className={item.success ? '' : 'text-red'}>{safeStr(item.message)}</div>
</div>
</div>
@ -57,8 +57,8 @@ export const NetworkReq = observer(({ item }: { item: INetworkReq }) => {
export const NoteComp = ({ item }: { item: INoteItem }) => (
<div className="flex items-start flex-col z-10">
<div className="font-semibold">{item.title}</div>
<div className="text-secondary">{item.message}</div>
<div>{item.message}</div>
<div className="text-disabled-text text-sm">{item.title}</div>
</div>
);

12
frontend/app/components/Session_/components/HeaderMenu.tsx
View file

@ -2,6 +2,7 @@ import React from 'react';
import { Icon } from 'UI';
import styles from './menu.module.css';
import cn from 'classnames';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
interface MenuItem {
key: number;
@ -30,20 +31,22 @@ export default class ItemMenu extends React.PureComponent<Props> {
this.setState({ displayed: !this.state.displayed });
};
closeMenu = () => {
this.setState({ displayed: false })
}
render() {
const { items } = this.props;
const { displayed } = this.state;
return (
<div className={styles.wrapper}>
<OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
<div
onClick={this.toggleMenu}
className={cn(
'flex items-center cursor-pointer select-none',
'rounded p-2 hover:bg-gray-light-shade',
{
'bg-gray-light': displayed,
}
'rounded p-2', displayed ? 'bg-gray-light' : 'hover:bg-gray-light-shade'
)}
>
<div
@ -69,6 +72,7 @@ export default class ItemMenu extends React.PureComponent<Props> {
) : null
)}
</div>
</OutsideClickDetectingDiv>
</div>
);
}