From 1ef6c55d441c8965a6cca52f9a7b77462123cdd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 25 Apr 2022 22:44:15 +0200 Subject: [PATCH 1/2] maybe add some links to sidebar menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/sidebar_menu.tsx | 50 +++++++++++++++++++++++-- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx index 2de745577..ad9471e41 100644 --- a/app/soapbox/components/sidebar_menu.tsx +++ b/app/soapbox/components/sidebar_menu.tsx @@ -6,13 +6,14 @@ import { Link, NavLink } from 'react-router-dom'; import { logOut, switchAccount } from 'soapbox/actions/auth'; import { fetchOwnAccounts } from 'soapbox/actions/auth'; +import { getSettings } from 'soapbox/actions/settings'; +import { closeSidebar } from 'soapbox/actions/sidebar'; import Account from 'soapbox/components/account'; import { Stack } from 'soapbox/components/ui'; import ProfileStats from 'soapbox/features/ui/components/profile_stats'; import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks'; - -import { closeSidebar } from '../actions/sidebar'; -import { makeGetAccount, makeGetOtherAccounts } from '../selectors'; +import { makeGetAccount, makeGetOtherAccounts } from 'soapbox/selectors'; +import { getBaseURL } from 'soapbox/utils/accounts'; import { HStack, Icon, IconButton, Text } from './ui'; @@ -32,6 +33,10 @@ const messages = defineMessages({ importData: { id: 'navigation_bar.import_data', defaultMessage: 'Import data' }, accountMigration: { id: 'navigation_bar.account_migration', defaultMessage: 'Move account' }, logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, + bookmarks: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' }, + lists: { id: 'column.lists', defaultMessage: 'Lists' }, + invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' }, + developers: { id: 'navigation.developers', defaultMessage: 'Developers' }, }); interface ISidebarLink { @@ -67,6 +72,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { const account = useAppSelector((state) => me ? getAccount(state, me) : null); const otherAccounts: ImmutableList = useAppSelector((state) => getOtherAccounts(state)); const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen); + const settings = useAppSelector((state) => getSettings(state)); + + const baseURL = account ? getBaseURL(account) : ''; const closeButtonRef = React.useRef(null); @@ -192,6 +200,42 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { onClick={onClose} /> + {features.bookmarks && ( + + )} + + {features.lists && ( + + )} + + {instance.invites_enabled && ( + + )} + + {settings.get('isDeveloper') && ( + + )} + {features.publicTimeline && <>
From 161f561b449f12532e8552aaccf043e877db4a79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 25 Apr 2022 23:41:02 +0200 Subject: [PATCH 2/2] dark styles on public pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/ui/input/input.tsx | 2 +- app/soapbox/features/auth_layout/index.tsx | 4 ++-- .../features/auth_login/components/password_reset.js | 2 +- app/soapbox/features/public_layout/components/header.tsx | 2 +- app/soapbox/features/public_layout/index.js | 2 +- app/soapbox/features/verification/waitlist_page.js | 2 +- app/styles/about.scss | 9 ++++----- app/styles/forms.scss | 4 ++-- 8 files changed, 13 insertions(+), 14 deletions(-) diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx index e8361223e..44b90912f 100644 --- a/app/soapbox/components/ui/input/input.tsx +++ b/app/soapbox/components/ui/input/input.tsx @@ -70,7 +70,7 @@ const Input = React.forwardRef( type='button' onClick={togglePassword} tabIndex={-1} - className='text-gray-400 hover:text-gray-500 h-full px-2 focus:ring-primary-500 focus:ring-2' + className='text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2' > { return (
-
+
@@ -29,7 +29,7 @@ const AuthLayout = () => { {siteTitle} ) : ( diff --git a/app/soapbox/features/auth_login/components/password_reset.js b/app/soapbox/features/auth_login/components/password_reset.js index ccc8786f1..bafa09317 100644 --- a/app/soapbox/features/auth_login/components/password_reset.js +++ b/app/soapbox/features/auth_login/components/password_reset.js @@ -42,7 +42,7 @@ class PasswordReset extends ImmutablePureComponent { return (
-
+

{intl.formatMessage({ id: 'password_reset.header', defaultMessage: 'Reset Password' })}

diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx index 585d25db6..e6528cbb4 100644 --- a/app/soapbox/features/public_layout/components/header.tsx +++ b/app/soapbox/features/public_layout/components/header.tsx @@ -128,7 +128,7 @@ const Header = () => { diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js index d7ff35155..a96e269e3 100644 --- a/app/soapbox/features/public_layout/index.js +++ b/app/soapbox/features/public_layout/index.js @@ -35,7 +35,7 @@ class PublicLayout extends ImmutablePureComponent { return (
-
+
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js index 01b71bcae..c21c4d56b 100644 --- a/app/soapbox/features/verification/waitlist_page.js +++ b/app/soapbox/features/verification/waitlist_page.js @@ -25,7 +25,7 @@ const WaitlistPage = ({ account }) => { }; return ( -
+
diff --git a/app/styles/about.scss b/app/styles/about.scss index 380c7179d..b1041d7d4 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -709,11 +709,11 @@ $fluid-breakpoint: $maximum-width + 20px; } .rich-formatting { + @apply text-gray-900 dark:text-gray-100; font-family: var(--font-sans-serif), sans-serif; font-size: 16px; font-weight: 400; line-height: 30px; - color: $color-5-dark; padding: 15px 30px; .text-center { @@ -735,11 +735,11 @@ $fluid-breakpoint: $maximum-width + 20px; p, li { + @apply text-gray-900 dark:text-gray-100; font-family: var(--font-sans-serif), sans-serif; font-size: 16px; font-weight: 400; line-height: 30px; - color: $color-5-dark; a { color: var(--highlight-text-color); @@ -760,10 +760,10 @@ $fluid-breakpoint: $maximum-width + 20px; h4, h5, h6 { + @apply text-gray-900 dark:text-gray-100; font-family: var(--font-display), sans-serif; margin-top: 2em; margin-bottom: 1.25em; - color: $color-5-dark; } hr + { @@ -1050,8 +1050,7 @@ $fluid-breakpoint: $maximum-width + 20px; } .simple_form .user_agreement .label_input > label { - font-weight: 400; - color: $color-5-dark; + @apply text-gray-900 dark:text-gray-100 font-normal; } .simple_form p.lead { diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 06a797036..442f48839 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -69,10 +69,10 @@ code { position: relative; .label_input > label { + @apply text-black dark:text-white; font-family: inherit; font-size: 14px; padding-top: 5px; - color: var(--primary-text-color); display: block; width: auto; } @@ -190,9 +190,9 @@ code { .input { .label_input > label { + @apply text-gray-700 dark:text-gray-400; font-family: inherit; font-size: 14px; - color: var(--gray-700); display: block; word-wrap: break-word; font-weight: 500;