Merge pull request #570 from datagir/iconographie

Iconographie

source/components/SafeCategoryImage.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import emoji from './emoji'
+
+export default ({ element, whiteBackground = false }) => {
+	const [fail, setFail] = useState(false)
+	return (
+		<span
+			css={`
+				${!whiteBackground &&
+				`
+				img {
+				  filter: grayscale(1) invert(1) brightness(${fail ? '7' : '1.8'});
+				}
+
+				`}
+
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				img {
+					width: 2.5rem;
+					height: auto;
+				}
+			`}
+		>
+			{!fail ? (
+				<img
+					src={`/images/model/${element.dottedName}.svg`}
+					onError={({ currentTarget }) => {
+						currentTarget.onerror = null
+						setFail(true)
+					}}
+				/>
+			) : (
+				<img src={'/images/three-dots.svg'} />
+			)}
+		</span>
+	)
+}

source/components/SessionBar.tsx

@@ -36,7 +36,7 @@ const openmojis = {
 	action: 'E10C',
 	conference: '1F3DF',
 	sondage: '1F4CA',
-	profile: '1F464',
+	profile: 'silhouette',
 	personas: '1F465',
 	github: 'E045',
 }

source/components/conversation/AnswerList.tsx

@@ -16,6 +16,7 @@ import { useNavigate } from 'react-router-dom'
 import { situationSelector } from 'Selectors/simulationSelectors'
 import { answeredQuestionsSelector } from '../../selectors/simulationSelectors'
 import { safeGetRule, splitName } from '../publicodesUtils'
+import SafeCategoryImage from '../SafeCategoryImage'
 import './AnswerList.css'
 import AnswerTrajetsTable from './estimate/AnswerTrajetsTable'
 
@@ -199,7 +200,7 @@ const SubCategory = ({ rule, rules, engine, level }) => {
 						`}
 				`}
 			>
-				{emoji(rule.rawNode.icônes || '')}
+				<SafeCategoryImage element={rule} whiteBackground={level > 1} />
 				{level === 1 ? <h2>{rule.title}</h2> : <h3>{rule.title}</h3>}
 				<div css="margin-left: auto !important; > * {margin: 0 .4rem}; img {font-size: 100%}">
 					<small>

source/components/conversation/CategoryRespiration.js

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
-import React, { useEffect, useRef } from 'react'
-import emoji from 'react-easy-emoji'
+import { useEffect, useRef } from 'react'
+import SafeCategoryImage from '../SafeCategoryImage'
 import useKeypress from '../utils/useKeyPress'
 
 // Naive implementation - in reality would want to attach
@@ -60,7 +60,7 @@ export default ({ dismiss, questionCategory }) => {
 					font-weight: 300;
 				}
 				img {
-					font-size: 350%;
+					width: 5rem;
 					margin: 0.4rem;
 				}
 				button {
@@ -95,7 +95,7 @@ export default ({ dismiss, questionCategory }) => {
 				}}
 			>
 				<h2>{questionCategory.title}</h2>
-				{emoji(questionCategory.icons)}
+				<SafeCategoryImage element={questionCategory} />
 				<button className="ui__ plain button attention" onClick={dismiss}>
 					Commencer
 				</button>