Projects site final step (#1402)

A few changes to enable us to inject a final step to the instructions
panel from projects-ui:

- Added `EditorFinalStep.scss` which has all the styling this new
instruction step might need
- Added primary button styling to `Instructions.scss`
- Added `cc-wallpaper.svg` needed for one of the components being
injected in the new final step
- Increase the image size limit in webpack config (needed to do this for
the svg mentioned in previous point)

Questions/suggestions welcome :)

Author: rammodhvadia

src/assets/cc-wallpaper.svg

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

src/assets/stylesheets/EditorFinalStep.scss

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

src/assets/stylesheets/Instructions.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/assets/stylesheets/InternalStyles.scss

@@ -36,6 +36,7 @@ const InstructionsPanel = () => {
       });
     }
   }, []);
+
   const [showModal, setShowModal] = useState(false);
   const instructionsEditable = useSelector(
     (state) => state.editor?.instructionsEditable,

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

@@ -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: {
@@ -75,9 +75,20 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /cc-wallpaper\.svg$/,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 100000,
+            },
+          },
+        ],
+      },
       {
         test: /\.svg$/,
-        exclude: /\/src\/assets\/icons\/.*\.svg$/,
+        exclude: [/\/src\/assets\/icons\/.*\.svg$/, /cc-wallpaper\.svg$/],
         use: [
           {
             loader: "url-loader",
@@ -133,7 +144,7 @@ module.exports = {
       {
         directory: scratchChunkDir,
         publicPath: `${publicUrl}scratch-gui/chunks`,
-      }
+      },
     ],
     headers: {
       "Access-Control-Allow-Origin": "*",