Misc. fixes and refactoring of CSS

docs/10_domains/30_pharmaceutical_chemistry.mdx

@@ -3,7 +3,6 @@ title: "Medicinal / Pharmaceutical Chemistry"
 slug: "/pharmaceutical_chemistry"
 ---
 
-import Methods from "@site/src/components/Methods.js";
 import { LbeChip } from "@site/src/components/lbe/LbeElements.js";
 import ElnFinderPharm from "@site/src/components/eln/ElnFinderPharm.js";
 

src/components/BulletBox.js

@@ -1,18 +1,20 @@
+import clsx from "clsx";
+
 function BulletContainer({ children }) {
-    return <div className="container row">{children}</div>;
+  return <div className="container row">{children}</div>;
 }
 
 function BulletBox({ children, secondary }) {
-    let boxStyle = secondary ? "button--secondary" : "button--primary";
+  let boxStyle = secondary ? "button--secondary" : "button--primary";
 
-    return (
-        <div
-            className={"col button button--lg " + boxStyle}
-            style={{ padding: "0.75em", margin: "0.4em", flexGrow: 1 }}
-        >
-            {children}
-        </div>
-    );
+  return (
+    <div
+      className={clsx("col", "button", "button--lg", boxStyle)}
+      style={{ padding: "0.75em", margin: "0.4em", flexGrow: 1 }}
+    >
+      {children}
+    </div>
+  );
 }
 
 export { BulletContainer, BulletBox };

src/components/IntroButton.js

