From 8c6d73264d01881bd1aa34292cbb0581dddc214c Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Fri, 6 Dec 2024 15:43:58 +0400
Subject: [PATCH] [mantine.dev] Add support button to getting-started and
 7.15.0 release pages

---
 apps/mantine.dev/src/pages/changelog/7-15-0.mdx | 17 +++++++++++++++++
 apps/mantine.dev/src/pages/getting-started.mdx  | 17 ++++++++++++++++-
 changelog/7.15.0.md                             |  5 +++++
 .../src/SupportControl.module.css               |  9 ++++++++-
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/apps/mantine.dev/src/pages/changelog/7-15-0.mdx b/apps/mantine.dev/src/pages/changelog/7-15-0.mdx
index adce1349b9..f002cdff9c 100644
--- a/apps/mantine.dev/src/pages/changelog/7-15-0.mdx
+++ b/apps/mantine.dev/src/pages/changelog/7-15-0.mdx
@@ -1,9 +1,26 @@
+import { Button } from '@mantine/core';
+import { IconHeartFilled } from '@tabler/icons-react';
 import { ActionIconDemos, TableDemos, BarChartDemos, ModalsDemos, FormDemos, TipTapDemos, ModalDemos, HooksDemos, DatePickerDemos } from '@docs/demos';
 import { Layout } from '@/layout';
 import { MDX_DATA } from '@/mdx';
 
 export default Layout(MDX_DATA.Changelog7150);
 
+## Support Mantine development
+
+You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
+All funds will be used to improve Mantine and create new features and components.
+
+<Button
+  rightSection={<IconHeartFilled size={22} color="var(--mantine-color-red-7)" />}
+  size="lg"
+  miw={300}
+  justify="space-between"
+  children="Sponsor Mantine"
+  variant="default"
+  radius="md"
+/>
+
 ## use-radial-move hook
 
 New [use-radial-move](/hooks/use-radial-move) hook can be used to create custom radial sliders:
diff --git a/apps/mantine.dev/src/pages/getting-started.mdx b/apps/mantine.dev/src/pages/getting-started.mdx
index edf551555e..e063e4b4a7 100644
--- a/apps/mantine.dev/src/pages/getting-started.mdx
+++ b/apps/mantine.dev/src/pages/getting-started.mdx
@@ -1,3 +1,5 @@
+import { Button } from '@mantine/core';
+import { IconHeartFilled } from '@tabler/icons-react';
 import { FrameworksGuides } from '@/components/FrameworksGuides';
 import { SocialCards } from '@/components/SocialCards';
 import { Layout } from '@/layout';
@@ -192,7 +194,20 @@ The most important documentation pages are:
 ## Support Mantine
 
 All contributions to the projects are welcome and appreciated.
-There are many ways to support the project:
+Contribute financially by [sponsoring the project on OpenCollective](https://opencollective.com/mantinedev).
+Your sponsorship will help us to maintain the project and develop new features.
+
+<Button
+  rightSection={<IconHeartFilled size={22} color="var(--mantine-color-red-7)" />}
+  size="lg"
+  miw={300}
+  justify="space-between"
+  children="Sponsor Mantine"
+  variant="default"
+  radius="md"
+/>
+
+Other ways to support the project:
 
 - Contribute financially by [sponsoring the project on OpenCollective](https://opencollective.com/mantinedev).
   Your sponsorship will help us to maintain the project and develop new features.
diff --git a/changelog/7.15.0.md b/changelog/7.15.0.md
index a28af0168f..83658be132 100644
--- a/changelog/7.15.0.md
+++ b/changelog/7.15.0.md
@@ -1,5 +1,10 @@
 [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-15-0)
 
+## Support Mantine development
+
+You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
+All funds will be used to improve Mantine and create new features and components.
+
 ## use-radial-move hook
 
 New [use-radial-move](https://mantine.dev/hooks/use-radial-move) hook can be used to create custom radial sliders:
diff --git a/packages/@mantinex/mantine-header/src/SupportControl.module.css b/packages/@mantinex/mantine-header/src/SupportControl.module.css
index 78b326c649..4aff92ddad 100644
--- a/packages/@mantinex/mantine-header/src/SupportControl.module.css
+++ b/packages/@mantinex/mantine-header/src/SupportControl.module.css
@@ -4,6 +4,13 @@
   }
 
   @mixin dark {
-    color: var(--mantine-color-red-6);
+    color: var(--mantine-color-white);
+    background-color: var(--mantine-color-red-9);
+    border-color: var(--mantine-color-red-9);
+
+    @mixin hover {
+      background-color: var(--mantine-color-red-8);
+      border-color: var(--mantine-color-red-8);
+    }
   }
 }