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

ui: onboarding fixes

Browse source
This commit is contained in:
nick-delirium 2025-03-21 10:43:51 +01:00 • committed by Delirium
parent deb78a62c0
commit de344e62ef
4 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/components/Onboarding/Onboarding.tsx
View file

@ -1,16 +1,14 @@
import React from 'react'; import React from 'react';
import { Redirect, Route, RouteComponentProps, Switch } from 'react-router'; import { Redirect, Route, RouteComponentProps, Switch } from 'react-router';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { OB_TABS, onboarding as onboardingRoute, withSiteId } from 'App/routes'; import { OB_TABS, onboarding as onboardingRoute, withSiteId } from 'App/routes';
import { Icon } from 'UI';
import IdentifyUsersTab from './components/IdentifyUsersTab'; import IdentifyUsersTab from './components/IdentifyUsersTab';
import InstallOpenReplayTab from './components/InstallOpenReplayTab'; import InstallOpenReplayTab from './components/InstallOpenReplayTab';
import IntegrationsTab from './components/IntegrationsTab'; import IntegrationsTab from './components/IntegrationsTab';
import ManageUsersTab from './components/ManageUsersTab'; import ManageUsersTab from './components/ManageUsersTab';
import SideMenu from './components/SideMenu'; import SideMenu from './components/SideMenu';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Smartphone, AppWindow } from 'lucide-react';
interface Props { interface Props {
match: { match: {
@ -33,7 +31,7 @@ function Onboarding(props: Props) {
{ {
label: ( label: (
<div className="font-semibold flex gap-2 items-center"> <div className="font-semibold flex gap-2 items-center">
<Icon name="browser/browser" size={16} /> <AppWindow size={16} />
&nbsp;{t('Web')} &nbsp;{t('Web')}
</div> </div>
), ),
@ -42,7 +40,7 @@ function Onboarding(props: Props) {
{ {
label: ( label: (
<div className="font-semibold flex gap-2 items-center"> <div className="font-semibold flex gap-2 items-center">
<Icon name="mobile" size={16} /> <Smartphone size={16} />
&nbsp;{t('Mobile')} &nbsp;{t('Mobile')}
</div> </div>
), ),

8
frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx
View file

@ -130,18 +130,20 @@ function IdentifyUsersTab(props: Props) {
'To identify users through metadata, you will have to explicitly specify your user metadata so it can be injected during sessions. Follow the below steps', 'To identify users through metadata, you will have to explicitly specify your user metadata so it can be injected during sessions. Follow the below steps',
)} )}
</p> </p>
<div className="flex items-start"> <div className="flex items-center gap-2 mb-2">
<CircleNumber text="1" /> <CircleNumber text="1" />
<MetadataList /> <MetadataList />
</div> </div>
<div className="my-6" /> <div className="my-6" />
<div className="flex items-start"> <div className="flex items-start">
<CircleNumber text="2" /> <div>
<div className="pt-1 w-full"> <CircleNumber text="2" />
<span className="font-bold"> <span className="font-bold">
{t('Inject metadata when recording sessions')} {t('Inject metadata when recording sessions')}
</span> </span>
</div>
<div className="pt-1 w-full">
<div className="my-2"> <div className="my-2">
{t('Use the')}&nbsp; {t('Use the')}&nbsp;
<span className="highlight-blue">setMetadata</span>{' '} <span className="highlight-blue">setMetadata</span>{' '}

18
frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx
View file

@ -55,16 +55,14 @@ function MetadataList() {
<Button type="default" onClick={() => openModal()}> <Button type="default" onClick={() => openModal()}>
{t('Add Metadata')} {t('Add Metadata')}
</Button> </Button>
<div className="flex ml-2"> {fields.map((f, index) => (
{fields.map((f, index) => ( <TagBadge
<TagBadge key={index}
key={index} text={f.key}
text={f.key} onRemove={() => removeMetadata(f)}
onRemove={() => removeMetadata(f)} outline
outline />
/> ))}
))}
</div>
</div> </div>
); );
} }

2
frontend/app/components/ui/Input/Input.tsx
View file

@ -31,7 +31,7 @@ const Input = React.forwardRef((props: Props, ref: any) => {
{icon && ( {icon && (
<Icon <Icon
name={icon} name={icon}
className="absolute top-0 bottom-0 my-auto ml-4" className="absolute top-0 bottom-0 my-auto ml-4 z-10"
size="14" size="14"
/> />
)} )}