Update text and add about page

web-conexs-client/src/App.tsx

@@ -1,4 +1,9 @@
-import { CssBaseline, responsiveFontSizes, Stack } from "@mui/material";
+import {
+  CssBaseline,
+  responsiveFontSizes,
+  Stack,
+  Typography,
+} from "@mui/material";
 import Header from "./components/Header";
 import WelcomePage from "./components/WelcomePage";
 import MoleculePage from "./components/molecules/MoleculePage";
@@ -24,6 +29,7 @@ import SideDrawer from "./components/SideDrawer";
 import LoginPage from "./components/LoginPage";
 import MatProjPage from "./components/crystals/MatProjPage";
 import SimulationView from "./components/SimulationView";
+import AboutPage from "./components/AboutPage";
 
 const queryClient = new QueryClient();
 
@@ -143,13 +149,14 @@ function App() {
                   </RequireAuth>
                 }
               />
+              <Route path="/about" element={<AboutPage />} />
               <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>
             <Footer
               copyright="Diamond Light Source"
-              logo={null}
+              logo={"null"}
               sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
-            />
+            ></Footer>
           </Stack>
         </UserProvider>
       </QueryClientProvider>

web-conexs-client/src/components/AboutPage.tsx

@@ -0,0 +1,44 @@
+import { Stack, Toolbar, Typography, useTheme } from "@mui/material";
+import MainPanel from "./MainPanel";
+import { Link } from "react-router-dom";
+
+export default function AboutPage() {
+  const theme = useTheme();
+  return (
+    <MainPanel>
+      <Stack spacing={"10px"} margin={"10px"}>
+        <Toolbar
+          sx={{
+            justifyContent: "space-between",
+            alignItems: "center",
+            backgroundColor: theme.palette.action.disabled,
+            borderRadius: "4px 4px 0px 0px",
+          }}
+        >
+          <Typography variant="h5" component="div">
+            About Web-CONEXS
+          </Typography>
+        </Toolbar>
+        <Typography>
+          For work arising from the use of Web-CONEXS please cite:
+        </Typography>
+        <Link
+          target="_blank"
+          rel="noopener noreferrer"
+          to={"https://journals.iucr.org/s/issues/2024/05/00/ok5117/"}
+        >
+          J.D. Elliott <i>et al.</i>{" "}
+          <i>
+            Web-CONEXS : an inroad to theoretical X-ray absorption spectroscopy.
+          </i>{" "}
+          Journal of Synchrotron Radiation 2024 <b>31</b> 1276
+        </Link>
+        <Typography>
+          Funding for Web-CONEXS was provided by the Engineering and Physical
+          Sciences Research Council (EPSRC) via CONEXS (grant Nos. EP/S021493/1
+          \& EP/S022058) and HPC-CONEXS (grant No. No. EP/X035514/1)
+        </Typography>
+      </Stack>
+    </MainPanel>
+  );
+}

web-conexs-client/src/components/SideDrawer.tsx

@@ -25,6 +25,7 @@ import MoleculeIcon from "./icons/MoleculeIcon";
 import MoleculePlusIcon from "./icons/MoleculePlusIcon";
 import FDMNESIcon from "./icons/FDMNESIcon";
 import OrcaIcon from "./icons/OrcaIcon";
