add colors to icons in cards

DemocraciaEnRed · Oct 29, 2024 · cd09c0e · cd09c0e
1 parent 2f07084
commit cd09c0e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/components/admin/asset/assetCard/index.jsx b/src/components/admin/asset/assetCard/index.jsx
@@ -69,7 +69,12 @@ const AssetCard = ({ asset }) => {
     >
       <CardHeader className="flex flex-row w-full justify-between">
         <div className="flex items-center">
-          <div className="bg-slate-100 p-4">
+          <div
+            className="bg-slate-100 p-4"
+            style={{
+              color: asset.subCategory?.color,
+            }}
+          >
             {
               fontAwesomeIcons.find(
                 (icon) => icon.name === asset.subCategory?.icon

diff --git a/src/components/home/asset-card.jsx b/src/components/home/asset-card.jsx
@@ -22,8 +22,8 @@ const AssetCard = ({ asset }) => {
         {Object.keys(fields).map((key) => {
           if (fields[key].type === "url") return null;
           return (
-            <span key={key} className={` uppercase  ${ordering}`}>
-              <span className="underline font-bold">{key}</span>:
+            <span key={key} className={` ${ordering}`}>
+              <span className="underline font-bold uppercase">{key}</span>:
               {fields[key].value}
             </span>
           );
@@ -59,18 +59,23 @@ const AssetCard = ({ asset }) => {
     >
       <CollapsibleTrigger className="w-full text-left">
         <div className="flex items-center justify-between ">
-          <div className="bg-slate-200 p-4 rounded-lg">
+          <div
+            className="bg-slate-200 p-4 rounded-lg"
+            style={{
+              color: asset.subCategory?.color,
+            }}
+          >
             {
               fontAwesomeIcons.find(
                 (icon) => icon.name === asset.subCategory?.icon
               )?.icon
             }
           </div>
-          <div className="ml-2 font-bold flex-1 text-left flex  gap-2">
-            <h6 className="text-xl">{asset.category.name}</h6>
+          <div className="ml-2  flex-1 text-left flex  gap-2">
+            <h6 className="text-xl font-bold">{asset.category.name}</h6>
             {renderFieldShowCard(
               asset.extras[showCardOptions.ALLWAYS.value],
-              " flex"
+              ""
             )}
           </div>
           <ChevronDownCircle className="h-4 w-4" />