From df0594f59f82ff8fce425a980c34147f3f45e3c6 Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Fri, 20 Mar 2026 11:54:30 +0400
Subject: [PATCH] updated Descriptionelement styles

---
 backend/src/db/api/ui_elements.js  |  4 ++
 frontend/src/pages/constructor.tsx | 74 +++++++++++++++++++++++++++++-
 2 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/backend/src/db/api/ui_elements.js b/backend/src/db/api/ui_elements.js
index d42b59e..5cc6799 100644
--- a/backend/src/db/api/ui_elements.js
+++ b/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,
diff --git a/frontend/src/pages/constructor.tsx b/frontend/src/pages/constructor.tsx
index 8da3f26..112cd7f 100644
--- a/frontend/src/pages/constructor.tsx
+++ b/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