nicolium: remove BackgroundShapes

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

packages/nicolium/src/features/frontend-config/components/site-preview.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import InlineStyle from '@/components/inline-style';
-import BackgroundShapes from '@/features/ui/components/background-shapes';
 import { useSystemTheme } from '@/hooks/use-system-theme';
 import { useThemeCss } from '@/hooks/use-theme-css';
 
@@ -40,7 +39,6 @@ const SitePreview: React.FC<ISitePreview> = ({ frontendConfig }) => {
   return (
     <div className={bodyClass}>
       <InlineStyle>{`.site-preview {${themeCss}}`}</InlineStyle>
-      <BackgroundShapes preview hidden={userTheme === 'black'} />
 
       <div className='absolute z-[2] self-center overflow-hidden rounded-lg bg-accent-500 p-2 text-white'>
         <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />

packages/nicolium/src/features/preferences/index.tsx

@@ -347,21 +347,6 @@ const Preferences = () => {
             />
           </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>
         {settings.themeMode === 'system' && (
           <ListItem
             label={

packages/nicolium/src/features/ui/components/background-shapes.tsx

@@ -1,19 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-interface IBackgroundShapes {
-  /** Whether the shapes should be absolute positioned or fixed. */
-  preview?: boolean;
-  /** Override visibility. */
-  hidden?: boolean;
-}
-
-/** Gradient that appears in the background of the UI. */
-const BackgroundShapes: React.FC<IBackgroundShapes> = ({ preview, hidden }) =>
-  hidden ? null : (
-    <div className={clsx('⁂-background-shapes', preview && '⁂-background-shapes--preview')}>
-      <div />
-    </div>
-  );
-
-export { BackgroundShapes as default };

packages/nicolium/src/features/ui/index.tsx

@@ -26,13 +26,11 @@ import {
 } from '@/queries/notifications/use-notifications';
 import { useFilters } from '@/queries/settings/use-filters';
 import { scheduledStatusesQueryOptions } from '@/queries/statuses/scheduled-statuses';
-import { useSettings } from '@/stores/settings';
 import { useShoutboxSubscription } from '@/stores/shoutbox';
 import { useIsDropdownMenuOpen } from '@/stores/ui';
 import { getVapidKey } from '@/utils/auth';
 import { isStandalone } from '@/utils/state';
 
-import BackgroundShapes from './components/background-shapes';
 import {
   ModalRoot,
   AccountHoverCard,
@@ -55,7 +53,6 @@ const UI: React.FC = React.memo(() => {
   const vapidKey = useAppSelector((state) => getVapidKey(state));
   const client = useClient();
   const instance = useInstance();
-  const { theme } = useSettings();
 
   const isDropdownMenuOpen = useIsDropdownMenuOpen();
   const standalone = useAppSelector(isStandalone);
@@ -163,8 +160,6 @@ const UI: React.FC = React.memo(() => {
           })}
         />
 
-        {(theme?.backgroundGradient ?? true) && <BackgroundShapes />}
-
         <div className='⁂-layout__container'>
           <Layout fullWidth={fullWidth}>
             <Layout.Sidebar shrink={fullWidth}>

packages/nicolium/src/locales/en.json

@@ -1579,7 +1579,6 @@
   "preferences.fields.theme": "Theme",
   "preferences.fields.theme.dark_theme_preference_hint": "Select dark theme to be used when theme is set to \"System\"",
   "preferences.fields.theme.dark_theme_preference_label": "Dark theme preference",
-  "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/nicolium/src/schemas/frontend-settings.ts

@@ -59,7 +59,6 @@ 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),
       systemDarkThemePreference: v.fallback(v.picklist(['dark', 'black']), 'black'),
     }),
     undefined,

packages/nicolium/src/styles/new/layout.scss

@@ -399,20 +399,6 @@ body {
   }
 }
 
-.⁂-background-shapes {
-  @apply fixed pointer-events-none inset-x-0 top-0 flex justify-center overflow-hidden black:hidden;
-
-  &--preview {
-    position: absolute;
-  }
-
-  > div {
-    height: 100vh;
-    width: 100vw;
-    @apply bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark;
-  }
-}
-
 .⁂-widget {
   @apply border-b border-solid border-gray-200 black:border-gray-800 dark:border-primary-800;
   display: flex;
@@ -445,7 +431,6 @@ body {
   }
 }
 
-div:has(.⁂-background-shapes),
 .dark {
   .⁂-widget {
     @include mixins.card($variant: rounded);