fixed global styles redundancy

2026-03-31 11:08:32 +04:00 · 2026-03-31 11:08:32 +04:00 · fcc3d9e868
commit fcc3d9e868
parent a31af13c84
14 changed files with 4 additions and 125 deletions
--- a/frontend/src/components/Constructor/ElementEditorPanel.tsx
+++ b/frontend/src/components/Constructor/ElementEditorPanel.tsx
@ -461,10 +461,6 @@ export function ElementEditorPanel({
                        descriptionTextColor={
                          selectedElement.descriptionTextColor || '#4B5563'
                        }
-                        descriptionBackgroundColor={
-                          selectedElement.descriptionBackgroundColor ||
-                          'transparent'
-                        }
                        iconAssetOptions={iconAssetOptions}
                        onChange={(prop, value) =>
                          onUpdateElement({ [prop]: value })
@ -611,8 +607,6 @@ export function ElementEditorPanel({
                    zIndex: selectedElement.zIndex || '',
                    backgroundColor: selectedElement.backgroundColor || '',
                    color: selectedElement.color || '',
-                    fontFamily: selectedElement.fontFamily || '',
-                    fontStretch: selectedElement.fontStretch || '',
                  }}
                  onChange={(prop, value) =>
                    handleCssPropertyChange(prop, value, onUpdateElement)
--- a/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
+++ b/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
@ -19,7 +19,6 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
  descriptionTextFontFamily,
  descriptionTitleColor,
  descriptionTextColor,
-  descriptionBackgroundColor,
  onChange,
  context,
  iconAssetOptions = [],
@ -135,15 +134,6 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
            className='h-10 w-full'
          />
        </FormField>
-        <FormField label='Background color'>
-          <input
-            value={descriptionBackgroundColor}
-            onChange={(event) =>
-              onChange('descriptionBackgroundColor', event.target.value)
-            }
-            placeholder='e.g. transparent, #ffffff'
-          />
-        </FormField>
      </div>
    </div>
  );
--- a/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx
@ -20,7 +20,6 @@ interface DescriptionSettingsSectionCompactProps {
  descriptionTextFontFamily: string;
  descriptionTitleColor: string;
  descriptionTextColor: string;
-  descriptionBackgroundColor: string;
  iconAssetOptions: AssetOption[];
  onChange: (prop: string, value: string) => void;
 }
@ -37,7 +36,6 @@ const DescriptionSettingsSectionCompact: React.FC<
  descriptionTextFontFamily,
  descriptionTitleColor,
  descriptionTextColor,
-  descriptionBackgroundColor,
  iconAssetOptions,
  onChange,
 }) => {
@ -183,20 +181,6 @@ const DescriptionSettingsSectionCompact: React.FC<
          }
        />
      </div>
-
-      <div>
-        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-          Background color
-        </label>
-        <input
-          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-          value={descriptionBackgroundColor}
-          onChange={(event) =>
-            onChange('descriptionBackgroundColor', event.target.value)
-          }
-          placeholder='e.g. transparent, #ffffff, rgba(0,0,0,0.5)'
-        />
-      </div>
    </div>
  );
 };
--- a/frontend/src/components/ElementSettings/StyleSettingsSection.tsx
+++ b/frontend/src/components/ElementSettings/StyleSettingsSection.tsx
@ -8,7 +8,6 @@
 import React from 'react';
 import FormField from '../FormField';
 import type { StyleSettingsSectionProps } from './types';
-import { FONT_OPTIONS, getFontByKey, getFontKeyFromValues } from '../../lib/fonts';

 const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
  values,
@ -241,31 +240,6 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
            placeholder='e.g. #131C22 / inherit'
          />
        </FormField>
-        <FormField label='Font family'>
-          <select
-            value={getFontKeyFromValues(values.fontFamily, values.fontStretch)}
-            onChange={(event) => {
-              const fontKey = event.target.value;
-              if (!fontKey) {
-                onChange('fontFamily', '');
-                onChange('fontStretch', '');
-              } else {
-                const font = getFontByKey(fontKey);
-                if (font) {
-                  onChange('fontFamily', font.fontFamily);
-                  onChange('fontStretch', font.fontStretch || '');
-                }
-              }
-            }}
-          >
-            <option value=''>Not set</option>
-            {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.key}>
-                {font.label}
-              </option>
-            ))}
-          </select>
-        </FormField>
      </div>
    </div>
  );
--- a/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
@ -7,7 +7,6 @@

 import React from 'react';
 import type { StyleSettingsSectionProps } from './types';
