[mantine.dev] Add support button to getting-started and 7.15.0 releas…

…e pages
mantinedev · Dec 6, 2024 · 8c6d732 · 8c6d732
1 parent 009132d
commit 8c6d732
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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);
+    }
   }
 }