updates

AssetMantle · Nov 25, 2024 · 63d30d6 · 63d30d6
1 parent 03277a8
commit 63d30d6
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 14 deletions.
diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss
@@ -379,7 +379,7 @@ body {
                 color: var(--am-esg-blue-light);
               }
               & > span {
-                background-color: var(--am-esg-blue-light);
+                background-color: var(--colorDef);
               }
             }
           }

diff --git a/react/src/utils/RandomRGB.ts b/react/src/utils/RandomRGB.ts
@@ -0,0 +1,6 @@
+export default function RandomRGB() {
+  const R = Math.floor(Math.random() * (255 - 1 + 1) - 1);
+  const G = Math.floor(Math.random() * (255 - 1 + 1) - 1);
+  const B = Math.floor(Math.random() * (255 - 1 + 1) - 1);
+  return `rgba(${R}, ${G}, ${B}, 1)`;
+}
diff --git a/react/src/views/AssetVariant.tsx b/react/src/views/AssetVariant.tsx
@@ -5,6 +5,7 @@ import { useResetState } from "../def-hooks/ResetStateContext";
 import useHdoacommandcenterHdoacommandcenter from "../hooks/useHdoacommandcenterHdoacommandcenter";
 import { hookOptions, perPage } from "../utils/library";
 import { useClient } from "../hooks/useClient";
+import RandomRGB from "../utils/RandomRGB";
 
 export default function AssetVariant() {
   const creatorAddressObject = useAddressContext();
@@ -67,8 +68,8 @@ export default function AssetVariant() {
   };
 
   return (
-    <main className="container m-auto my-4 grid grid-cols-3 grid-rows-3 gap-4 am-bg-translucent">
-      <div className="item flex p-6 pl-10">
+    <main className="container m-auto my-4 grid grid-cols-3 grid-rows-3 gap-4">
+      <div className="item am-bg-translucent rounded-md flex p-6 pl-10">
         <div className="form w-[167px]">
           <p>Terminology Standard</p>
           <div className="flex items-center gap-1">
@@ -95,7 +96,7 @@ export default function AssetVariant() {
           </div>
         </div>
       </div>
-      <div className="item flex p-6">
+      <div className="item am-bg-translucent rounded-md flex p-6">
         <div className="form mx-auto w-[187px]">
           <p>Data Exchange Standard</p>
           <div className="flex items-center gap-1">
@@ -122,7 +123,7 @@ export default function AssetVariant() {
           </div>
         </div>
       </div>
-      <div className="item flex p-6 ml-16">
+      <div className="item am-bg-translucent rounded-md flex p-6">
         <div className="form mx-auto w-[174px]">
           <p>Biomedical Vocabulary</p>
           <div className="flex items-center gap-1">
@@ -149,7 +150,7 @@ export default function AssetVariant() {
           </div>
         </div>
       </div>
-      <div className="item flex p-6 pl-10">
+      <div className="item am-bg-translucent rounded-md flex p-6 pl-10">
         <div className="form w-[167px]">
           <p>Workflow Standard</p>
           <div className="flex items-center gap-1">
@@ -176,12 +177,12 @@ export default function AssetVariant() {
           </div>
         </div>
       </div>
-      <div className="item">
+      <div className="item am-bg-translucent rounded-md p-4">
         <div className="button flex-1 flex flex-col items-center justify-center gap-1">
           <span className="text-7xl rounded-[50%] border-4 border-black p-4">
             <GiHealthNormal />
           </span>
-          <span className="text-center font-bold">
+          <span className={`text-center font-bold`} style={{ color: uniqueVariant === 0 ? "#000000" : RandomRGB() }}>
             <em>h</em>
             {`DOA Variant ${uniqueVariant + 1}`}
           </span>
@@ -190,7 +191,7 @@ export default function AssetVariant() {
           </button>
         </div>
       </div>
-      <div className="item flex p-6 ml-16">
+      <div className="item am-bg-translucent rounded-md flex p-6">
         <div className="form mx-auto w-[174px]">
           <p>Data Privacy</p>
           <div className="flex items-center gap-1">
@@ -217,7 +218,7 @@ export default function AssetVariant() {
           </div>
         </div>
       </div>
-      <div className="item flex p-6 pl-10">
+      <div className="item am-bg-translucent rounded-md flex p-6 pl-10">
         <div className="form w-[167px]">
           <p>Interoperability</p>
           <div className="flex items-center gap-1">
@@ -244,7 +245,7 @@ export default function AssetVariant() {
           </div>
         </div>
       </div>
-      <div className="item flex p-6">
+      <div className="item am-bg-translucent rounded-md flex p-6">
         <div className="form mx-auto w-[187px]">
           <p>Imaging Standard</p>
           <div className="flex items-center gap-1">
@@ -271,7 +272,7 @@ export default function AssetVariant() {
           </div>
         </div>
       </div>
-      <div className="item flex p-6 ml-16">
+      <div className="item am-bg-translucent rounded-md flex p-6">
         <div className="form mx-auto w-[174px]">
           <p>Security Standard</p>
           <div className="flex items-center gap-1">

diff --git a/react/src/views/Dashboard.tsx b/react/src/views/Dashboard.tsx
@@ -14,6 +14,7 @@ import { useResetState } from "../def-hooks/ResetStateContext";
 import { useClient } from "../hooks/useClient";
 import useHdoacommandcenterHdoacommandcenter from "../hooks/useHdoacommandcenterHdoacommandcenter";
 import { hookOptions, perPage } from "../utils/library";
+import RandomRGB from "../utils/RandomRGB";
 
 export default function Dashboard() {
   const lcaClient = useClient();
@@ -369,7 +370,10 @@ export default function Dashboard() {
           <span className="text-8xl rounded-[50%] border-4 border-black p-4">
             <GiHealthNormal />
           </span>
-          <span className="text-center font-bold text-4xl">
+          <span
+            className="text-center font-bold text-4xl"
+            style={{ color: uniqueVariant === 0 ? "#000000" : RandomRGB() }}
+          >
             <em>h</em>
             {`DOA : ${Number(uniqueVariant + 1)}`}
           </span>

diff --git a/react/src/views/Pathways.tsx b/react/src/views/Pathways.tsx
@@ -8,6 +8,7 @@ import RightSvg from "../components/traceability/RightSvg";
 import { useResetState } from "../def-hooks/ResetStateContext";
 import useHdoacommandcenterHdoacommandcenter from "../hooks/useHdoacommandcenterHdoacommandcenter";
 import { hookOptions, perPage } from "../utils/library";
+import RandomRGB from "../utils/RandomRGB";
 // import useEsgobservabilitydemoEsgobservabilitydemo from "../hooks/useEsgobservabilitydemoEsgobservabilitydemo";
 
 export default function Pathways() {
@@ -150,7 +151,7 @@ export default function Pathways() {
 
   return (
     <div className="am-esg-traceability">
-      <main className="am-bg-translucent">
+      <main className="am-bg-translucent" style={{ "--colorDef": uniqueVariant === 0 ? "#000000" : RandomRGB() }}>
         {domainInitValue?.pathModelling ? (
           <>
             <div className="content">