Sponsorship banner added

desktop-app/src/renderer/AppContent.tsx

@@ -11,6 +11,7 @@ import type { AppView } from './store/features/ui';
 import DeviceManager from './components/DeviceManager';
 import KeyboardShortcutsManager from './components/KeyboardShortcutsManager';
 import ReleaseNotes from './components/ReleaseNotes';
+import { Sponsorship } from './components/Sponsorship';
 
 const Browser = () => {
   return (
@@ -45,6 +46,7 @@ const AppContent = () => {
         <KeyboardShortcutsManager />
         <ViewComponent />
         <ReleaseNotes />
+        <Sponsorship />
       </ThemeProvider>
     </Provider>
   );

desktop-app/src/renderer/components/Button/index.tsx

@@ -48,8 +48,8 @@ const Button = ({
     hoverBg = 'hover:bg-slate-200';
     hoverBgDark = 'dark:hover:bg-slate-700';
   } else if (isPrimary) {
-    hoverBg = 'hover:bg-slate-800';
-    hoverBgDark = 'dark:hover:bg-slate-100';
+    hoverBg = 'hover:bg-emerald-600';
+    hoverBgDark = 'dark:hover:bg-emerald-600';
   }
 
   return (
@@ -62,8 +62,7 @@ const Button = ({
         {
           'bg-slate-400/60': isActive && !isPrimary,
           'dark:bg-slate-600/60': isActive && !isPrimary,
-          'bg-slate-600 text-white': isPrimary,
-          'dark:bg-slate-300 dark:text-gray-900': isPrimary,
+          'bg-emerald-500 text-white': isPrimary,
           'bg-slate-200': isActionButton,
           'dark:bg-slate-700': isActionButton,
           'px-2': isActionButton || isTextButton,

desktop-app/src/renderer/components/ReleaseNotes/index.tsx

@@ -128,7 +128,7 @@ const ReleaseNotes = () => {
               window.electron.ipcRenderer.sendMessage(
                 IPC_MAIN_CHANNELS.OPEN_EXTERNAL,
                 {
-                  url: 'https://responsively.app/sponsor/',
+                  url: 'https://responsively.app/sponsor?ref=app-release-notes',
                 }
               );
             }}

desktop-app/src/renderer/components/Sponsorship/index.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+
+import { IPC_MAIN_CHANNELS } from 'common/constants';
+
+import Modal from '../Modal';
+import Icon from '../../assets/img/logo.png';
+import Button from '../Button';
+
+export const Sponsorship = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const lastShownMs = window.electron.store.get('sponsorship.lastShown');
+    const now = Date.now();
+    if (
+      lastShownMs === undefined ||
+      now - lastShownMs > 1000 * 60 * 60 * 24 * 7
+    ) {
+      setIsOpen(true);
+    }
+  }, []);
+
+  const onClose = () => {
+    window.electron.store.set('sponsorship.lastShown', Date.now());
+    setIsOpen(false);
+  };
+  return (
+    <Modal
+      title={
+        <div className="flex flex-col items-center gap-2 border-b border-slate-500 pb-2">
+          <div className="flex w-full justify-center">
+            <img src={Icon} alt="Logo" width={64} />
+          </div>
+          <div>Level Up: Support Us as a Sponsor!</div>
+        </div>
+      }
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <div className="max-w-lg">
+        <p className="pb-4 text-center">
+          {`Join us on an incredible journey! By becoming a sponsor, you'll fuel
+          Responsively App's progress, ensuring a smooth and amazing experience for all users.`}
+          <br />
+          <br />
+          {`Support us today and let's embark on this exciting adventure together!`}
+        </p>
+        <div className="mt-4 flex justify-center">
+          <Button
+            onClick={() => {
+              window.electron.ipcRenderer.sendMessage(
+                IPC_MAIN_CHANNELS.OPEN_EXTERNAL,
+                {
+                  url: 'https://responsively.app/sponsor?ref=app-sponsor-banner',
+                }
+              );
+              onClose();
+            }}
+            isTextButton
+            isPrimary
+          >
+            Become a Sponsor
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};

desktop-app/src/store/index.ts

@@ -212,6 +212,15 @@ const schema = {
     },
     default: [],
   },
+  sponsorship: {
+    type: 'object',
+    properties: {
+      lastShown: {
+        type: 'number',
+      },
+    },
+    default: {},
+  },
 } as const;
 
 const store = new Store({ schema, watch: true, migrations });