improved defaults for Description element

frontend/src/pages/constructor.tsx

@@ -2118,7 +2118,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
       const bgColor = element.descriptionBackgroundColor || 'transparent';
       return (
         <div
-          className='max-w-[220px] text-left p-2 rounded'
+          className='w-full text-left p-2 rounded'
           style={{ backgroundColor: bgColor }}
         >
           <p

frontend/src/pages/page_elements/page_elements-project-edit.tsx

@@ -83,6 +83,13 @@ type ConstructorElement = {
   tooltipText?: string;
   descriptionTitle?: string;
   descriptionText?: string;
+  descriptionTitleFontSize?: string;
+  descriptionTextFontSize?: string;
+  descriptionTitleFontFamily?: string;
+  descriptionTextFontFamily?: string;
+  descriptionTitleColor?: string;
+  descriptionTextColor?: string;
+  descriptionBackgroundColor?: string;
   mediaUrl?: string;
   mediaAutoplay?: boolean;
   mediaLoop?: boolean;
@@ -224,6 +231,13 @@ const PageElementsProjectEditPage = () => {
   const [tooltipText, setTooltipText] = useState('');
   const [descriptionTitle, setDescriptionTitle] = useState('');
   const [descriptionText, setDescriptionText] = useState('');
+  const [descriptionTitleFontSize, setDescriptionTitleFontSize] = useState('');
+  const [descriptionTextFontSize, setDescriptionTextFontSize] = useState('');
+  const [descriptionTitleFontFamily, setDescriptionTitleFontFamily] = useState('');
+  const [descriptionTextFontFamily, setDescriptionTextFontFamily] = useState('');
+  const [descriptionTitleColor, setDescriptionTitleColor] = useState('');
+  const [descriptionTextColor, setDescriptionTextColor] = useState('');
+  const [descriptionBackgroundColor, setDescriptionBackgroundColor] = useState('');
   const [mediaUrl, setMediaUrl] = useState('');
   const [mediaAutoplay, setMediaAutoplay] = useState(false);
   const [mediaLoop, setMediaLoop] = useState(false);
@@ -251,7 +265,7 @@ const PageElementsProjectEditPage = () => {
     setFontWeight(String(item.fontWeight || ''));
     setBorder(extractNumericValue(item.border));
     setBorderRadius(extractNumericValue(item.borderRadius));
-    setOpacity(item.opacity === '0' || item.opacity === 0 ? '0' : String(item.opacity || ''));
+    setOpacity(item.opacity === '0' ? '0' : String(item.opacity || ''));
     setBoxShadow(String(item.boxShadow || ''));
     setDisplay(String(item.display || ''));
     setPosition(String(item.position || ''));
@@ -273,6 +287,13 @@ const PageElementsProjectEditPage = () => {
     setTooltipText(String(item.tooltipText || ''));
     setDescriptionTitle(String(item.descriptionTitle || ''));
     setDescriptionText(String(item.descriptionText || ''));
+    setDescriptionTitleFontSize(String(item.descriptionTitleFontSize || ''));
+    setDescriptionTextFontSize(String(item.descriptionTextFontSize || ''));
+    setDescriptionTitleFontFamily(String(item.descriptionTitleFontFamily || ''));
+    setDescriptionTextFontFamily(String(item.descriptionTextFontFamily || ''));
+    setDescriptionTitleColor(String(item.descriptionTitleColor || ''));
+    setDescriptionTextColor(String(item.descriptionTextColor || ''));
+    setDescriptionBackgroundColor(String(item.descriptionBackgroundColor || ''));
     setMediaUrl(String(item.mediaUrl || ''));
     setMediaAutoplay(Boolean(item.mediaAutoplay));
     setMediaLoop(Boolean(item.mediaLoop));
@@ -484,6 +505,13 @@ const PageElementsProjectEditPage = () => {
         nextElement.iconUrl = iconUrl.trim();
         nextElement.descriptionTitle = descriptionTitle.trim();
         nextElement.descriptionText = descriptionText;
+        nextElement.descriptionTitleFontSize = descriptionTitleFontSize.trim() || '48px';
+        nextElement.descriptionTextFontSize = descriptionTextFontSize.trim() || '36px';
+        nextElement.descriptionTitleFontFamily = descriptionTitleFontFamily.trim() || 'inherit';
+        nextElement.descriptionTextFontFamily = descriptionTextFontFamily.trim() || 'inherit';
+        nextElement.descriptionTitleColor = descriptionTitleColor.trim() || '#000000';
+        nextElement.descriptionTextColor = descriptionTextColor.trim() || '#4B5563';
+        nextElement.descriptionBackgroundColor = descriptionBackgroundColor.trim() || 'transparent';
       }
 
       if (isGalleryType) {
@@ -879,6 +907,64 @@ const PageElementsProjectEditPage = () => {
                       />
                     </FormField>
                   </div>
+                  <FormField label='Title font size'>
+                    <input
+                      value={descriptionTitleFontSize}
+                      onChange={(event) => setDescriptionTitleFontSize(event.target.value)}
+                      disabled={!hasUpdatePermission}
+                      placeholder='e.g. 48px'
+                    />
+                  </FormField>
+                  <FormField label='Text font size'>
+                    <input
+                      value={descriptionTextFontSize}
+                      onChange={(event) => setDescriptionTextFontSize(event.target.value)}
+                      disabled={!hasUpdatePermission}
+                      placeholder='e.g. 36px'
+                    />
+                  </FormField>
+                  <FormField label='Title font family'>
+                    <input
+                      value={descriptionTitleFontFamily}
+                      onChange={(event) => setDescriptionTitleFontFamily(event.target.value)}
+                      disabled={!hasUpdatePermission}
+                      placeholder='e.g. Arial, sans-serif'
+                    />
+                  </FormField>
+                  <FormField label='Text font family'>
+                    <input
+                      value={descriptionTextFontFamily}
+                      onChange={(event) => setDescriptionTextFontFamily(event.target.value)}
+                      disabled={!hasUpdatePermission}
+                      placeholder='e.g. Arial, sans-serif'
+                    />
+                  </FormField>
+                  <FormField label='Title color'>
+                    <input
+                      type='color'
+                      value={descriptionTitleColor || '#000000'}
+                      onChange={(event) => setDescriptionTitleColor(event.target.value)}
+                      disabled={!hasUpdatePermission}
+                      className='h-10 w-full'
+                    />
+                  </FormField>
+                  <FormField label='Text color'>
+                    <input
+                      type='color'
+                      value={descriptionTextColor || '#4B5563'}
+                      onChange={(event) => setDescriptionTextColor(event.target.value)}
+                      disabled={!hasUpdatePermission}
+                      className='h-10 w-full'
+                    />
+                  </FormField>
+                  <FormField label='Background color'>
+                    <input
+                      value={descriptionBackgroundColor}
+                      onChange={(event) => setDescriptionBackgroundColor(event.target.value)}
+                      disabled={!hasUpdatePermission}
+                      placeholder='e.g. transparent, #ffffff'
+                    />
+                  </FormField>
                 </div>
               </CardBox>
             ) : null}

frontend/src/pages/ui-elements/[id].tsx

@@ -162,6 +162,13 @@ const UiElementDetailsPage = () => {
   const [tooltipText, setTooltipText] = useState('');
   const [descriptionTitle, setDescriptionTitle] = useState('');
   const [descriptionText, setDescriptionText] = useState('');
+  const [descriptionTitleFontSize, setDescriptionTitleFontSize] = useState('');
+  const [descriptionTextFontSize, setDescriptionTextFontSize] = useState('');
+  const [descriptionTitleFontFamily, setDescriptionTitleFontFamily] = useState('');
+  const [descriptionTextFontFamily, setDescriptionTextFontFamily] = useState('');
+  const [descriptionTitleColor, setDescriptionTitleColor] = useState('');
+  const [descriptionTextColor, setDescriptionTextColor] = useState('');
+  const [descriptionBackgroundColor, setDescriptionBackgroundColor] = useState('');
   const [mediaUrl, setMediaUrl] = useState('');
   const [mediaAutoplay, setMediaAutoplay] = useState(false);
   const [mediaLoop, setMediaLoop] = useState(false);
@@ -218,6 +225,13 @@ const UiElementDetailsPage = () => {
     setTooltipText(String(settings.tooltipText || ''));
     setDescriptionTitle(String(settings.descriptionTitle || ''));
     setDescriptionText(String(settings.descriptionText || ''));
+    setDescriptionTitleFontSize(String(settings.descriptionTitleFontSize || ''));
+    setDescriptionTextFontSize(String(settings.descriptionTextFontSize || ''));
+    setDescriptionTitleFontFamily(String(settings.descriptionTitleFontFamily || ''));
+    setDescriptionTextFontFamily(String(settings.descriptionTextFontFamily || ''));
+    setDescriptionTitleColor(String(settings.descriptionTitleColor || ''));
+    setDescriptionTextColor(String(settings.descriptionTextColor || ''));
+    setDescriptionBackgroundColor(String(settings.descriptionBackgroundColor || ''));
     setMediaUrl(String(settings.mediaUrl || ''));
     setMediaAutoplay(Boolean(settings.mediaAutoplay));
     setMediaLoop(Boolean(settings.mediaLoop));
@@ -416,6 +430,13 @@ const UiElementDetailsPage = () => {
       defaultSettings.iconUrl = iconUrl.trim();
       defaultSettings.descriptionTitle = descriptionTitle.trim();
       defaultSettings.descriptionText = descriptionText;
+      defaultSettings.descriptionTitleFontSize = descriptionTitleFontSize.trim() || '48px';
+      defaultSettings.descriptionTextFontSize = descriptionTextFontSize.trim() || '36px';
+      defaultSettings.descriptionTitleFontFamily = descriptionTitleFontFamily.trim() || 'inherit';
+      defaultSettings.descriptionTextFontFamily = descriptionTextFontFamily.trim() || 'inherit';
+      defaultSettings.descriptionTitleColor = descriptionTitleColor.trim() || '#000000';
+      defaultSettings.descriptionTextColor = descriptionTextColor.trim() || '#4B5563';
+      defaultSettings.descriptionBackgroundColor = descriptionBackgroundColor.trim() || 'transparent';
     }
 
     if (isGalleryType) {
@@ -481,8 +502,15 @@ const UiElementDetailsPage = () => {
     carouselSlides,
     currentElementType,
     descriptionText,
-    display,
     descriptionTitle,
+    descriptionTitleFontSize,
+    descriptionTextFontSize,
+    descriptionTitleFontFamily,
+    descriptionTextFontFamily,
+    descriptionTitleColor,
+    descriptionTextColor,
+    descriptionBackgroundColor,
+    display,
     fontSize,
     fontWeight,
     gap,
@@ -790,6 +818,59 @@ const UiElementDetailsPage = () => {
                       className='h-28 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
                     />
                   </FormField>
+                  <div className='grid gap-3 md:grid-cols-2'>
+                    <FormField label='Title font size'>
+                      <input
+                        value={descriptionTitleFontSize}
+                        onChange={(event) => setDescriptionTitleFontSize(event.target.value)}
+                        placeholder='e.g. 48px'
+                      />
+                    </FormField>
+                    <FormField label='Text font size'>
+                      <input
+                        value={descriptionTextFontSize}
+                        onChange={(event) => setDescriptionTextFontSize(event.target.value)}
+                        placeholder='e.g. 36px'
+                      />
+                    </FormField>
+                    <FormField label='Title font family'>
+                      <input
+                        value={descriptionTitleFontFamily}
+                        onChange={(event) => setDescriptionTitleFontFamily(event.target.value)}
+                        placeholder='e.g. Arial, sans-serif'
+                      />
+                    </FormField>
+                    <FormField label='Text font family'>
+                      <input
+                        value={descriptionTextFontFamily}
+                        onChange={(event) => setDescriptionTextFontFamily(event.target.value)}
+                        placeholder='e.g. Arial, sans-serif'
+                      />
+                    </FormField>
+                    <FormField label='Title color'>
+                      <input
+                        type='color'
+                        value={descriptionTitleColor || '#000000'}
+                        onChange={(event) => setDescriptionTitleColor(event.target.value)}
+                        className='h-10 w-full'
+                      />
+                    </FormField>
+                    <FormField label='Text color'>
+                      <input
+                        type='color'
+                        value={descriptionTextColor || '#4B5563'}
+                        onChange={(event) => setDescriptionTextColor(event.target.value)}
+                        className='h-10 w-full'
+                      />
+                    </FormField>
+                    <FormField label='Background color'>
+                      <input
+                        value={descriptionBackgroundColor}
+                        onChange={(event) => setDescriptionBackgroundColor(event.target.value)}
+                        placeholder='e.g. transparent, #ffffff'
+                      />
+                    </FormField>
+                  </div>
                 </>
               ) : null}