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

Various minor improvments (#2516)

Browse source 
* Various improvements

Icon updates in side menu and Spot List page

* Drag Controls

* Title changes

* Title updates and removed comments from code.

* Update SpotVideoContainer.tsx
This commit is contained in:
Sudheer Salavadi 2024-09-02 13:33:16 +05:30 • committed by GitHub
parent b6bbc12698
commit 651e899c53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 153 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/assets/img/replay.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9962 2.00001L12 2C13.9778 2.00001 15.9112 2.5865 17.5557 3.68531C19.2002 4.78412 20.4819 6.34591 21.2388 8.17317C21.9957 10.0004 22.1937 12.0111 21.8079 13.9509C21.422 15.8907 20.4696 17.6725 19.0711 19.0711C17.6725 20.4696 15.8907 21.422 13.9509 21.8079C12.0111 22.1937 10.0004 21.9957 8.17317 21.2388C6.3459 20.4819 4.78412 19.2002 3.6853 17.5557C2.58649 15.9112 2 13.9778 2 12C2 11.4477 2.44772 11 3 11C3.55228 11 4 11.4477 4 12C4 13.5823 4.46919 15.129 5.34824 16.4446C6.22729 17.7602 7.47672 18.7855 8.93853 19.391C10.4003 19.9965 12.0089 20.155 13.5607 19.8463C15.1126 19.5376 16.538 18.7757 17.6569 17.6569C18.7757 16.538 19.5376 15.1126 19.8463 13.5607C20.155 12.0089 19.9965 10.4003 19.391 8.93854C18.7855 7.47673 17.7602 6.2273 16.4446 5.34825C15.1295 4.46955 13.5835 4.00038 12.0019 4.00001C9.7473 4.00897 7.58329 4.88786 5.96097 6.45325L5.41421 7.00001H7C7.55228 7.00001 8 7.44772 8 8.00001C8 8.55229 7.55228 9.00001 7 9.00001H3C2.86441 9.00001 2.73512 8.97302 2.61722 8.92413C2.50014 8.87569 2.3904 8.80406 2.29502 8.70923C2.2936 8.70782 2.29219 8.70641 2.29078 8.70499C2.11106 8.5242 2 8.27507 2 8.00001V7.99983V3.00001C2 2.44772 2.44772 2.00001 3 2.00001C3.55228 2.00001 4 2.44772 4 3.00001V5.58579L4.55289 5.0329L4.56496 5.02104C6.55946 3.0929 9.22213 2.01045 11.9962 2.00001ZM10.0208 7.41526C10.3419 7.23997 10.733 7.25398 11.0408 7.4518L16.8072 11.1588C17.0934 11.3428 17.2664 11.6597 17.2664 11.9999C17.2664 12.3402 17.0934 12.6571 16.8072 12.8411L11.0408 16.5481C10.733 16.7459 10.3419 16.7599 10.0208 16.5846C9.69974 16.4093 9.5 16.0727 9.5 15.7069V8.29298C9.5 7.92717 9.69974 7.59055 10.0208 7.41526ZM11.5 13.8753L14.4171 11.9999L11.5 10.1246V13.8753Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

7
frontend/app/components/Spots/SpotPlayer/SpotPlayer.tsx
View file

@ -170,12 +170,9 @@ function SpotPlayer({ loggedIn }: { loggedIn: boolean }) {
className="orSpotBranding flex gap-1 items-center"
size="large"
>
<Icon name={'orSpot'} size={28} />
<img src={'/assets/openreplay.svg'} width={40} alt='OpenReplay Spot' />
<div className="flex flex-row gap-2 items-center text-start">
<div className={'text-3xl font-semibold '}>Spot</div>
<div className={'text-disabled-text text-xs mt-3'}>
by OpenReplay
</div>
<div className={'text-3xl font-semibold '}>OpenReplay Spot</div>
</div>
</Button>
</a>

47
frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx
View file

@ -1,6 +1,8 @@
import Hls from 'hls.js';
import { observer } from 'mobx-react-lite';
import React from 'react';
import {Alert, Button} from 'antd';
import {PlayCircleOutlined, InfoCircleOutlined} from '@ant-design/icons';
import { useStore } from 'App/mstore';
@ -170,24 +172,41 @@ function SpotVideoContainer({
}
}, [spotPlayerStore.playbackRate]);
const warnText = isProcessing ? 'You’re viewing the entire recording. The trimmed Spot is on its way.' : 'Your trimmed Spot is ready! Please reload the page.'
const reloadPage = () => { window.location.reload(); };
return (
<>
{isProcessing || prevIsProcessing
? <div
className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between"
style={{
zIndex: 999,
position: 'absolute',
left: '50%',
top: '-24px',
transform: 'translate(-50%, 0)',
fontWeight: 500
}}
<div className="absolute z-20 left-2/4 -top-6" style={{ transform: 'translate(-50%, 0)' }}>
{isProcessing ? (
<Alert
className='trimIsProcessing rounded-lg shadow-sm border-indigo-500 bg-indigo-50'
message="You’re viewing the entire recording. The trimmed Spot is on its way."
showIcon
type="info"
closable
icon={<InfoCircleOutlined style={{ color: '#394dfe' }} />}
/>
) : prevIsProcessing ? (
<Alert
className='trimIsReady rounded-lg shadow-sm border-0'
message="Your trimmed Spot is ready!"
showIcon
type="success"
action={
<Button
size="small"
type="text"
icon={<PlayCircleOutlined />}
onClick={reloadPage}
>
{warnText}
Play Now
</Button>
}
/>
) : null}
</div>
: null}
{!isLoaded && (
<div className="relative w-full h-full flex flex-col items-center justify-center bg-white/50">
<img

1
frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
View file

@ -46,7 +46,6 @@ const SpotsListHeader = observer(
return (
<div className={'flex items-center justify-between w-full'}>
<div className="flex gap-1 items-center">
<Icon name={'orSpot'} size={24} />
<h1 className={'text-2xl capitalize mr-2'}>Spot List</h1>
</div>

2
frontend/app/components/Spots/SpotsList/index.tsx
View file

@ -78,7 +78,7 @@ function SpotsList() {
<div className={'relative w-full mx-auto'} style={{ maxWidth: 1360 }}>
<div
className={
'flex mx-auto p-2 px-4 bg-white rounded-t-lg shadow-sm w-full z-50 border-b'
'flex mx-auto p-2 px-4 bg-white rounded-lg shadow-sm w-full z-50 border-b'
}
>
<SpotsListHeader

2
frontend/app/components/ui/Icons/index.ts
View file

@ -368,7 +368,9 @@ export { default as No_dashboard } from './no_dashboard';
export { default as No_metrics_chart } from './no_metrics_chart';
export { default as No_metrics } from './no_metrics';
export { default as No_recordings } from './no_recordings';
export { default as Oricn } from './orIcn';
export { default as Orspot } from './orSpot';
export { default as Orspotoutline } from './orspotOutline';
export { default as Os_android } from './os_android';
export { default as Os_chrome_os } from './os_chrome_os';
export { default as Os_fedora } from './os_fedora';

19
frontend/app/components/ui/Icons/orIcn.tsx Normal file
View file

@ -0,0 +1,19 @@
/* Auto-generated, do not edit */
import React from 'react';
interface Props {
size?: number | string;
width?: number | string;
height?: number | string;
fill?: string;
}
function Oricn(props: Props) {
const { size = 14, width = size, height = size, fill = '' } = props;
return (
<svg viewBox="0 0 24 24" fill="none" width={ `${ width }px` } height={ `${ height }px` } ><g><path d="M3.313 22.657V1.937L21.38 12.213 3.312 22.657Z" fill="#fff"/><path d="M19.657 11.982 4.376 3.014V20.95l15.281-8.968Zm2.085-1.854a2.14 2.14 0 0 1 1.063 1.854 2.14 2.14 0 0 1-1.063 1.854L4.99 23.67c-1.369.804-3.246-.115-3.246-1.854V2.148C1.743.408 3.62-.51 4.99.294l16.753 9.834Z" fill="#122AF5"/><path d="M13.36 11.488a.57.57 0 0 1 0 .988L8.843 15.1c-.369.214-.875-.03-.875-.495V9.36c0-.464.506-.71.875-.495l4.519 2.623Z" fill="#3EAAAF"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
);
}
export default Oricn;

19
frontend/app/components/ui/Icons/orspotOutline.tsx Normal file
View file

@ -0,0 +1,19 @@
/* Auto-generated, do not edit */
import React from 'react';
interface Props {
size?: number | string;
width?: number | string;
height?: number | string;
fill?: string;
}
function Orspotoutline(props: Props) {
const { size = 14, width = size, height = size, fill = '' } = props;
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
);
}
export default Orspotoutline;

10
frontend/app/components/ui/SVG.tsx
View file

File diff suppressed because one or more lines are too long

2
frontend/app/layout/SideMenu.tsx
View file

@ -268,7 +268,7 @@ function SideMenu(props: Props) {
/>
}
style={{ paddingLeft: '20px' }}
className={cn('!rounded-lg hover-fill-teal !pe-0')}
className={cn('!rounded-lg !pe-0')}
itemIcon={
item.leading ? (
<Icon

2
frontend/app/layout/data.ts
View file

@ -72,7 +72,7 @@ export const categories: Category[] = [
title: '',
key: 'spot',
items: [
{ label: 'Spots', key: MENU.SPOTS, icon: 'orSpot' },
{ label: 'Spot', key: MENU.SPOTS, icon: 'orspotOutline' },
]
},
{

12
frontend/app/svg/icons/orIcn.svg Normal file
View file

@ -0,0 +1,12 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_41_19)">
<path d="M3.3125 22.6568V1.93646L21.3807 12.2138L3.3125 22.6568Z" fill="white"/>
<path d="M19.6572 11.9819L4.37603 3.01376V20.9501L19.6572 11.9819ZM21.7424 10.1281C22.3994 10.5087 22.8048 11.216 22.8048 11.9819C22.8048 12.7479 22.3994 13.4552 21.7424 13.8358L4.98948 23.6696C3.62039 24.474 1.74316 23.555 1.74316 21.8158V2.14811C1.74316 0.408813 3.62039 -0.510111 4.98948 0.294281L21.7424 10.1281Z" fill="#122AF5"/>
<path d="M13.3606 11.4876C13.5378 11.5891 13.6471 11.7777 13.6471 11.9819C13.6471 12.1862 13.5378 12.3748 13.3606 12.4763L8.84233 15.0986C8.47309 15.3131 7.9668 15.0681 7.9668 14.6043V9.35957C7.9668 8.89576 8.47309 8.65071 8.84233 8.86522L13.3606 11.4876Z" fill="#3EAAAF"/>
</g>
<defs>
<clipPath id="clip0_41_19">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 931 B

26
frontend/app/svg/icons/orSpot.svg
View file

@ -1,22 +1,12 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g id="orSpot">
<path id="Vector 3" d="M3.3125 22.6568V1.93646L21.3807 12.2138L3.3125 22.6568Z" fill="white"/>
<path id="Combined-Shape" d="M19.6572 11.9819L4.37603 3.01376V20.9501L19.6572 11.9819ZM21.7424 10.1281C22.3994 10.5087 22.8048 11.216 22.8048 11.9819C22.8048 12.7479 22.3994 13.4552 21.7424 13.8358L4.98948 23.6696C3.62039 24.474 1.74316 23.555 1.74316 21.8158V2.14811C1.74316 0.408813 3.62039 -0.510111 4.98948 0.294281L21.7424 10.1281Z" fill="#122AF5"/>
<path id="Path-Copy" d="M13.3606 11.4876C13.5378 11.5891 13.6471 11.7777 13.6471 11.9819C13.6471 12.1862 13.5378 12.3748 13.3606 12.4763L8.84233 15.0986C8.47309 15.3131 7.9668 15.0681 7.9668 14.6043V9.35957C7.9668 8.89576 8.47309 8.65071 8.84233 8.86522L13.3606 11.4876Z" fill="#3EAAAF"/>
<g id="Ellipse 4" filter="url(#filter0_d_239_4096)">
<ellipse cx="13.9645" cy="5.62884" rx="3.1579" ry="3.15789" fill="#CC0000"/>
<ellipse cx="13.9645" cy="5.62884" rx="3.1579" ry="3.15789" stroke="white" stroke-width="1.50147"/>
</g>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_41_19)">
<path d="M3.3125 22.6568V1.93646L21.3807 12.2138L3.3125 22.6568Z" fill="white"/>
<path d="M19.6572 11.9819L4.37603 3.01376V20.9501L19.6572 11.9819ZM21.7424 10.1281C22.3994 10.5087 22.8048 11.216 22.8048 11.9819C22.8048 12.7479 22.3994 13.4552 21.7424 13.8358L4.98948 23.6696C3.62039 24.474 1.74316 23.555 1.74316 21.8158V2.14811C1.74316 0.408813 3.62039 -0.510111 4.98948 0.294281L21.7424 10.1281Z" fill="#122AF5"/>
<path d="M13.3606 11.4876C13.5378 11.5891 13.6471 11.7777 13.6471 11.9819C13.6471 12.1862 13.5378 12.3748 13.3606 12.4763L8.84233 15.0986C8.47309 15.3131 7.9668 15.0681 7.9668 14.6043V9.35957C7.9668 8.89576 8.47309 8.65071 8.84233 8.86522L13.3606 11.4876Z" fill="#3EAAAF"/>
</g>
<defs>
<filter id="filter0_d_239_4096" x="10.0557" y="1.72021" width="7.81738" height="9.06726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.25"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_239_4096"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_239_4096" result="shape"/>
</filter>
<clipPath id="clip0_41_19">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 931 B

1
frontend/app/svg/icons/orspotOutline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 283 B

12
spot/assets/openreplay.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 52 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group</title>
<g id="logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1" transform="translate(-107.000000, -142.000000)" fill-rule="nonzero">
<g id="Group" transform="translate(107.000000, 142.000000)">
<path d="M44.2286654,29.5 L6.50039175,7.42000842 L6.50039175,51.5799916 L44.2286654,29.5 Z M49.3769757,24.9357962 C50.9991976,25.8727671 52,27.6142173 52,29.5 C52,31.3857827 50.9991976,33.1272329 49.3769757,34.0642038 L8.01498302,58.2754687 C4.63477932,60.2559134 0,57.9934848 0,53.7112649 L0,5.2887351 C0,1.00651517 4.63477932,-1.25591343 8.01498302,0.724531317 L49.3769757,24.9357962 Z" id="outline" fill="#394EFF"></path>
<path d="M29.4155818,28.4568548 L14.7929806,20.1454193 C14.2168086,19.8179252 13.4842425,20.0195184 13.1567483,20.5956904 C13.0540138,20.7764349 13,20.9807697 13,21.188671 L13,37.8115419 C13,38.4742836 13.5372583,39.0115419 14.2,39.0115419 C14.4079013,39.0115419 14.6122361,38.9575281 14.7929806,38.8547936 L29.4155818,30.5433581 C29.9917538,30.215864 30.193347,29.4832978 29.8658528,28.9071259 C29.7590506,28.7192249 29.6034827,28.563657 29.4155818,28.4568548 Z" id="inner-play" fill="#27A2A8"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

32
spot/assets/orSpot.svg
View file

@ -1,22 +1,12 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="orSpot">
<path id="Vector 3" d="M3.3125 22.6568V1.93646L21.3807 12.2138L3.3125 22.6568Z" fill="white"/>
<path id="Combined-Shape" d="M19.6576 11.9819L4.37651 3.01376V20.9501L19.6576 11.9819ZM21.7429 10.1281C22.3999 10.5087 22.8053 11.216 22.8053 11.9819C22.8053 12.7479 22.3999 13.4552 21.7429 13.8358L4.98997 23.6696C3.62088 24.474 1.74365 23.555 1.74365 21.8158V2.14811C1.74365 0.408813 3.62088 -0.510111 4.98997 0.294281L21.7429 10.1281Z" fill="#122AF5"/>
<path id="Path-Copy" d="M13.3606 11.4876C13.5378 11.5891 13.6471 11.7777 13.6471 11.9819C13.6471 12.1862 13.5378 12.3748 13.3606 12.4763L8.84233 15.0986C8.47309 15.3131 7.9668 15.0681 7.9668 14.6043V9.35957C7.9668 8.89576 8.47309 8.65071 8.84233 8.86522L13.3606 11.4876Z" fill="#3EAAAF"/>
<g id="Ellipse 4" filter="url(#filter0_d_314_2001)">
<ellipse cx="13.9648" cy="5.62884" rx="3.1579" ry="3.15789" fill="#CC0000"/>
<ellipse cx="13.9648" cy="5.62884" rx="3.1579" ry="3.15789" stroke="white" stroke-width="1.50147"/>
</g>
</g>
<defs>
<filter id="filter0_d_314_2001" x="10.0562" y="1.72021" width="7.81714" height="9.06726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.25"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_314_2001"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_314_2001" result="shape"/>
</filter>
</defs>
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 52 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group</title>
<g id="logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1" transform="translate(-107.000000, -142.000000)" fill-rule="nonzero">
<g id="Group" transform="translate(107.000000, 142.000000)">
<path d="M44.2286654,29.5 L6.50039175,7.42000842 L6.50039175,51.5799916 L44.2286654,29.5 Z M49.3769757,24.9357962 C50.9991976,25.8727671 52,27.6142173 52,29.5 C52,31.3857827 50.9991976,33.1272329 49.3769757,34.0642038 L8.01498302,58.2754687 C4.63477932,60.2559134 0,57.9934848 0,53.7112649 L0,5.2887351 C0,1.00651517 4.63477932,-1.25591343 8.01498302,0.724531317 L49.3769757,24.9357962 Z" id="outline" fill="#394EFF"></path>
<path d="M29.4155818,28.4568548 L14.7929806,20.1454193 C14.2168086,19.8179252 13.4842425,20.0195184 13.1567483,20.5956904 C13.0540138,20.7764349 13,20.9807697 13,21.188671 L13,37.8115419 C13,38.4742836 13.5372583,39.0115419 14.2,39.0115419 C14.4079013,39.0115419 14.6122361,38.9575281 14.7929806,38.8547936 L29.4155818,30.5433581 C29.9917538,30.215864 30.193347,29.4832978 29.8658528,28.9071259 C29.7590506,28.7192249 29.6034827,28.563657 29.4155818,28.4568548 Z" id="inner-play" fill="#27A2A8"></path>
</g>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

8
spot/entrypoints/content/SavingControls.tsx
View file

@ -275,7 +275,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
id="editRecording"
class="modal save-controls"
>
<div class="modal-box bg-slate-50 p-0 max-w-[85%]">
<div class="modal-box bg-slate-50 p-0 max-w-[82%]">
<div class={"savingcontainer flex xl:flex-row flex-col"}>
{processing() ? (
<div class={"processingloader"}>
@ -322,7 +322,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
src={videoData()}
/>
</div>
<div class={"card p-1"}>
<div class={"card py-1 px-2"}>
{errorEvents().length ? (
<div class={'relative w-full h-4'}>
{errorEvents().map(e => (
@ -375,7 +375,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
<div
class="marker start"
onMouseDown={startDrag("start")}
style={{ left: `${startPos()}%` }}
style={{ left: `calc(${startPos()}% - 1.4%)` }}
>
<div class="handle"></div>
<div class="handle"></div>
@ -384,7 +384,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
class="slider-body"
// onMouseDown={startDrag("body")}
style={{
left: `calc(${startPos()}% + 3px)`,
left: `calc(${startPos()}%)`,
width: `calc(${endPos() - startPos()}% - 0px)`,
}}
/>

3
spot/entrypoints/popup/App.tsx
View file

@ -52,8 +52,7 @@ function Header({ openSettings }: { openSettings: () => void }) {
>
<img src={orLogo} class="w-5" alt={"OpenReplay Spot"} />
<div class={"text-neutral-600"}>
<span class={"text-lg font-semibold text-black"}>Spot</span>
<span class={"text-xs ml-2"}>by OpenReplay</span>
<span class={"text-lg font-semibold text-black"}>OpenReplay Spot</span>
</div>
</div>

15
spot/entrypoints/popup/Settings.tsx
View file

@ -110,8 +110,12 @@ function Settings({ goBack }: { goBack: () => void }) {
</div>
<div class="flex flex-col">
<div class="flex items-center justify-between gap-2 tooltip tooltip-bottom p-4 border-b border-slate-300 hover:bg-indigo-50">
<p class="font-normal mb-1 flex items-center">Go to Spot tab after save</p>
<div class="p-4 border-b border-slate-300 hover:bg-indigo-50">
<div class="flex flex-row justify-between items-center">
<p class="font-semibold mb-1 flex items-center">
View Recording
</p>
<label class="label cursor-pointer pr-0">
<input
type="checkbox"
@ -119,8 +123,10 @@ function Settings({ goBack }: { goBack: () => void }) {
checked={openInNewTab()}
onChange={toggleOpenInNewTab}
/>
</label>
</div>
<p class="text-xs">Go to Spot tab after saving a recording.</p>
</div>
<div class="flex flex-col border-b border-slate-300 cursor-default justify-between p-4 hover:bg-indigo-50">
@ -140,8 +146,7 @@ function Settings({ goBack }: { goBack: () => void }) {
</div>
</div>
<p class="text-xs">
Include console logs, network calls and other debugging information
for developers.
Include console logs, network calls and other debugging information in recordings for developers.
</p>
</div>

BIN
spot/public/icon/128.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
spot/public/icon/16.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 503 B

After

Width:  |  Height:  |  Size: 390 B

BIN
spot/public/icon/32.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 797 B

After

Width:  |  Height:  |  Size: 546 B

BIN
spot/public/icon/48.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 665 B

BIN
spot/public/icon/96.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1 KiB