From c6e1a452ab8ea1e50380edbc13808f971b086425 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 12 Jul 2022 17:37:40 -0700
Subject: [PATCH] Render actual external action buttons. Closes #1997

---
 web/components/action-buttons/ActionButton.tsx |  9 +++++++--
 web/components/ui/Content/Content.tsx          | 14 +-------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/web/components/action-buttons/ActionButton.tsx b/web/components/action-buttons/ActionButton.tsx
index 47565360e..2e1f2424a 100644
--- a/web/components/action-buttons/ActionButton.tsx
+++ b/web/components/action-buttons/ActionButton.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 
 export default function ActionButton({
-  action: { url, title, description, icon, openExternally },
+  action: { url, title, description, icon, color, openExternally },
 }: Props) {
   const [showModal, setShowModal] = useState(false);
 
@@ -23,7 +23,12 @@ export default function ActionButton({
 
   return (
     <>
-      <Button type="primary" className={`${s.button}`} onClick={buttonClicked}>
+      <Button
+        type="primary"
+        className={`${s.button}`}
+        onClick={buttonClicked}
+        style={{ backgroundColor: color }}
+      >
         <img src={icon} className={`${s.icon}`} alt={description} />
         {title}
       </Button>
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 80a1a85b7..92e4a6486 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -53,22 +53,10 @@ export default function ContentComponent() {
   const chatUserId = useRecoilValue<string>(chatUserIdAtom);
   const { viewerCount, lastConnectTime, lastDisconnectTime } =
     useRecoilValue<ServerStatus>(serverStatusState);
-  const { extraPageContent, version, name, summary } = clientConfig;
+  const { extraPageContent, version, name, summary, externalActions } = clientConfig;
   const [showNotifyReminder, setShowNotifyReminder] = useState(false);
   const [showNotifyPopup, setShowNotifyPopup] = useState(false);
 
-  // This is example content. It should be removed.
-  const externalActions = [
-    {
-      url: 'https://owncast.online/docs',
-      title: 'Example button',
-      description: 'Example button description',
-      icon: 'https://owncast.online/images/logo.svg',
-      color: '#5232c8',
-      openExternally: false,
-    },
-  ];
-
   const externalActionButtons = externalActions.map(action => (
     <ActionButton key={action.url} action={action} />
   ));