-import { FONT_OPTIONS, getFontByKey, getFontKeyFromValues } from '../../lib/fonts';

 const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
  values,
@ -337,36 +336,6 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
          />
        </div>
      </div>
-
-      <div>
-        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-          Font family
-        </label>
-        <select
-          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-          value={getFontKeyFromValues(values.fontFamily, values.fontStretch)}
-          onChange={(e) => {
-            const fontKey = e.target.value;
-            if (!fontKey) {
-              onChange('fontFamily', '');
-              onChange('fontStretch', '');
-            } else {
-              const font = getFontByKey(fontKey);
-              if (font) {
-                onChange('fontFamily', font.fontFamily);
-                onChange('fontStretch', font.fontStretch || '');
-              }
-            }
-          }}
-        >
-          <option value=''>Not set</option>
-          {FONT_OPTIONS.map((font) => (
-            <option key={font.key} value={font.key}>
-              {font.label}
-            </option>
-          ))}
-        </select>
-      </div>
    </div>
  );
 };
--- a/frontend/src/components/ElementSettings/types.ts
+++ b/frontend/src/components/ElementSettings/types.ts
@ -125,7 +125,6 @@ export interface DescriptionSettingsSectionProps {
  descriptionTextFontFamily: string;
  descriptionTitleColor: string;
  descriptionTextColor: string;
-  descriptionBackgroundColor: string;
  onChange: (field: string, value: string) => void;
  context: ElementSettingsContext;
  iconAssetOptions?: AssetOption[];
--- a/frontend/src/components/ElementSettings/useElementSettingsForm.ts
+++ b/frontend/src/components/ElementSettings/useElementSettingsForm.ts
@ -68,7 +68,6 @@ interface FormState {
  zIndex: string;
  backgroundColor: string;
  color: string;
-  fontFamily: string;

  // Effect settings
  appearAnimation: string;
@ -115,7 +114,6 @@ interface FormState {
  descriptionTextFontFamily: string;
  descriptionTitleColor: string;
  descriptionTextColor: string;
-  descriptionBackgroundColor: string;

  // Media settings
  mediaUrl: string;
@ -167,7 +165,6 @@ const initialState: FormState = {
  zIndex: '',
  backgroundColor: '',
  color: '',
-  fontFamily: '',
  // Effect settings
  appearAnimation: '',
  appearAnimationDuration: '',
@ -207,7 +204,6 @@ const initialState: FormState = {
  descriptionTextFontFamily: '',
  descriptionTitleColor: '',
  descriptionTextColor: '',
-  descriptionBackgroundColor: '',
  mediaUrl: '',
  mediaAutoplay: false,
  mediaLoop: false,
@ -271,7 +267,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
        zIndex: String(settings.zIndex || ''),
        backgroundColor: String(settings.backgroundColor || ''),
        color: String(settings.color || ''),
-        fontFamily: String(settings.fontFamily || ''),
        // Effect settings
        appearAnimation: String(settings.appearAnimation || ''),
        appearAnimationDuration: String(settings.appearAnimationDuration || ''),
@ -326,9 +321,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
        ),
        descriptionTitleColor: String(settings.descriptionTitleColor || ''),
        descriptionTextColor: String(settings.descriptionTextColor || ''),
-        descriptionBackgroundColor: String(
-          settings.descriptionBackgroundColor || '',
-        ),
        mediaUrl: String(settings.mediaUrl || ''),
        mediaAutoplay: Boolean(settings.mediaAutoplay),
        mediaLoop: Boolean(settings.mediaLoop),
@ -408,7 +400,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
      zIndex: state.zIndex,
      backgroundColor: state.backgroundColor,
      color: state.color,
-      fontFamily: state.fontFamily,
    };
  }, [state]);

@ -581,11 +572,9 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
    // Additional CSS properties
    const backgroundColorValue = toOptionalTrimmed(state.backgroundColor);
    const colorValue = toOptionalTrimmed(state.color);
-    const fontFamilyValue = toOptionalTrimmed(state.fontFamily);

    if (backgroundColorValue) settings.backgroundColor = backgroundColorValue;
    if (colorValue) settings.color = colorValue;
-    if (fontFamilyValue) settings.fontFamily = fontFamilyValue;

    // Effect properties
    const appearAnimationValue = toOptionalTrimmed(state.appearAnimation);
@ -677,8 +666,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
        state.descriptionTitleColor.trim() || '#000000';
      settings.descriptionTextColor =
        state.descriptionTextColor.trim() || '#4B5563';
-      settings.descriptionBackgroundColor =
-        state.descriptionBackgroundColor.trim() || 'transparent';
    }

    // Gallery type settings
