From 583a21601c7a14a5b8aa674ece5358f14b13d878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Mon, 24 Jul 2023 16:32:41 -0400
Subject: [PATCH] jams-react-client: add dynamic text color in CustomUiPreview
Change-Id: Ia2fda0570ae8d834bf6723fe015ca15a8f74b64b
---
.../src/components/CustomUiPreview/CustomUiPreview.js | 2 ++
.../src/components/CustomUiPreview/JamiIdCard.js | 3 ++-
jams-react-client/src/components/CustomUiPreview/TipBox.js | 7 ++++++-
jams-react-client/src/components/CustomUiPreview/luma.js | 7 +++++++
4 files changed, 17 insertions(+), 2 deletions(-)
create mode 100644 jams-react-client/src/components/CustomUiPreview/luma.js
diff --git a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
index 3c78a42b..054233eb 100644
--- a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
+++ b/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,
diff --git a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
index 78e1a4bd..0b13fee7 100644
--- a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
+++ b/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",
diff --git a/jams-react-client/src/components/CustomUiPreview/TipBox.js b/jams-react-client/src/components/CustomUiPreview/TipBox.js
index 7106c3ea..d3961cee 100644
--- a/jams-react-client/src/components/CustomUiPreview/TipBox.js
+++ b/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}>
diff --git a/jams-react-client/src/components/CustomUiPreview/luma.js b/jams-react-client/src/components/CustomUiPreview/luma.js
new file mode 100644
index 00000000..f91d3e22
--- /dev/null
+++ b/jams-react-client/src/components/CustomUiPreview/luma.js
@@ -0,0 +1,7 @@
+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 */;
+};
--
GitLab