pl-fe: allow disabling background gradient

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/loading-screen.tsx

@@ -2,18 +2,23 @@ import React from 'react';
 
 import LandingGradient from 'pl-fe/components/landing-gradient';
 import Spinner from 'pl-fe/components/ui/spinner';
+import { useSettings } from 'pl-fe/hooks/use-settings';
 
 /** Fullscreen loading indicator. */
-const LoadingScreen: React.FC = React.memo(() => (
-  <div className='fixed h-screen w-screen'>
-    <LandingGradient />
+const LoadingScreen: React.FC = React.memo(() => {
+  const { theme } = useSettings();
 
-    <div className='d-screen fixed z-10 flex w-screen items-center justify-center'>
-      <div className='p-4'>
-        <Spinner size={40} withText={false} />
+  return (
+    <div className='fixed h-screen w-screen'>
+      {(theme?.backgroundGradient ?? true)  && <LandingGradient />}
+
+      <div className='d-screen fixed z-10 flex w-screen items-center justify-center'>
+        <div className='p-4'>
+          <Spinner size={40} withText={false} />
+        </div>
       </div>
     </div>
-  </div>
-));
+  );
+});
 
 export { LoadingScreen as default };

packages/pl-fe/src/features/onboarding/onboarding-wizard.tsx

@@ -7,6 +7,7 @@ import LandingGradient from 'pl-fe/components/landing-gradient';
 import HStack from 'pl-fe/components/ui/hstack';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useFeatures } from 'pl-fe/hooks/use-features';
+import { useSettings } from 'pl-fe/hooks/use-settings';
 
 import AvatarSelectionStep from './steps/avatar-selection-step';
 import BioStep from './steps/bio-step';
@@ -19,6 +20,7 @@ import SuggestedAccountsStep from './steps/suggested-accounts-step';
 const OnboardingWizard = () => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
+  const { theme } = useSettings();
 
   const [currentStep, setCurrentStep] = React.useState<number>(0);
 
@@ -77,7 +79,7 @@ const OnboardingWizard = () => {
 
   return (
     <div data-testid='onboarding-wizard'>
-      <LandingGradient />
+      {(theme?.backgroundGradient ?? true)  && <LandingGradient />}
 
       <main className='flex h-screen flex-col overflow-x-hidden'>
         <div className='flex h-full flex-col items-center justify-center'>

packages/pl-fe/src/features/preferences/index.tsx

@@ -205,6 +205,9 @@ const Preferences = () => {
             <StepSlider value={INTERFACE_SIZES.indexOf(settings.theme?.interfaceSize || 'md')} steps={4} onChange={onInterfaceSizeChange} />
           </div>
         </ListItem>
+        <ListItem label={<FormattedMessage id='preferences.fields.theme.display_background_gradient' defaultMessage='Display background gradient' />}>
+          <SettingToggle settings={settings} settingPath={['theme', 'backgroundGradient']} defaultValue onChange={onToggleChange} />
+        </ListItem>
       </List>
 
       <HStack justifyContent='end'>

packages/pl-fe/src/features/ui/index.tsx

@@ -24,6 +24,7 @@ import { useInstance } from 'pl-fe/hooks/use-instance';
 import { useLoggedIn } from 'pl-fe/hooks/use-logged-in';
 import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
 import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
+import { useSettings } from 'pl-fe/hooks/use-settings';
 import AdminLayout from 'pl-fe/layouts/admin-layout';
 import ChatsLayout from 'pl-fe/layouts/chats-layout';
 import DefaultLayout from 'pl-fe/layouts/default-layout';
@@ -389,6 +390,7 @@ const UI: React.FC<IUI> = React.memo(({ children }) => {
   const vapidKey = useAppSelector(state => getVapidKey(state));
   const client = useClient();
   const instance = useInstance();
+  const { theme } = useSettings();
 
   const { isDropdownMenuOpen } = useUiStore();
   const standalone = useAppSelector(isStandalone);
@@ -499,7 +501,7 @@ const UI: React.FC<IUI> = React.memo(({ children }) => {
           })}
         />
 
-        <BackgroundShapes />
+        {(theme?.backgroundGradient ?? true) && <BackgroundShapes />}
 
         <div className='z-10 flex min-h-screen flex-col'>
           <Layout fullWidth={fullWidth}>

packages/pl-fe/src/locales/en.json

@@ -1419,6 +1419,7 @@
   "preferences.fields.system_emoji_font_label": "Use system emoji font",
   "preferences.fields.system_font_label": "Use system's default font",
   "preferences.fields.theme": "Theme",
+  "preferences.fields.theme.display_background_gradient": "Display background gradient",
   "preferences.fields.theme_reset": "Reset theme",
   "preferences.fields.underline_links_label": "Always underline links in posts",
   "preferences.fields.unfollow_modal_label": "Show confirmation dialog before unfollowing someone",

packages/pl-fe/src/schemas/pl-fe/settings.ts

@@ -60,6 +60,7 @@ const settingsSchema = v.object({
     accentColor: v.optional(v.string()),
     colors: v.optional(v.any()),
     interfaceSize: v.fallback(v.picklist(['sm', 'md', 'lg', 'xl']), 'md'),
+    backgroundGradient: v.optional(v.boolean(), true),
   }), undefined),
 
   systemFont: v.fallback(v.boolean(), false),