jams-react-client: add dynamic text color in CustomUiPreview

Change-Id: Ia2fda0570ae8d834bf6723fe015ca15a8f74b64b

jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js

@@ -10,6 +10,7 @@ import JamiIdCard from "./JamiIdCard";
 import i18next from "i18next";
 import { url_path } from "../../globalUrls";
 import { url_port } from "../../globalUrls";
+import { luma } from "./luma";
 
 const styles = {
   root: {
@@ -80,6 +81,7 @@ const styles = {
     backgroundColor: (props) => props.mainBoxColor,
     padding: "10px",
     width: "50%",
+    color: (props) => (luma(props.mainBoxColor) ? "#ffffff" : "#000000"),
   },
   title: {
     margin: 0,

jams-react-client/src/components/CustomUiPreview/JamiIdCard.js

@@ -6,6 +6,7 @@ import jamiIdImage from "assets/img/jami_id.svg";
 import copySvg from "assets/img/BTN_Copy.svg";
 import shareSvg from "assets/img/BTN_Share.svg";
 import { infoColor } from "assets/jss/material-dashboard-react";
+import { luma } from "./luma";
 
 const styles = {
   root: {
@@ -37,7 +38,7 @@ const styles = {
     flex: 2,
     textAlign: "center",
     fontSize: "12px",
-    color: infoColor[0],
+    color: (props) => (luma(props.color) ? "#03B9E9" : "#005699"),
   },
   icons: {
     display: "flex",

jams-react-client/src/components/CustomUiPreview/TipBox.js

@@ -2,6 +2,7 @@ import React from "react";
 import { makeStyles } from "@mui/styles";
 
 import tipLightBulbImage from "assets/img/tip_light_bulb.svg";
+import { luma } from "./luma";
 
 const styles = {
   root: {
@@ -18,17 +19,21 @@ const styles = {
     verticalAlign: "middle",
     fontSize: "8px",
     marginLeft: "0.5rem",
+    color: (props) => props.fontColor,
   },
   text: {
     fontSize: "6px",
     margin: 0,
+    color: (props) => props.fontColor,
   },
 };
 
 const useStyles = makeStyles(styles);
 
 export default function TipBox({ color, text }) {
-  const classes = useStyles({ color });
+  const fontColor = luma(color) ? "#ffffff" : "#000000";
+
+  const classes = useStyles({ color, fontColor });
 
   return (
     <div className={classes.root}>

jams-react-client/src/components/CustomUiPreview/luma.js

+export const luma = (color) => {
+  const r = parseInt(color.slice(1, 3), 16);
+  const g = parseInt(color.slice(3, 5), 16);
+  const b = parseInt(color.slice(5, 7), 16);
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 153 /* .6 * 256 */;
+};