Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-07-17 16:50:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

initial conversion to proper theme-based variables, starting with setting the default primary color

Browse source
This commit is contained in:
dekzter 2026-02-25 16:30:56 -05:00
parent 03c8d55ab9
commit 9732f48acf
18 changed files with 107 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

81
frontend/src/components/SeriesModal.jsx
View file

@ -316,48 +316,47 @@ const SeriesModal = ({ series, opened, onClose }) => {
<Modal
opened={opened}
onClose={onClose}
title={displaySeries.name}
withCloseButton={false}
size="xl"
centered
>
{/* Backdrop image as background */}
{displaySeries.backdrop_path &&
displaySeries.backdrop_path.length > 0 && (
<>
<Image
src={displaySeries.backdrop_path[0]}
alt={`${displaySeries.name} backdrop`}
fit="cover"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
zIndex: 0,
borderRadius: 8,
filter: 'blur(2px) brightness(0.5)',
}}
/>
{/* Overlay for readability */}
<Box
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background:
'linear-gradient(180deg, rgba(24,24,27,0.85) 60%, rgba(24,24,27,1) 100%)',
zIndex: 1,
borderRadius: 8,
}}
/>
</>
)}
<Box style={{ position: 'relative', minHeight: 400 }}>
{/* Backdrop image as background */}
{displaySeries.backdrop_path &&
displaySeries.backdrop_path.length > 0 && (
<>
<Image
src={displaySeries.backdrop_path[0]}
alt={`${displaySeries.name} backdrop`}
fit="cover"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
zIndex: 0,
borderRadius: 8,
filter: 'blur(2px) brightness(0.5)',
}}
/>
{/* Overlay for readability */}
<Box
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background:
'linear-gradient(180deg, rgba(24,24,27,0.85) 60%, rgba(24,24,27,1) 100%)',
zIndex: 1,
borderRadius: 8,
}}
/>
</>
)}
{/* Modal content above backdrop */}
<Box style={{ position: 'relative', zIndex: 2 }}>
<Stack spacing="md">
@ -416,9 +415,7 @@ const SeriesModal = ({ series, opened, onClose }) => {
)}
<Group spacing="md">
{displaySeries.year && (
<Badge color="blue">{displaySeries.year}</Badge>
)}
{displaySeries.year && <Badge>{displaySeries.year}</Badge>}
{displaySeries.rating && (
<Badge color="yellow">{displaySeries.rating}</Badge>
)}
@ -504,7 +501,6 @@ const SeriesModal = ({ series, opened, onClose }) => {
{displaySeries.youtube_trailer && (
<Button
variant="outline"
color="red"
style={{ marginTop: 'auto', alignSelf: 'flex-start' }}
onClick={() => {
setTrailerUrl(
@ -645,7 +641,6 @@ const SeriesModal = ({ series, opened, onClose }) => {
<Group spacing="xs">
<ActionIcon
variant="filled"
color="blue"
size="sm"
disabled={
providers.length > 0 &&

8
frontend/src/components/Sidebar.jsx
View file

@ -247,15 +247,15 @@ const Sidebar = ({ collapsed, toggleDrawer, drawerWidth, miniDrawerWidth }) => {
return (
<AppShell.Navbar
width={{ base: collapsed ? miniDrawerWidth : drawerWidth }}
p="xs"
style={{
width: collapsed ? miniDrawerWidth : drawerWidth,
backgroundColor: '#1A1A1E',
// transition: 'width 0.3s ease',
borderRight: '1px solid #2A2A2E',
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
borderRight: 'none',
}}
>
{/* Brand - Click to Toggle */}
@ -276,9 +276,11 @@ const Sidebar = ({ collapsed, toggleDrawer, drawerWidth, miniDrawerWidth }) => {
}}
>
{/* <ListOrdered size={24} /> */}
<img width={30} src={logo} />
<img width={40} src={logo} />
{!collapsed && (
<Text
size="xl"
fw={500}
sx={{
opacity: collapsed ? 0 : 1,
transition: 'opacity 0.2s ease-in-out',

80
frontend/src/components/VODModal.jsx
View file

@ -293,46 +293,46 @@ const VODModal = ({ vod, opened, onClose }) => {
<Modal
opened={opened}
onClose={onClose}
title={displayVOD.name}
withCloseButton={false}
size="xl"
centered
>
{/* Backdrop image as background */}
{displayVOD.backdrop_path && displayVOD.backdrop_path.length > 0 && (
<>
<Image
src={displayVOD.backdrop_path[0]}
alt={`${displayVOD.name} backdrop`}
fit="cover"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
zIndex: 0,
borderRadius: 8,
filter: 'blur(2px) brightness(0.5)',
}}
/>
{/* Overlay for readability */}
<Box
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background:
'linear-gradient(180deg, rgba(24,24,27,0.85) 60%, rgba(24,24,27,1) 100%)',
zIndex: 1,
borderRadius: 8,
}}
/>
</>
)}
<Box style={{ position: 'relative', minHeight: 400 }}>
{/* Backdrop image as background */}
{displayVOD.backdrop_path && displayVOD.backdrop_path.length > 0 && (
<>
<Image
src={displayVOD.backdrop_path[0]}
alt={`${displayVOD.name} backdrop`}
fit="cover"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
zIndex: 0,
borderRadius: 8,
filter: 'blur(2px) brightness(0.5)',
}}
/>
{/* Overlay for readability */}
<Box
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background:
'linear-gradient(180deg, rgba(24,24,27,0.85) 60%, rgba(24,24,27,1) 100%)',
zIndex: 1,
borderRadius: 8,
}}
/>
</>
)}
{/* Modal content above backdrop */}
<Box style={{ position: 'relative', zIndex: 2 }}>
<Stack spacing="md">
@ -392,9 +392,7 @@ const VODModal = ({ vod, opened, onClose }) => {
)}
<Group spacing="md">
{displayVOD.year && (
<Badge color="blue">{displayVOD.year}</Badge>
)}
{displayVOD.year && <Badge>{displayVOD.year}</Badge>}
{displayVOD.duration_secs && (
<Badge color="gray">
{formatDuration(displayVOD.duration_secs)}
@ -480,7 +478,6 @@ const VODModal = ({ vod, opened, onClose }) => {
<Button
leftSection={<Play size={16} />}
variant="filled"
color="blue"
size="sm"
onClick={handlePlayVOD}
disabled={providers.length > 0 && !selectedProvider}
@ -491,7 +488,6 @@ const VODModal = ({ vod, opened, onClose }) => {
{displayVOD.youtube_trailer && (
<Button
variant="outline"
color="red"
size="sm"
onClick={() => {
setTrailerUrl(
@ -531,7 +527,7 @@ const VODModal = ({ vod, opened, onClose }) => {
</Text>
{providers.length === 1 ? (
<Group spacing="md">
<Badge color="blue" variant="light">
<Badge variant="light">
{providers[0].m3u_account.name}
</Badge>
</Group>

2
frontend/src/components/forms/Channel.jsx
View file

@ -896,7 +896,6 @@ const ChannelForm = ({ channel = null, isOpen, onClose }) => {
<Button
size="xs"
variant="transparent"
color="blue"
onClick={(e) => {
e.stopPropagation();
handleAutoMatchEpg();
@ -1026,7 +1025,6 @@ const ChannelForm = ({ channel = null, isOpen, onClose }) => {
<Flex mih={50} gap="xs" justify="flex-end" align="flex-end">
<Button
type="submit"
variant="default"
disabled={isSubmitting}
loading={isSubmitting}
loaderProps={{ type: 'dots' }}

2
frontend/src/components/forms/CronBuilder.jsx
View file

@ -413,7 +413,7 @@ export default function CronBuilder({
<Text size="sm" fw={500}>
Expression:
</Text>
<Badge size="lg" variant="filled" color="blue">
<Badge size="lg" variant="filled">
{mode === 'advanced' ? manualCron : generatedCron}
</Badge>
</Group>

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

@ -57,12 +57,7 @@ const GroupItem = React.memo(
if (usage?.hasChannels) {
badges.push(
<Badge
key="channels"
size="xs"
color="blue"
leftSection={<Tv size={10} />}
>
<Badge key="channels" size="xs" leftSection={<Tv size={10} />}>
Channels
</Badge>
);
@ -497,7 +492,7 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
zIndex={2000}
>
<Stack>
<Alert icon={<AlertCircle size={16} />} color="blue" variant="light">
<Alert icon={<AlertCircle size={16} />} variant="light">
Manage channel groups. Groups associated with M3U accounts or
containing channels cannot be deleted.
</Alert>
@ -591,7 +586,6 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
checked={showChannelGroups}
onChange={setShowChannelGroups}
size="sm"
color="blue"
>
<Group gap={4}>
<Tv size={10} />

2
frontend/src/components/forms/LiveGroupFilter.jsx
View file

@ -201,7 +201,7 @@ const LiveGroupFilter = ({
return (
<Stack style={{ paddingTop: 10 }}>
<Alert icon={<Info size={16} />} color="blue" variant="light">
<Alert icon={<Info size={16} />} variant="light">
<Text size="sm">
<strong>Auto Channel Sync:</strong> When enabled, channels will be
automatically created for all streams in the group during M3U updates,

1
frontend/src/components/forms/M3UFilters.jsx
View file

@ -267,7 +267,6 @@ const M3UFilters = ({ playlist, isOpen, onClose }) => {
>
<Alert
icon={<Info size={16} />}
color="blue"
variant="light"
style={{ marginBottom: 5 }}
>

1
frontend/src/components/forms/M3UGroupFilter.jsx
View file

@ -239,7 +239,6 @@ const M3UGroupFilter = ({ playlist = null, isOpen, onClose }) => {
<Button
type="submit"
variant="filled"
color="blue"
disabled={isLoading}
onClick={submit}
>

2
frontend/src/components/forms/RecordingDetailsModal.jsx
View file

@ -297,7 +297,7 @@ const RecordingDetailsModal = ({
<Button
size="xs"
variant="light"
color="blue"
color="yellow"
onClick={(e) => {
e.stopPropagation?.();
onEdit(recording);

4
frontend/src/components/forms/settings/DvrSettingsForm.jsx
View file

@ -225,9 +225,7 @@ const DvrSettingsForm = React.memo(({ active }) => {
name="movie_fallback_template"
/>
<Flex mih={50} gap="xs" justify="flex-end" align="flex-end">
<Button type="submit" variant="default">
Save
</Button>
<Button type="submit">Save</Button>
</Flex>
</Stack>
</form>

6
frontend/src/components/forms/settings/NetworkAccessForm.jsx
View file

@ -138,11 +138,7 @@ const NetworkAccessForm = React.memo(({ active }) => {
>
Reset to Defaults
</Button>
<Button
type="submit"
disabled={networkAccessForm.submitting}
variant="default"
>
<Button type="submit" disabled={networkAccessForm.submitting}>
Save
</Button>
</Flex>

12
frontend/src/components/forms/settings/ProxySettingsForm.jsx
View file

@ -138,18 +138,10 @@ const ProxySettingsForm = React.memo(({ active }) => {
<ProxySettingsOptions proxySettingsForm={proxySettingsForm} />
<Flex mih={50} gap="xs" justify="space-between" align="flex-end">
<Button
variant="subtle"
color="gray"
onClick={resetProxySettingsToDefaults}
>
<Button variant="subtle" onClick={resetProxySettingsToDefaults}>
Reset to Defaults
</Button>
<Button
type="submit"
disabled={proxySettingsForm.submitting}
variant="default"
>
<Button type="submit" disabled={proxySettingsForm.submitting}>
Save
</Button>
</Flex>

3
frontend/src/components/forms/settings/StreamSettingsForm.jsx
View file

@ -250,11 +250,10 @@ const StreamSettingsForm = React.memo(({ active }) => {
onClick={onRehashStreams}
loading={rehashingStreams}
variant="outline"
color="blue"
>
Rehash Streams
</Button>
<Button type="submit" disabled={form.submitting} variant="default">
<Button type="submit" disabled={form.submitting}>
Save
</Button>
</Flex>

6
frontend/src/components/forms/settings/SystemSettingsForm.jsx
View file

@ -69,11 +69,7 @@ const SystemSettingsForm = React.memo(({ active }) => {
step={10}
/>
<Flex mih={50} gap="xs" justify="flex-end" align="flex-end">
<Button
onClick={form.onSubmit(onSubmit)}
disabled={form.submitting}
variant="default"
>
<Button onClick={form.onSubmit(onSubmit)} disabled={form.submitting}>
Save
</Button>
</Flex>

2
frontend/src/components/tables/LogosTable.jsx
View file

@ -480,7 +480,7 @@ const LogosTable = () => {
multiline
width={220}
>
<Badge size="sm" variant="light" color="blue">
<Badge size="sm" variant="light">
{label}
</Badge>
</Tooltip>

2
frontend/src/components/tables/VODLogosTable.jsx
View file

@ -345,7 +345,7 @@ export default function VODLogosTable() {
multiline
width={220}
>
<Badge size="sm" variant="light" color="blue">
<Badge size="sm" variant="light">
{label}
</Badge>
</Tooltip>

14
frontend/src/mantineTheme.jsx
View file

@ -1,4 +1,14 @@
import { createTheme, MantineProvider, rem } from '@mantine/core';
import { createTheme, rem } from '@mantine/core';
const CONTAINER_SIZES = {
xxs: rem('200px'),
xs: rem('300px'),
sm: rem('400px'),
md: rem('500px'),
lg: rem('600px'),
xl: rem('1400px'),
xxl: rem('1600px'),
};
const theme = createTheme({
globalStyles: (theme) => ({
@ -15,6 +25,8 @@ const theme = createTheme({
},
}),
primaryColor: 'teal',
tailwind: {
red: [
'oklch(0.971 0.013 17.38)',