Projects site final step

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);
+    }
+  }
+}

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;

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);

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,

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": "*",