refactor: consolidate api config, clean up css and icons, and improve semantic layout

Author: bert27

.gitignore

@@ -24,6 +24,7 @@ server/firmware/serverEspReact/secrets.h
 # Misc
 .DS_Store
 ._*
+.!*
 *.log
 
 .idea/

client/src/App.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import "./i18n";
-import "./styles.css";
+
 import { Irrigation } from "@/pages/irrigation/irrigation-page-index";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { DrinksPage } from "@/pages/drinks/drinks-page";
 import { SideNavBar } from "@/components/Menu/sidenavbar";
-import { Box } from "@mui/material";
+
 import { CarPage } from "@/pages/car/car-page";
 import { RemoteControlProvider } from "@/context/remote-control-context";
 import { ConnectivityProvider } from "@/context/connectivity-context";
@@ -15,23 +15,18 @@ export const App: React.FC = () => {
     <Router>
       <RemoteControlProvider>
         <ConnectivityProvider>
-          <Box sx={{
-            display: "flex",
-            flexDirection: { xs: "column", md: "row" },
-            width: "100%",
-            minHeight: "100vh"
-          }}>
+          <section className="app-layout">
             <SideNavBar />
-            <Box component="main" sx={{ flexGrow: 1, overflowX: "hidden" }}>
+            <main className="main-content">
               <Routes>
                 <Route path="/" element={<CarPage />} />
                 <Route path="/irrigation" element={<Irrigation />} />
                 <Route path="/drinks" element={<DrinksPage />} />
                 <Route path="/drinks/:tabRouter" element={<DrinksPage />} />
                 <Route path="*" element={<Irrigation />} />
               </Routes>
-            </Box>
-          </Box>
+            </main>
+          </section>
         </ConnectivityProvider>
       </RemoteControlProvider>
     </Router>

client/src/config/.!18234!._api.config.ts

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 import useWebSocket, { ReadyState } from 'react-use-websocket';
-import { directionWebRemote } from '../config/api.config';
+import { directionWebRemote } from '@/services/api.service';
 
 interface RemoteState {
     joystickDirection: string;

client/src/config/.!18385!._api.config.ts

@@ -135,3 +135,24 @@ body {
 .status-pulse {
   animation: pulse-glow 2s infinite ease-in-out;
 }
+
+/* App Layout */
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
+}
+
+@media (min-width: 900px) {
+  .app-layout {
+    flex-direction: row;
+  }
+}
+
+.main-content {
+  flex-grow: 1;
+  overflow-x: hidden;
+}
+
+