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

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

@@ -12,7 +12,8 @@ function ThemeCard({
allThemes,
}: any) {
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();
return (
@@ -145,41 +146,79 @@ function ThemeCard({
</Group>
</Button>
{currentTheme === 'random' && cardTheme.name === theme.name ? (
<Group
onMouseEnter={() => {
setShift(2);
}}
onMouseLeave={() => {
setShift(0);
}}
onClick={() => {
setShift(0);
}}
gap={0}
style={{
zIndex: 300,
position: 'absolute',
right: 0,
top: 27 - shift,
backgroundColor: shift === 0 ? 'white' : 'var(--color-background)',
borderRadius: '50%',
padding: '8px',
margin: '4px',
border: 'solid 2px',
borderColor: shift === 0 ? 'black' : 'var(--color-text-pri)',
transition: 'all 0.2s',
}}
>
<FiShuffle
<Group>
<Group
onMouseEnter={() => {
setShiftEdit(2);
}}
onMouseLeave={() => {
setShiftEdit(0);
}}
onClick={() => {
handleThemeChange(allThemes, false);
setShiftEdit(0);
}}
gap={0}
style={{
fontSize: '2em',
fontWeight: 'bold',
color: shift === 0 ? 'black' : 'var(--color-text-pri)',
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}
style={{
zIndex: 300,
position: 'absolute',
right: 0,
top: 27 - shiftShuffle,
backgroundColor: shiftShuffle === 0 ? 'white' : 'var(--color-background)',
borderRadius: '50%',
padding: '8px',
margin: '4px',
border: 'solid 2px',
borderColor: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
transition: 'all 0.2s',
}}
>
<FiShuffle
onClick={() => {
handleThemeChange(allThemes, false);
}}
style={{
fontSize: '2em',
fontWeight: 'bold',
color: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
}}
/>
</Group>
</Group>
) : (
<Stack