updated Descriptionelement styles

backend/src/db/api/ui_elements.js

@@ -97,6 +97,10 @@ class Ui_elementsDBApi extends GenericDBApi {
           descriptionText: '',
           descriptionTitleFontSize: '48px',
           descriptionTextFontSize: '36px',
+          descriptionTitleFontFamily: 'inherit',
+          descriptionTextFontFamily: 'inherit',
+          descriptionTitleColor: '#000000',
+          descriptionTextColor: '#4B5563',
           descriptionBackgroundColor: 'transparent',
           appearDelaySec: 0,
           appearDurationSec: null,

frontend/src/pages/constructor.tsx

@@ -121,6 +121,10 @@ type CanvasElement = {
   descriptionText?: string;
   descriptionTitleFontSize?: string;
   descriptionTextFontSize?: string;
+  descriptionTitleFontFamily?: string;
+  descriptionTextFontFamily?: string;
+  descriptionTitleColor?: string;
+  descriptionTextColor?: string;
   descriptionBackgroundColor?: string;
   navLabel?: string;
   navType?: NavigationButtonKind;
@@ -488,6 +492,10 @@ const createDefaultElement = (
       descriptionText: '',
       descriptionTitleFontSize: '48px',
       descriptionTextFontSize: '36px',
+      descriptionTitleFontFamily: 'inherit',
+      descriptionTextFontFamily: 'inherit',
+      descriptionTitleColor: '#000000',
+      descriptionTextColor: '#4B5563',
       descriptionBackgroundColor: 'transparent',
     };
   }
@@ -2119,17 +2127,21 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
               fontSize: element.descriptionTitleFontSize
                 ? `calc(${element.descriptionTitleFontSize} * 0.25)`
                 : '12px',
+              fontFamily: element.descriptionTitleFontFamily || 'inherit',
+              color: element.descriptionTitleColor || '#000000',
             }}
           >
             {element.descriptionTitle || 'TITLE'}
           </p>
           {element.descriptionText && (
             <p
-              className='text-gray-600 line-clamp-4'
+              className='line-clamp-4'
               style={{
                 fontSize: element.descriptionTextFontSize
                   ? `calc(${element.descriptionTextFontSize} * 0.25)`
                   : '9px',
+                fontFamily: element.descriptionTextFontFamily || 'inherit',
+                color: element.descriptionTextColor || '#4B5563',
               }}
             >
               {element.descriptionText}
@@ -3486,6 +3498,66 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                         placeholder='e.g. 36px'
                       />
                     </div>
+                    <div>
+                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                        Title font family
+                      </label>
+                      <input
+                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                        value={selectedElement.descriptionTitleFontFamily || 'inherit'}
+                        onChange={(event) =>
+                          updateSelectedElement({
+                            descriptionTitleFontFamily: event.target.value,
+                          })
+                        }
+                        placeholder='e.g. Arial, Helvetica, sans-serif'
+                      />
+                    </div>
+                    <div>
+                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                        Text font family
+                      </label>
+                      <input
+                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                        value={selectedElement.descriptionTextFontFamily || 'inherit'}
+                        onChange={(event) =>
+                          updateSelectedElement({
+                            descriptionTextFontFamily: event.target.value,
+                          })
+                        }
+                        placeholder='e.g. Arial, Helvetica, sans-serif'
+                      />
+                    </div>
+                    <div>
+                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                        Title color
+                      </label>
+                      <input
+                        type='color'
+                        className='w-full h-8 rounded border border-gray-300 px-1 py-1'
+                        value={selectedElement.descriptionTitleColor || '#000000'}
+                        onChange={(event) =>
+                          updateSelectedElement({
+                            descriptionTitleColor: event.target.value,
+                          })
+                        }
+                      />
+                    </div>
+                    <div>
+                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                        Text color
+                      </label>
+                      <input
+                        type='color'
+                        className='w-full h-8 rounded border border-gray-300 px-1 py-1'
+                        value={selectedElement.descriptionTextColor || '#4B5563'}
+                        onChange={(event) =>
+                          updateSelectedElement({
+                            descriptionTextColor: event.target.value,
+                          })
+                        }
+                      />
+                    </div>
                     <div>
                       <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
                         Background color