Twitch minor fix (#973)

* Made Twitch copy link buttons links so right-click -> copy URL works.

* Added Twitch OBS screenshot to public folder.

web/pages/twitch.tsx

@@ -257,6 +257,30 @@ function BotSetupStep(props: {
   )
 }
 
+function CopyLinkButton(props: { link: string; text: string }) {
+  const { link, text } = props
+  const toastTheme = {
+    className: '!bg-primary !text-white',
+    icon: <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />,
+  }
+  const copyLinkCallback = async () => {
+    copyToClipboard(link)
+    toast.success(text + ' copied', toastTheme)
+  }
+  return (
+    <a href={link} onClick={(e) => e.preventDefault()}>
+      <Button
+        size={'md'}
+        color={'green'}
+        className="w-full !border-none"
+        onClick={copyLinkCallback}
+      >
+        {text}
+      </Button>
+    </a>
+  )
+}
+
 function BotConnectButton(props: {
   privateUser: PrivateUser | null | undefined
 }) {
@@ -338,46 +362,26 @@ function SetUpBot(props: {
 }) {
   const { user, privateUser } = props
   const twitchLinked =
+    privateUser &&
     privateUser?.twitchInfo?.twitchName &&
     !privateUser?.twitchInfo?.needsRelinking
       ? true
       : undefined
-  const toastTheme = {
-    className: '!bg-primary !text-white',
-    icon: <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />,
-  }
-  const copyOverlayLink = async () => {
-    if (!privateUser) return
-    copyToClipboard(getOverlayURLForUser(privateUser))
-    toast.success('Overlay link copied!', toastTheme)
-  }
-  const copyDockLink = async () => {
-    if (!privateUser) return
-    copyToClipboard(getDockURLForUser(privateUser))
-    toast.success('Dock link copied!', toastTheme)
-  }
 
   return (
     <>
       <Title
         text={'Set up the bot for your own stream'}
-        className={'!mb-4 md:block'}
+        className={'!mb-0 md:block'}
       />
       <Col className="gap-4">
         <img
-          src="https://raw.githubusercontent.com/PhilBladen/ManifoldTwitchIntegration/master/docs/OBS.png" // TODO: Copy this into the Manifold codebase public folder
+          src="/twitch-bot-obs-screenshot.jpg"
-          className="!-my-2"
+          className="rounded-md border-t border-l border-r shadow-md"
         ></img>
         To add the bot to your stream make sure you have logged in then follow
         the steps below.
-        {!twitchLinked && (
+        {twitchLinked && privateUser ? (
-          <ButtonGetStarted
-            user={user}
-            privateUser={privateUser}
-            buttonClass={'!my-0'}
-            spinnerClass={'!my-0'}
-          />
-        )}
           <div className="flex flex-col gap-6 sm:flex-row">
             <BotSetupStep
               stepNum={1}
@@ -385,31 +389,47 @@ function SetUpBot(props: {
                 twitchLinked && <BotConnectButton privateUser={privateUser} />
               }
             >
-            Use the button above to add the bot to your channel. Then mod it by
+              Use the button above to add the bot to your channel. Then mod it
-            typing in your Twitch chat: <b>/mod ManifoldBot</b>
+              by typing in your Twitch chat: <b>/mod ManifoldBot</b>
               <br />
-            If the bot is not modded it will not be able to respond to commands
+              If the bot is not modded it will not be able to respond to
-            properly.
+              commands properly.
             </BotSetupStep>
             <BotSetupStep
               stepNum={2}
-            buttonName={twitchLinked && 'Overlay link'}
+              overrideButton={
-            buttonOnClick={copyOverlayLink}
+                <CopyLinkButton
+                  link={getOverlayURLForUser(privateUser)}
+                  text={'Overlay link'}
+                />
+              }
             >
-            Create a new browser source in your streaming software such as OBS.
+              Create a new browser source in your streaming software such as
-            Paste in the above link and type in the desired size. We recommend
+              OBS. Paste in the above link and type in the desired size. We
-            450x375.
+              recommend 450x375.
             </BotSetupStep>
             <BotSetupStep
               stepNum={3}
-            buttonName={twitchLinked && 'Control dock link'}
+              overrideButton={
-            buttonOnClick={copyDockLink}
+                <CopyLinkButton
+                  link={getDockURLForUser(privateUser)}
+                  text={'Control dock link'}
+                />
+              }
             >
-            The bot can be controlled entirely through chat. But we made an easy
+              The bot can be controlled entirely through chat. But we made an
-            to use control panel. Share the link with your mods or embed it into
+              easy to use control panel. Share the link with your mods or embed
-            your OBS as a custom dock.
+              it into your OBS as a custom dock.
             </BotSetupStep>
           </div>
+        ) : (
+          <ButtonGetStarted
+            user={user}
+            privateUser={privateUser}
+            buttonClass={'!my-0'}
+            spinnerClass={'!my-0'}
+          />
+        )}
         <div>
           Need help? Contact SirSalty#5770 in Discord or email
           david@manifold.markets