From 828d2e9311144e8da69b3c683a5f7e705144a6ab Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Sat, 17 Aug 2024 22:54:53 -0400
Subject: [PATCH] update styling

---
 demo/jest.config.ts                |  2 +-
 demo/src/MemoryModelsMenu.tsx      |  9 ++-------
 demo/src/MemoryModelsUserInput.tsx |  1 -
 demo/src/SvgDisplay.tsx            |  4 ----
 demo/src/css/styles.css            | 14 ++++++++++++++
 demo/src/mocks/fileMock.js         |  2 +-
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/demo/jest.config.ts b/demo/jest.config.ts
index 0a1fabdf..76676a39 100644
--- a/demo/jest.config.ts
+++ b/demo/jest.config.ts
@@ -94,7 +94,7 @@ const config: Config = {
         roughjs: require.resolve("roughjs"),
         "memory-viz": require.resolve("../memory-viz/src"),
         // Mocks a file (see fileMock.js) each time any of the below file types are imported.
-        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|less|sass|scss)$":
             "./mocks/fileMock.js",
     },
 
diff --git a/demo/src/MemoryModelsMenu.tsx b/demo/src/MemoryModelsMenu.tsx
index 2638a2c5..26d03c4b 100644
--- a/demo/src/MemoryModelsMenu.tsx
+++ b/demo/src/MemoryModelsMenu.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode, useState } from "react";
 import { Box, Button, Menu } from "@mui/material";
 import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
+import "./css/styles.css";
 
 type MemoryModelsMenuPropTypes = {
     menuName: string;
@@ -23,13 +24,7 @@ export default function MemoryModelsMenu(props: MemoryModelsMenuPropTypes) {
             <Button
                 onClick={handleClick}
                 data-testid={props.testId}
-                sx={{
-                    textTransform: "none",
-                    "& .MuiSvgIcon-root": {
-                        transition: "transform 0.2s ease-in-out",
-                        transform: open ? "rotate(180deg)" : "rotate(0deg)",
-                    },
-                }}
+                className={`menu-button ${open ? "open" : ""}`}
             >
                 {props.menuName}
                 <ExpandMoreRoundedIcon />
diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx
index bab34cfe..eba69408 100644
--- a/demo/src/MemoryModelsUserInput.tsx
+++ b/demo/src/MemoryModelsUserInput.tsx
@@ -108,7 +108,6 @@ function MemoryModelsTextInput(props: MemoryModelsTextInputPropTypes) {
             rows={10}
             variant="outlined"
             value={props.textData}
-            style={{ fontFamily: "Monospace" }}
             onChange={handleTextFieldChange}
         />
     );
diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx
index 64bad001..cfede943 100644
--- a/demo/src/SvgDisplay.tsx
+++ b/demo/src/SvgDisplay.tsx
@@ -42,10 +42,6 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) {
                 ref={canvasRef}
                 width={canvasWidth}
                 height={canvasHeight}
-                style={{
-                    width: canvasWidth,
-                    height: canvasHeight,
-                }}
             />
         </Paper>
     );
diff --git a/demo/src/css/styles.css b/demo/src/css/styles.css
index 61ac33e6..43c1785e 100644
--- a/demo/src/css/styles.css
+++ b/demo/src/css/styles.css
@@ -6,3 +6,17 @@ input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
+
+.menu-button {
+    text-transform: none !important;
+}
+
+.menu-button .MuiSvgIcon-root {
+    transition: transform 0.2s ease-in-out;
+    transform: rotate(0deg);
+}
+
+.menu-button.open .MuiSvgIcon-root {
+    transition: transform 0.2s ease-in-out;
+    transform: rotate(180deg);
+}
diff --git a/demo/src/mocks/fileMock.js b/demo/src/mocks/fileMock.js
index b2e9f045..d435a1b1 100644
--- a/demo/src/mocks/fileMock.js
+++ b/demo/src/mocks/fileMock.js
@@ -1,2 +1,2 @@
-// Mock file for Jest tests which include images
+// Mock file for Jest tests which include images or imported styling
 module.exports = "";