diff --git a/package-lock.json b/package-lock.json index 466cf7e..6a4c0a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@tanstack/react-query": "^5.82.0", "@tanstack/react-query-devtools": "^5.82.0", "d3": "^7.9.0", + "normalize-scss": "^8.0.0", "react": "^19.1.0", "react-dom": "^19.1.0", "sass": "^1.89.2" @@ -4565,6 +4566,12 @@ "dev": true, "license": "MIT" }, + "node_modules/normalize-scss": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/normalize-scss/-/normalize-scss-8.0.0.tgz", + "integrity": "sha512-C6GXIxQ2LOYWrde27xWbONavmybobxp+V6TY8BiBJw5M+yMNEg2R0WjaeDtmP5JsunFYKvFOvgMAIC0/OxZuJQ==", + "license": "(MIT OR GPL-2.0)" + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", diff --git a/package.json b/package.json index d1289d4..fd050a6 100644 --- a/package.json +++ b/package.json @@ -9,12 +9,16 @@ "lint": "eslint .", "preview": "vite preview" }, + "browserslist": [ + "last 2 versions" + ], "dependencies": { "@emotion/styled": "^11.14.1", "@mui/icons-material": "^7.2.0", "@tanstack/react-query": "^5.82.0", "@tanstack/react-query-devtools": "^5.82.0", "d3": "^7.9.0", + "normalize-scss": "^8.0.0", "react": "^19.1.0", "react-dom": "^19.1.0", "sass": "^1.89.2" diff --git a/public/placeholder-instructions.svg b/public/placeholder-instructions.svg new file mode 100644 index 0000000..6b30a3e --- /dev/null +++ b/public/placeholder-instructions.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index a5cb7ce..191e80d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,17 @@ import { useQuery } from "@tanstack/react-query"; import * as d3 from "d3"; -import { useEffect, useState } from "react"; -import Legend from "./components/Legend"; -import QRCode from "./components/QRCode"; -import { QuestionGroupChart } from "./components/QuestionGroupChart"; + import { config } from "./config"; import { getSampleData } from "./lib/data"; import { fetchCategoryMetadata } from "./lib/metadata"; +import { Instructions } from "./components/Instructions"; +import Legend from "./components/Legend"; +import QRCode from "./components/QRCode"; +import { QuestionGroupChart } from "./components/QuestionGroupChart"; + +import "./styles/App.scss"; + function App() { const metadataQuery = useQuery({ queryKey: ["categoryMetadata"], @@ -44,7 +48,7 @@ function App() { .domain(sortedResponses) .range([0, sortedResponses.length * config.groupSpacing]); return ( - <> +
{questionGroups.map(([question, groupData]) => ( @@ -60,8 +64,13 @@ function App() {
- - +
+ +
+
+ +
+
); } diff --git a/src/components/Instructions.tsx b/src/components/Instructions.tsx new file mode 100644 index 0000000..b591cc7 --- /dev/null +++ b/src/components/Instructions.tsx @@ -0,0 +1,7 @@ +export function Instructions() { + return ( +
+ Instructions +
+ ); +} diff --git a/src/styles/App.scss b/src/styles/App.scss new file mode 100644 index 0000000..3b07768 --- /dev/null +++ b/src/styles/App.scss @@ -0,0 +1,70 @@ +@use "shared" as *; + +.layout { + display: grid; + grid-template-areas: + "main qr" + "main instructions"; + grid-template-columns: auto 25%; + grid-template-rows: auto auto; + grid-gap: 25px; + + margin: 25px; +} + +.chart-container { + @include rounded; + @include shadow; + + grid-area: main; + display: flex; + flex-direction: column; + padding: 50px; + gap: 50px; + + background-color: $bg-grey; +} + +.charts { + display: flex; + flex-wrap: wrap; + gap: 25px; +} + +.question-group { + @include rounded; + @include shadow; + + background-color: #ffffff; + border-radius: 4px; + padding: 16px; + + flex: 1 1 300px; + + display: flex; + flex-direction: column; + align-items: start; + gap: 8px; +} + +.question-group svg { + align-self: center; + margin-bottom: 16px; +} + +.question-group p { + font-size: 14px; + color: #666; + line-height: 1.4; +} + +.question-title { + font-size: 16px; + font-weight: bold; + color: #333; +} + +.question-title .material-icons { + vertical-align: top; + margin-right: 1ex; +} diff --git a/src/styles/_shared.scss b/src/styles/_shared.scss index 04cc417..39bd88f 100644 --- a/src/styles/_shared.scss +++ b/src/styles/_shared.scss @@ -4,19 +4,21 @@ $aai-blue-light: hsl(196.8deg 63% 55.5%); $aai-green-dark: hsl(181deg 75% 37%); $aai-green-light: hsl(127.5deg 100% 87.5%); -$aai-grey: hsl(202.5deg 20% 76.5%); +$aai-grey: #b7c6cf; $aai-orange: hsl(18.6deg 100% 55.1%); +$bg-grey: #f8f9fa; + @mixin rounded { border-radius: 16px; } @mixin shadow { - filter: drop-shadow(0 16px 16px rgb($aai-grey, 80%)); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } @mixin no-shadow { - filter: none; + box-shadow: none; } $border-radius: 16px; diff --git a/src/styles/index.scss b/src/styles/index.scss index 986966e..de03bd5 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,7 @@ @use "shared" as *; +@import "normalize-scss"; + +@include normalize(); :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; @@ -15,12 +18,6 @@ -moz-osx-font-smoothing: grayscale; } -body { - display: flex; - flex-direction: column; - align-items: center; -} - h1, h2, h3, @@ -29,7 +26,6 @@ h5, h6 { font-family: "Work Sans", sans-serif; font-weight: 800; - margin: 0; } a { @@ -48,66 +44,3 @@ body { min-width: 320px; min-height: 100vh; } - -#root { - display: flex; - gap: 16px; - margin: 16px; - flex-direction: row; - align-items: start; -} - -.chart-container { - @include rounded; - @include shadow; - - display: flex; - flex-direction: column; - - background-color: #ffffff; -} - -.charts { - display: flex; - flex-wrap: wrap; - gap: 16px; - padding: 16px; -} - -.question-group { - @include rounded; - @include shadow; - - background-color: #ffffff; - padding: 16px; - border: 1px solid #ddd; - - flex: 1 1 300px; - - display: flex; - flex-direction: column; - align-items: start; - gap: 8px; -} - -.question-group svg { - align-self: center; - margin-bottom: 16px; -} - -.question-group p { - font-size: 14px; - color: #666; - line-height: 1.4; -} - -.question-title { - font-size: 16px; - font-weight: bold; - color: #333; -} - -.question-title .material-icons { - vertical-align: top; - margin-right: 1ex; -} diff --git a/vite.config.ts b/vite.config.ts index 8b0f57b..f16e2be 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], -}) +});