Skip to content

Projects site final step #1402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rammodhvadia merged 11 commits into from
Apr 2, 2026
Merged

Projects site final step #1402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6e82604
add primary button styling to instructions panel
rammodhvadia Mar 25, 2026
1093f0a
add final step stylesheet
rammodhvadia Mar 25, 2026
94a292c
increase svg size limit
rammodhvadia Mar 25, 2026
20b7a6b
add event listener to dispatch login event
rammodhvadia Mar 25, 2026
b769a60
lint
rammodhvadia Mar 25, 2026
baa845e
add styling for whats next button
rammodhvadia Mar 25, 2026
19efe9c
undo login click event
rammodhvadia Mar 27, 2026
ce62eca
remove unused import
rammodhvadia Mar 27, 2026
94591ca
update button styling - copilot suggestion
rammodhvadia Mar 30, 2026
9aa5846
use editor spacing vars for consistency
rammodhvadia Mar 30, 2026
cbdf2d0
update webpack config
rammodhvadia Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/assets/cc-wallpaper.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 65 additions & 0 deletions src/assets/stylesheets/EditorFinalStep.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: $space-1-5;
display: flex;
flex-direction: column;
gap: $space-1-5;
overflow: hidden;
padding-block: $space-2-5;
padding-inline: $space-2;
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: $space-1-5;
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);
}
}
}
19 changes: 19 additions & 0 deletions src/assets/stylesheets/Instructions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,25 @@
}
}

.rpf-button {
&--primary {
background-color: var(--rpf-button-primary-background-color);
color: var(--rpf-button-primary-text-color);
border-radius: var(--project-bar-button-radius, 8px);
&::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);
}
&: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;
Expand Down
11 changes: 9 additions & 2 deletions src/assets/stylesheets/InternalStyles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const InstructionsPanel = () => {
});
}
}, []);

const [showModal, setShowModal] = useState(false);
const instructionsEditable = useSelector(
(state) => state.editor?.instructionsEditable,
Expand Down
19 changes: 15 additions & 4 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -75,9 +75,20 @@ module.exports = {
},
],
},
{
test: /cc-wallpaper\.svg$/,
use: [
{
loader: "url-loader",
options: {
limit: 100000,
Copy link

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Raising the global .svg url-loader inline limit to 100000 will cause many more SVGs to be embedded into JS/CSS as data URIs, which can noticeably increase bundle size and memory usage. Consider scoping the higher limit to just the one asset that needs it (or letting larger SVGs emit as separate files) to avoid inlining unrelated SVGs.

Suggested change
limit: 100000,
limit: 10000,

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Contributor

@zetter-rpf zetter-rpf Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about these suggestion @rammodhvadia ?

Inlining larger assets to the bundle adds to the weight make and give browsers more work to parse. Yes the limit is arbitrary, but increasing it makes it more likely we will add larger assets in the future too.

It would be valuable to be able to refer to SVGs using a URL rather than embedding them.

},
},
],
},
{
test: /\.svg$/,
exclude: /\/src\/assets\/icons\/.*\.svg$/,
exclude: [/\/src\/assets\/icons\/.*\.svg$/, /cc-wallpaper\.svg$/],
use: [
{
loader: "url-loader",
Expand Down Expand Up @@ -133,7 +144,7 @@ module.exports = {
{
directory: scratchChunkDir,
publicPath: `${publicUrl}scratch-gui/chunks`,
}
},
],
headers: {
"Access-Control-Allow-Origin": "*",
Expand Down
Loading