From c879f82b48ba8c40e2351eff07c840c0f0826621 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 10 May 2022 15:50:35 -0400 Subject: [PATCH 1/5] Remove beta page --- app/soapbox/actions/beta.js | 19 --- app/soapbox/containers/soapbox.tsx | 1 - app/soapbox/features/beta/index.js | 108 ------------- app/soapbox/features/public_layout/index.js | 2 - .../normalizers/soapbox/soapbox_config.ts | 1 - app/styles/about.scss | 152 ------------------ 6 files changed, 283 deletions(-) delete mode 100644 app/soapbox/actions/beta.js delete mode 100644 app/soapbox/features/beta/index.js diff --git a/app/soapbox/actions/beta.js b/app/soapbox/actions/beta.js deleted file mode 100644 index 21f4013b4..000000000 --- a/app/soapbox/actions/beta.js +++ /dev/null @@ -1,19 +0,0 @@ -import { staticClient } from '../api'; - -export const FETCH_BETA_PAGE_REQUEST = 'FETCH_BETA_PAGE_REQUEST'; -export const FETCH_BETA_PAGE_SUCCESS = 'FETCH_BETA_PAGE_SUCCESS'; -export const FETCH_BETA_PAGE_FAIL = 'FETCH_BETA_PAGE_FAIL'; - -export function fetchBetaPage(slug = 'index', locale) { - return (dispatch, getState) => { - dispatch({ type: FETCH_BETA_PAGE_REQUEST, slug, locale }); - const filename = `${slug}${locale ? `.${locale}` : ''}.html`; - return staticClient.get(`/instance/beta/${filename}`).then(({ data: html }) => { - dispatch({ type: FETCH_BETA_PAGE_SUCCESS, slug, locale, html }); - return html; - }).catch(error => { - dispatch({ type: FETCH_BETA_PAGE_FAIL, slug, locale, error }); - throw error; - }); - }; -} diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index a3aa26a6a..10e9d5559 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -183,7 +183,6 @@ const SoapboxMount = () => { {!me && } - {(features.accountCreation && instance.registrations) && ( diff --git a/app/soapbox/features/beta/index.js b/app/soapbox/features/beta/index.js deleted file mode 100644 index aaba33fc5..000000000 --- a/app/soapbox/features/beta/index.js +++ /dev/null @@ -1,108 +0,0 @@ -import React from 'react'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { injectIntl, FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; - -import { fetchBetaPage } from 'soapbox/actions/beta'; -import { getSettings } from 'soapbox/actions/settings'; -import { getSoapboxConfig } from 'soapbox/actions/soapbox'; - -import { languages } from '../preferences'; - -const mapStateToProps = state => ({ - locale: getSettings(state).get('locale'), - betaPages: getSoapboxConfig(state).get('betaPages'), -}); - -@connect(mapStateToProps) -@injectIntl -class BetaPage extends ImmutablePureComponent { - - state = { - pageHtml: '', - locale: this.props.locale, - } - - loadPageHtml = () => { - const { dispatch, match, betaPages } = this.props; - const { locale } = this.state; - const { slug } = match.params; - const page = betaPages.get(slug || 'beta'); - const fetchLocale = page && locale !== page.get('default') && page.get('locales').includes(locale); - dispatch(fetchBetaPage(slug, fetchLocale && locale)).then(html => { - this.setState({ pageHtml: html }); - }).catch(error => { - // TODO: Better error handling. 404 page? - this.setState({ pageHtml: '

Page not found

' }); - }); - } - - setLocale = (locale) => () => { - this.setState({ locale }); - }; - - componentDidMount() { - this.loadPageHtml(); - } - - componentDidUpdate(prevProps, prevState) { - const { locale, match, betaPages } = this.props; - const { locale: prevLocale, betaPages: prevBetaPages } = prevProps; - const { locale: stateLocale } = this.state; - const { locale: prevStateLocale } = prevState; - - const { slug } = match.params; - const { slug: prevSlug } = prevProps.match.params; - - if (locale !== prevLocale) this.setState({ locale }); - - if ( - slug !== prevSlug || - stateLocale !== prevStateLocale || - (!prevBetaPages.get(slug || 'beta') && betaPages.get(slug || 'beta')) - ) - this.loadPageHtml(); - } - - render() { - const { match, betaPages } = this.props; - const { slug } = match.params; - - const page = betaPages.get(slug || 'beta'); - const defaultLocale = page && page.get('default'); - const alsoAvailable = page && ( -
- - {' '} - -
- ); - - return ( -
-
- {alsoAvailable} -
- ); - } - -} - -export default BetaPage; diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js index 30c206838..99d7f48e3 100644 --- a/app/soapbox/features/public_layout/index.js +++ b/app/soapbox/features/public_layout/index.js @@ -13,7 +13,6 @@ import { import { isStandalone } from 'soapbox/utils/state'; import AboutPage from '../about'; -import BetaPage from '../beta'; import LandingPage from '../landing_page'; import MobilePage from '../mobile'; @@ -47,7 +46,6 @@ class PublicLayout extends ImmutablePureComponent { -
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index cab8dc44c..f1fed529b 100644 --- a/app/soapbox/normalizers/soapbox/soapbox_config.ts +++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts @@ -110,7 +110,6 @@ export const SoapboxConfigRecord = ImmutableRecord({ limit: 1, }), aboutPages: ImmutableMap(), - betaPages: ImmutableMap(), mobilePages: ImmutableMap(), authenticatedProfile: true, singleUserMode: false, diff --git a/app/styles/about.scss b/app/styles/about.scss index b1041d7d4..5e2753feb 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -234,158 +234,6 @@ $fluid-breakpoint: $maximum-width + 20px; } } - .beta-page { - .app-cta { - display: flex; - align-items: center; - margin: 40px auto; - - @media screen and (max-width: 768px) { - flex-direction: column; - } - - .copy { - flex: 2; - background: white; - border: 1px solid #eee; - padding: 80px; - border-radius: 10px; - - @media screen and (max-width: 768px) { - padding: 60px 20px 20px 20px; - order: 1; - text-align: center; - } - } - - .icon { - border-radius: 10px; - transform: scale(1.25); - display: flex; - align-items: center; - justify-content: center; - flex: 1; - padding: 40px; - background: linear-gradient(to bottom, $color-4-light, $color-4); - box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1); - - @media screen and (max-width: 768px) { - order: 0; - transform: scale(0.75); - margin-bottom: -60px; - } - - img { - border-radius: 16px; - box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1); - } - } - - h1 { - margin: 0 0 20px 0; - font-size: 80px; - line-height: 90px; - font-weight: 600; - background: -webkit-linear-gradient(135deg, $color-9, $color-4-light, $color-2-light); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - - @media screen and (max-width: 767px) { - margin-bottom: 30px; - text-align: center; - font-size: 50px; - line-height: 55px; - } - } - } - } - - .beta-header { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - - .hand-wave { - display: flex; - align-items: center; - justify-content: center; - width: 200px; - height: 200px; - background: white; - border-radius: 50%; - margin-bottom: 20px; - - @media screen and (max-width: $fluid-breakpoint) { - width: 120px; - height: 120px; - } - - img { - animation: 1s ease-in wave; - max-width: 140px; - - @media screen and (max-width: $fluid-breakpoint) { - width: 80px; - height: 80px; - } - } - } - - .message { - margin: 40px 0; - padding: 20px; - width: 100%; - background: lighten($color-4-light, 30%); - border-radius: 10px; - - p { - color: $color-4; - text-align: center; - font-size: 20px; - font-weight: 500; - } - - span { - font-style: italic; - font-weight: 600; - } - } - - .group { - display: flex; - align-items: center; - - @media screen and (max-width: $fluid-breakpoint) { - display: block; - } - - .logo { - padding: 0 40px; - border-right: 10px solid transparentize($color-3, 0.9); - - @media screen and (max-width: $fluid-breakpoint) { - border-right: none; - } - } - - .text { - padding: 0 40px; - font-weight: 600; - font-size: 80px; - font-style: italic; - color: $color-4-dark; - - @media screen and (max-width: $fluid-breakpoint) { - padding: 0; - font-weight: 600; - font-size: 40px; - text-align: center; - } - } - } - } - .faq { margin-bottom: 80px; From 23e20568e1e36e4e7b4a36180fcb99dcd23a190e Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 10 May 2022 15:51:36 -0400 Subject: [PATCH 2/5] Add Dark Mode support to landing page header --- .../features/public_layout/components/header.tsx | 11 ++++++++--- .../features/public_layout/components/sonar.tsx | 8 ++++---- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx index 79253194e..03b33b0c4 100644 --- a/app/soapbox/features/public_layout/components/header.tsx +++ b/app/soapbox/features/public_layout/components/header.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useDispatch } from 'react-redux'; @@ -27,10 +28,10 @@ const Header = () => { const dispatch = useDispatch(); const intl = useIntl(); - const { logo } = useSoapboxConfig(); + const { logo, logoDarkMode } = useSoapboxConfig(); const features = useFeatures(); const instance = useAppSelector((state) => state.instance); - const isOpen = instance.get('registrations', false) === true; + const isOpen = instance.get('registrations', false) === true; const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true); const [isLoading, setLoading] = React.useState(false); @@ -76,7 +77,11 @@ const Header = () => { - Logo + Logo + {logoDarkMode && ( + Logo + )} + {intl.formatMessage(messages.home)} diff --git a/app/soapbox/features/public_layout/components/sonar.tsx b/app/soapbox/features/public_layout/components/sonar.tsx index f6a8ce21e..10ae9f293 100644 --- a/app/soapbox/features/public_layout/components/sonar.tsx +++ b/app/soapbox/features/public_layout/components/sonar.tsx @@ -3,10 +3,10 @@ import React from 'react'; const Sonar = () => (
-
-
-
-
+
+
+
+
From 3e2058a4b10a7087b41de01c0dab43a8457736c8 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 10 May 2022 15:51:58 -0400 Subject: [PATCH 3/5] Add custom HTML to Tailwind Purge config --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 0aa665e2e..7ac10feee 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,7 @@ const { parseColorMatrix } = require('./tailwind/colors'); module.exports = { - content: ['./app/**/*.{html,js,ts,tsx}'], + content: ['./app/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html'], darkMode: 'class', theme: { screens: { From c86282597032f4cfeec4c371ef43f65bd459218f Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 10 May 2022 15:52:12 -0400 Subject: [PATCH 4/5] Add dark mode support to landing page --- app/soapbox/components/landing-gradient.tsx | 2 +- app/soapbox/components/ui/checkbox/checkbox.tsx | 2 +- app/soapbox/features/landing_page/index.tsx | 3 ++- app/soapbox/features/public_layout/index.js | 14 ++++++-------- 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx index 53e500d28..28be27373 100644 --- a/app/soapbox/components/landing-gradient.tsx +++ b/app/soapbox/components/landing-gradient.tsx @@ -2,7 +2,7 @@ import React from 'react'; /** Fullscreen gradient used as a backdrop to public pages. */ const LandingGradient: React.FC = () => ( -
+
); export default LandingGradient; diff --git a/app/soapbox/components/ui/checkbox/checkbox.tsx b/app/soapbox/components/ui/checkbox/checkbox.tsx index dc7a4e370..3199d4a33 100644 --- a/app/soapbox/components/ui/checkbox/checkbox.tsx +++ b/app/soapbox/components/ui/checkbox/checkbox.tsx @@ -9,7 +9,7 @@ const Checkbox = React.forwardRef((props, ref) => { {...props} ref={ref} type='checkbox' - className='focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded' + className='dark:bg-slate-800 dark:border-gray-600 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded' /> ); }); diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx index 4d408666d..586f198e2 100644 --- a/app/soapbox/features/landing_page/index.tsx +++ b/app/soapbox/features/landing_page/index.tsx @@ -68,13 +68,14 @@ const LandingPage = () => { return (
-
+

{instance.title}

+ {instance.description} diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js index 99d7f48e3..a7cb641eb 100644 --- a/app/soapbox/features/public_layout/index.js +++ b/app/soapbox/features/public_layout/index.js @@ -41,14 +41,12 @@ class PublicLayout extends ImmutablePureComponent {
-
-
- - - - - -
+
+ + + + +
From 504940304a3cfaad375ed298580a01d10f77ab94 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 10 May 2022 20:25:19 -0500 Subject: [PATCH 5/5] SidebarNavigation: add back search button --- app/soapbox/components/sidebar-navigation.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx index c87b7ba07..fbb91ce60 100644 --- a/app/soapbox/components/sidebar-navigation.tsx +++ b/app/soapbox/components/sidebar-navigation.tsx @@ -13,6 +13,7 @@ import SidebarNavigationLink from './sidebar-navigation-link'; import type { Menu } from 'soapbox/components/dropdown_menu'; +/** Desktop sidebar with links to different views in the app. */ const SidebarNavigation = () => { const instance = useAppSelector((state) => state.instance); const settings = useAppSelector((state) => getSettings(state)); @@ -141,6 +142,12 @@ const SidebarNavigation = () => { text={} /> + } + /> + {account && ( <>