updated Description element default styles

backend/src/db/api/ui_elements.js

@@ -93,8 +93,11 @@ class Ui_elementsDBApi extends GenericDBApi {
         sort_order: 4,
         default_settings_json: {
           label: 'Description',
-          descriptionTitle: 'Description title',
+          descriptionTitle: 'TITLE',
-          descriptionText: 'Description text',
+          descriptionText: '',
+          descriptionTitleFontSize: '48px',
+          descriptionTextFontSize: '36px',
+          descriptionBackgroundColor: 'transparent',
           appearDelaySec: 0,
           appearDurationSec: null,
         },

frontend/src/pages/constructor.tsx

@@ -31,6 +31,8 @@ type TourPage = {
   slug?: string;
   sort_order?: number;
   environment?: string;
+  source_key?: string;
+  requires_auth?: boolean;
   ui_schema_json?: string;
   background_image_url?: string;
   background_video_url?: string;
@@ -117,6 +119,9 @@ type CanvasElement = {
   tooltipText?: string;
   descriptionTitle?: string;
   descriptionText?: string;
+  descriptionTitleFontSize?: string;
+  descriptionTextFontSize?: string;
+  descriptionBackgroundColor?: string;
   navLabel?: string;
   navType?: NavigationButtonKind;
   targetPageId?: string;
@@ -479,8 +484,11 @@ const createDefaultElement = (
     return {
       ...base,
       iconUrl: '',
-      descriptionTitle: 'Description title',
+      descriptionTitle: 'TITLE',
-      descriptionText: 'Description text',
+      descriptionText: '',
+      descriptionTitleFontSize: '48px',
+      descriptionTextFontSize: '36px',
+      descriptionBackgroundColor: 'transparent',
     };
   }
 
@@ -515,11 +523,16 @@ const mergeElementWithDefaults = (
   if (!defaults) return element;
 
   const preferElementValues = Boolean(options?.preferElementValues);
+  const base = preferElementValues ? defaults : element;
+  const override = preferElementValues ? element : defaults;
   const merged: CanvasElement = {
-    ...(preferElementValues ? defaults : element),
+    ...base,
-    ...(preferElementValues ? element : defaults),
+    ...override,
     id: element.id,
     type: element.type,
+    label: element.label || defaults.label || element.type,
+    xPercent: element.xPercent ?? defaults.xPercent ?? 50,
+    yPercent: element.yPercent ?? defaults.yPercent ?? 50,
   };
 
   merged.xPercent = clamp(Number(merged.xPercent ?? element.xPercent), 0, 100);
@@ -691,7 +704,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     useState<EditorMenuItem>('none');
   const [transitionPreview, setTransitionPreview] =
     useState<TransitionPreviewState | null>(null);
-  const [pendingNavigationPageId, setPendingNavigationPageId] = useState('');
+  const [_pendingNavigationPageId, setPendingNavigationPageId] = useState('');
 
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
@@ -2094,14 +2107,34 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
         );
       }
 
+      const bgColor = element.descriptionBackgroundColor || 'transparent';
       return (
-        <div className='max-w-[220px] text-left'>
+        <div
-          <p className='text-[11px] font-bold'>
+          className='max-w-[220px] text-left p-2 rounded'
-            {element.descriptionTitle}
+          style={{ backgroundColor: bgColor }}
-          </p>
+        >
-          <p className='text-[10px] text-gray-600 line-clamp-4'>
+          <p
-            {element.descriptionText || 'Description text'}
+            className='font-bold'
+            style={{
+              fontSize: element.descriptionTitleFontSize
+                ? `calc(${element.descriptionTitleFontSize} * 0.25)`
+                : '12px',
+            }}
+          >
+            {element.descriptionTitle || 'TITLE'}
           </p>
+          {element.descriptionText && (
+            <p
+              className='text-gray-600 line-clamp-4'
+              style={{
+                fontSize: element.descriptionTextFontSize
+                  ? `calc(${element.descriptionTextFontSize} * 0.25)`
+                  : '9px',
+              }}
+            >
+              {element.descriptionText}
+            </p>
+          )}
         </div>
       );
     }
@@ -3414,6 +3447,51 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                         }
                       />
                     </div>
+                    <div>
+                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                        Title font size
+                      </label>
+                      <input
+                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                        value={selectedElement.descriptionTitleFontSize || '48px'}
+                        onChange={(event) =>
+                          updateSelectedElement({
+                            descriptionTitleFontSize: event.target.value,
+                          })
+                        }
+                        placeholder='e.g. 48px'
+                      />
+                    </div>
+                    <div>
+                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                        Text font size
+                      </label>
+                      <input
+                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                        value={selectedElement.descriptionTextFontSize || '36px'}
+                        onChange={(event) =>
+                          updateSelectedElement({
+                            descriptionTextFontSize: event.target.value,
+                          })
+                        }
+                        placeholder='e.g. 36px'
+                      />
+                    </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={selectedElement.descriptionBackgroundColor || 'transparent'}
+                        onChange={(event) =>
+                          updateSelectedElement({
+                            descriptionBackgroundColor: event.target.value,
+                          })
+                        }
+                        placeholder='e.g. transparent, #ffffff, rgba(0,0,0,0.5)'
+                      />
+                    </div>
                   </div>
                 )}