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/__tests__/cta-banner.test.tsx b/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx new file mode 100644 index 000000000..cc4c118e6 --- /dev/null +++ b/app/soapbox/features/ui/components/__tests__/cta-banner.test.tsx @@ -0,0 +1,30 @@ +import { Map as ImmutableMap } from 'immutable'; +import React from 'react'; + +import { render, screen } from '../../../../jest/test-helpers'; +import CtaBanner from '../cta-banner'; + +describe('', () => { + it('renders the banner', () => { + render(); + expect(screen.getByTestId('cta-banner')).toHaveTextContent(/sign up/i); + }); + + describe('with a logged in user', () => { + it('renders empty', () => { + const store = { me: true }; + + render(, null, store); + expect(screen.queryAllByTestId('cta-banner')).toHaveLength(0); + }); + }); + + describe('with singleUserMode enabled', () => { + it('renders empty', () => { + const store = { soapbox: ImmutableMap({ singleUserMode: true }) }; + + render(, null, store); + expect(screen.queryAllByTestId('cta-banner')).toHaveLength(0); + }); + }); +}); diff --git a/app/soapbox/features/ui/components/cta-banner.tsx b/app/soapbox/features/ui/components/cta-banner.tsx new file mode 100644 index 000000000..a1b5a8d8c --- /dev/null +++ b/app/soapbox/features/ui/components/cta-banner.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { Button, HStack, Stack, Text } from 'soapbox/components/ui'; +import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks'; + +const CtaBanner = () => { + const { singleUserMode } = useSoapboxConfig(); + const siteTitle = useAppSelector((state) => state.instance.title); + const me = useAppSelector((state) => state.me); + + if (me || singleUserMode) return null; + + return ( +
+
+ + + + + + + + + + + + + +
+
+ ); +}; + +export default CtaBanner; diff --git a/app/soapbox/features/ui/components/sign_up_panel.tsx b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx similarity index 96% rename from app/soapbox/features/ui/components/sign_up_panel.tsx rename to app/soapbox/features/ui/components/panels/sign-up-panel.tsx index 2a54c5c11..4cabf17e8 100644 --- a/app/soapbox/features/ui/components/sign_up_panel.tsx +++ b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx @@ -18,7 +18,7 @@ const SignUpPanel = () => { - + diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts index d08319735..1e6b03706 100644 --- a/app/soapbox/features/ui/util/async-components.ts +++ b/app/soapbox/features/ui/util/async-components.ts @@ -343,7 +343,11 @@ export function PromoPanel() { } export function SignUpPanel() { - return import(/* webpackChunkName: "features/ui" */'../components/sign_up_panel'); + return import(/* webpackChunkName: "features/ui" */'../components/panels/sign-up-panel'); +} + +export function CtaBanner() { + return import(/* webpackChunkName: "features/ui" */'../components/cta-banner'); } export function FundingPanel() { diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json index 4ae46ce45..0ffbfa7cf 100644 --- a/app/soapbox/locales/defaultMessages.json +++ b/app/soapbox/locales/defaultMessages.json @@ -6599,7 +6599,7 @@ "id": "account.register" } ], - "path": "app/soapbox/features/ui/components/sign_up_panel.json" + "path": "app/soapbox/features/ui/components/panels/sign-up-panel.json" }, { "descriptors": [ @@ -6949,4 +6949,4 @@ ], "path": "app/soapbox/pages/profile_page.json" } -] \ No newline at end of file +] diff --git a/app/soapbox/pages/default_page.tsx b/app/soapbox/pages/default_page.tsx index 21c9026f5..b64cf452d 100644 --- a/app/soapbox/pages/default_page.tsx +++ b/app/soapbox/pages/default_page.tsx @@ -6,6 +6,7 @@ import { WhoToFollowPanel, TrendsPanel, SignUpPanel, + CtaBanner, } from 'soapbox/features/ui/util/async-components'; import { useAppSelector, useFeatures } from 'soapbox/hooks'; @@ -19,6 +20,12 @@ const DefaultPage: React.FC = ({ children }) => { <> {children} + + {!me && ( + + {Component => } + + )} diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx index 5c81ad901..643de6419 100644 --- a/app/soapbox/pages/home_page.tsx +++ b/app/soapbox/pages/home_page.tsx @@ -10,6 +10,7 @@ import { FundingPanel, CryptoDonatePanel, BirthdayPanel, + CtaBanner, } from 'soapbox/features/ui/util/async-components'; import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig } from 'soapbox/hooks'; @@ -56,6 +57,12 @@ const HomePage: React.FC = ({ children }) => { )} {children} + + {!me && ( + + {Component => } + + )} diff --git a/app/soapbox/pages/profile_page.tsx b/app/soapbox/pages/profile_page.tsx index e1691e14b..c3cb65ff4 100644 --- a/app/soapbox/pages/profile_page.tsx +++ b/app/soapbox/pages/profile_page.tsx @@ -10,6 +10,7 @@ import { ProfileMediaPanel, ProfileFieldsPanel, SignUpPanel, + CtaBanner, } from 'soapbox/features/ui/util/async-components'; import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks'; import { findAccountByUsername } from 'soapbox/selectors'; @@ -134,6 +135,12 @@ const ProfilePage: React.FC = ({ params, children }) => { {children} + + {!me && ( + + {Component => } + + )} diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js index 302d1238a..e4ff9955e 100644 --- a/app/soapbox/pages/status_page.js +++ b/app/soapbox/pages/status_page.js @@ -7,6 +7,7 @@ import { WhoToFollowPanel, TrendsPanel, SignUpPanel, + CtaBanner, } from 'soapbox/features/ui/util/async-components'; // import GroupSidebarPanel from '../features/groups/sidebar_panel'; import { getFeatures } from 'soapbox/utils/features'; @@ -35,6 +36,12 @@ class StatusPage extends ImmutablePureComponent { <> {children} + + {!me && ( + + {Component => } + + )}