unify color schemes

components/shared/Fact.tsx

@@ -8,6 +8,8 @@ import {
 } from "../../lib/utils/smartLinkUtils";
 import { contentTypes, Fact } from "../../models";
 import { CTAButton } from "./internalLinks/CTAButton";
+import { mainColorAfterBgClass } from "../../lib/constants/colors";
+import { useSiteCodename } from "./siteCodenameContext";
 
 type Props = Readonly<{
   item: Fact;
@@ -21,6 +23,7 @@ const shouldReverse = () => {
 
 export const FactComponent: FC<Props> = (props) => {
   const image = props.item.elements.image.value[0];
+  const siteCodename = useSiteCodename();
   const reverse = shouldReverse();
   const authorElements = props.item.elements.author.linkedItems[0]?.elements;
   const { firstName, lastName, occupation } = authorElements ?? {};
@@ -36,7 +39,7 @@ export const FactComponent: FC<Props> = (props) => {
         <div
           className={`w-full md:w-1/2 h-[400px] relative drop-shadow-lg after:absolute ${
             reverse ? "after:left-3" : "after:right-3"
-          } after:top-3 after:bg-indigo-900 after:bg-no-repeat after:w-full after:bg-contain after:h-full after:rounded-lg after:z-[1]`}
+          } after:top-3 ${mainColorAfterBgClass[siteCodename]} after:bg-no-repeat after:w-full after:bg-contain after:h-full after:rounded-lg after:z-[1]`}
           {...createElementSmartLink(contentTypes.fact.elements.image.codename)}
         >
           <Image

components/shared/internalLinks/CTAButton.tsx

@@ -3,20 +3,28 @@ import React from "react";
 
 import { resolveReference } from "../../../lib/routing";
 import { Action, Fact, Nav_NavigationItem } from "../../../models";
+import {
+  mainColorButtonClass,
+  mainColorHoverClass,
+} from "../../../lib/constants/colors";
+import { useSiteCodename } from "../siteCodenameContext";
 
 type Props = {
   reference: Fact | Action | Nav_NavigationItem;
 };
 
 export const CTAButton = (props: Props) => {
+  const siteCodename = useSiteCodename();
   const factUrl =
     props.reference.elements.referenceExternalUri.value ||
     props.reference.elements.referenceContentItemLink.linkedItems.length > 0
       ? resolveReference(props.reference)
       : null;
   return (
     <Link href={factUrl ?? ""}>
-      <button className="bg-indigo-800 bottom-0 group left-0 hover:bg-blue-700 text-white font-bold mt-10 py-2 px-4 rounded">
+      <button
+        className={`${mainColorButtonClass[siteCodename]} bottom-0 group left-0 ${mainColorHoverClass[siteCodename]} text-white font-bold mt-10 py-2 px-4 rounded`}
+      >
         <span>{props.reference.elements.referenceLabel.value}</span>
       </button>
     </Link>

components/shared/richText/Callout.tsx

@@ -1,20 +1,29 @@
-import { ExclamationTriangleIcon, InformationCircleIcon, LightBulbIcon } from "@heroicons/react/24/solid";
+import {
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  LightBulbIcon,
+} from "@heroicons/react/24/solid";
 import { FC } from "react";
 
-import { mainColorBorderClass } from "../../../lib/constants/colors";
-import { Component_Callout } from "../../../models"
+import {
+  calloutTypeColor,
+  mainColorBorderClass,
+} from "../../../lib/constants/colors";
+import { Component_Callout } from "../../../models";
 import { useSiteCodename } from "../siteCodenameContext";
 import { RichTextElement } from "./RichTextElement";
 
 type Props = Readonly<{
   item: Component_Callout;
 }>;
 
-export const CalloutComponent: FC<Props> = props => {
+export const CalloutComponent: FC<Props> = (props) => {
   const siteCodename = useSiteCodename();
 
   return (
-    <div className={`p-5 border-2 rounded-3xl ${mainColorBorderClass[siteCodename]}`}>
+    <div
+      className={`p-5 border-2 rounded-3xl ${mainColorBorderClass[siteCodename]}`}
+    >
       <div className={`w-5 ${createIconColor(props.item)}`}>
         {renderTypeIcon(props.item)}
       </div>
@@ -24,7 +33,7 @@ export const CalloutComponent: FC<Props> = props => {
       />
     </div>
   );
-}
+};
 
 const renderTypeIcon = (callout: Component_Callout) => {
   switch (callout.elements.type.value[0]?.codename) {
@@ -40,16 +49,11 @@ const renderTypeIcon = (callout: Component_Callout) => {
 };
 
 const createIconColor = (callout: Component_Callout) => {
-  switch (callout.elements.type.value[0]?.codename) {
-    case OptionCodename.Warning:
-      return "text-orange-400";
-    case OptionCodename.Info:
-      return "text-blue-400";
-    case OptionCodename.Lightbulb:
-      return "text-green-400";
-    default:
-      throwUnknownType(callout);
-  }
+  const calloutType = callout.elements.type.value[0]?.codename as CalloutType;
+
+  if (calloutType) return calloutTypeColor[calloutType];
+
+  throwUnknownType(callout);
 };
 
 enum OptionCodename {
@@ -58,6 +62,10 @@ enum OptionCodename {
   Lightbulb = "lightbulb",
 }
 
+type CalloutType = "warning" | "info" | "lightbulb" | undefined;
+
 const throwUnknownType = (callout: Component_Callout) => {
-  throw new Error(`Can't render callout of type ${callout.elements.type.value[0]?.codename}. Please make sure the app supports all possible callout types.`);
-}
+  throw new Error(
+    `Can't render callout of type ${callout.elements.type.value[0]?.codename}. Please make sure the app supports all possible callout types.`
+  );
+};

components/shared/ui/menu.tsx

@@ -21,6 +21,7 @@ import {
   WSL_WebSpotlightRoot,
 } from "../../../models";
 import { useSiteCodename } from "../siteCodenameContext";
+import { perCollectionSiteName } from "../../../lib/constants/labels";
 
 type Link = Readonly<Nav_NavigationItem>;
 
@@ -186,18 +187,10 @@ export const Menu: FC<Props> = (props) => {
               className="flex items-center"
             >
               <span className="pr-3">
-                <Image 
-                  src="/logo.png" 
-                  alt="logo" 
-                  width={30}
-                  height={30} 
-                />
+                <Image src="/logo.png" alt="logo" width={30} height={30} />
               </span>
               <span className="font-bold">Ficto</span>
-              {siteCodename === "ficto_surgical" && (
-                <span>&nbsp;| Surgical</span>
-              )}
-              {siteCodename === "ficto_imaging" && <span>&nbsp;| Imaging</span>}
+              <span>&nbsp;{perCollectionSiteName[siteCodename]}</span>
             </Link>
             <button
               type="button"

components/shared/visualContainer/HeroUnit.tsx

@@ -7,20 +7,23 @@ import {
 import { contentTypes, Fact } from "../../../models";
 import { HeroImage } from "../../landingPage/ui/heroImage";
 import { CTAButton } from "../internalLinks/CTAButton";
+import { mainColorBgClass } from "../../../lib/constants/colors";
+import { useSiteCodename } from "../siteCodenameContext";
 
 type Props = Readonly<{
   item: Fact;
 }>;
 
 export const HeroUnitComponent: FC<Props> = (props) => {
   const fact = props.item;
+  const siteCodename = useSiteCodename();
 
   return (
     <HeroImage
       url={fact.elements.image.value[0]?.url || ""}
       itemId={props.item.system.id}
     >
-      <div className="p-5 text-white bg-indigo-950 bg-opacity-70 w-full">
+      <div className={`p-5 text-white ${mainColorBgClass[siteCodename]} bg-opacity-70 w-full`}>
         <div
           className="flex md:w-fit"
           {...createItemSmartLink(fact.system.id)}

lib/constants/colors.ts

@@ -1,37 +1,55 @@
 import { PerCollection } from "../types/perCollection";
 
 export const mainColorHoverClass: PerCollection<string> = {
-  ficto_healthtech: "hover:bg-green-100",
+  ficto_healthtech: "hover:bg-emerald-500",
   ficto_imaging: "hover:bg-indigo-500",
-  ficto_surgical: "hover:bg-blue-100",
+  ficto_surgical: "hover:bg-rose-500",
+}
+
+export const mainColorButtonClass: PerCollection<string> = {
+  ficto_healthtech: "bg-emerald-800",
+  ficto_imaging: "bg-indigo-800",
+  ficto_surgical: "bg-rose-800",
 }
 
 export const mainColorBgClass: PerCollection<string> = {
-  ficto_healthtech: "bg-green-300",
+  ficto_healthtech: "bg-emerald-950",
   ficto_imaging: "bg-indigo-950",
-  ficto_surgical: "bg-blue-300",
+  ficto_surgical: "bg-rose-950",
 };
 
 export const mainColorMdBgClass: PerCollection<string> = {
-  ficto_healthtech: "md:bg-green-300",
+  ficto_healthtech: "md:bg-emerald-950",
   ficto_imaging: "md:bg-indigo-950",
-  ficto_surgical: "md:bg-blue-300",
+  ficto_surgical: "md:bg-rose-950",
 }
 
 export const mainColorBorderClass: PerCollection<string> = {
-  ficto_healthtech: "border-green-300",
+  ficto_healthtech: "border-emerald-800",
   ficto_imaging: "border-indigo-800",
-  ficto_surgical: "border-blue-300",
+  ficto_surgical: "border-rose-800",
 };
 
 export const mainColorTextClass: PerCollection<string> = {
-  ficto_healthtech: "text-green-600",
+  ficto_healthtech: "text-emerald-700",
   ficto_imaging: "text-indigo-700",
-  ficto_surgical: "text-blue-600",
+  ficto_surgical: "text-rose-700",
 }
 
 export const mainColorHighlightClass: PerCollection<string> = {
-  ficto_healthtech: "text-green-800",
+  ficto_healthtech: "text-emerald-950",
   ficto_imaging: "text-indigo-950",
-  ficto_surgical: "text-blue-800",
+  ficto_surgical: "text-rose-950",
 }
+
+export const mainColorAfterBgClass: PerCollection<string> = {
+  ficto_healthtech: "after:bg-emerald-900",
+  ficto_imaging: "after:bg-indigo-900",
+  ficto_surgical: "after:bg-rose-900",
+}
+
+export const calloutTypeColor = {
+  warning: "text-orange-400",
+  info: "text-blue-400",
+  lightbulb: "text-green-400",
+}

lib/constants/labels.ts

@@ -4,4 +4,10 @@ export const perCollectionSEOTitle = {
     ficto_healthtech: "Ficto Healthtech",
     ficto_imaging: "Ficto Imaging",
     ficto_surgical: "Ficto Surgical"
-  } as const satisfies PerCollection<string>;
+  } as const satisfies PerCollection<string>;
+
+export const perCollectionSiteName: PerCollection<string> = {
+  ficto_healthtech: "| Healthtech",
+  ficto_imaging: "| Imaging",
+  ficto_surgical: "| Surgical",
+}