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..14bf62b84 --- /dev/null +++ b/src/assets/stylesheets/EditorFinalStep.scss @@ -0,0 +1,65 @@ +@use "@raspberrypifoundation/design-system-core/scss/mixins/typography" as + 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"); + 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 { + inline-size: 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/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; 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); diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx index 76fdb5bdc..7559b1e5b 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx +++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx @@ -36,6 +36,7 @@ const InstructionsPanel = () => { }); } }, []); + const [showModal, setShowModal] = useState(false); const instructionsEditable = useSelector( (state) => state.editor?.instructionsEditable, 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": "*",