update styling

david-yz-liu · Aug 18, 2024 · 828d2e9 · 828d2e9
1 parent 9c1d0b7
commit 828d2e9
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = "";