Better styles

src/aco/ant.ts

@@ -111,7 +111,7 @@ export class Ant {
         config.antAntennaRadius,
         pheromoneType
       );
-    // console.log(leftAntenna, frontAntenna, rightAntenna);
+
     if (frontAntenna > leftAntenna && frontAntenna > rightAntenna) {
       // do nothing
     } else if (leftAntenna > rightAntenna) {

src/components/control-panel/content.tsx

@@ -9,15 +9,40 @@ type IControlPanelContentProps = {
   updateAcoConfig: IUpdateAcoConfig;
 };
 
+const styles = {
+  controlPanelContent: {
+    width: "350px",
+    maxHeight: "60%",
+    position: "absolute",
+    margin: "20px 0 0 20px",
+    borderRadius: "0.6rem",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    overflow: "auto",
+    paddingTop: "60px",
+  },
+  closeButton: {
+    padding: "8px",
+    textDecoration: "none",
+    display: "block",
+    color: "#fff",
+    position: "absolute",
+    top: "0",
+    right: "10px",
+    fontSize: "30px",
+    cursor: "pointer",
+  },
+} as const;
+
 export const ControlPanelContent = (props: IControlPanelContentProps) => {
   const { hideControlPanel, updateAcoConfig } = props;
 
   return (
-    <div className="control-panel-content">
+    <div className="control-panel-content" style={styles.controlPanelContent}>
       <a
         className="close-button"
         data-testid="control-panel-close-button"
         onClick={hideControlPanel}
+        style={styles.closeButton}
       >
         &times;
       </a>

src/components/control-panel/setting-item.tsx

@@ -1,5 +1,22 @@
 import React, { ReactNode } from "react";
 
+const styles = {
+  settingItem: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: "8px",
+  },
+  settingTitle: {
+    color: "#fff",
+  },
+  settingComponent: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "10px",
+  },
+} as const;
+
 type ISettingItemProps = {
   title: string;
   slider?: ReactNode;
@@ -10,9 +27,11 @@ export const SettingItem = (props: ISettingItemProps) => {
   const { title, slider, checkbox } = props;
 
   return (
-    <div className="slider-container">
-      <span className="slider-title">{title}</span>
-      <div className="slider-component">
+    <div className="setting-item" style={styles.settingItem}>
+      <span className="setting-title" style={styles.settingTitle}>
+        {title}
+      </span>
+      <div className="setting-component" style={styles.settingComponent}>
         {checkbox}
         {slider}
       </div>

src/components/control-panel/slider.tsx

@@ -1,6 +1,16 @@
 import React from "react";
 import { IConfig, IUpdateAcoConfig } from "../../aco";
 
+const styles = {
+  sliderOutput: {
+    color: "#fff",
+    backgroundColor: "#3691ec",
+    borderRadius: "7px",
+    alignItems: "center",
+    padding: "4px 6px 4px 6px",
+  },
+} as const;
+
 type ISliderProps = {
   configParam: keyof IConfig;
   min: number;
@@ -39,7 +49,11 @@ export const Slider = (props: ISliderProps) => {
         step={step}
         onInput={(event) => updateValue(event)}
       />
-      <span id={`${configParam}Value`} className="slider-output">
+      <span
+        id={`${configParam}Value`}
+        className="slider-output"
+        style={styles.sliderOutput}
+      >
         {formatValue()}
       </span>
     </>

src/components/control-panel/toggle.tsx

@@ -1,5 +1,19 @@
 import React from "react";
 
+const styles = {
+  toggleButtonContainer: {
+    display: "flex",
+    justifyContent: "left",
+  },
+  toggleButton: {
+    color: "#fff",
+    position: "absolute",
+    margin: "20px 0 0 20px",
+    /* TODO: transitions */
+    cursor: "pointer",
+  },
+} as const;
+
 type IControlPanelToggleProps = {
   showControlPanel: () => void;
 };
@@ -8,11 +22,15 @@ export const ControlPanelToggle = (props: IControlPanelToggleProps) => {
   const { showControlPanel } = props;
 
   return (
-    <div className="control-panel-toggle-button-container">
+    <div
+      className="control-panel-toggle-button-container"
+      style={styles.toggleButtonContainer}
+    >
       <a
         className="control-panel-toggle-button icon"
         data-testid="control-panel-toggle-button"
         onClick={showControlPanel}
+        style={styles.toggleButton}
       >
         <i className="fa fa-cog fa-lg" />
       </a>

src/index.html

@@ -1,6 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <style>
+      body {
+        margin: 0px;
+        font-family: Tahoma;
+        font-size: 13px;
+        letter-spacing: 0.5px;
+      }
+    </style>
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"

src/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./components/app";
-import "./styles/style.css";
 
 createRoot(document.getElementById("root")).render(<App />);