add patreon and supporters button

assets/jsons/translations/en.json

@@ -63,7 +63,16 @@
                   "es-ES": "Spanish"
                }
             }
-         } 
+         },
+        "patreon":{
+            "title":"Support BSManager 💖",
+            "description": "Support the project and help us to provide continuous improvements to BSManager.",
+            "buttons":{
+                "support": "Support BSManager",
+                "supporters":"Supporters 👀"
+            }
+    
+        }
       }
    },
    "notifications":{

assets/jsons/translations/es.json

@@ -63,7 +63,15 @@
               		"es-ES": "Español"
             	}
         		}
-      	}
+      	},
+        "patreon":{
+            "title":"Apoyo BSManager 💖",
+            "description": "Apoye el proyecto y ayúdenos a proporcionar mejoras continuas a BSManager.",
+            "buttons":{
+                "support": "Apoyo BSManager",
+                "supporters":"Apoyos 👀"
+            }
+        }
     	}
   	},
 

assets/jsons/translations/fr.json

@@ -63,7 +63,16 @@
                  	"es-ES": "Espagnol"
              	}
            	}
-         }
+         },
+        "patreon":{
+            "title":"Soutenir BSManager 💖",
+            "description": "Soutien le projet et aide-nous à fournir des améliorations continues à BSManager.",
+            "buttons":{
+                "support": "Soutenir BSManager",
+                "supporters":"Supporteurs 👀"
+            }
+    
+        }
       }
    },
    "notifications":{

src/renderer/components/shared/bsm-button.component.tsx

@@ -11,6 +11,7 @@ type propsType = {
     className?: string,
     style?: React.CSSProperties,
     imgClassName?: string,
+    iconClassName?: string,
     icon?: BsmIconType,
     image?: string,
     text?: string,
@@ -20,10 +21,11 @@ type propsType = {
     disabled?: boolean,
     onClickOutside?: (e: MouseEvent) => void,
     onClick?: (e: React.MouseEvent) => void,
-    typeColor?:BsmButtonType
+    typeColor?:BsmButtonType,
+    color?: string
 }
 
-export function BsmButton({className, style, imgClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor}: propsType) {
+export function BsmButton({className, style, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color}: propsType) {
 
   const t = useTranslation();
   const secondColor = useThemeColor("second-color");
@@ -52,9 +54,9 @@ export function BsmButton({className, style, imgClassName, icon, image, text, ty
 
   return (
     <OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
-      <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${!withBar && !!typeColor && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, ...(!!primaryColor && {backgroundColor: primaryColor})}}>
+      <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${!withBar && (!!typeColor || !!color) && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, ...((!!primaryColor || !!color) && {backgroundColor: primaryColor ?? color})}}>
         { image && <BsmImage image={image} className={imgClassName}/> }
-        { icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
+        { icon && <BsmIcon icon={icon} className={iconClassName ?? "h-full w-full text-gray-800 dark:text-white"}/> }
         {text && (type === "submit" ? <button className="w-full h-full" style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span style={{...(!!textColor && {color: textColor})}} >{t(text)}</span>)}
         { withBar && (
           <div className="absolute bottom-0 left-0 w-full h-1 bg-current" style={{color: secondColor}}>

src/renderer/components/svgs/bsm-icon.component.tsx

@@ -18,11 +18,12 @@ import { SteamIcon } from "./icons/steam-icon.component";
 import { CSSProperties, memo } from "react";
 import EditIcon from "./icons/edit-icon.component";
 import { ExportIcon } from "./icons/export-icon.component";
+import PatreonIcon from "./icons/patreon-icon.component";
 
 export type BsmIconType = (
    "settings"|"trash"|"favorite"|"folder"|"bsNote"|
    "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|
-   "copy"|"steam"|"edit"|"export"|
+   "copy"|"steam"|"edit"|"export"|"patreon"|
    "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"
 );
 
@@ -48,6 +49,7 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
         if(icon === "steam"){ return <SteamIcon className={className} style={style}/> }
         if(icon === "edit"){ return <EditIcon className={className} style={style}/> }
         if(icon === "export"){ return <ExportIcon className={className} style={style}/> }
+        if(icon === "patreon"){ return <PatreonIcon className={className} style={style}/> }
         return <TrashIcon className={className} style={style}/>
     }
 

src/renderer/components/svgs/icons/patreon-icon.component.tsx

@@ -0,0 +1,10 @@
+import { CSSProperties } from "react";
+
+export default function PatreonIcon(props: {className?: string, style?: CSSProperties}) {
+  return (
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
+        <path fill="white" d="M108.8135992 26.06720125c-26.468266 0-48.00213212 21.53066613-48.00213212 47.99733213 0 26.38653268 21.53386613 47.85426547 48.00213213 47.85426547 26.38639937 0 47.8530655-21.4677328 47.8530655-47.85426547 0-26.466666-21.46666613-47.99733213-47.85306547-47.99733213"/>
+        <path fill="#052a49" d="M23.333335 153.93333178V26.0666679h23.46666576v127.8666639z"/>
+    </svg>
+  )
+}

src/renderer/pages/settings-page.component.tsx

@@ -106,6 +106,10 @@ export function SettingsPage() {
     notificationService.notifySuccess({title: "notifications.settings.steam.success.titles.logout", duration: 3000});
   };
 
+  const openPatreonPage = () => {
+    ipcService.sendLazy("new-window", {args: "https://www.patreon.com/bsmanager?fan_landing=true"})
+  }
+
   return (
     <div className="w-full h-full flex justify-center overflow-y-scroll scrollbar-thin scrollbar-thumb-neutral-900 text-gray-800 dark:text-gray-200">
 
@@ -139,6 +143,13 @@ export function SettingsPage() {
           <SettingRadioArray items={languagesItems} selectedItem={languageSelected} onItemSelected={handleChangeLanguage}/>
         </SettingContainer>
 
+        <SettingContainer title="pages.settings.patreon.title" description="pages.settings.patreon.description">
+            <div className="flex">
+                <BsmButton className="flex w-fit rounded-md h-8 px-2 font-bold py-1 whitespace-nowrap mr-2 !text-white" iconClassName="mr-1" text="pages.settings.patreon.buttons.support" icon="patreon" color="#EC6350" withBar={false} onClick={openPatreonPage}></BsmButton>
+                <BsmButton className="flex w-fit rounded-md h-8 px-2 font-bold py-1 !text-white" withBar={false} text="pages.settings.patreon.buttons.supporters" color="#6c5ce7"></BsmButton>
+            </div>
+        </SettingContainer>
+
         <div className="h-10"/>
 
       </div>