smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Added edit button while shuffling themes

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-07 15:20:38 -06:00
parent c154b52c87
commit 19bc303f15
1 changed files with 71 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/settings/components/ThemeCard.tsx
View File

@@ -12,7 +12,8 @@ function ThemeCard({
allThemes, allThemes,
}: any) { }: any) {
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const [shift, setShift] = useState<number>(0); const [shiftEdit, setShiftEdit] = useState<number>(0);
const [shiftShuffle, setShiftShuffle] = useState<number>(0);
const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks(); const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
return ( return (
@@ -145,28 +146,65 @@ function ThemeCard({
</Group> </Group>
</Button> </Button>
{currentTheme === 'random' && cardTheme.name === theme.name ? ( {currentTheme === 'random' && cardTheme.name === theme.name ? (
<Group>
<Group <Group
onMouseEnter={() => { onMouseEnter={() => {
setShift(2); setShiftEdit(2);
}} }}
onMouseLeave={() => { onMouseLeave={() => {
setShift(0); setShiftEdit(0);
}} }}
onClick={() => { onClick={() => {
setShift(0); setShiftEdit(0);
}}
gap={0}
style={{
zIndex: 300,
position: 'absolute',
left: 0,
top: 27 - shiftEdit,
backgroundColor: shiftEdit === 0 ? 'white' : 'var(--color-background)',
borderRadius: '50%',
padding: '8px',
margin: '4px',
border: 'solid 2px',
borderColor: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)',
transition: 'all 0.2s',
}}
>
<FiEdit
onClick={() => {
handleOpen(cardTheme);
}}
style={{
fontSize: '2em',
fontWeight: 'bold',
color: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)',
}}
/>
</Group>
<Group
onMouseEnter={() => {
setShiftShuffle(2);
}}
onMouseLeave={() => {
setShiftShuffle(0);
}}
onClick={() => {
setShiftShuffle(0);
}} }}
gap={0} gap={0}
style={{ style={{
zIndex: 300, zIndex: 300,
position: 'absolute', position: 'absolute',
right: 0, right: 0,
top: 27 - shift, top: 27 - shiftShuffle,
backgroundColor: shift === 0 ? 'white' : 'var(--color-background)', backgroundColor: shiftShuffle === 0 ? 'white' : 'var(--color-background)',
borderRadius: '50%', borderRadius: '50%',
padding: '8px', padding: '8px',
margin: '4px', margin: '4px',
border: 'solid 2px', border: 'solid 2px',
borderColor: shift === 0 ? 'black' : 'var(--color-text-pri)', borderColor: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
transition: 'all 0.2s', transition: 'all 0.2s',
}} }}
> >
@@ -177,10 +215,11 @@ function ThemeCard({
style={{ style={{
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
color: shift === 0 ? 'black' : 'var(--color-text-pri)', color: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
}} }}
/> />
</Group> </Group>
</Group>
) : ( ) : (
<Stack <Stack
gap={0} gap={0}