Donation + sponsor button tweaks

Rem0o · Nov 16, 2024 · f3f18a5 · f3f18a5
1 parent 461f91d
commit f3f18a5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/src/common/icons.ts b/src/common/icons.ts
@@ -29,7 +29,7 @@ const svgPaths = {
   paypal:
     "M14.06 3.713c.12-1.071-.093-1.832-.702-2.526C12.628.356 11.312 0 9.626 0H4.734a.7.7 0 0 0-.691.59L2.005 13.509a.42.42 0 0 0 .415.486h2.756l-.202 1.28a.628.628 0 0 0 .62.726H8.14c.429 0 .793-.31.862-.731l.025-.13.48-3.043.03-.164.001-.007a.351.351 0 0 1 .348-.297h.38c1.266 0 2.425-.256 3.345-.91.379-.27.712-.603.993-1.005a4.942 4.942 0 0 0 .88-2.195c.242-1.246.13-2.356-.57-3.154a2.687 2.687 0 0 0-.76-.59l-.094-.061ZM6.543 8.82a.695.695 0 0 1 .321-.079H8.3c2.82 0 5.027-1.144 5.672-4.456l.003-.016c.217.124.4.27.548.438.546.623.679 1.535.45 2.71-.272 1.397-.866 2.307-1.663 2.874-.802.57-1.842.815-3.043.815h-.38a.873.873 0 0 0-.863.734l-.03.164-.48 3.043-.024.13-.001.004a.352.352 0 0 1-.348.296H5.595a.106.106 0 0 1-.105-.123l.208-1.32.845-5.214Z",
   heart:
-    "M12.1 18.55L12 18.65L11.89 18.55C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5C9.04 5 10.54 6 11.07 7.36H12.93C13.46 6 14.96 5 16.5 5C18.5 5 20 6.5 20 8.5C20 11.39 16.86 14.24 12.1 18.55M16.5 3C14.76 3 13.09 3.81 12 5.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5C2 12.27 5.4 15.36 10.55 20.03L12 21.35L13.45 20.03C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3Z",
+    "M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z",
   check:
     "M19.78,2.2L24,6.42L8.44,22L0,13.55L4.22,9.33L8.44,13.55L19.78,2.2M19.78,5L8.44,16.36L4.22,12.19L2.81,13.55L8.44,19.17L21.19,6.42L19.78,5Z",
   flat: "M19,13H5V11H19V13Z",

diff --git a/src/layouts/footer.tsx b/src/layouts/footer.tsx
@@ -15,7 +15,7 @@ export const Footer = () => {
 export const DevInformation = () => {
   return (
     <div className="min-w-sm m-auto flex flex-col space-y-0">
-      <div className="flex items-center justify-center ">
+      <div className="flex items-center justify-center">
         <SpinningLogo className="h-8 w-8" />
         <span className="ml-1 self-center text-xl">Fan Control</span>
       </div>
@@ -24,17 +24,17 @@ export const DevInformation = () => {
         {consts.urls.email}
       </ExternalLink>
       <div className="flex items-center justify-center space-x-3 py-3">
-        <FooterButton
-          iconSvgPath={icons.heart}
-          href={consts.urls.sponsor}
-          text="Sponsor"
-        />
         <FooterButton
           iconSvgPath={icons.paypal}
           href={consts.urls.donationUrl}
           viewBox="0 0 16 16"
           text="Donate"
         />
+        <FooterButton
+          iconSvgPath={icons.heart}
+          href={consts.urls.sponsor}
+          text="Sponsor"
+        />
       </div>
     </div>
   );

diff --git a/src/reactComponents/donationModal.tsx b/src/reactComponents/donationModal.tsx
@@ -4,9 +4,13 @@ import { FooterButton } from "./footerButton";
 import { SpinningLogo } from "./spinningLogo";
 import { Modal } from "./modal";
 
-export const DonationModal = (exitModal: Function) => <Modal exitModal={exitModal}>{Donation(exitModal)}</Modal>;
+export const DonationModal = (exitModal: Function) => (
+  <Modal exitModal={exitModal}>
+    <Donation/>
+  </Modal>
+);
 
-function Donation(exitModal: Function) {
+function Donation() {
   return (
     <>
       <div className="flex w-full flex-row">
@@ -15,19 +19,23 @@ function Donation(exitModal: Function) {
 
       <div className="m-2">Thanks for downloading FanControl !</div>
 
-      <div className="mb-2">If you want to support the developper of this project: </div>
+      <div className="mb-2">
+        If you want to support the developper of this project:{" "}
+      </div>
 
       <div className="m-2 flex flex-row space-x-4">
-        <FooterButton
-          iconSvgPath={icons.heart}
-          href={consts.urls.sponsor}
-          text="Sponsor"
-        />
         <FooterButton
           iconSvgPath={icons.paypal}
           href={consts.urls.donationUrl}
           viewBox="0 0 16 16"
           text="Donate"
+          className="border-2 border-[#00457C] font-semibold text-[#00457C] hover:border-[#00053C] hover:text-[#00053C]"
+        />
+        <FooterButton
+          iconSvgPath={icons.heart}
+          href={consts.urls.sponsor}
+          text="Sponsor"
+          className="border-2 border-[#db61a2] font-semibold text-[#db61a2] hover:border-[#ab2172] hover:text-[#ab2172]"
         />
       </div>
     </>

diff --git a/src/reactComponents/footerButton.tsx b/src/reactComponents/footerButton.tsx
@@ -1,23 +1,31 @@
 import { TrackedAnchor } from "./links";
+import { twMerge } from "tailwind-merge";
 
 export function FooterButton({
   href,
   text,
   iconSvgPath,
-  viewBox
+  viewBox,
+  className
 }: {
   href: string;
   text: string;
   iconSvgPath: string;
   viewBox?: string;
+  className?: string;
 }) {
   return (
     <TrackedAnchor href={href}>
-      <button className="flex rounded-2xl border border-black px-2 py-1 pr-3 text-sm hover:border-primary-600 hover:text-primary-600">
+      <button
+        className={twMerge(
+          "flex items-center justify-center rounded-2xl border border-black px-2 py-1 pr-3 text-sm hover:border-primary-600 hover:text-primary-600",
+          className
+        )}
+      >
         <svg className="h-4 w-4" viewBox={viewBox ?? "0 0 24 24"}>
           <path fill="currentColor" d={iconSvgPath} />
         </svg>
-        <span className="ml-1 self-center">{text}</span>
+        <span className="ml-2">{text}</span>
       </button>
     </TrackedAnchor>
   );