Merge branch 'next' into 'next'

next

See merge request soapbox-pub/soapbox-fe!1260

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 { makeGetAccount, makeGetOtherAccounts } from 'soapbox/selectors';
-import { closeSidebar } from '../actions/sidebar';
+import { getBaseURL } from 'soapbox/utils/accounts';
-import { makeGetAccount, makeGetOtherAccounts } from '../selectors';
 
 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<AccountEntity> = 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 && (
+                  <SidebarLink
+                    to='/bookmarks'
+                    icon={require('@tabler/icons/icons/bookmark.svg')}
+                    text={intl.formatMessage(messages.bookmarks)}
+                    onClick={onClose}
+                  />
+                )}
+
+                {features.lists && (
+                  <SidebarLink
+                    to='/lists'
+                    icon={require('@tabler/icons/icons/list.svg')}
+                    text={intl.formatMessage(messages.lists)}
+                    onClick={onClose}
+                  />
+                )}
+
+                {instance.invites_enabled && (
+                  <SidebarLink
+                    to={`${baseURL}/invites`}
+                    icon={require('@tabler/icons/icons/mailbox.svg')}
+                    text={intl.formatMessage(messages.invites)}
+                    onClick={onClose}
+                  />
+                )}
+
+                {settings.get('isDeveloper') && (
+                  <SidebarLink
+                    to='/developers'
+                    icon={require('@tabler/icons/icons/code.svg')}
+                    text={intl.formatMessage(messages.developers)}
+                    onClick={onClose}
+                  />
+                )}
+
                 {features.publicTimeline && <>
                   <hr className='dark:border-slate-700' />
 

app/soapbox/components/ui/input/input.tsx

@@ -70,7 +70,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 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'
               >
                 <SvgIcon
                   src={revealed ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}

app/soapbox/features/auth_layout/index.tsx

@@ -20,7 +20,7 @@ const AuthLayout = () => {
 
   return (
     <div>
-      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50' />
+      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900' />
 
       <main className='relative flex flex-col h-screen'>
         <header className='pt-10 flex justify-center relative'>
@@ -29,7 +29,7 @@ const AuthLayout = () => {
               <img src={logo} alt={siteTitle} className='h-7' />
             ) : (
               <SvgIcon
-                className='w-7 h-7'
+                className='w-7 h-7 dark:text-white'
                 alt={siteTitle}
                 src={require('@tabler/icons/icons/home.svg')}
               />

app/soapbox/features/auth_login/components/password_reset.js

@@ -42,7 +42,7 @@ class PasswordReset extends ImmutablePureComponent {
 
     return (
       <div>
-        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
           <h1 className='text-center font-bold text-2xl'>
             {intl.formatMessage({ id: 'password_reset.header', defaultMessage: 'Reset Password' })}
           </h1>

app/soapbox/features/public_layout/components/header.tsx

@@ -128,7 +128,7 @@ const Header = () => {
                 <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                   <IconButton
                     src={require('@tabler/icons/icons/help.svg')}
-                    className='bg-transparent text-gray-400 hover:text-gray-700 cursor-pointer'
+                    className='bg-transparent text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer'
                     iconClassName='w-5 h-5'
                   />
                 </Tooltip>

app/soapbox/features/public_layout/index.js

@@ -35,7 +35,7 @@ class PublicLayout extends ImmutablePureComponent {
 
     return (
       <div className='h-full'>
-        <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50' />
+        <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900' />
 
         <div className='flex flex-col h-screen'>
           <div className='flex-shrink-0'>

app/soapbox/features/verification/waitlist_page.js

@@ -25,7 +25,7 @@ const WaitlistPage = ({ account }) => {
   };
 
   return (
-    <div className='h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50'>
+    <div className='h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900'>
       <main className='relative flex flex-col h-screen max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <header className='relative flex justify-between h-16'>
           <div className='flex-1 flex items-stretch justify-center relative'>

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;
+    @apply text-gray-900 dark:text-gray-100 font-normal;
-    color: $color-5-dark;
   }
 
   .simple_form p.lead {

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;