From 989b1800faf2108eea3bfb9ec334f8d5ca01164c Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 9 May 2022 13:02:12 -0400
Subject: [PATCH] Add CTA banner to the bottom of the page

---
 app/soapbox/components/ui/text/text.tsx       |  2 +-
 .../features/ui/components/sign_up_panel.tsx  | 48 ++++++++++++++-----
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 5ecfadf39..072491109 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -31,7 +31,7 @@ const weights = {
 const sizes = {
   xs: 'text-xs',
   sm: 'text-sm',
-  md: 'text-md',
+  md: 'text-base',
   lg: 'text-lg',
   xl: 'text-xl',
   '2xl': 'text-2xl',
diff --git a/app/soapbox/features/ui/components/sign_up_panel.tsx b/app/soapbox/features/ui/components/sign_up_panel.tsx
index 2a54c5c11..0aa09c25f 100644
--- a/app/soapbox/features/ui/components/sign_up_panel.tsx
+++ b/app/soapbox/features/ui/components/sign_up_panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 const SignUpPanel = () => {
@@ -12,21 +12,43 @@ const SignUpPanel = () => {
   if (me || singleUserMode) return null;
 
   return (
-    <Stack space={2}>
-      <Stack>
-        <Text size='lg' weight='bold'>
-          <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
-        </Text>
+    <div>
+      <Stack space={2}>
+        <Stack>
+          <Text size='lg' weight='bold'>
+            <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
+          </Text>
 
-        <Text theme='muted'>
-          <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
-        </Text>
+          <Text theme='muted' size='sm'>
+            <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
+          </Text>
+        </Stack>
+
+        <Button theme='primary' block to='/'>
+          <FormattedMessage id='account.register' defaultMessage='Sign up' />
+        </Button>
       </Stack>
 
-      <Button theme='primary' block to='/'>
-        <FormattedMessage id='account.register' defaultMessage='Sign up' />
-      </Button>
-    </Stack>
+      <div className='fixed bottom-0 left-0 right-0 py-4 bg-primary-600'>
+        <div className='max-w-3xl mx-auto sm:px-6 md:max-w-7xl md:px-8'>
+          <HStack alignItems='center' justifyContent='between'>
+            <Stack>
+              <Text theme='white' size='xl' weight='bold'>
+                <FormattedMessage id='signup_panel.title' defaultMessage='New to {site_title}?' values={{ site_title: siteTitle }} />
+              </Text>
+
+              <Text theme='white' className='opacity-80'>
+                <FormattedMessage id='signup_panel.subtitle' defaultMessage='Sign up now to discuss.' />
+              </Text>
+            </Stack>
+
+            <Button theme='ghost' to='/'>
+              <FormattedMessage id='account.register' defaultMessage='Sign up' />
+            </Button>
+          </HStack>
+        </div>
+      </div>
+    </div>
   );
 };