diff --git a/package.json b/package.json
index 9a98788ed..98fdc90e2 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
"@codemirror/view": "^6.3.0",
"@hello-pangea/dnd": "^16.2.0",
"@juggle/resize-observer": "^3.3.1",
- "@raspberrypifoundation/design-system-react": "^2.7.0",
+ "@raspberrypifoundation/design-system-react": "^2.9.2",
"@raspberrypifoundation/python-friendly-error-messages": "0.7.0",
"@react-three/drei": "^10.0.0",
"@react-three/fiber": "^9.6.1",
@@ -64,7 +64,6 @@
"react-tabs": "^3.2.3",
"react-timer-hook": "^3.0.5",
"react-toastify": "^11.1.0",
- "react-toggle": "^4.1.3",
"redux": "^4.2.1",
"redux-oidc": "^4.0.0-beta1",
"scratchReactDomVendor": "npm:react-dom@18.3.1",
diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss
index 240cd91ee..adc9902d7 100644
--- a/src/assets/stylesheets/AstroPiModel.scss
+++ b/src/assets/stylesheets/AstroPiModel.scss
@@ -102,6 +102,7 @@
font-family: var(--wc-font-family-monospace);
&-timer {
+ flex: 1;
margin-block-start: 0;
padding: $space-0-5 0;
inline-size: 100%;
@@ -120,6 +121,15 @@
label {
flex: 1;
}
+
+ .rpf-input-field {
+ margin-block-end: 0;
+ }
+
+ .rpf-switch {
+ --rpf-switch-on-color: var(--rpf-green-800);
+ gap: 0;
+ }
}
&-input {
@@ -208,13 +218,6 @@
&-toggle {
background-color: $rpf-grey-800;
border: 1px solid $rpf-grey-500;
-
- .react-toggle {
- &-thumb {
- border: 1px solid $rpf-white;
- background-color: $rpf-white;
- }
- }
}
}
}
@@ -262,11 +265,6 @@
&-toggle {
background-color: $rpf-white;
border: 2px solid $rpf-grey-300;
-
- .react-toggle-thumb {
- border: 1px solid $rpf-grey-100;
- background-color: $rpf-grey-100;
- }
}
}
}
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index 02b113eaf..fa156a55c 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -1,6 +1,5 @@
@forward "../../../node_modules/@raspberrypifoundation/design-system-react/dist/scss/design-system-core";
@use "../../../node_modules/react-tabs/style/react-tabs.css";
-@use "../../../node_modules/react-toggle/style.css";
@use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
@use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
@use "../../../node_modules/react-toastify/dist/ReactToastify.css";
diff --git a/src/components/AstroPiModel/AstroPiControls/MotionInput.jsx b/src/components/AstroPiModel/AstroPiControls/MotionInput.jsx
index b0fee8f98..6e4e9a424 100644
--- a/src/components/AstroPiModel/AstroPiControls/MotionInput.jsx
+++ b/src/components/AstroPiModel/AstroPiControls/MotionInput.jsx
@@ -1,10 +1,9 @@
import React from "react";
import { useEffect, useState, startTransition } from "react";
import { useSelector } from "react-redux";
-import Toggle from "react-toggle";
+import { Switch } from "@raspberrypifoundation/design-system-react";
import Sk from "skulpt";
import "../../../assets/stylesheets/AstroPiModel.scss";
-import "react-toggle/style.css";
import { useTranslation } from "react-i18next";
const MotionInput = (props) => {
@@ -45,9 +44,9 @@ const MotionInput = (props) => {
- setValue(e.target.checked)}
/>
diff --git a/yarn.lock b/yarn.lock
index 4d6512032..1db5bd271 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4091,20 +4091,20 @@ __metadata:
languageName: node
linkType: hard
-"@raspberrypifoundation/design-system-core@npm:^2.4.0":
- version: 2.4.0
- resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
+"@raspberrypifoundation/design-system-core@npm:^2.4.7":
+ version: 2.4.7
+ resolution: "@raspberrypifoundation/design-system-core@npm:2.4.7"
dependencies:
classnames: "npm:^2.3.2"
- checksum: 10/4f989c48c9e93f57f65a6979c37c6b0cda69fb8e06c6dffb91dc5c407783775422b527907a081258aa16dab06977af9e74e053456b3d98680fc1f1c86218a417
+ checksum: 10/3692700108f69bb41df4d0e5c512e87efbd5b1c5d929f86bfb62bc80b2a24a71f48f9b232be748aea6c937331324677c58e5f90ce54eab32ae4f8752dd614fd5
languageName: node
linkType: hard
-"@raspberrypifoundation/design-system-react@npm:^2.7.0":
- version: 2.7.3
- resolution: "@raspberrypifoundation/design-system-react@npm:2.7.3"
+"@raspberrypifoundation/design-system-react@npm:^2.9.2":
+ version: 2.9.2
+ resolution: "@raspberrypifoundation/design-system-react@npm:2.9.2"
dependencies:
- "@raspberrypifoundation/design-system-core": "npm:^2.4.0"
+ "@raspberrypifoundation/design-system-core": "npm:^2.4.7"
classnames: "npm:^2.5.1"
lucide-react: "npm:^0.553.0"
peerDependencies:
@@ -4116,7 +4116,7 @@ __metadata:
optional: false
react-dom:
optional: false
- checksum: 10/28db4405bbb59c612308411f12201ec5b6437116078187286e76022822a6e41be54cb78a82b00857218f07f6e6aeb3efdebcfa7e87425ce0e9302f0043d1ed6c
+ checksum: 10/36ec7dc3ade7da08b0b2d7fbec6e7114cc84ab14c7fec566969ad5d30c8dbd694643295fbb97ed51f7a85b643fa9e06146e852860a68f563e81aea9941bb91f9
languageName: node
linkType: hard
@@ -4135,7 +4135,7 @@ __metadata:
"@codemirror/view": "npm:^6.3.0"
"@hello-pangea/dnd": "npm:^16.2.0"
"@juggle/resize-observer": "npm:^3.3.1"
- "@raspberrypifoundation/design-system-react": "npm:^2.7.0"
+ "@raspberrypifoundation/design-system-react": "npm:^2.9.2"
"@raspberrypifoundation/python-friendly-error-messages": "npm:0.7.0"
"@react-three/drei": "npm:^10.0.0"
"@react-three/fiber": "npm:^9.6.1"
@@ -4233,7 +4233,6 @@ __metadata:
react-tabs: "npm:^3.2.3"
react-timer-hook: "npm:^3.0.5"
react-toastify: "npm:^11.1.0"
- react-toggle: "npm:^4.1.3"
redux: "npm:^4.2.1"
redux-mock-store: "npm:^1.5.4"
redux-oidc: "npm:^4.0.0-beta1"
@@ -18321,19 +18320,6 @@ __metadata:
languageName: node
linkType: hard
-"react-toggle@npm:^4.1.3":
- version: 4.1.3
- resolution: "react-toggle@npm:4.1.3"
- dependencies:
- classnames: "npm:^2.2.5"
- peerDependencies:
- prop-types: ">= 15.3.0 < 19"
- react: ">= 15.3.0 < 19"
- react-dom: ">= 15.3.0 < 19"
- checksum: 10/b63b7c3bd37431c4dc3cce741143a490239ba4981302a1af0f5aeb83635bf580bc1b142097eb28a4f52fef8dee40913085aa30d52579f355992689002d2602ca
- languageName: node
- linkType: hard
-
"react-tooltip@npm:4.5.1":
version: 4.5.1
resolution: "react-tooltip@npm:4.5.1"