From 229a46eea7e547bf326cda73834dbc474bb2d7b5 Mon Sep 17 00:00:00 2001 From: David Liu Date: Sun, 8 Dec 2024 23:08:48 +0000 Subject: [PATCH] Webstepper style updates and added support for scss (#121) --- package-lock.json | 412 ++++++++++++++++++++++++++ webstepper/CHANGELOG.md | 2 + webstepper/package.json | 2 + webstepper/src/App.tsx | 49 +-- webstepper/src/CodeDisplay.tsx | 2 - webstepper/src/Header.tsx | 26 +- webstepper/src/SvgDisplay.tsx | 4 +- webstepper/src/__tests__/App.spec.tsx | 2 +- webstepper/src/css/styles.css | 32 -- webstepper/src/css/styles.scss | 61 ++++ webstepper/src/index.tsx | 2 +- webstepper/webpack.common.js | 4 + 12 files changed, 517 insertions(+), 81 deletions(-) delete mode 100644 webstepper/src/css/styles.css create mode 100644 webstepper/src/css/styles.scss diff --git a/package-lock.json b/package-lock.json index 05e1783..8c5976b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5378,6 +5378,302 @@ "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==", "dev": true }, + "node_modules/@parcel/watcher": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz", + "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "dependencies": { + "detect-libc": "^1.0.3", + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.0", + "@parcel/watcher-darwin-arm64": "2.5.0", + "@parcel/watcher-darwin-x64": "2.5.0", + "@parcel/watcher-freebsd-x64": "2.5.0", + "@parcel/watcher-linux-arm-glibc": "2.5.0", + "@parcel/watcher-linux-arm-musl": "2.5.0", + "@parcel/watcher-linux-arm64-glibc": "2.5.0", + "@parcel/watcher-linux-arm64-musl": "2.5.0", + "@parcel/watcher-linux-x64-glibc": "2.5.0", + "@parcel/watcher-linux-x64-musl": "2.5.0", + "@parcel/watcher-win32-arm64": "2.5.0", + "@parcel/watcher-win32-ia32": "2.5.0", + "@parcel/watcher-win32-x64": "2.5.0" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz", + "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz", + "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz", + "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz", + "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz", + "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz", + "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz", + "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz", + "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz", + "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz", + "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz", + "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz", + "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz", + "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@picocss/pico": { "version": "1.5.10", "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-1.5.10.tgz", @@ -9675,6 +9971,19 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "dev": true, + "optional": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -12161,6 +12470,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz", + "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -16888,6 +17203,13 @@ "tslib": "^2.0.3" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "optional": true + }, "node_modules/node-emoji": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.1.3.tgz", @@ -20625,6 +20947,94 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sass": { + "version": "1.82.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.82.0.tgz", + "integrity": "sha512-j4GMCTa8elGyN9A7x7bEglx0VgSpNUG4W4wNedQ33wSMdnkqQCT8HTwOaVSV4e6yQovcu/3Oc4coJP/l0xhL2Q==", + "dev": true, + "dependencies": { + "chokidar": "^4.0.0", + "immutable": "^5.0.2", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, + "node_modules/sass-loader": { + "version": "16.0.4", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.4.tgz", + "integrity": "sha512-LavLbgbBGUt3wCiYzhuLLu65+fWXaXLmq7YxivLhEqmiupCFZ5sKUAipK3do6V80YSU0jvSxNhEdT13IXNr3rg==", + "dev": true, + "dependencies": { + "neo-async": "^2.6.2" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "@rspack/core": "0.x || 1.x", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", + "sass": "^1.3.0", + "sass-embedded": "*", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", + "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "dev": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", + "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "dev": true, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/sax": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", @@ -23685,6 +24095,8 @@ "html-webpack-plugin": "^5.6.0", "jest-canvas-mock": "^2.5.2", "jest-environment-jsdom": "^29.7.0", + "sass": "^1.82.0", + "sass-loader": "^16.0.4", "style-loader": "^3.3.3", "typescript": "^5.7.2", "webpack": "^5.94.0", diff --git a/webstepper/CHANGELOG.md b/webstepper/CHANGELOG.md index 0d7a6f6..3a02f1c 100755 --- a/webstepper/CHANGELOG.md +++ b/webstepper/CHANGELOG.md @@ -11,6 +11,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). - Launchd an initial prototype! - Improved UI to indicate when the end of the program is reached. +- Expanded code and svg displays in UI. ### 🐛 Bug fixes @@ -24,3 +25,4 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). - Added a script for installing the Webstepper build to a specified path. - Updated to use the window object to serve app data. +- Enabled SCSS support. diff --git a/webstepper/package.json b/webstepper/package.json index e93cdc8..08ce8f1 100644 --- a/webstepper/package.json +++ b/webstepper/package.json @@ -40,6 +40,8 @@ "html-webpack-plugin": "^5.6.0", "jest-canvas-mock": "^2.5.2", "jest-environment-jsdom": "^29.7.0", + "sass": "^1.82.0", + "sass-loader": "^16.0.4", "style-loader": "^3.3.3", "typescript": "^5.7.2", "webpack": "^5.94.0", diff --git a/webstepper/src/App.tsx b/webstepper/src/App.tsx index 8f9b077..cc16475 100644 --- a/webstepper/src/App.tsx +++ b/webstepper/src/App.tsx @@ -4,7 +4,6 @@ import { Button, Box, Typography, Stack } from "@mui/material"; import SvgDisplay from "./SvgDisplay"; import CodeDisplay from "./CodeDisplay"; import placeholder from "./placeholder"; -import "./css/styles.css"; if (typeof window === "object" && process.env.NODE_ENV !== "production") { window.svgArray = placeholder.svgArray; @@ -21,21 +20,16 @@ export default function App() { }; return ( -
+ <>
- - -

Code

- - Step {step + 1}/{limit} - - - - +
+ + +

Code

+ + + Step {step + 1}/{limit} + + + + - - - -

Memory diagrams

- - - -
+ + +

Memory visualization

+ + + +
+ ); } diff --git a/webstepper/src/CodeDisplay.tsx b/webstepper/src/CodeDisplay.tsx index 42a8d03..84d1121 100644 --- a/webstepper/src/CodeDisplay.tsx +++ b/webstepper/src/CodeDisplay.tsx @@ -2,7 +2,6 @@ import React from "react"; import SyntaxHighlighter from "react-syntax-highlighter"; import { a11yLight } from "react-syntax-highlighter/dist/esm/styles/hljs"; import { Box } from "@mui/material"; -import "./css/styles.css"; type CodeDisplayPropTypes = { text: string; @@ -21,7 +20,6 @@ export default function CodeDisplay(props: CodeDisplayPropTypes) { wrapLines={true} wrapLongLines={true} style={a11yLight} - customStyle={{ backgroundColor: "transparent" }} lineProps={(lineNumber: number) => { if (lineNumber == props.highlightLine) { return { className: "code-box__line--highlighted" }; diff --git a/webstepper/src/Header.tsx b/webstepper/src/Header.tsx index e7b53cf..fd2e941 100644 --- a/webstepper/src/Header.tsx +++ b/webstepper/src/Header.tsx @@ -10,12 +10,13 @@ export default function Header() { : lightLogo; return ( -
+
-

MemoryViz Stepper

+

MemoryViz Webstepper

- A web debugger for the{" "} + A web-based interactive tool for visualizing Python + memory, based on the{" "} MemoryViz {" "} - Javascript library for visualizing Python memory. Click{" "} - - here - {" "} - for documentation. + Javascript library. - MemoryViz Logo + MemoryViz Logo
); diff --git a/webstepper/src/SvgDisplay.tsx b/webstepper/src/SvgDisplay.tsx index c7fbfec..5a4bfe6 100644 --- a/webstepper/src/SvgDisplay.tsx +++ b/webstepper/src/SvgDisplay.tsx @@ -1,7 +1,6 @@ import React, { useRef, useEffect } from "react"; import { Paper } from "@mui/material"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; -import "./css/styles.css"; type SvgDisplayPropTypes = { step: number; @@ -36,10 +35,11 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) { return ( diff --git a/webstepper/src/__tests__/App.spec.tsx b/webstepper/src/__tests__/App.spec.tsx index c25bd5f..0aac45c 100644 --- a/webstepper/src/__tests__/App.spec.tsx +++ b/webstepper/src/__tests__/App.spec.tsx @@ -34,7 +34,7 @@ describe("App", () => { it("renders initial state correctly", async () => { expect(screen.getByText(/Step \d+\/\d+/)).toBeInTheDocument(); expect(screen.getByText("Code")).toBeInTheDocument(); - expect(screen.getByText("Memory diagrams")).toBeInTheDocument(); + expect(screen.getByText("Memory visualization")).toBeInTheDocument(); }); it("handles next button click correctly", () => { diff --git a/webstepper/src/css/styles.css b/webstepper/src/css/styles.css deleted file mode 100644 index c8ff0a2..0000000 --- a/webstepper/src/css/styles.css +++ /dev/null @@ -1,32 +0,0 @@ -.code-display { - display: flex; - flex-direction: column; - height: 80%; -} - -.code-display__code-box { - width: 100%; - height: 100%; - background-color: white; -} - -.code-box__line--highlighted { - 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; -} - -.react-transform-wrapper { - height: 100%; -} diff --git a/webstepper/src/css/styles.scss b/webstepper/src/css/styles.scss new file mode 100644 index 0000000..136b530 --- /dev/null +++ b/webstepper/src/css/styles.scss @@ -0,0 +1,61 @@ +@use "@picocss/pico"; + +/* Override default picocss variables */ +h1 { + --typography-spacing-vertical: 0.5rem; +} + +h2 { + --typography-spacing-vertical: 0.5rem; +} + +pre > code { + --spacing: 0.25rem; +} + +html, +body { + height: 100%; +} + +#root { + display: flex; + flex-direction: column; + height: 100%; +} + +main { + flex: 1; +} + +.code-controls { + align-items: center; + gap: 10px; + + > button { + flex: 1; + } +} + +.code-display__code-box > pre { + background-color: transparent; +} + +.code-box__line--highlighted { + background-color: yellow; +} + +.svg-display { + flex: 1; + margin-bottom: 1rem; +} + +.react-transform-wrapper { + height: 100%; + width: 100%; +} + +.logo { + object-fit: contain; + width: 100px; +} diff --git a/webstepper/src/index.tsx b/webstepper/src/index.tsx index e00540d..e5b429e 100644 --- a/webstepper/src/index.tsx +++ b/webstepper/src/index.tsx @@ -1,7 +1,7 @@ import React, { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; -import "@picocss/pico"; +import "./css/styles.scss"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import { useMediaQuery } from "@mui/material"; diff --git a/webstepper/webpack.common.js b/webstepper/webpack.common.js index 88d1cf6..79aa628 100644 --- a/webstepper/webpack.common.js +++ b/webstepper/webpack.common.js @@ -23,6 +23,10 @@ module.exports = { }, }, }, + { + test: /\.s[ac]ss$/i, + use: ["style-loader", "css-loader", "sass-loader"], + }, { test: /\.css$/i, use: ["style-loader", "css-loader"],