chore: remove inline styling & use clsx consistently

src/components/Config.tsx

@@ -6,6 +6,7 @@ import VersionFormattedCode from "./VersionFormattedCode";
 import Link from "@docusaurus/Link";
 import useBrokenLinks from "@docusaurus/core/lib/client/exports/useBrokenLinks";
 import Admonition from "@theme/Admonition";
+import clsx from "clsx";
 
 const INDENT_SIZE = 30;
 
@@ -163,16 +164,19 @@ const YamlNodeWithDescription = ({
 
   return (
     <div
-      style={{ paddingLeft: `${root ? 0 : INDENT_SIZE}px` }}
       id={createUrlHash(parentKey, name)}
-      className={"config-tagged-for-algolia"}
+      className={clsx("config-tagged-for-algolia", !root && "config-node-indent-size")}
     >
-      <div className={`description_word_wrap`} style={{ marginBottom: showDescription ? 10 : 0 }}>
+      <div className={"description_word_wrap"}>
         <button
           onClick={() => {
             setShowDescription(!showDescription);
           }}
-          className={`config-node with-value${showDescription ? "-active" : ""} clean-btn button--link notranslate`}
+          className={clsx(
+            "config-node clean-btn button--link notranslate",
+            showDescription && "with-value-active",
+            !showDescription && "with-value"
+          )}
           translate={"no"}
         >
           {parseItalics(name)}
@@ -185,10 +189,7 @@ const YamlNodeWithDescription = ({
             separator
           )}
         </button>
-        <div
-          className="indent-2"
-          style={{ marginBottom: 10, display: !showDescription ? "none" : "" }}
-        >
+        <div className={clsx("indent-2 margin-bottom--sm", !showDescription && "display--none")}>
           <div className="outlined-box description-text color-offset-box">
             <ReactMarkdown className={style.reactMarkDown}>
               {parseDescriptionForVersioning(node.description.toString())}
@@ -245,15 +246,10 @@ const YamlTreeNode = ({
   return (
     <div
       key={name}
-      className={`highlight-config-node`}
-      style={{ paddingLeft: `${root ? 0 : INDENT_SIZE}px` }}
+      className={clsx("highlight-config-node", !root && "config-node-indent-size")}
       id={hash}
     >
-      <div
-        className={`config-auxiliary-node notranslate`}
-        style={{ display: "inline-flex" }}
-        translate={"no"}
-      >
+      <div className={"config-auxiliary-node notranslate"} translate={"no"}>
         {parseItalics(name)}
         {removeTrailingSpaces(separator)}
       </div>
@@ -265,11 +261,7 @@ const YamlTreeNode = ({
       />
       {warning && (
         <div className={`inline-admonition-warning`}>
-          <Admonition
-            type={"danger"}
-            title={warning.title}
-            children={<p style={{ whiteSpace: "initial" }}>{warning.message}</p>}
-          />
+          <Admonition type={"danger"} title={warning.title} children={<p>{warning.message}</p>} />
         </div>
       )}
       {renderYamlData(

src/components/ConfigurationStructureDiagram.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import "@site/src/css/configuration-explorer-layout.css";
 import { Icon } from "@iconify/react";
 import Link from "@docusaurus/Link";
+import clsx from "clsx";
 
 const folderIcon = "mdi:folder";
 const fileIcon = "mdi:file";
@@ -139,10 +140,12 @@ export default function ConfigurationStructureDiagram(): JSX.Element {
         {level > 0 && <IndentationArrow level={level} />}
 
         <Link
-          className={`${"config-explorer-file-" + (isFolder ? "folder-" : "") + "node"}
-                   ${!hasUrl ? "config-explorer-file-node" : "config-explorer-file-node-with-link"}`}
+          className={clsx(
+            !isFolder && "config-explorer-file-node",
+            isFolder && "config-explorer-file-folder-node",
+            hasUrl && "config-explorer-file-node-with-link"
+          )}
           to={node.url}
-          style={{ cursor: hasUrl ? "pointer" : "default" }}
         >
           <span className={"config-node-contents-wrapper"}>
             <Icon
@@ -164,8 +167,10 @@ export default function ConfigurationStructureDiagram(): JSX.Element {
         {hasDescription && (
           <div className={"config-explorer-popup-window-container"}>
             <div
-              className={"config-explorer-popup-window"}
-              style={{ display: popupNode === node ? "block" : "none" }}
+              className={clsx(
+                "config-explorer-popup-window",
+                popupNode !== node && "display--none"
+              )}
             >
               <strong>Description:</strong>
               <br />

src/components/Projects.tsx

@@ -49,7 +49,7 @@ function Project(project: Project) {
           to={`https://github.com/${project.repo}`}
         >
           {project.title}
-          {project.eol && <Icon style={{ marginLeft: "8px" }} icon={"mdi:archive"} height={25} />}
+          {project.eol && <Icon className={"margin-left--sm"} icon={"mdi:archive"} height={25} />}
         </Link>
         <p>{project.description}</p>
       </div>

src/components/StartScriptGenerator.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import "@site/src/css/start-script-generator.css";
+import clsx from "clsx";
 
 const markerPoints = [4, 8, 12, 16, 20];
 
@@ -168,21 +169,20 @@ const StartScriptGenerator: React.FC = () => {
           min={0.5}
           max={24}
           step={0.5}
+          list="slide-markers-datalist"
           value={memory}
           onChange={(e) => setMemory(parseFloat(e.target.value))}
           aria-labelledby="memory-slider-label"
         />
-        <div className="slider-markers">
+        <datalist id="slide-markers-datalist" className="slider-markers">
+          <option className="slider-marker"></option>
           {markerPoints.map((point) => (
-            <div
-              key={point}
-              className="slider-marker"
-              style={{ left: `${((point - 0.5) / 23.5) * 100}%` }}
-            >
+            <option key={point} className="slider-marker">
               {point}GB
-            </div>
+            </option>
           ))}
-        </div>
+          <option className="slider-marker"></option>
+        </datalist>
       </div>
       <div className={"middle-flex-wrapper"}>
         <div className="config-section">
@@ -207,7 +207,10 @@ const StartScriptGenerator: React.FC = () => {
                 {Object.values(FLAGS).map((flag) => (
                   <div
                     key={flag.label}
-                    className={`dropdown-item ${flag === selectedFlag ? "selected" : ""}`}
+                    className={clsx(
+                      "dropdown-item",
+                      flag === selectedFlag && "dropdown-item-selected"
+                    )}
                     onClick={() => {
                       setSelectedFlag(flag);
                       setDropdownVisible(false);
@@ -224,7 +227,7 @@ const StartScriptGenerator: React.FC = () => {
       </div>
       <div className="config-section">
         <div className={"gui-container"}>
-          <label style={{ marginRight: "10px" }}>GUI:</label>
+          <label className={"margin-right--sm"}>GUI:</label>
           <input
             type="checkbox"
             id="gui-toggle"
@@ -234,7 +237,7 @@ const StartScriptGenerator: React.FC = () => {
           <label htmlFor="gui-toggle" className="switch"></label>
         </div>
         <div className={"gui-container"}>
-          <label style={{ marginRight: "10px" }}>Auto-Restart:</label>
+          <label className={"margin-right--sm"}>Auto-Restart:</label>
           <input
             type="checkbox"
             id="restart-toggle"

src/css/configuration-explorer-layout.css

@@ -12,6 +12,7 @@
   width: fit-content;
   flex-shrink: 0;
   white-space: nowrap;
+  cursor: default;
 }
 
 .config-explorer-file-node-with-link {

src/css/custom.css

@@ -14,6 +14,7 @@
   --default-config-node-text-color: rgb(148, 148, 148);
   --config-node-highlight-text-color: black;
   --config-explorer-file-node-text-color: rgba(0, 0, 0, 0.03);
+  --config-node-indent-size: 30px;
 
   /* EOL Message */
   --eol-message-background-color: rgb(255, 112, 119);
@@ -211,6 +212,10 @@ html[data-theme="dark"] {
   margin-left: 20px;
 }
 
+.display--none {
+  display: none !important;
+}
+
 .description_word_wrap {
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -254,7 +259,12 @@ html[data-theme="dark"] {
   cursor: pointer;
 }
 
+.config-node-indent-size {
+  padding-left: var(--config-node-indent-size);
+}
+
 .config-auxiliary-node {
+  display: inline-flex;
   padding-left: 2px;
   color: var(--default-config-node-text-color);
 }
@@ -288,6 +298,7 @@ html[data-theme="dark"] {
 
 .inline-admonition-warning {
   margin-top: 1em;
+  white-space: initial;
 }
 
 ul.yaml-list-elem {

src/css/start-script-generator.css

@@ -2,6 +2,8 @@
   --background-gen-color: #e8e8e8;
   --background-gen-color-active: #cccccc;
   --gen-text-color: #000;
+  --slider-marker-count: 5;
+  --slider-marker-offset: 5px;
 }
 
 html[data-theme="dark"] {
@@ -35,20 +37,24 @@ html[data-theme="dark"] {
 }
 
 .slider-markers {
-  position: relative;
-  width: 100%;
   height: 10px;
+  display: flex;
 }
 
 .slider-marker {
-  position: absolute;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
   color: var(--gen-text-color);
   font-size: 12px;
+  display: inline-block;
+  width: calc(100% / (var(--slider-marker-count) + 1));
+  text-align: center;
+}
+
+.slider-marker:first-child {
+  width: calc((100% / (var(--slider-marker-count) + 1) / 2) - var(--slider-marker-offset));
+}
+
+.slider-marker:last-child {
+  width: calc((100% / (var(--slider-marker-count) + 1) / 2));
 }
 
 input[type="text"],
@@ -132,6 +138,7 @@ input[type="range"]:focus::-webkit-slider-thumb {
   outline: 1px solid white;
 }
 
+.dropdown-item-selected,
 .dropdown-item:hover {
   background-color: var(--background-gen-color-active);
 }

src/theme/DocCard/index.tsx

@@ -80,7 +80,7 @@ type EmojiPropsSidebarItemLink = PropSidebarItemLink & {
 
 function CardLink({ item }: { item: EmojiPropsSidebarItemLink }): JSX.Element {
   const icon = item.customEmoji ? (
-    <Icon style={{ marginRight: "8px" }} icon={item.customEmoji} height={25} />
+    <Icon className={"margin-right--sm"} icon={item.customEmoji} height={25} />
   ) : isInternalUrl(item.href) ? (
     "📄️"
   ) : (