prettifierHEADmaster

1 files changed, 103 insertions, 67 deletions

diff --git a/client/src/App.js b/client/src/App.js
index c85e46c..0bd1dd4 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,33 +1,34 @@
-import React, { useState, createContext } from 'react';
-import { Routes, Route, Navigate, Link, useLocation } from 'react-router-dom';
-import { MarketDataPage, BidsPage, SubmitBidPage } from './components';
-import { Menu, Select, PageHeader, Typography } from '@arco-design/web-react';
-import '@arco-design/web-react/dist/css/arco.css';
+import React, { useState, createContext } from "react";
+import { Routes, Route, Navigate, Link, useLocation } from "react-router-dom";
+import { MarketDataPage, BidsPage, SubmitBidPage } from "./components";
+import { Menu, Select, PageHeader, Typography } from "@arco-design/web-react";
+import "@arco-design/web-react/dist/css/arco.css";
 
 const ghostBgStyle = {
-  backgroundImage: 'radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)',
-  backgroundSize: '16px 16px',
+  backgroundImage:
+    "radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)",
+  backgroundSize: "16px 16px",
   padding: 20,
 };
 
 export const MarketContext = createContext();
 export const MARKET_FULL_NAMES = {
-  CAISO: 'California ISO',
-  ERCOT: 'Electric Reliability Council of Texas',
-  ISONE: 'ISO New England',
-  MISO: 'Midcontinent ISO',
-  NYISO: 'New York ISO',
-  PJM: 'PJM Interconnection',
+  CAISO: "California ISO",
+  ERCOT: "Electric Reliability Council of Texas",
+  ISONE: "ISO New England",
+  MISO: "Midcontinent ISO",
+  NYISO: "New York ISO",
+  PJM: "PJM Interconnection",
 };
 
 function App() {
-  const [selectedMarket, setSelectedMarket] = useState('ISONE');
+  const [selectedMarket, setSelectedMarket] = useState("ISONE");
   const location = useLocation();
   return (
     <MarketContext.Provider value={{ selectedMarket, setSelectedMarket }}>
-    <div>
-      <style>
-              {`
+      <div>
+        <style>
+          {`
                 @media (max-width: 600px) {
                 .page-header-container {
                                 flex-direction: column;
@@ -53,57 +54,92 @@ function App() {
                                 }
                 }
               `}
-            </style>
-      <div style={ghostBgStyle}>
-        <div className="page-header-container" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap' }}>
-                    <div>
-                      <PageHeader
-                        title={
-                          <Typography.Title heading={3} className="page-header-title">
-                            PolyEnergy
-                          </Typography.Title>
-                        }
-                        subTitle={
-                          <Typography.Title type="secondary" heading={4} className="page-header-subtitle">
-                            Virtual Energy Trading
-                          </Typography.Title>
-                        }
-                      />
-                    </div>
-                    <div className="market-select-container">
-                      <Select
-                        className="market-select"
-                        value={selectedMarket}
-                        onChange={setSelectedMarket}
-                        style={{ width: 200 }}
-                        options={['ISONE', 'MISO', 'NYISO'].map(market => ({ label: market, value: market }))}
-                      />
-                    </div>
-                  </div>
-                  <Menu mode="horizontal" selectedKeys={[location.pathname.split('/')[1] || 'market-data']}>
-                    <Menu.Item key="market-data">
-                      <Link to="/market-data">Market Data</Link>
-                    </Menu.Item>
-                    <Menu.Item key="submit-bid">
-                      <Link to="/submit-bid">Submit Bid</Link>
-                    </Menu.Item>
-                    <Menu.Item key="bids">
-                      <Link to="/bids">My Bids</Link>
-                    </Menu.Item>
-                  </Menu>
-      </div>
-      <div style={{ backgroundColor: 'var(--color-fill-2)', minHeight: '80vh', display: 'flex', flexDirection: 'column' }}>
-      <Routes>
-        <Route path="/" element={<Navigate to="/market-data" replace />} />
-        <Route path="/market-data" element={<MarketDataPage />} />
-        <Route path="/submit-bid" element={<SubmitBidPage />} />
-        <Route path="/bids" element={<BidsPage />} />
-      </Routes>
+        </style>
+        <div style={ghostBgStyle}>
+          <div
+            className="page-header-container"
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "flex-end",
+              flexWrap: "wrap",
+            }}
+          >
+            <div>
+              <PageHeader
+                title={
+                  <Typography.Title heading={3} className="page-header-title">
+                    PolyEnergy
+                  </Typography.Title>
+                }
+                subTitle={
+                  <Typography.Title
+                    type="secondary"
+                    heading={4}
+                    className="page-header-subtitle"
+                  >
+                    Virtual Energy Trading
+                  </Typography.Title>
+                }
+              />
+            </div>
+            <div className="market-select-container">
+              <Select
+                className="market-select"
+                value={selectedMarket}
+                onChange={setSelectedMarket}
+                style={{ width: 200 }}
+                options={["ISONE", "MISO", "NYISO"].map((market) => ({
+                  label: market,
+                  value: market,
+                }))}
+              />
+            </div>
+          </div>
+          <Menu
+            mode="horizontal"
+            selectedKeys={[location.pathname.split("/")[1] || "market-data"]}
+          >
+            <Menu.Item key="market-data">
+              <Link to="/market-data">Market Data</Link>
+            </Menu.Item>
+            <Menu.Item key="submit-bid">
+              <Link to="/submit-bid">Submit Bid</Link>
+            </Menu.Item>
+            <Menu.Item key="bids">
+              <Link to="/bids">My Bids</Link>
+            </Menu.Item>
+          </Menu>
+        </div>
+        <div
+          style={{
+            backgroundColor: "var(--color-fill-2)",
+            minHeight: "80vh",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <Routes>
+            <Route path="/" element={<Navigate to="/market-data" replace />} />
+            <Route path="/market-data" element={<MarketDataPage />} />
+            <Route path="/submit-bid" element={<SubmitBidPage />} />
+            <Route path="/bids" element={<BidsPage />} />
+          </Routes>
+        </div>
+        <footer
+          style={{
+            flexShrink: 0,
+            marginTop: 20,
+            textAlign: "center",
+            fontSize: 14,
+            color: "var(--color-text-3)",
+            paddingBottom: 20,
+          }}
+        >
+          © {new Date().getFullYear()} PolyEnergy. All rights reserved.
+        </footer>
       </div>
-      <footer style={{ flexShrink: 0, marginTop: 20, textAlign: 'center', fontSize: 14, color: 'var(--color-text-3)', paddingBottom: 20 }}>
-                © {new Date().getFullYear()} PolyEnergy. All rights reserved.
-              </footer>
-    </div>
     </MarketContext.Provider>
   );
 }