Remove logics of having diffferent components for desktop and for mobile screen sizes.

Author: HaudinFlorence

.gitignore

@@ -4,3 +4,4 @@ _site/
 node_modules/
 build/
 .docusaurus
+static/img/light-and-dark-pictures/

src/components/about/FourValues.tsx

@@ -1,34 +1,9 @@
 import styles from "./styles.module.css";
-import { ValueCardMobile } from "@site/src/components/about/ValueCard";
-import { ValueCardDesktop } from "@site/src/components/about/ValueCard";
-import { useEffect, useState } from "react";
+import { ValueCard } from "@site/src/components/about/ValueCard";
 import { valuesDetails } from "./Values/valuesDetails";
 
 
-const cardColors = ["white", "yellow", "white", "yellow"];
-
-export function FourValuesMobile() {
-  return (
-    <div className={styles.four_values_container}>
-      <ul className={"row" + " " + "flex-full-centered" + " " + "padding-none"}>
-        {valuesDetails.map((value, index) => (
-          <li className="cards-list" key={index}>
-            <div className="col">
-              <ValueCardMobile
-                value={value.name}
-                ValuePicture={value.pictureComponent}
-                ValueComponent={value.DescriptionMD}
-                color={cardColors[index]}
-              />
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-export function FourValuesDesktop() {
+export default function FourValues() {
   return (
     <div className={styles.four_values_container}>
       <div className="row">
@@ -43,10 +18,8 @@ export function FourValuesDesktop() {
           <li className="cards-list" key={index}>
             <div className="col">
               <div className={styles.value_card_container}>
-                <ValueCardDesktop
-                  value={value.name}
-                  ValuePicture={value.pictureComponent}
-                  ValueComponent={value.DescriptionMD}
+                <ValueCard
+                  value={value}
                 />
               </div>
             </div>
@@ -55,21 +28,4 @@ export function FourValuesDesktop() {
       </ul>
     </div>
   );
-}
-
-const breakpointValue: number = 996;
-
-export default function FourValues() {
-  const [isDesktop, setDesktop] = useState(window.innerWidth > breakpointValue);
-
-  const updateMedia = () => {
-    setDesktop(window.innerWidth > breakpointValue);
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", updateMedia);
-    return () => window.removeEventListener("resize", updateMedia);
-  });
-
-  return <div>{isDesktop ? <FourValuesDesktop /> : <FourValuesMobile />}</div>;
-}
+}

src/components/about/SmallPortraitCardDesktop.tsx renamed to src/components/about/SmallPortraitCard.tsx

@@ -36,7 +36,7 @@ function calculateOffsets(elementRef) {
   return offsets;
 }
 
-export function SmallPortraitCardDesktop({ person, avatarUrl, setOffsets }) {
+export function SmallPortraitCard({ person, avatarUrl, setOffsets }) {
   const elementRef = useRef(null);
 
   return (
@@ -84,7 +84,7 @@ export default function PopupPortrait({
       <Popup
         trigger={
           <div>
-            <SmallPortraitCardDesktop
+            <SmallPortraitCard
               person={person}
               avatarUrl={avatarUrl}
               setOffsets={setOffsets}
@@ -105,4 +105,4 @@ export default function PopupPortrait({
       </Popup>
     </div>
   );
-}
+}

src/components/about/SmallPortraitCardMobile.tsx

@@ -1,9 +1,8 @@
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
-import PopupPortrait from "./SmallPortraitCardDesktop";
-import SmallPortraitCardMobile from "./SmallPortraitCardMobile";
+import PopupPortrait from "./SmallPortraitCard";
 
-export function SubTeamDesktop({
+export default function SubTeam ({
   description,
   subTeam,
   subTeamAvatarsUrls,
@@ -31,28 +30,4 @@ export function SubTeamDesktop({
   );
 }
 
-export function SubTeamMobile({ description, subTeamAvatarsUrls, subTeam }) {
-  return (
-    <div className={styles.subteam_component}>
-      <h2 className="text-centered"> {description}</h2>
-      <div className={"container" + " " + styles.subteam_container}>
-        <ul
-          className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
-        >
-          {subTeam.map((person, index) => (
-            <li className="cards-list" key={index}>
-              <div className="col">
-                <Link href={"/about/" + person.firstName}>
-                  <SmallPortraitCardMobile
-                    person={person}
-                    avatarUrl={subTeamAvatarsUrls[index]}
-                  ></SmallPortraitCardMobile>
-                </Link>
-              </div>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
+

src/components/about/SubTeam.tsx

@@ -1,7 +1,6 @@
 import styles from "./styles.module.css";
-import { useEffect, useState } from "react";
 
-export function ValueCardDesktop({ value }) {
+export function ValueCard({ value }) {
   return (
     <div className={"card " + styles.value_card}>
       <div
@@ -10,76 +9,11 @@ export function ValueCardDesktop({ value }) {
       >
         <value.pictureComponent alt={value.alt} />
       </div>
-      <div className={styles.value_header}>{value}</div>
+      <div className={styles.value_header}>{value.name}</div>
       <div className={styles.value_text}>
         <value.DescriptionMD className={styles.value_component} />
       </div>
     </div>
   );
 }
-
-export function ValueCardMobile({
-  value,
-  ValuePicture,
-  ValueComponent,
-  color,
-}) {
-  return (
-    <div
-      className={
-        "card " +
-        " " +
-        styles.value_card +
-        " " +
-        (color === "yellow"
-          ? styles.value_card_yellow
-          : styles.value_card_white)
-      }
-    >
-       <div
-        className={"flex-full-centered"}
-        style={{ marginBottom: "var(--ifm-spacing-lg)" }}
-      >
-        <ValuePicture />
-      </div>
-      <div className={styles.value_header}>{value}</div>
-      <div className={styles.value_text}>
-        <ValueComponent />
-      </div>
-    </div>
-  );
-}
-
-const breakpointValue: number = 996;
-
-export default function ValueCard(value, ValuePicture, ValueComponent, color) {
-  const [isDesktop, setDesktop] = useState(window.innerWidth > breakpointValue);
-
-  const updateMedia = () => {
-    setDesktop(window.innerWidth > breakpointValue);
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", updateMedia);
-    return () => window.removeEventListener("resize", updateMedia);
-  });
-
-  return (
-    <div>
-      {isDesktop ? (
-        <ValueCardDesktop
-          value={value}
-          ValuePicture={ValuePicture}
-          ValueComponent={ValueComponent}
-        />
-      ) : (
-        <ValueCardMobile
-          value={value}
-          ValuePicture={ValuePicture}
-          ValueComponent={ValueComponent}
-          color={color}
-        />
-      )}
-    </div>
-  );
-}
+ export default ValueCard;

src/components/about/ValueCard.tsx

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