From 7529f483f82e4899fcc51cc6f852f7d818279c6d Mon Sep 17 00:00:00 2001
From: Enmanuel Moreira <enmanuelmoreira@gmail.com>
Date: Tue, 19 Oct 2021 00:43:09 -0300
Subject: [PATCH] Add Slack to the list of brands (#51)

---
 README.md                   |  1 +
 docker-compose.yml          |  1 +
 public/css/brands.css       |  8 ++++++++
 src/components/Home/Home.js | 10 ++++++++++
 src/config.js               |  2 ++
 src/icons/slack.svg         |  1 +
 6 files changed, 23 insertions(+)
 create mode 100644 src/icons/slack.svg

diff --git a/README.md b/README.md
index 07933d8..bf8b06a 100644
--- a/README.md
+++ b/README.md
@@ -114,6 +114,7 @@ services:
       - 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
+      - SLACK=https://slack.com/
     ports:
       - 8080:3000
     restart: unless-stopped
diff --git a/docker-compose.yml b/docker-compose.yml
index 17360d7..11ed8db 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -67,6 +67,7 @@ services:
       - 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
+      - SLACK=https://slack.com/
 
     ports:
       - 8080:3000
diff --git a/public/css/brands.css b/public/css/brands.css
index 2d7dd64..c0c6881 100644
--- a/public/css/brands.css
+++ b/public/css/brands.css
@@ -455,3 +455,11 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Slack */
+.button.button-slack {
+  color: #fff;
+  background-color: #4a154b;
+}
+.button.button-slack:hover,
+.button.button-slack:focus {
+  filter: brightness(90%) }
\ No newline at end of file
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index edaf0fe..d252d9d 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -41,6 +41,7 @@ import patreonLogo from '../../icons/patreon.svg';
 import devtoLogo from '../../icons/devto.svg';
 import Sort from '../Sort/Sort';
 import paypalLogo from '../../icons/paypal.svg';
+import slackLogo from '../../icons/slack.svg';
 
 function Home(props) {
   let order = [];
@@ -414,6 +415,15 @@ function Home(props) {
                   order={buttonOrder('PAYPAL')}
                 />
               )}
+              {runtimeConfig.SLACK && (
+                <Button
+                  name="slack"
+                  href={runtimeConfig.SLACK}
+                  displayName="Slack"
+                  logo={slackLogo}
+                  order={buttonOrder('SLACK')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">{runtimeConfig.FOOTER}</p>
diff --git a/src/config.js b/src/config.js
index ba91d2f..7e9e27c 100644
--- a/src/config.js
+++ b/src/config.js
@@ -61,6 +61,7 @@ export const runtimeConfig =
         UMAMI_APP_URL: window?.env?.UMAMI_APP_URL,
         BUTTON_ORDER: window?.env?.BUTTON_ORDER,
         PAYPAL: window?.env?.PAYPAL,
+        SLACK: window?.env?.SLACK,
       }
     : {
         // server
@@ -213,4 +214,5 @@ export const runtimeConfig =
         PAYPAL: nodeIsProduction
           ? process.env.PAYPAL
           : process.env.RAZZLE_PAYPAL,
+        SLACK: nodeIsProduction ? process.env.SLACK : process.env.RAZZLE_SLACK,
       };
diff --git a/src/icons/slack.svg b/src/icons/slack.svg
new file mode 100644
index 0000000..69a4eb6
--- /dev/null
+++ b/src/icons/slack.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 2447.6 2452.5" viewBox="0 0 2447.6 2452.5" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" fill="#36c5f0"/><path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" fill="#2eb67d"/><path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" fill="#ecb22e"/><path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" fill="#e01e5a"/></g></svg>
\ No newline at end of file