feat: venmo button + fix: youtube_music button order (#257)

* feat: venmo button + fix: youtube_music button order

* test complete + updated icon

* ran yarn ci

docker-compose.yml

@@ -92,6 +92,7 @@ services:
       - AMAZON_WISHLIST=https://www.amazon.co.uk/b?node=22758010031
       - APPLE_MUSIC=https://www.apple.com/uk/apple-music/
       - YOUTUBE_MUSIC=https://music.youtube.com/playlist?list=
+      - VENMO=https://venmo.com/
       - STATUS=https://status.im/
       - MATRIX=https://matrix.to/
       - ANILIST=https://anilist.co/

public/css/brands.css

@@ -435,6 +435,12 @@ button {
   background-color: #000000;
 }
 
+/* Venmo */
+.button.button-venmo {
+  color: #ffffff;
+  background-color: #3d95ce;
+}
+
 /* Status */
 .button.button-status {
   color: #000;

src/components/Home/Home.js

@@ -63,7 +63,8 @@ import streamlabsLogo from '../../icons/streamlabs.svg';
 import privatebinLogo from '../../icons/privatebin.svg';
 import amazonLogo from '../../icons/amazon.svg';
 import applemusicLogo from '../../icons/applemusic.svg';
-import youtubemusiclogo from '../../icons/youtubemusic.svg';
+import youtubemusicLogo from '../../icons/youtubemusic.svg';
+import venmoLogo from '../../icons/venmo.svg';
 import statusLogo from '../../icons/status.svg';
 import matrixLogo from '../../icons/matrix.svg';
 import anilistLogo from '../../icons/anilist.svg';
@@ -697,8 +698,17 @@ function Home(props) {
                   name="youtubemusic"
                   href={runtimeConfig.YOUTUBE_MUSIC}
                   displayName="YouTube Music"
-                  logo={youtubemusiclogo}
+                  logo={youtubemusicLogo}
-                  order={buttonOrder('YOUTUBEMUSIC')}
+                  order={buttonOrder('YOUTUBE_MUSIC')}
+                />
+              )}
+              {runtimeConfig.VENMO && (
+                <Button
+                  name="venmo"
+                  href={runtimeConfig.VENMO}
+                  displayName="Venmo"
+                  logo={venmoLogo}
+                  order={buttonOrder('VENMO')}
                 />
               )}
               {runtimeConfig.STATUS && (

src/config.js

@@ -107,6 +107,7 @@ export const runtimeConfig =
         AMAZON_WISHLIST: window?.env?.AMAZON_WISHLIST,
         APPLE_MUSIC: window?.env?.APPLE_MUSIC,
         YOUTUBE_MUSIC: window?.env?.YOUTUBE_MUSIC,
+        VENMO: window?.env?.VENMO,
         STATUS: window?.env?.STATUS,
         MATRIX: window?.env?.MATRIX,
         ANILIST: window?.env?.ANILIST,
@@ -403,6 +404,7 @@ export const runtimeConfig =
         YOUTUBE_MUSIC: nodeIsProduction
           ? process.env.YOUTUBE_MUSIC
           : process.env.RAZZLE_YOUTUBE_MUSIC,
+        VENMO: nodeIsProduction ? process.env.VENMO : process.env.RAZZLE_VENMO,
         STATUS: nodeIsProduction
           ? process.env.STATUS
           : process.env.RAZZLE_STATUS,

src/icons/venmo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g transform="matrix(.124031 0 0 .124031 -.000001 56.062016)"><rect y="-452" rx="61" height="516" width="516" fill="#3396cd"/><path d="M385.16-347c11.1 18.3 16.08 37.17 16.08 61 0 76-64.87 174.7-117.52 244H163.5l-48.2-288.35 105.3-10 25.6 205.17C270-174 299.43-235 299.43-276.56c0-22.77-3.9-38.25-10-51z" fill="#fff"/></g></svg>