diff --git a/README.md b/README.md index 979c22b..07933d8 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,7 @@ services: - UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx - UMAMI_APP_URL=https://your-umami-app.com - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON # use ENV variable names for order, listed buttons will be boosted to the top + - PAYPAL=https://www.paypal.me/user ports: - 8080:3000 restart: unless-stopped diff --git a/docker-compose.yml b/docker-compose.yml index 75be1df..17360d7 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -66,6 +66,7 @@ services: - UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx - UMAMI_APP_URL=https://your-umami-app.com - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON + - PAYPAL=https://www.paypal.me/user ports: - 8080:3000 diff --git a/public/css/brands.css b/public/css/brands.css index 2e175c3..2d7dd64 100644 --- a/public/css/brands.css +++ b/public/css/brands.css @@ -445,3 +445,13 @@ button:hover, filter: brightness(90%); } +/* Paypal */ +.button.button-paypal { + color: #ffffff; + background-color: #1F264F; +} +.button.button-paypal:hover, +.button.button-paypal:focus { + filter: brightness(90%); +} + diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index d5fb90e..edaf0fe 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -40,6 +40,7 @@ import gitlabLogo from '../../icons/gitlab.svg'; import patreonLogo from '../../icons/patreon.svg'; import devtoLogo from '../../icons/devto.svg'; import Sort from '../Sort/Sort'; +import paypalLogo from '../../icons/paypal.svg'; function Home(props) { let order = []; @@ -404,6 +405,15 @@ function Home(props) { order={buttonOrder('DEVTO')} /> )} + {runtimeConfig.PAYPAL && ( +