+import InfoIcon from "@mui/icons-material/Info";
 import { Login } from "@mui/icons-material";
 
 function ListItemStyled(props: {
@@ -150,6 +151,14 @@ export default function SideDrawer() {
           icon={<HomeIcon />}
           reloadDocument={false}
         ></ListItemStyled>
+        <ListItemStyled
+          theme={theme}
+          open={open}
+          to={"/about"}
+          label="About"
+          icon={<InfoIcon />}
+          reloadDocument={false}
+        ></ListItemStyled>
 
         {user.person && (
           <>

web-conexs-client/src/components/WelcomePage.tsx

@@ -1,4 +1,4 @@
-import { Stack, Typography } from "@mui/material";
+import { Paper, Stack, Typography } from "@mui/material";
 import MainPanel from "./MainPanel";
 
 import LoginIcon from "@mui/icons-material/Login";
@@ -9,6 +9,14 @@ import { useContext } from "react";
 import { UserContext } from "../UserContext";
 import Forbidden from "./Forbidden";
 
+const points = [
+  "Guided workflows for molecular and crystalline systems.",
+  "Streamlined input to reduce decision making.",
+  "Interfaces to ORCA, Quantum ESPRESSO and FDMNES.",
+  "Visualisation of x-ray absorption and x-ray emission spectra interactively.",
+  "Plot transition density differences to assign peaks in calculated spectra.",
+];
+
 export default function WelcomePage() {
   const user = useContext(UserContext);
 
@@ -29,34 +37,24 @@ export default function WelcomePage() {
             alignItems: "center",
           }}
         >
-          <Typography variant="h4" padding="24px">
-            User-Friendly XAS Simulation!
-          </Typography>
-          <Typography variant="h6" padding="24px">
-            Place holder text!
+          <Typography variant="h2" padding="16px">
+            Web-CONEXS
           </Typography>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-            velit eros, ornare sodales augue vel, facilisis laoreet odio. Etiam
-            ultrices sed metus nec molestie. Fusce fringilla ac dui varius
-            vehicula. Morbi nec elementum metus. Duis in cursus tortor. In
-            libero purus, pellentesque in pretium in, sollicitudin in quam.
-            Class aptent taciti sociosqu ad litora torquent per conubia nostra,
-            per inceptos himenaeos. In ac ipsum erat. Cras tempus ac dolor id
-            feugiat. Vestibulum ac enim maximus, luctus lorem non, tempor dolor.
-            Praesent porta augue nec diam eleifend ultrices.
+          <Typography variant="h6" padding="16px" fontStyle="italic">
+            A platform for your first steps in theoretical x-ray spectroscopy.
           </Typography>
           <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-            velit eros, ornare sodales augue vel, facilisis laoreet odio. Etiam
-            ultrices sed metus nec molestie. Fusce fringilla ac dui varius
-            vehicula. Morbi nec elementum metus. Duis in cursus tortor. In
-            libero purus, pellentesque in pretium in, sollicitudin in quam.
-            Class aptent taciti sociosqu ad litora torquent per conubia nostra,
-            per inceptos himenaeos. In ac ipsum erat. Cras tempus ac dolor id
-            feugiat. Vestibulum ac enim maximus, luctus lorem non, tempor dolor.
-            Praesent porta augue nec diam eleifend ultrices.
+            Build and execute electronic structure theory simulations of x-ray
+            absorption and x-ray emission spectra directly from your
+            web-browser, all you need to get started is the structure of your
+            material!. Login and get started by selecting a molecular or
+            crystalline approach.
           </Typography>
+          <Stack padding="12px" spacing="12px">
+            {points.map((v, i) => (
+              <Typography key={i}>&#x2022; {v}</Typography>
+            ))}
+          </Stack>
           {!user.person ? (
             <NavButton
               label="Login"

web-conexs-client/src/components/molecules/CreateMoleculePage.tsx

@@ -54,7 +54,7 @@ export default function CreateMoleculePage() {
 
   return (
     <MainPanel>
-      <Stack spacing={"10px"} margin={"10px"}>
+      <Stack spacing={"10px"}>
         <Toolbar
           sx={{
             justifyContent: "space-between",
@@ -67,8 +67,8 @@ export default function CreateMoleculePage() {
             Create Molecule
           </Typography>
         </Toolbar>
-        <Stack direction={"row"} spacing="10px" margin="10px">
-          <Stack spacing="10px">
+        <Stack direction={"row"} margin="10px">
+          <Stack spacing="10px" margin="10px">
             <MoleculeEditor
               molecule={molecule}
               setMolecule={setMolecule}

web-conexs-client/src/main.tsx

@@ -12,7 +12,7 @@ async function enableMocking() {
   }
 
   axios.defaults.headers.common["Authorization"] = "Bearer test_user";
-  return;
+
   const { worker } = await import("./mocks/browser");
   // `worker.start()` returns a Promise that resolves
   // once the Service Worker is up and ready to intercept requests.