Merge pull request #391 from openstax/image-colors

Added color to the images based on the learning path

frontend/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './segment-bar'
 export * from './multi-session-bar'
 export * from './form-select'
 export * from './study-card-images/card-images'
+export * from './study-card-images/study-image'
 
 export * from './form/character-count'
 export * from './form/field-error-message'

frontend/src/components/study-card-images/card-images.tsx

@@ -33,12 +33,12 @@ interface CardImage {
 
 export const getImageUrl = (imageId: string | undefined) => {
     if (!imageId) {
-        return `https://kinetic-app-assets.s3.amazonaws.com/assets/card-images/placeholder.svg`
+        return '/Other/placeholder.svg'
     }
     const image = cardImages.find(image => image.imageId === imageId)
 
     if (!image) {
-        return `https://kinetic-app-assets.s3.amazonaws.com/assets/card-images/placeholder.svg`
+        return '/Other/placeholder.svg'
     }
 
     return `/${image.category}/${image.imageId}`;
@@ -61,7 +61,6 @@ export const cardImages: CardImage[] = [
     { imageId: 'Education-Online-Learning-02--Streamline-Bangalore.svg', category: 'Curated Studies', altText: 'A hat placed on top of a screen which is displaying books' },
     { imageId: 'Job-Interview--Streamline-Bangalore.svg',category: 'Curated Studies', altText: 'A Job interview' },
     { imageId: 'Leave-A-Review--Streamline-Bangalore.svg',category: 'Curated Studies', altText: 'Leave a Review' },
-    { imageId: 'Leave-A-Review--Streamline-Bangalore.svg',category: 'Curated Studies', altText: 'Leave a Review' },
     { imageId: 'Marketing-Filling-Survey-01--Streamline-Bangalore-Curated.svg',category: 'Curated Studies', altText: 'Marketting Filling Survey' },
     { imageId: 'Task-List--Streamline-Bangalore.svg',category: 'Curated Studies', altText: 'A Task List' },
 

frontend/src/components/study-card-images/study-image.tsx

@@ -0,0 +1,50 @@
+import { React, useState, useEffect } from '@common'
+import { ParticipantStudy } from '@api'
+import { getImageUrl, getAltText } from './card-images'
+import { colors } from '@theme';
+
+const SVGManipulator: React.FC<{src: string, fillColor: string, altText: string}> = ({ src, fillColor, altText }) => {
+    const [imgSrc, setImgSrc] = useState('');
+
+    useEffect(() => {
+        if(src.includes('.png')){
+            setImgSrc(src)
+            return;
+        }
+        fetch(src)
+        .then((response) => response.text())
+        .then((data) => {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(data, 'image/svg+xml');
+
+            const paths = doc.querySelectorAll('path');
+            paths.forEach((path) => {
+                const currentFill = path.getAttribute('fill');
+                const newFill = currentFill && currentFill != colors.lavender ? fillColor : currentFill;
+                path.setAttribute('fill', newFill || 'none');
+            });
+            const updatedSVG = new XMLSerializer().serializeToString(doc);
+
+            const svgBlob = new Blob([updatedSVG], { type: 'image/svg+xml' });
+            const url = URL.createObjectURL(svgBlob);
+
+            setImgSrc(url);
+
+            return () => URL.revokeObjectURL(url);
+        });
+    }, [src, fillColor]);
+
+    return <img src={imgSrc} alt={altText} className='study-card-image' />;
+};
+
+
+export const StudyCardImage: React.FC<{study: ParticipantStudy}> = ({ study }) => {
+
+    return (
+        <SVGManipulator 
+            src={getImageUrl(study.imageId)}
+            fillColor={study.learningPath?.color || colors.lavender}
+            altText={getAltText(study.imageId)}
+        />
+    )
+}

frontend/src/screens/admin/manage-learning-paths.tsx

@@ -317,6 +317,7 @@ const LearningPathForm: FC<{
                 <ColorInput format='hex'
                     withAsterisk
                     withPicker={false}
+                    withEyeDropper={false}
                     label="Color"
                     error={form.errors['color']}
                     {...form.getInputProps('color')}

frontend/src/screens/learner/card.tsx

@@ -1,5 +1,5 @@
 import { cx, React, useState } from '@common'
-import { Box, getImageUrl } from '@components'
+import { Box, StudyCardImage } from '@components'
 import { useEnvironment, useIsMobileDevice, useApi } from '@lib'
 import { isMultiSession, getStudyPi, getStudyLead, launchStudy, isStudyLaunchable, getPointsForCurrentStage, getCurrentStudyDuration, getNextAvailableStage } from '@models'
 import { ParticipantStudy, Study } from '@api'
@@ -321,10 +321,7 @@ const CardContent: FC<{study: ParticipantStudy}> = ({ study }) => {
 
     return (
         <Flex justify='center' align='flex-start' direction='column' h="100%">
-            <img src={getImageUrl(study.imageId)}
-                alt={study.imageId}
-                className='study-card-image'
-            />
+            <StudyCardImage study={study} />
             <CompleteFlag study={study} />
             <Title order={6} >{study.titleForParticipants}</Title>
             <small

frontend/src/theme.ts

@@ -28,6 +28,7 @@ export const colors = {
     coral50: '#F8D5CD',
     purple50: '#DFE1F9',
     pink50: '#F6DBED',
+    lavender: '#6153bd',
 
     // Neutral colors
     gray90: '#2F2F2F', // Example: tooltip background color