feat: adds option for light/dark mode for contact box

src/components/sections/contact-box/ContactBox.tsx

@@ -35,6 +35,7 @@ export default async function ContactBox({
       ? result.value.map((e) => employeeAndTag(e, section.contactPoints))
       : [],
   );
+
   return (
     <section className={styles.contactBox}>
       <div>

src/components/sections/contact-box/contact-box.module.css

@@ -0,0 +1,2 @@
+.contactBox {
+}

studio/lib/interfaces/pages.ts

@@ -85,6 +85,7 @@ export interface ContactBoxSection {
   _key: string;
   basicTitle: string;
   optionalSubtitle?: string;
+  designMode: "light" | "dark";
   contactPoints: {
     _key: string;
     _type: string;

studio/schemas/objects/sections/contact-box.ts

@@ -6,6 +6,16 @@ import { firstTranslation } from "studio/utils/i18n";
 
 export const contactBoxID = "contactBox";
 
+export enum ContacxtBoxDesignMode {
+  Dark = "dark",
+  Light = "light",
+}
+
+const designModeOptions = [
+  { title: "Dark", value: ContacxtBoxDesignMode.Dark },
+  { title: "Light", value: ContacxtBoxDesignMode.Light },
+];
+
 export const contactBox = defineField({
   name: contactBoxID,
   title: "Contact Box",
@@ -24,7 +34,18 @@ export const contactBox = defineField({
       title: "Subtitle",
       description: "Extra context under the main title.",
     },
-
+    {
+      name: "designMode",
+      title: "Design Mode",
+      type: "string",
+      description:
+        "Select the whether the contact box should be light or dark.",
+      options: {
+        list: designModeOptions,
+        layout: "radio",
+      },
+      initialValue: ContacxtBoxDesignMode.Dark,
+    },
     {
       name: "contactPoints",
       title: "List of people to contact",