@@ -1,17 +1,19 @@
-import React from "react";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
-import styles from "./N4CFeatures.module.css";
+import styles from "@site/src/css/N4CFeatures.module.css";
+import clsx from "clsx";
 
 export default function IntroButton(props) {
   return (
-    <div className={"col " + styles.introCol}>
+    <div className={clsx("col", styles.introCol)}>
       <div>
         <a
           href={useBaseUrl(props.url)}
-          className={
-            "button button--secondary " + styles.featureButtonSecondary
-          }
+          className={clsx(
+            "button",
+            "button--secondary",
+            styles.featureButtonSecondary,
+          )}
         >
           <div>
             <img src={useBaseUrl(props.imgUrl)} width="120px" />

src/components/N4CFeatures.js

@@ -2,7 +2,8 @@ import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import Translate from "@docusaurus/Translate";
 
-import styles from "./N4CFeatures.module.css";
+import styles from "@site/src/css/N4CFeatures.module.css";
+import clsx from "clsx";
 
 const features = {
   entry: [
@@ -107,7 +108,7 @@ const features = {
 
 function Feature({ title, svg, link, style }) {
   return (
-    <div className={"col " + styles.featureCol}>
+    <div className={clsx("col", styles.featureCol)}>
       <div className="text--center">
         {link ? (
           <Link

src/components/chemotion/ChemotionCarousel.js

@@ -1,61 +1,61 @@
-import {Carousel} from "nuka-carousel";
-import style from "./ChemotionCarousel.module.css";
-import {useCarousel} from "nuka-carousel";
+import { Carousel } from "nuka-carousel";
+import styles from "@site/src/css/ChemotionCarousel.module.css";
+import { useCarousel } from "nuka-carousel";
 
 function CustomDots() {
-	const {totalPages, currentPage, goToPage} = useCarousel();
+  const { totalPages, currentPage, goToPage } = useCarousel();
 
-	const className = (index) => {
-		let value = style.chemotionCarouselDot;
-		if (currentPage === index) {
-			value += " " + style.chemotionCarouselDotActive;
-		}
-		return value;
-	};
+  const className = (index) => {
+    let value = styles.chemotionCarouselDot;
+    if (currentPage === index) {
+      value += " " + styles.chemotionCarouselDotActive;
+    }
+    return value;
+  };
 
-	return (
-		<div className={style.chemotionCarouselDots}>
-			{[...Array(totalPages)].map((_, index) => (
-				<span
-					key={index}
-					onClick={() => goToPage(index)}
-					className={className(index)}
-				>
-					&#8226;
-				</span>
-			))}
-		</div>
-	);
+  return (
+    <div className={styles.chemotionCarouselDots}>
+      {[...Array(totalPages)].map((_, index) => (
+        <span
+          key={index}
+          onClick={() => goToPage(index)}
+          className={className(index)}
+        >
+          &#8226;
+        </span>
+      ))}
+    </div>
+  );
 }
 
-function ChemotionCarousel({icon, images}) {
-	return (
-		<div className={style.chemotionCarousel}>
-			<img
-				className={style.chemotionCarouselIcon}
-				src={icon.src}
-				alt={icon.alt}
-			/>
-			<div className={style.chemotionCarouselContainer}>
-				<Carousel
-					showDots
-					showArrows
-					autoplay
-					wrapMode="wrap"
-					dots={<CustomDots />}
-				>
-					{images.map((image, index) => (
-						<img
-							className={style.chemotionCarouselImage}
-							key={index}
-							src={image.src}
-							alt={image.alt}
-						/>
-					))}
-				</Carousel>
-			</div>
-		</div>
-	);
+function ChemotionCarousel({ icon, images }) {
+  return (
+    <div className={styles.chemotionCarousel}>
+      <img
+        className={styles.chemotionCarouselIcon}
+        src={icon.src}
+        alt={icon.alt}
+      />
+      <div className={styles.chemotionCarouselContainer}>
+        <Carousel
+          showDots
+          showArrows
+          autoplay
+          wrapMode="wrap"
+          dots={<CustomDots />}
+        >
+          {images.map((image, index) => (
+            <img
+              className={styles.chemotionCarouselImage}
+              key={index}
+              src={image.src}
+              alt={image.alt}
+            />
+          ))}
+        </Carousel>
+      </div>
+    </div>
+  );
 }
 
 export default ChemotionCarousel;

src/components/commons/FloatImage.js

@@ -1,7 +1,7 @@
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import Link from "@docusaurus/Link";
 
-import styles from "./FloatImage.module.css";
+import styles from "@site/src/css/FloatImage.module.css";
 
 function FloatImage({ url, alt, ...props }) {
   // Object for custom styles

src/components/commons/ShortenDesc.js

@@ -1,43 +1,41 @@
 import React, { useState } from "react";
 
+import styles from "@site/src/css/ShortenDesc.module.css";
+
 // shorten the description of the experiment up to the next blank, comma or period after 100 characters
 
 function ShortenDesc({ desc, length }) {
-    const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsed] = useState(true);
 
-    if (desc.length <= length) {
-        return <React.Fragment>{desc}</React.Fragment>;
-    }
+  if (desc.length <= length) {
+    return <React.Fragment>{desc}</React.Fragment>;
+  }
 
-    return (
-        <React.Fragment>
-            {collapsed ? (
-                <span
-                    title={desc}
-                    onClick={() => setCollapsed(!collapsed)}
-                    style={{ cursor: "pointer" }}
-                >
-                    {desc.slice(0, length) +
-                        desc.slice(length).split(/[\s,\.]/)[0] +
-                        " ..."}
+  return (
+    <React.Fragment>
+      {collapsed ? (
+        <span
+          title={desc}
+          onClick={() => setCollapsed(!collapsed)}
+          style={{ cursor: "pointer" }}
+        >
+          {desc.slice(0, length) +
+            desc.slice(length).split(/[\s,\.]/)[0] +
+            " ..."}
 
-                    <button className="lbe__block__author-trigger">
-                        expand &#9660;
-                    </button>
-                </span>
-            ) : (
-                <span
-                    onClick={() => setCollapsed(!collapsed)}
-                    style={{ cursor: "pointer" }}
-                >
-                    {desc}
-                    <button className="lbe__block__author-trigger">
-                        collapse &#9650;
-                    </button>
-                </span>
-            )}
-        </React.Fragment>
-    );
+          <button className={styles.authorTrigger}>expand &#9660;</button>
+        </span>
+      ) : (
+        <span
+          onClick={() => setCollapsed(!collapsed)}
+          style={{ cursor: "pointer" }}
+        >
+          {desc}
+          <button className={styles.authorTrigger}>collapse &#9650;</button>
+        </span>
+      )}
+    </React.Fragment>
+  );
 }
 
 export default ShortenDesc;