Remove logics for the dark mode.

Author: HaudinFlorence

docusaurus.config.ts

@@ -64,8 +64,7 @@ const config: Config = {
       title: "",
       logo: {
         alt: "QuantStack Logo",
-        src: "img/quantstack/logo-website-light.svg",
-        srcDark: "img/quantstack/logo-website-dark.svg"
+        src: "img/quantstack/logo-website.svg"
       },
 
       items: [
@@ -219,7 +218,7 @@ const config: Config = {
 
       colorMode: {
         defaultMode: 'light',
-        disableSwitch: false,
+        disableSwitch: true,
         respectPrefersColorScheme: false,
 
     },

src/components/about/ArrowLeftHeader.tsx

@@ -1,23 +1,6 @@
 import Link from "@docusaurus/Link";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ThemedImage from "@theme/ThemedImage";
-import ArrowLeft from "@site/static/img/icons/ArrowLeft.svg"
-
 
-/*export function ArrowLeft() {
-  return (
-    <ThemedImage
-      alt="Left Arrow to got back on the previous page"
-      sources={{
-        light: useBaseUrl("/img/icons/ArrowLeft-light.svg"),
-        dark: useBaseUrl("/img/icons/ArrowLeft-dark.svg"),
-      }}
-      width={"32px"}
-      height={"32px"}
-      style={{ marginTop: "16px", marginLeft: "20px" }}
-    />
-  );
-}*/
+import ArrowLeft from "@site/static/img/icons/ArrowLeft.svg"
 
 export default function ArrowLeftHeader({ route }) {
   return (

src/components/about/FourValues.tsx

@@ -1,90 +1,23 @@
 import styles from "./styles.module.css";
-
-import OpennessMD from "@site/src/components/about/Values/openness.md";
-import ScienceMD from "@site/src/components/about/Values/science.md";
-import IntegrityMD from "@site/src/components/about/Values/integrity.md";
-import OptimismMD from "@site/src/components/about/Values/optimism.md";
-/*import OpennessPicture from "@site/static/img/values/openness-light.svg";
-import SciencePicture from "@site/static/img/values/science-light.svg";
-import OptimismPicture from "@site/static/img/values/optimism-light.svg";
-import IntegrityPicture from "@site/static/img/values/integrity-light.svg";*/
 import { ValueCardMobile } from "@site/src/components/about/ValueCard";
 import { ValueCardDesktop } from "@site/src/components/about/ValueCard";
 import { useEffect, useState } from "react";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ThemedImage from "@theme/ThemedImage";
-
-const valuesDescriptions = [OpennessMD, ScienceMD, IntegrityMD, OptimismMD];
-const valuesPictures = [
-  OpennessPicture,
-  SciencePicture,
-  OptimismPicture,
-  IntegrityPicture,
-];
+import { valuesDetails } from "./Values/valuesDetails";
 
-export function SciencePicture() {
-  return (
-    <ThemedImage
-      alt="Icon representing the science value, displaying an atom."
-      sources={{
-        light: useBaseUrl("/img/values/science-light.svg"),
-        dark: useBaseUrl("/img/values/science-dark.svg"),
-      }}
-    />
-  );
-}
-
-export function OpennessPicture() {
-  return (
-    <ThemedImage
-      alt="Icon representing the openness value, four people connected together."
-      sources={{
-        light: useBaseUrl("/img/values/openness-light.svg"),
-        dark: useBaseUrl("/img/values/openness-dark.svg"),
-      }}
-    />
-  );
-}
-
-export function IntegrityPicture() {
-  return (
-    <ThemedImage
-      alt="Icon representing the integrity value, with an heart inside a hand ."
-      sources={{
-        light: useBaseUrl("/img/values/integrity-light.svg"),
-        dark: useBaseUrl("/img/values/integrity-dark.svg"),
-      }}
-    />
-  );
-}
-
-export function OptimismPicture() {
-  return (
-    <ThemedImage
-      alt="Icon representing the optimism value, with a smiling face ."
-      sources={{
-        light: useBaseUrl("/img/values/optimism-light.svg"),
-        dark: useBaseUrl("/img/values/optimism-dark.svg"),
-      }}
-    />
-  );
-}
-  */
 
-const valuesNames = ["Openness", "Science", "Optimism", "Integrity"];
 const cardColors = ["white", "yellow", "white", "yellow"];
 
 export function FourValuesMobile() {
   return (
     <div className={styles.four_values_container}>
       <ul className={"row" + " " + "flex-full-centered" + " " + "padding-none"}>
-        {valuesNames.map((value, index) => (
+        {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
               <ValueCardMobile
-                value={value}
-                ValuePicture={valuesPictures[index]}
-                ValueComponent={valuesDescriptions[index]}
+                value={value.name}
+                ValuePicture={value.pictureComponent}
+                ValueComponent={value.DescriptionMD}
                 color={cardColors[index]}
               />
             </div>
@@ -106,14 +39,14 @@ export function FourValuesDesktop() {
       <ul
         className={"row" + " " + "padding-none" + " " + styles.row_with_margins+" "+ "flex-full-centered"}
       >
-        {valuesNames.map((value, index) => (
+        {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
               <div className={styles.value_card_container}>
                 <ValueCardDesktop
-                  value={value}
-                  ValuePicture={valuesPictures[index]}
-                  ValueComponent={valuesDescriptions[index]}
+                  value={value.name}
+                  ValuePicture={value.pictureComponent}
+                  ValueComponent={value.DescriptionMD}
                 />
               </div>
             </div>

src/components/about/ValueCard.tsx

@@ -1,18 +1,18 @@
 import styles from "./styles.module.css";
 import { useEffect, useState } from "react";
 
-export function ValueCardDesktop({ value, ValuePicture, ValueComponent }) {
+export function ValueCardDesktop({ value }) {
   return (
     <div className={"card " + styles.value_card}>
       <div
         className={"flex-full-centered"}
         style={{ marginBottom: "var(--ifm-spacing-lg)" }}
       >
-        <ValuePicture />
+        <value.pictureComponent alt={value.alt} />
       </div>
       <div className={styles.value_header}>{value}</div>
       <div className={styles.value_text}>
-        <ValueComponent className={styles.value_component} />
+        <value.DescriptionMD className={styles.value_component} />
       </div>
     </div>
   );

src/components/about/Values/valuesDetails.ts

@@ -0,0 +1,35 @@
+import OpennessMD from "@site/src/components/about/Values/openness.md";
+import ScienceMD from "@site/src/components/about/Values/science.md";
+import IntegrityMD from "@site/src/components/about/Values/integrity.md";
+import OptimismMD from "@site/src/components/about/Values/optimism.md";
+import OpennessPicture from "@site/static/img/values/openness.svg";
+import SciencePicture from "@site/static/img/values/science.svg";
+import OptimismPicture from "@site/static/img/values/optimism.svg";
+import IntegrityPicture from "@site/static/img/values/integrity.svg";
+
+export const valuesDetails = [
+  {
+    name: "Science",
+    alt: "Icon representing the science value, displaying an atom",
+    DescriptionMD: ScienceMD,
+    pictureComponent: SciencePicture,
+  },
+  {
+    name: "Openness",
+    alt: "Icon representing the openness value, four people connected together.",
+    DescriptionMD: OpennessMD,
+    pictureComponent: OpennessPicture,
+  },
+  {
+    name: "Integrity",
+    alt: "Icon representing the integrity value, with an heart inside a hand",
+    DescriptionMD: IntegrityMD,
+    pictureComponent: IntegrityPicture,
+  },
+  {
+    name: "Optimism",
+    alt: "Icon representing the optimism value, with a smiling face ",
+    DescriptionMD: OptimismMD,
+    pictureComponent: OptimismPicture,
+  },
+];

src/components/contact/index.tsx

@@ -1,20 +1,7 @@
 import styles from "./styles.module.css";
 import ContactForm from "./ContactForm";
 import { useEffect, useState } from "react";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ThemedImage from "@theme/ThemedImage";
-
-export function ContactIllustration() {
-  return (
-    <ThemedImage
-      alt="Illustration for the contact page with a woman, a mobile phone and an enveloppe."
-      sources={{
-        light: useBaseUrl("/img/illustrations/contact-light.svg"),
-        dark: useBaseUrl("/img/illustrations/contact-dark.svg"),
-      }}
-    />
-  );
-}
+import ContactIllustration from "/img/illustrations/contact.svg"
 
 const breakpointValue: number = 996;
 
@@ -31,7 +18,7 @@ export function ContactDesktop() {
             padding: "var(--ifm-spacing-2xl)",
           }}
         >
-          <ContactIllustration />
+          <ContactIllustration alt={"Illustration for the contact page with a woman, a mobile phone and an enveloppe."} />
         </div>
         <div
           className={"col col--5" + " " + "padding-none" + " " + "margin-none"}