From 6e826044c7d66d51f3b722b65f99707b7e463890 Mon Sep 17 00:00:00 2001 From: Ram Modhvadia Date: Wed, 25 Mar 2026 11:09:30 +0000 Subject: [PATCH 1/8] add primary button styling to instructions panel --- src/assets/stylesheets/Instructions.scss | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss index 04d9c1c3e..4db401a33 100644 --- a/src/assets/stylesheets/Instructions.scss +++ b/src/assets/stylesheets/Instructions.scss @@ -122,6 +122,26 @@ } } + .rpf-button { + &::before { + background-color: var(--rpf-button-primary-background-color); + border-color: var(--rpf-button-primary-background-color); + border-radius: var(--project-bar-button-radius, 8px); + } + + &--primary { + background-color: var(--rpf-button-primary-background-color); + color: white; + border-radius: var(--project-bar-button-radius, 8px); + } + &:hover::before, + &:active::before, + &:focus-visible::before { + background-color: var(--rpf-button-primary-background-color-hover); + border-color: var(--rpf-button-primary-background-color-hover); + } + } + .c-code-filename { font-family: var(--wc-font-family-monospace); margin: 0; From 1093f0afd80cd42eea57f75aa7e59315e15924ec Mon Sep 17 00:00:00 2001 From: Ram Modhvadia Date: Wed, 25 Mar 2026 11:09:48 +0000 Subject: [PATCH 2/8] add final step stylesheet --- src/assets/cc-wallpaper.svg | 1 + src/assets/stylesheets/EditorFinalStep.scss | 57 +++++++++++++++++++++ src/assets/stylesheets/InternalStyles.scss | 11 +++- 3 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 src/assets/cc-wallpaper.svg create mode 100644 src/assets/stylesheets/EditorFinalStep.scss diff --git a/src/assets/cc-wallpaper.svg b/src/assets/cc-wallpaper.svg new file mode 100644 index 000000000..cfe46b4f1 --- /dev/null +++ b/src/assets/cc-wallpaper.svg @@ -0,0 +1 @@ + diff --git a/src/assets/stylesheets/EditorFinalStep.scss b/src/assets/stylesheets/EditorFinalStep.scss new file mode 100644 index 000000000..329ff6884 --- /dev/null +++ b/src/assets/stylesheets/EditorFinalStep.scss @@ -0,0 +1,57 @@ +@use "@raspberrypifoundation/design-system-core/scss/mixins/typography" as + typography; +@use "./rpf_design_system/spacing" as *; +.project-instructions { + .c-badge-achievement-card { + align-items: center; + background-color: var(--cc-light-cyan); + background-image: url("../cc-wallpaper.svg"); + background-position: center; + background-size: cover; + border-radius: var(--space-3); + display: flex; + flex-direction: column; + gap: var(--space-3); + overflow: hidden; + padding-block: var(--space-5); + padding-inline: var(--space-4); + position: relative; + + &::before { + background: linear-gradient( + 90deg, + transparent 0%, + color-mix(in srgb, var(--cc-light-cyan) 90%, transparent) 20%, + color-mix(in srgb, var(--cc-light-cyan) 100%, transparent) 50%, + color-mix(in srgb, var(--cc-light-cyan) 90%, transparent) 80%, + transparent 100% + ); + border-radius: var(--space-3); + content: ""; + inset: 0; + pointer-events: none; + position: absolute; + z-index: 1; + } + + > * { + position: relative; + z-index: 2; + } + + img { + width: 100px; + } + + &__text-content { + display: flex; + flex-direction: column; + gap: 10px; + text-align: center; + } + + &__title { + @include typography.style-2(bold); + } + } +} diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss index 923d89be9..7be00d679 100644 --- a/src/assets/stylesheets/InternalStyles.scss +++ b/src/assets/stylesheets/InternalStyles.scss @@ -40,6 +40,7 @@ @use "./ContextMenu" as *; @use "./FilePanel" as *; // needs to be below Button @use "./EmbeddedViewer" as *; +@use "./EditorFinalStep.scss" as *; @use "./settings/fonts" as fonts; @@ -51,8 +52,14 @@ // Allow fonts to be overridden by the host application via // --editor-font-family-*, falling back to the default sets in // settings/fonts.scss - --wc-font-family-sans-serif: var(--editor-font-family-sans-serif, #{fonts.$font-family-sans-serif}); - --wc-font-family-monospace: var(--editor-font-family-monospace, #{fonts.$font-family-monospace}); + --wc-font-family-sans-serif: var( + --editor-font-family-sans-serif, + #{fonts.$font-family-sans-serif} + ); + --wc-font-family-monospace: var( + --editor-font-family-monospace, + #{fonts.$font-family-monospace} + ); background: var(--editor-secondary-theme, transparent); font-family: var(--wc-font-family-sans-serif); From 94a292cb73da4e98da5829f6224f8348087174cf Mon Sep 17 00:00:00 2001 From: Ram Modhvadia Date: Wed, 25 Mar 2026 11:10:14 +0000 Subject: [PATCH 3/8] increase svg size limit --- webpack.config.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 258a159d7..56a5c2fa4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,12 +13,12 @@ if (!publicUrl.endsWith("/")) { const scratchStaticDir = path.resolve( __dirname, "node_modules/@scratch/scratch-gui/dist/static", -) +); const scratchChunkDir = path.resolve( __dirname, "node_modules/@scratch/scratch-gui/dist/chunks", -) +); module.exports = { entry: { @@ -82,7 +82,7 @@ module.exports = { { loader: "url-loader", options: { - limit: 10000, + limit: 100000, }, }, ], @@ -133,7 +133,7 @@ module.exports = { { directory: scratchChunkDir, publicPath: `${publicUrl}scratch-gui/chunks`, - } + }, ], headers: { "Access-Control-Allow-Origin": "*", From 20b7a6bbb84dcc9b931713411643811f3054b558 Mon Sep 17 00:00:00 2001 From: Ram Modhvadia Date: Wed, 25 Mar 2026 11:48:07 +0000 Subject: [PATCH 4/8] add event listener to dispatch login event --- .../InstructionsPanel/InstructionsPanel.jsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx index 76fdb5bdc..9f60414ae 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx +++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx @@ -9,7 +9,10 @@ import SidebarPanel from "../SidebarPanel"; import Prism from "prismjs"; import demoInstructions from "../../../../assets/markdown/demoInstructions.md"; import "../../../../assets/stylesheets/Instructions.scss"; -import { quizReadyEvent } from "../../../../events/WebComponentCustomEvents"; +import { + logInEvent, + quizReadyEvent, +} from "../../../../events/WebComponentCustomEvents"; import { setProjectInstructions } from "../../../../redux/EditorSlice"; import { setCurrentStepPosition } from "../../../../redux/InstructionsSlice"; import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate"; @@ -36,6 +39,17 @@ const InstructionsPanel = () => { }); } }, []); + + useEffect(() => { + const container = stepContent.current; + const handleLoginClick = (e) => { + if (e.target.id === "badge-login") { + document.dispatchEvent(logInEvent); + } + }; + container?.addEventListener("click", handleLoginClick); + return () => container?.removeEventListener("click", handleLoginClick); + }, []); const [showModal, setShowModal] = useState(false); const instructionsEditable = useSelector( (state) => state.editor?.instructionsEditable, From b769a609743a1d2ec748a3c6034e3facf0f935a4 Mon Sep 17 00:00:00 2001 From: Ram Modhvadia Date: Wed, 25 Mar 2026 12:02:35 +0000 Subject: [PATCH 5/8] lint --- src/assets/stylesheets/EditorFinalStep.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/stylesheets/EditorFinalStep.scss b/src/assets/stylesheets/EditorFinalStep.scss index 329ff6884..414cc202e 100644 --- a/src/assets/stylesheets/EditorFinalStep.scss +++ b/src/assets/stylesheets/EditorFinalStep.scss @@ -40,7 +40,7 @@ } img { - width: 100px; + inline-size: 100px; } &__text-content { From baa845ec04930353a42a68c8c217872dbf5a045d Mon Sep 17 00:00:00 2001 From: Ram Modhvadia Date: Wed, 25 Mar 2026 15:52:46 +0000 Subject: [PATCH 6/8] add styling for whats next button --- src/assets/stylesheets/EditorFinalStep.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/assets/stylesheets/EditorFinalStep.scss b/src/assets/stylesheets/EditorFinalStep.scss index 414cc202e..14bf62b84 100644 --- a/src/assets/stylesheets/EditorFinalStep.scss +++ b/src/assets/stylesheets/EditorFinalStep.scss @@ -2,7 +2,15 @@ typography; @use "./rpf_design_system/spacing" as *; .project-instructions { + .whats-next { + display: flex; + flex-direction: column; + align-items: center; + } .c-badge-achievement-card { + p { + margin: 0; + } align-items: center; background-color: var(--cc-light-cyan); background-image: url("../cc-wallpaper.svg"); From 19efe9c8dd8dd1bce3b63b830d0681496f0b691f Mon Sep 17 00:00:00 2001 From: Ram Modhvadia Date: Fri, 27 Mar 2026 14:33:07 +0000 Subject: [PATCH 7/8] undo login click event --- .../Sidebar/InstructionsPanel/InstructionsPanel.jsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx index 9f60414ae..1e5fbc921 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx +++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx @@ -40,16 +40,6 @@ const InstructionsPanel = () => { } }, []); - useEffect(() => { - const container = stepContent.current; - const handleLoginClick = (e) => { - if (e.target.id === "badge-login") { - document.dispatchEvent(logInEvent); - } - }; - container?.addEventListener("click", handleLoginClick); - return () => container?.removeEventListener("click", handleLoginClick); - }, []); const [showModal, setShowModal] = useState(false); const instructionsEditable = useSelector( (state) => state.editor?.instructionsEditable, From ce62eca085ce072436278385d28382c0d10f5838 Mon Sep 17 00:00:00 2001 From: Ram Modhvadia Date: Fri, 27 Mar 2026 14:34:22 +0000 Subject: [PATCH 8/8] remove unused import --- .../Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx index 1e5fbc921..7559b1e5b 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx +++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx @@ -9,10 +9,7 @@ import SidebarPanel from "../SidebarPanel"; import Prism from "prismjs"; import demoInstructions from "../../../../assets/markdown/demoInstructions.md"; import "../../../../assets/stylesheets/Instructions.scss"; -import { - logInEvent, - quizReadyEvent, -} from "../../../../events/WebComponentCustomEvents"; +import { quizReadyEvent } from "../../../../events/WebComponentCustomEvents"; import { setProjectInstructions } from "../../../../redux/EditorSlice"; import { setCurrentStepPosition } from "../../../../redux/InstructionsSlice"; import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate";