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

fix ui: update bookmark icon for session subh

Browse source
This commit is contained in:
nick-delirium 2024-05-21 14:05:51 +02:00
parent fcfd55f35d
commit dacbb8aa54
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/app/components/shared/Bookmark/Bookmark.tsx
View file

@ -1,9 +1,10 @@
import { Button, Popover } from 'antd';
import { BookmarkCheck, Bookmark as BookmarkIcn, Vault } from 'lucide-react';
import React, { useEffect, useState } from 'react';
import { toggleFavorite } from 'Duck/sessions';
import { connect } from 'react-redux';
import { toast } from 'react-toastify';
import { Button, Popover } from 'antd'
import { Vault } from 'lucide-react'
import { toggleFavorite } from 'Duck/sessions';
interface Props {
toggleFavorite: (sessionId: string) => Promise<void>;
@ -15,12 +16,16 @@ interface Props {
function Bookmark(props: Props) {
const { sessionId, favorite, isEnterprise, noMargin } = props;
const [isFavorite, setIsFavorite] = useState(favorite);
const ADDED_MESSAGE = isEnterprise ? 'Session added to vault' : 'Session added to your bookmarks';
const ADDED_MESSAGE = isEnterprise
? 'Session added to vault'
: 'Session added to your bookmarks';
const REMOVED_MESSAGE = isEnterprise
? 'Session removed from vault'
: 'Session removed from your bookmarks';
const TOOLTIP_TEXT_ADD = isEnterprise ? 'Add to vault' : 'Add to bookmarks';
const TOOLTIP_TEXT_REMOVE = isEnterprise ? 'Remove from vault' : 'Remove from bookmarks';
const TOOLTIP_TEXT_REMOVE = isEnterprise
? 'Remove from vault'
: 'Remove from bookmarks';
useEffect(() => {
setIsFavorite(favorite);
@ -33,12 +38,25 @@ function Bookmark(props: Props) {
});
};
const icon = isEnterprise ? (
<Vault size={16} strokeWidth={1} />
) : isFavorite ? (
<BookmarkCheck size={16} strokeWidth={1} />
) : (
<BookmarkIcn size={16} strokeWidth={1} />
);
return (
<div onClick={toggleFavorite} className="w-full">
<Popover content={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}>
<Button type={isFavorite ? 'primary' : undefined} ghost={isFavorite} size={'small'} className={'flex items-center justify-center'}>
<Vault size={16} strokeWidth={1} />
</Button>
<Button
type={isFavorite ? 'primary' : undefined}
ghost={isFavorite}
size={'small'}
className={'flex items-center justify-center'}
>
{icon}
</Button>
</Popover>
</div>
);