Add emotion babel plugin

Author: s-h-a-d-o-w

frontend/package.json

@@ -36,6 +36,7 @@
     "reactstrap": "9.2.3"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.13.5",
     "@types/lodash": "4.17.14",
     "@types/node": "^18",
     "@types/react": "^18",

frontend/pnpm-lock.yaml

@@ -1,11 +1,9 @@
-import "@csstools/normalize.css";
 import styled from "@emotion/styled";
 import { faExchangeAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect, useState } from "react";
 import "react-toastify/dist/ReactToastify.css";
 import { Button } from "reactstrap";
-import "./App.css";
 import { CPUTuning } from "./containers/CPUTuning";
 import { FanTable } from "./containers/FanTable";
 import { FixedSpeed } from "./containers/FixedSpeed";

frontend/src/App.css

@@ -3,7 +3,7 @@ import { useWebSocket } from "./utils/hooks";
 import styled from "@emotion/styled";
 import { ErrorBoundary } from "react-error-boundary";
 
-const StyledApp = styled.div`
+const StyledAppWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
@@ -17,21 +17,20 @@ const StyledApp = styled.div`
 `;
 
 const StyledCenteredMessage = styled.h3`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100%;
+  padding: 32px;
+
   font-weight: normal;
 `;
 
 export function AppWrapper() {
   const { isConnected } = useWebSocket();
 
   return (
-    <StyledApp>
+    <StyledAppWrapper>
       <ErrorBoundary
         fallbackRender={({ error }) => {
           console.error(error);
@@ -53,6 +52,6 @@ export function AppWrapper() {
           </>
         )}
       </ErrorBoundary>
-    </StyledApp>
+    </StyledAppWrapper>
   );
 }

frontend/src/App.tsx

@@ -9,20 +9,20 @@ import { useWebSocket } from "../utils/hooks";
 export function Status({ disabled }: { disabled: boolean }) {
   const tooltipRef = useRef<SVGSVGElement>(null);
 
-  const [appliedSpeed, setAppliedSpeed] = useState<string | number | null>("-");
-  const [avgCPUTemp, setAvgCPUTemp] = useState<string | number>("-");
-  const [avgGPUTemp, setAvgGPUTemp] = useState<string | number>("-");
-  const [target, setTarget] = useState<string | number>("-");
+  const [appliedSpeed, setAppliedSpeed] = useState<string>("-");
+  const [avgCPUTemp, setAvgCPUTemp] = useState<string>("-");
+  const [avgGPUTemp, setAvgGPUTemp] = useState<string>("-");
+  const [target, setTarget] = useState<string>("-");
 
   const { isConnected, sendJsonMessage, lastJsonMessage } = useWebSocket();
 
   useEffect(() => {
     const { kind, data } = lastJsonMessage;
     if (kind === MessageToClientKind.FanControlActivity) {
-      setAppliedSpeed(data.appliedSpeed);
-      setAvgCPUTemp(data.avgCPUTemp);
-      setAvgGPUTemp(data.avgGPUTemp);
-      setTarget(data.target);
+      setAppliedSpeed(data.appliedSpeed ? data.appliedSpeed.toString() : "-");
+      setAvgCPUTemp(data.avgCPUTemp.toString());
+      setAvgGPUTemp(data.avgGPUTemp.toString());
+      setTarget(data.target.toString());
     } else if (kind === "error") {
       console.error(data);
     }

frontend/src/AppWrapper.tsx

@@ -1,8 +1,10 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Roboto Slab', serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -11,3 +13,36 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+h2 {
+  margin: 16px 0;
+  font-weight: normal;
+}
+
+button {
+  font-family: 'Roboto Slab', serif;
+  font-weight: 500;
+  letter-spacing: 1px;
+
+  background-color: #ACD132;
+  color: white;
+  border-style: none;
+  border-radius: 4px;
+
+  margin: 4px;
+  padding: 4px 8px;
+
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  font-size: 14px;
+  border-radius: 4px;
+  margin: 4px;
+  padding: 4px;
+  border-style: none;
+}

frontend/src/containers/Status.tsx

@@ -1,4 +1,5 @@
 import { createRoot } from "react-dom/client";
+import "@csstools/normalize.css";
 import "./index.css";
 import { AppWrapper } from "./AppWrapper";
 

frontend/src/index.css

@@ -2,7 +2,13 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      babel: {
+        plugins: ["@emotion/babel-plugin"],
+      },
+    }),
+  ],
   build: {
     outDir: "build",
   },