From 57c8a3d03a3de0cc3b8b168c05a9b07a9b4e838b Mon Sep 17 00:00:00 2001
From: leowrites <leo@liuwork.ca>
Date: Tue, 5 Nov 2024 17:37:24 -0500
Subject: [PATCH] move styles into css

---
 webstepper/src/App.tsx        |  3 ++-
 webstepper/src/css/styles.css | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/webstepper/src/App.tsx b/webstepper/src/App.tsx
index 2b1bc37..a45bd3e 100644
--- a/webstepper/src/App.tsx
+++ b/webstepper/src/App.tsx
@@ -3,6 +3,7 @@ import Header from "./Header";
 import { Button, Box, Typography, Stack } from "@mui/material";
 import SvgDisplay from "./SvgDisplay";
 import CodeDisplay from "./CodeDisplay";
+import "./css/styles.css";
 
 export default function App() {
     const [step, setStep] = useState<number>(0);
@@ -36,7 +37,7 @@ arr = [some_string, "string 123321"]`;
                             startingLineNumber={Math.max(step - 10, 1)}
                             highlightLine={step + 1}
                         />
-                        <Box sx={{ display: "flex" }}>
+                        <Box className="button-container">
                             <Button onClick={() => handleStep(step - 1)}>
                                 Back
                             </Button>
diff --git a/webstepper/src/css/styles.css b/webstepper/src/css/styles.css
index 2480caa..7aef526 100644
--- a/webstepper/src/css/styles.css
+++ b/webstepper/src/css/styles.css
@@ -7,3 +7,21 @@
 .HighlightedLine {
     background-color: yellow;
 }
+
+.button-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.svg-display {
+    height: 500px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__canvas {
+        height: 100%;
+        width: 100%;
+    }
+}