Light and Dark theme changes

docusaurus.config.js

@@ -2,7 +2,7 @@
 // Note: type annotations allow type checking and IDEs autocompletion
 
 const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const darkCodeTheme = require('prism-react-renderer/themes/vsDark');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -386,7 +386,7 @@ const config = {
     ({
       colorMode: {
         defaultMode: 'dark',
-        disableSwitch: true,
+        disableSwitch: false,
         respectPrefersColorScheme: false,
       },
       algolia: {

src/components/AboutUsContent/index.js

@@ -20,10 +20,10 @@
  ********************************************************************************/
 
 import React from "react";
-import TractusXBG from "@site/static/img/tractus-x_bg-updated.svg";
 import LicensesImg from "@site/static/img/licenses-minified.png";
 import IFrameComponent from "../../components/IFrameComponent";
 import styles from "./styles.module.css";
+import ThemedImage from '@theme/ThemedImage';
 
 export default function AboutUsContent() {
   return (
@@ -34,44 +34,81 @@ export default function AboutUsContent() {
           <h2 className="title-h2">Background</h2>
 
           <p className="description-p">
-           The Eclipse Tractus-X™ project is the official open-source project in the Catena-X ecosystem under the umbrella of the Eclipse Foundation. The Eclipse Foundation is not-for-profit corporation that it supported by over 320 members, and represents the worlds largest sponsored collection of Open Source projects and developers.
+            The Eclipse Tractus-X™ project is the official open-source project in the Catena-X ecosystem under the umbrella of the Eclipse Foundation. The Eclipse Foundation is not-for-profit corporation that it supported by over 320 members, and represents the worlds largest sponsored collection of Open Source projects and developers.
           </p>
 
           <div className={styles.img_container}>
-            <TractusXBG className={styles.img}/>
+            <ThemedImage
+              // alt="About image"
+              sources={{
+                light: ('/img/tractus-x_bg-updated_light.png'),
+                dark: ('/img/tractus-x_bg-updated.svg'),
+              }}
+              className={styles.img}
+            />
           </div>
 
           <p className="description-p">
-          The Catena-X ecosystem consists of the following three areas, which are connected by the Tractus-X project:
+            The Catena-X ecosystem consists of the following three areas, which are connected by the Tractus-X project:
           </p>
 
           <p className="description-p">
-          (1) The <strong>Catena-X Automotive Network e.V.</strong> (in the following called ‘association’) is responsible for standardization, certifications, and governance of the Catena-X ecosystem and is managing the Eclipse Tractus-X project. Association members can participate in working groups to actively shape the Catena-X ecosystem.
+            (1) The <strong>Catena-X Automotive Network e.V.</strong> (in the following called ‘association’) is responsible for standardization, certifications, and governance of the Catena-X ecosystem and is managing the Eclipse Tractus-X project. Association members can participate in working groups to actively shape the Catena-X ecosystem.
           </p>
 
           <p className="description-p">
-          (2) The <strong>development environment</strong> is responsible for the development of the initial reference implementations of the core and enabling services. The reference implementations are managed in the Tractus-X repositories, that contain, among other things, source code, technical documentation, and deployment instructions.
+            (2) The <strong>development environment</strong> is responsible for the development of the initial reference implementations of the core and enabling services. The reference implementations are managed in the Tractus-X repositories, that contain, among other things, source code, technical documentation, and deployment instructions.
           </p>
 
           <p className="description-p">
-          (3) In the <strong>operating environment</strong>, the open-source reference implementations can be freely used, modified, and operated by providers - including core service provider (e.g., marketplace), enablement service provider (e.g., Eclipse Dataspace Connector), and business application provider (e.g., traceability applications). 
+            (3) In the <strong>operating environment</strong>, the open-source reference implementations can be freely used, modified, and operated by providers - including core service provider (e.g., marketplace), enablement service provider (e.g., Eclipse Dataspace Connector), and business application provider (e.g., traceability applications).
           </p>
-          
+
           <p className="description-p">
-          Tractus-X supports developers to accelerate the development and operation of services / applications and to contribute significantly to the rapid scaling of the ecosystem. Therefore Tractus-X provides reference implementations of core and enabling services as well as KITs to accelerate the development of interoperable and innovative applications and the on-boarding to the Catena-X ecosystem. 
+            Tractus-X supports developers to accelerate the development and operation of services / applications and to contribute significantly to the rapid scaling of the ecosystem. Therefore Tractus-X provides reference implementations of core and enabling services as well as KITs to accelerate the development of interoperable and innovative applications and the on-boarding to the Catena-X ecosystem.
           </p>
-          
+
           <p className="description-p">
-          Reference implementations are free and open-source software (FOSS) components, which are managed in the associated Eclipse Tractus-X project. Other reference implementations (e.g., DAPS) used by the Catena-X ecosystem but developed by other projects such as Gaia-X or IDSA can also be found in the Eclipse Tractus-X project.
+            Reference implementations are free and open-source software (FOSS) components, which are managed in the associated Eclipse Tractus-X project. Other reference implementations (e.g., DAPS) used by the Catena-X ecosystem but developed by other projects such as Gaia-X or IDSA can also be found in the Eclipse Tractus-X project.
           </p>
 
           <p className="description-p">
-          Reference implementations are released under the Apache 2.0 license. According to the Apache 2.0 license, anyone can freely use, modify, and distribute the reference implementations in any environment. Reference implementations are usually not market-ready solutions and require a certain industrialization effort, which can vary depending on the software component. As part of the development environment, the Catena-X consortium provides the first open-source Catena-X reference implementations for core and enabling services.
+            Reference implementations are released under the Apache 2.0 license. According to the Apache 2.0 license, anyone can freely use, modify, and distribute the reference implementations in any environment. Reference implementations are usually not market-ready solutions and require a certain industrialization effort, which can vary depending on the software component. As part of the development environment, the Catena-X consortium provides the first open-source Catena-X reference implementations for core and enabling services.
           </p>
         </div>
 
-        <div className={styles.img_container}>
-          <img className={styles.licenses} src={LicensesImg} /> 
+        <div className={styles.box_container}>
+          <div>
+            <ThemedImage
+              // alt="About image"
+              sources={{
+                light: ('/img/Bild.png'),
+                dark: ('/img/Bild.png'),
+              }}
+              className={styles.logo}
+            />
+            <div className={styles.text}>
+              <p className="description-p">Licenses</p>
+              <p className="subtitle-h3">Apache License Version 2.0 (Code)</p>
+              <p className="subtitle-h3">CC BY 4.0 (Non-Code)</p>
+            </div>
+          </div>
+          <div>
+            <ThemedImage
+              // alt="About image"
+              sources={{
+                light: ('/img/logo_tractus-x.svg'),
+                dark: ('/img/logo_tractus-x.svg'),
+              }}
+              className={styles.logo}
+            />
+            <div className={styles.text}>
+              <p className="description-p">Legal</p>
+              <p className="subtitle-h3">For this Eclipse Project we use Tractus-X instead of Catena-X as a name because the Catena-X Association wants to
+                keep it’s name as a trademark
+              </p>
+            </div>
+          </div>
         </div>
 
         <IFrameComponent
@@ -80,7 +117,7 @@ export default function AboutUsContent() {
           title={''}
           headerDescription={''}
         />
-        
+
       </div>
     </section>
   );

src/components/AboutUsContent/styles.module.css

@@ -28,6 +28,35 @@
   padding-top: 4rem;
 }
 
+.box_container {
+  margin: auto;
+}
+
+.box_container div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  flex-direction: column;
+  align-items: flex-start !important;
+  margin-left: 20px;
+}
+
+.logo {
+  padding: 25px;
+  width: 120px;
+}
+
+.text p {
+  display: block;
+  text-align: left;
+  padding-bottom: 0px !important;
+  margin-bottom: 0px !important;
+  width: 600px;
+}
+
 .img_container {
   display: flex;
   justify-content: center;
@@ -69,6 +98,10 @@
   .licenses {
     width: 80%;
   }
+
+  .text p {
+    width: 300px;
+  }
 }
 
 @media screen and (max-width: 600px) {
@@ -83,4 +116,8 @@
   .licenses {
     width: 100%;
   }
+
+  .text p {
+    width: 300px;
+  }
 }

src/components/AboutUsHeader/index.js

@@ -20,24 +20,36 @@
  ********************************************************************************/
 
 import React from "react";
+import ThemedImage from '@theme/ThemedImage';
 import TractusXSvg from '../../../static/img/logo_tractus-x.svg'
 
 import styles from "./styles.module.css";
 
 export default function AboutUsHeader() {
   return (
       <header className={styles.about_header}>
-      <div className={styles.container}>
-        <div className={styles.svg_container}>
-          <TractusXSvg className={styles.svg}/>
-        </div>
-        <div className={styles.information_container}>
-          <h1 className="headers-title-h1">About Tractus X</h1>
-          <p className="headers-subtitle-p">
-            Eclipse Tractus-X™  is the official open-source project in the Catena-X ecosystem under the umbrella of the Eclipse Foundation.
-          </p>
+      {/* ThemedImage Docusaurus component that handles the BG depending on the theme displayed */}
+        <ThemedImage
+          // alt="Docusaurus themed image hero background"
+          sources={{
+            light: ('/img/main-bg-light.png'),
+            dark: ('/img/main_bg-min.png'),
+          }}
+          className={styles.hero_bg}
+        />
+
+      {/* Content of the component */}
+        <div className={styles.container}>
+          <div className={styles.svg_container}>
+            <TractusXSvg className={styles.svg}/>
+          </div>
+          <div className={styles.information_container}>
+            <h1 className="headers-title-h1">About Tractus X</h1>
+            <p className={styles.subtitle}>
+              Eclipse Tractus-X™  is the official open-source project in the Catena-X ecosystem under the umbrella of the Eclipse Foundation.
+            </p>
+          </div>
         </div>
-      </div>
     </header>
   );
 }

src/components/AboutUsHeader/styles.module.css

@@ -8,17 +8,29 @@
   overflow: hidden;
   height: 30vh;
 }
+
+.hero_bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100vw;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: bottom;
+}
 
 .container {
   width: 100vw;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: url("/static/img/main_bg-min.png");
+  /* background-image: url("/static/img/main_bg-min.png");
   background-position: left center;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover; */
   gap: 1rem;
 }
 
@@ -45,12 +57,25 @@
   flex-direction: column;
   justify-content: center;
 }
+
+.subtitle {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  max-width: 60%;
+}
 
 @media screen and (max-width: 996px) {
   .about_header {
     height: auto;
   }
 
+  .subtitle {
+    font-size: 16px;
+    line-height: 20px;
+    margin-top: -1rem;
+  }
+
   .container {
     height: auto;
     flex-direction: column;
@@ -88,6 +113,11 @@
     height: fit-content;
   }
 
+  .subtitle {
+    font-size: 14px;
+    line-height: 16px;
+  }
+
   .svg {
     width: 80%;
     height: 80%;

src/components/CommunityComponent/index.js

@@ -37,33 +37,13 @@ export default function CommunityComponent() {
   function  NextArrow (props) {
     const { onClick } = props;
     return (
-        <div style={{
-          position: 'absolute',
-          display: 'flex !important',
-          color: '#fff',
-          right: '20px',
-          boxShadow: '0px 0px 200px 40px rgb(255 255 255)',
-          backgroundColor: 'rgb(255 255 255 / 35%)',
-          borderRadius: '100px',
-          marginTop: '-10px',
-          top: '120px',
-          cursor: 'pointer'
-        }} onClick={onClick}><img src={sliderWhiteRightArrowImage} width={'30px'} height={'auto'} alt={'img'} /></div>
+        <Box className={styles.next_arrow} onClick={onClick}><img src={sliderWhiteRightArrowImage} width={'30px'} height={'auto'} alt={'img'} /></Box>
     )
 }
 function  PrevArrow (props) {
     const { onClick } = props;
     return (
-        <div style={{
-          position: 'absolute',
-          display: 'flex !important',
-          color: '#fff',
-          left: '20px',
-          zIndex: '999',
-          marginTop: '-10px',
-          top: '120px',
-          cursor: 'pointer'
-        }} onClick={onClick}><img src={sliderWhiteLeftArrowImage} width={'30px'} height={'auto'} alt={'img'} /></div>
+        <Box  className={styles.prev_arrow} onClick={onClick}><img src={sliderWhiteLeftArrowImage} width={'30px'} height={'auto'} alt={'img'} /></Box>
     )
 }
   let settings = {

src/components/CommunityComponent/styles.module.css

@@ -5,7 +5,7 @@
 
 .conmmunity_info {
   padding: 5rem 0 5rem 0rem;
-  background: #1E1E1E;
+  background: var(--ifm-background-color);
 }
 
 @media screen and (min-width: 2200px) {
@@ -170,4 +170,31 @@
 
 .slick-prev:before {
   content: '';
+}
+
+.next_arrow {
+  position: absolute;
+  display: flex !important;
+  color: #fff;
+  right: 20px;
+  box-shadow: 0px 0px 200px 40px rgb(255 255 255);
+  border-radius: 100px;
+  margin-top: -10px;
+  top: 120px;
+  cursor: pointer;
+  background-color: var(--ifm-color-card-border);
+}
+
+.prev_arrow {
+  position: absolute;
+  display: flex !important;
+  color: #fff;
+  left: 20px;
+  box-shadow: 0px 0px 200px 40px rgb(255 255 255);
+  border-radius: 100px;
+  margin-top: -10px;
+  top: 120px;
+  cursor: pointer;
+  z-index: 9;
+  background-color: var(--ifm-color-card-border);
 }