#3403 Hero bg image white faded toggle

Author: equinorpiyush

studio/schemas/objects/imageWithAlt.tsx

@@ -28,6 +28,13 @@ export default {
       description:
         'If this image is purely decorative you can disable the alt tag input here. Please note that this makes the image invisible for screen reader users.',
     },
+    {
+      title: 'Apply light gradient',
+      name: 'useLight',
+      type: 'boolean',
+      description:
+        'Applies a white gradient over semi transparent background image.',
+    },
     {
       name: 'alt',
       type: 'string',

web/core/Backgrounds/ImageBackgroundContainer.tsx

@@ -64,7 +64,7 @@ export const ImageBackgroundContainer = ({
       ${useLight ? '' : 'dark'}
       w-full
       h-full
-      ${useAnimation && isLargerDisplays ? `bg-fixed ${fadedFilter}` : 'bg-local'}
+      ${(useAnimation && isLargerDisplays) ? `bg-fixed ${fadedFilter}` : 'bg-local'}
       bg-center
       bg-no-repeat
       bg-cover

web/sections/Hero/TextOnBackgroundImageHero.tsx

@@ -19,9 +19,9 @@ export const TextOnBackgroundImageHero = ({
   return (
     <ImageBackgroundContainer
       image={image as ImageWithAlt}
-      overrideGradient
       scrimClassName='py-40 lg:py-44 black-blue-center-gradient'
       aspectRatio={'9:16'}
+      useLight={image?.useLight}
     >
       <div className='px-layout-lg max-lg:py-11'>
         {/*@ts-ignore */}

web/types/imageTypes.ts

@@ -15,6 +15,7 @@ export type ImageWithAlt = {
   hotspot?: SanityImageHotspot
   _type: 'imageWithAlt'
   extension?: string
+  useLight?: boolean
 }
 
 export type ImageWithCaptionData = {