chore: align with pr comments

apps/nextjs/src/app/[locale]/manage/about/page.tsx

@@ -182,7 +182,6 @@ export default async function AboutPage() {
             </Stack>
           </AccordionControl>
           <AccordionPanel>
-            {" "}
             <SimpleGrid cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }} spacing="md">
               {Object.entries(dependencies)
                 .filter(([, value]) => !value.includes("workspace:"))

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-gauge/resource-gauge.tsx

@@ -8,6 +8,8 @@ import { useCurrentLocale, useI18n } from "@homarr/translation/client";
 import { ResourceIcon } from "~/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-gauge/resource-icon";
 import classes from "./resource-gauge.module.css";
 
+const KUBERNETES_BRAND_COLOR = "#326ce5";
+
 interface KubernetesResourceGaugeProps {
   kubernetesCapacity: KubernetesCapacity;
 }
@@ -19,7 +21,7 @@ export function ResourceGauge(props: KubernetesResourceGaugeProps) {
 
   return (
     <Paper className={classes.paper} mt={20}>
-      <ThemeIcon className={classes.icon} size={60} radius={60} bg="blue.7">
+      <ThemeIcon className={classes.icon} size={60} radius={60} bg={KUBERNETES_BRAND_COLOR}>
         <ResourceIcon type={props.kubernetesCapacity.type} />
       </ThemeIcon>
 

packages/widgets/src/coolify/single-instance-layout.tsx

@@ -11,7 +11,7 @@ import { buildServerResourceCounts } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
 import type { CoolifyOptions, InstanceData } from "./types";
-import { COOLIFY_ICON_URL } from "./types";
+import { COOLIFY_BRAND_COLOR, COOLIFY_ICON_URL } from "./types";
 
 interface SingleInstanceLayoutProps {
   instance: InstanceData;
@@ -44,15 +44,10 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
   return (
     <ScrollArea h="100%">
       <Stack gap={0}>
-        <Group
-          p="xs"
-          justify="center"
-          gap="xs"
-          style={{ borderBottom: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
-        >
+        <Group p="xs" justify="center" gap="xs" style={{ borderBottom: `2px solid ${COOLIFY_BRAND_COLOR}` }}>
           <Group gap={2}>
             <Image src={COOLIFY_ICON_URL} alt="Coolify" w={isTiny ? 18 : 24} h={isTiny ? 18 : 24} />
-            <Text fz={isTiny ? "xs" : "sm"} fw={700} c="dimmed">
+            <Text fz={isTiny ? "xs" : "sm"} fw={700} style={{ color: COOLIFY_BRAND_COLOR }}>
               oolify
             </Text>
           </Group>

packages/widgets/src/coolify/types.ts

@@ -3,6 +3,7 @@ import type { CoolifyInstanceInfo } from "@homarr/integrations/types";
 import type { WidgetComponentProps } from "../definition";
 
 export const COOLIFY_ICON_URL = "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/coolify.svg";
+export const COOLIFY_BRAND_COLOR = "#8B5CF6";
 
 export interface InstanceData {
   integrationId: string;

packages/widgets/src/media-requests/stats/component.tsx

@@ -23,6 +23,9 @@ import type { WidgetComponentProps } from "../../definition";
 import { NoIntegrationDataError } from "../../errors/no-data-integration";
 import classes from "./component.module.css";
 
+const OVERSEERR_COLOR = "#ECB000";
+const JELLYSEERR_COLOR = "#6677CC";
+
 export default function MediaServerWidget({
   integrationIds,
   isEditMode,
@@ -151,7 +154,7 @@ export default function MediaServerWidget({
                       className="mediaRequests-stats-users-user-avatar"
                       size={20}
                       src={user.avatar}
-                      bd={`2px solid var(--mantine-color-${user.integration.kind === "overseerr" ? "yellow-6" : "blue-5"})`}
+                      bd={`2px solid ${user.integration.kind === "overseerr" ? OVERSEERR_COLOR : JELLYSEERR_COLOR}`}
                     />
                   </Tooltip>
                   <Text className="mediaRequests-stats-users-user-userName" size="sm">