Merge pull request #3528 from czwe-01/thulasizwe/en/container-container

fix: migrated base64 background

Author: James-Baloyi

shesha-reactjs/src/designer-components/_common-migrations/migrateStyles.ts

@@ -56,7 +56,7 @@ export const migrateStyles = <T extends ExtendedType>(prev: T, defaults?: Omit<I
             type: backgroundType,
             color: backgroundColor || defaults?.background?.color,
             repeat: backgroundRepeat || defaults?.background?.repeat || 'no-repeat',
-            size: backgroundCover || defaults?.background?.size || 'cover',
+            size: backgroundCover || defaults?.background?.size || 'auto',
             position: 'center',
             gradient: { direction: 'to right', colors: {} },
             url: backgroundUrl || defaults?.background?.url || '',

shesha-reactjs/src/designer-components/_settings/utils/background/utils.tsx

@@ -52,7 +52,8 @@ export const getBackgroundStyle = (input: IBackgroundValue, jsStyle: React.CSSPr
     } else if (input?.type === 'url') {
         style.backgroundImage = `url(${input?.url})`;
     } else if (input?.type === 'image') {
-        style.backgroundImage = `url(${input?.uploadFile})`;
+        const uploadFile = input?.uploadFile;
+        style.backgroundImage = `url(${uploadFile?.url || uploadFile})`;
     } else if (input?.type === 'storedFile') {
         style.backgroundImage = `url(${url})`;
     }

shesha-reactjs/src/designer-components/container/containerComponent.tsx

@@ -23,8 +23,8 @@ const ContainerComponent: IToolboxComponent<IContainerComponentProps> = {
   Factory: ({ model }) => {
     const { data: formData } = useFormData();
     const { globalState } = useGlobalState();
-    const { borderRadius, borderTopRightRadius, borderBottomLeftRadius, borderTopLeftRadius, borderBottomRightRadius } = model.allStyles.borderStyles;
-    const { styles, cx } = useStyles({ radius: { borderRadius, borderTopRightRadius, borderBottomLeftRadius, borderTopLeftRadius, borderBottomRightRadius } });
+    const { styles, cx } = useStyles();
+
     const {
       dimensionsStyles,
       borderStyles,

shesha-reactjs/src/designer-components/container/styles.ts

@@ -1,15 +1,14 @@
 import { createStyles } from '@/styles';
 import { getOverflowStyle } from '../_settings/utils/overflow/util';
 
-export const useStyles = createStyles(({ css, cx }, { radius }) => {
+export const useStyles = createStyles(({ css, cx }) => {
 
     const overflow = getOverflowStyle(true, false);
     const overflowStyles = {
         ...overflow
     };
 
     const container = cx("sha-container-component", css`
-        ${radius}
         overflow: hidden;
         .sha-components-container-inner {
          ${overflowStyles}