Merge pull request #2 from jacobfilik/add_icon

add icon, rename folder

src/App.tsx

@@ -1,7 +1,7 @@
 import "./App.css";
 import { Route, Routes } from "react-router-dom";
 import GraphPage from "./GraphPage";
-import MoleculeViewer from "./Components/MoleculeViewer";
+import MoleculeViewer from "./components/MoleculeViewer";
 
 function App() {
   return (

src/GraphPage.tsx

@@ -1,4 +1,4 @@
-import SideDrawer from "./Components/SideDrawer";
+import SideDrawer from "./components/SideDrawer";
 import "@h5web/lib/styles.css";
 import {
   Domain,
@@ -18,7 +18,7 @@ import {
   stkyvalues,
   xdomainvalues,
   ydomainvalues,
-} from "./Components/graphdata";
+} from "./components/graphdata";
 
 import { ReactElement } from "react";
 

src/components/ConexsIcon.tsx

@@ -0,0 +1,32 @@
+import { SvgIcon } from "@mui/material";
+
+export default function ConexsIcon() {
+  return (
+    <SvgIcon fontSize="large">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="128mm"
+        height="128mm"
+        stroke="currentColor"
+        strokeWidth="6"
+        fill="currentColor"
+        fillOpacity={0}
+        viewBox="0 0 128 128"
+        version="1.1"
+        id="svg8"
+      >
+        <g>
+          <circle id="path10" cx="45" cy="45" r="40" strokeOpacity={0.25} />
+          <circle id="path10" cx="45" cy="45" r="30" strokeOpacity={0.25} />
+          <circle id="path10" cx="45" cy="45" r="20" strokeOpacity={0.25} />
+          <circle id="path10" cx="78" cy="45" r="40" strokeOpacity={0.5} />
+          <circle id="path10" cx="78" cy="45" r="30" strokeOpacity={0.5} />
+          <circle id="path10" cx="78" cy="45" r="20" strokeOpacity={0.5} />
+          <circle id="path10" cx="68" cy="78" r="40" />
+          <circle id="path10" cx="68" cy="78" r="30" />
+          <circle id="path10" cx="68" cy="78" r="20" />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+}

src/Components/MoleculeViewer.tsx → src/components/MoleculeViewer.tsx

@@ -6,12 +6,14 @@ import {
   Button,
   Divider,
   Grid2,
+  Stack,
   Tooltip,
   Typography,
 } from "@mui/material";
 import StyleToggle from "./StyleToggle";
 import SideDrawer from "./SideDrawer";
 import FormPage from "../FormPage";
+import ConexsIcon from "./ConexsIcon";
 
 function MoleculeViewer() {
   const [color, setcolor] = useState("#3465A4");
@@ -82,10 +84,13 @@ function MoleculeViewer() {
 
   return (
     <>
-      <SideDrawer />
-      <Typography variant="h3" sx={{ textAlign: "left" }}>
-        ORCA XAS Input File Generator
-      </Typography>
+      <Stack direction="row" alignItems={"center"} spacing={2}>
+        <SideDrawer />
+        <ConexsIcon />
+        <Typography variant="h3" sx={{ textAlign: "left" }}>
+          ORCA XAS Input File Generator
+        </Typography>
+      </Stack>
       <Grid2 container spacing={2}>
         <Grid2
           offset={{ md: 1 }}