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

frontend/src/components/SeriesModal.jsx

@@ -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 && (
+                    {displaySeries.year && <Badge>{displaySeries.year}</Badge>}
-                      <Badge color="blue">{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 &&

frontend/src/components/Sidebar.jsx

@@ -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',

frontend/src/components/VODModal.jsx

@@ -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 && (
+                    {displayVOD.year && <Badge>{displayVOD.year}</Badge>}
-                      <Badge color="blue">{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>

frontend/src/components/forms/Channel.jsx

@@ -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' }}

frontend/src/components/forms/CronBuilder.jsx

@@ -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>

frontend/src/components/forms/GroupManager.jsx

@@ -57,12 +57,7 @@ const GroupItem = React.memo(
 
       if (usage?.hasChannels) {
         badges.push(
-          <Badge
+          <Badge key="channels" size="xs" leftSection={<Tv size={10} />}>
-            key="channels"
-            size="xs"
-            color="blue"
-            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} />

frontend/src/components/forms/LiveGroupFilter.jsx

@@ -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,

frontend/src/components/forms/M3UFilters.jsx

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

frontend/src/components/forms/M3UGroupFilter.jsx

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

frontend/src/components/forms/RecordingDetailsModal.jsx

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

frontend/src/components/forms/settings/DvrSettingsForm.jsx

@@ -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">
+          <Button type="submit">Save</Button>
-            Save
-          </Button>
         </Flex>
       </Stack>
     </form>

frontend/src/components/forms/settings/NetworkAccessForm.jsx

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

frontend/src/components/forms/settings/ProxySettingsForm.jsx

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

frontend/src/components/forms/settings/StreamSettingsForm.jsx

@@ -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>

frontend/src/components/forms/settings/SystemSettingsForm.jsx

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

frontend/src/components/tables/LogosTable.jsx

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

frontend/src/components/tables/VODLogosTable.jsx

@@ -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>

frontend/src/mantineTheme.jsx

@@ -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)',