--- a/frontend/src/components/UiElements/elements/DescriptionElement.tsx
+++ b/frontend/src/components/UiElements/elements/DescriptionElement.tsx
@ -63,11 +63,10 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
  }

  // Without icon: render styled text description
-  const bgColor = element.descriptionBackgroundColor || 'transparent';
-
+  // Background color is controlled via CSS Styles tab (backgroundColor property)
  return (
    <div className={className} style={style}>
-      <div className='p-4 rounded' style={{ backgroundColor: bgColor }}>
+      <div className='p-4'>
        <p
          className='font-bold'
          style={{
--- a/frontend/src/components/UiElements/shared/useElementWrapperStyle.ts
+++ b/frontend/src/components/UiElements/shared/useElementWrapperStyle.ts
@ -61,8 +61,8 @@ export function useElementWrapperStyle({
    const hasTransparentBackground =
      (isDescriptionElementType(element.type) &&
        !element.iconUrl &&
-        (!element.descriptionBackgroundColor ||
-          element.descriptionBackgroundColor === 'transparent')) ||
+        (!element.backgroundColor ||
+          element.backgroundColor === 'transparent')) ||
      (isNavigationElementType(element.type) && Boolean(element.iconUrl)) ||
      isTooltipElementType(element.type) ||
      isGalleryElementType(element.type) ||
--- a/frontend/src/lib/elementDefaults.ts
+++ b/frontend/src/lib/elementDefaults.ts
@ -124,7 +124,6 @@ export const TYPE_SPECIFIC_DEFAULTS: Partial<
    descriptionTextFontFamily: 'inherit',
    descriptionTitleColor: '#ffffff',
    descriptionTextColor: '#ffffff',
-    descriptionBackgroundColor: 'transparent',
  },
  gallery: {
    galleryCards: [],
@ -514,11 +513,6 @@ export const buildElementSettings = (
      'descriptionTextColor',
      element.descriptionTextColor,
    );
-    addIfNotEmpty(
-      settings,
-      'descriptionBackgroundColor',
-      element.descriptionBackgroundColor,
-    );
  }

  // Gallery type settings
--- a/frontend/src/lib/elementStyles.ts
+++ b/frontend/src/lib/elementStyles.ts
@ -36,8 +36,6 @@ export interface ElementStyleProperties {
  zIndex?: string;
  backgroundColor?: string;
  color?: string;
-  fontFamily?: string;
-  fontStretch?: string;
 }

 /**
@ -68,8 +66,6 @@ export const ELEMENT_STYLE_PROPS = [
  'zIndex',
  'backgroundColor',
  'color',
-  'fontFamily',
-  'fontStretch',
 ] as const;

 /**
--- a/frontend/src/pages/element-type-defaults/[id].tsx
+++ b/frontend/src/pages/element-type-defaults/[id].tsx
@ -341,9 +341,6 @@ const ElementTypeDefaultDetailsPage = () => {
                      }
                      descriptionTitleColor={form.state.descriptionTitleColor}
                      descriptionTextColor={form.state.descriptionTextColor}
-                      descriptionBackgroundColor={
-                        form.state.descriptionBackgroundColor
-                      }
                      onChange={handleTypeChange}
                      context='global'
                    />
--- a/frontend/src/pages/project-element-defaults/[id].tsx
+++ b/frontend/src/pages/project-element-defaults/[id].tsx
@ -526,9 +526,6 @@ const ProjectElementDefaultDetailsPage = () => {
                    }
                    descriptionTitleColor={form.state.descriptionTitleColor}
                    descriptionTextColor={form.state.descriptionTextColor}
-                    descriptionBackgroundColor={
-                      form.state.descriptionBackgroundColor
-                    }
                    onChange={handleTypeChange}
                    context='project'
                  />
--- a/frontend/src/types/constructor.ts
+++ b/frontend/src/types/constructor.ts
@ -115,7 +115,6 @@ export interface CanvasElement extends BaseCanvasElement {
  descriptionTextFontFamily?: string;
  descriptionTitleColor?: string;
  descriptionTextColor?: string;
-  descriptionBackgroundColor?: string;
  navLabel?: string;
  navLabelFontFamily?: string;
  navType?: NavigationButtonKind;