Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-07-28 20:41:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Changed some colors to match our theme better.

Browse source
This commit is contained in:
SergeantPanda 2025-07-12 17:28:04 -05:00
parent 9b7aa0c894
commit 171d64841a
1 changed files with 47 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/components/forms/GroupManager.jsx
View file

@ -12,11 +12,12 @@ import {
Alert,
Divider,
ScrollArea,
useMantineTheme,
} from '@mantine/core';
import {
SquarePlus,
SquarePen,
Trash2,
SquareMinus,
Check,
X,
AlertCircle,
@ -42,6 +43,8 @@ const GroupItem = React.memo(({
canEditGroup,
canDeleteGroup
}) => {
const theme = useMantineTheme();
const getGroupBadges = (group) => {
const usage = groupUsage[group.id];
const badges = [];
@ -69,7 +72,7 @@ const GroupItem = React.memo(({
<Group justify="space-between" p="sm" style={{
border: '1px solid #e0e0e0',
borderRadius: '4px',
backgroundColor: editingGroup === group.id ? '#f8f9fa' : 'transparent'
backgroundColor: editingGroup === group.id ? '#3f3f46' : 'transparent'
}}>
<Stack gap={4} style={{ flex: 1 }}>
{editingGroup === group.id ? (
@ -103,20 +106,22 @@ const GroupItem = React.memo(({
) : (
<>
<ActionIcon
color="blue"
variant="transparent"
color={theme.tailwind.yellow[3]}
size="sm"
onClick={() => onEdit(group)}
disabled={!canEditGroup(group)}
>
<SquarePen size={14} />
<SquarePen size={18} />
</ActionIcon>
<ActionIcon
color="red"
variant="transparent"
color={theme.tailwind.red[6]}
size="sm"
onClick={() => onDelete(group)}
disabled={!canDeleteGroup(group)}
>
<Trash2 size={14} />
<SquareMinus size="18" />
</ActionIcon>
</>
)}
@ -346,9 +351,39 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
</Alert>
{/* Create new group section */}
<Stack>
<Group justify="space-between" align="center">
<Text size="sm" fw={600}>Create New Group</Text>
<Group justify="space-between">
{isCreating ? (
<Group style={{ flex: 1 }}>
<TextInput
placeholder="Enter group name"
value={newGroupName}
onChange={handleNewGroupNameChange}
style={{ flex: 1 }}
onKeyPress={(e) => e.key === 'Enter' && handleCreate()}
autoFocus
/>
<ActionIcon color="green" onClick={handleCreate}>
<Check size={16} />
</ActionIcon>
<ActionIcon color="gray" onClick={() => {
setIsCreating(false);
setNewGroupName('');
}}>
<X size={16} />
</ActionIcon>
</Group>
) : (
<Button
leftSection={<SquarePlus size={16} />}
variant="light"
size="sm"
onClick={() => setIsCreating(true)}
>
Add Group
</Button>
)}
{!isCreating && (
<Button
leftSection={<Trash size={16} />}
variant="light"
@ -359,40 +394,8 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
>
Cleanup Unused
</Button>
</Group>
<Group>
{isCreating ? (
<>
<TextInput
placeholder="Enter group name"
value={newGroupName}
onChange={handleNewGroupNameChange}
style={{ flex: 1 }}
onKeyPress={(e) => e.key === 'Enter' && handleCreate()}
autoFocus
/>
<ActionIcon color="green" onClick={handleCreate}>
<Check size={16} />
</ActionIcon>
<ActionIcon color="gray" onClick={() => {
setIsCreating(false);
setNewGroupName('');
}}>
<X size={16} />
</ActionIcon>
</>
) : (
<Button
leftSection={<SquarePlus size={16} />}
variant="light"
size="sm"
onClick={() => setIsCreating(true)}
>
Add Group
</Button>
)}
</Group>
</Stack>
)}
</Group>
<Divider />
@ -400,7 +403,7 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
<Stack>
<Group justify="space-between" align="center">
<Text size="sm" fw={600}>
Existing Groups ({filteredGroups.length}{searchTerm && ` of ${sortedGroups.length}`})
Groups ({filteredGroups.length}{searchTerm && ` of ${sortedGroups.length}`})
</Text>
<TextInput
placeholder="Search groups..."