chore: adding tooltips to the shadow settings

Author: Tshepo1103-lab

shesha-reactjs/src/designer-components/text/settingsForm.ts

@@ -824,35 +824,48 @@ export const getSettings = (data: any) => {
                                     id: 'shadowStyleRow-offsetX',
                                     label: 'Offset X',
                                     hideLabel: true,
+                                    tooltip: 'Offset X',
                                     width: 80,
-                                    icon: 'offsetHorizontalIcon',
+                                    icon: "offsetHorizontalIcon",
                                     propertyName: 'shadow.offsetX',
-                                  },
-                                  {
+                                },
+                                {
                                     type: 'numberField',
                                     id: 'shadowStyleRow-offsetY',
                                     label: 'Offset Y',
                                     hideLabel: true,
+                                    tooltip: 'Offset Y',
                                     width: 80,
                                     icon: 'offsetVerticalIcon',
                                     propertyName: 'shadow.offsetY',
-                                  },
-                                  {
+                                },
+                                {
                                     type: 'numberField',
                                     id: 'shadowStyleRow-blurRadius',
                                     label: 'Blur',
                                     hideLabel: true,
+                                    tooltip: 'Blur Radius',
                                     width: 80,
                                     icon: 'blurIcon',
                                     propertyName: 'shadow.blurRadius',
-                                  },
-                                  {
+                                },
+                                {
+                                    type: 'numberField',
+                                    id: 'shadowStyleRow-spreadRadius',
+                                    label: 'Spread',
+                                    hideLabel: true,
+                                    tooltip: 'Spread Radius',
+                                    width: 80,
+                                    icon: 'spreadIcon',
+                                    propertyName: 'shadow.spreadRadius',
+                                },
+                                {
                                     type: 'colorPicker',
                                     id: 'shadowStyleRow-color',
                                     label: 'Color',
                                     hideLabel: true,
                                     propertyName: 'shadow.color',
-                                  },
+                                },
                                 ],
                               })
                               .toJson(),

shesha-reactjs/src/designer-components/text/utils.ts

@@ -94,7 +94,7 @@ export const defaultStyles = (textType: string): IStyleType => {
       type: 'Segoe UI',
       size:  textType === 'title' ? undefined : 14
     },
-    background: { type: 'color', color: 'transparent' },
+    background: { type: 'color', color: '#fff' },
     border: {
       border: {
         all: {