Theme package

.github/workflows/build.yml

@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
+      - run: npm install --no-save @microbit-foundation/ml-trainer-microbit@0.2.0-dev.5 @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

lang/ui.en.json

@@ -368,7 +368,7 @@
     "description": ""
   },
   "connectMB.usbTryAgain.closeTabs2": {
-    "defaultMessage": "Close any other tabs that may be using WebUSB (e.g. MakeCode, Python Editor, AI creator), or unplug and replug the micro:bit before trying again.",
+    "defaultMessage": "Close any other tabs that may be using WebUSB (e.g. MakeCode, Python Editor, {appNameShort}), or unplug and replug the micro:bit before trying again.",
     "description": ""
   },
   "connectMB.usbTryAgain.heading": {
@@ -432,7 +432,7 @@
     "description": ""
   },
   "content.data.classHelpBody": {
-    "defaultMessage": "The type of movement you want the micro:bit AI creator to recognise e.g. ‘waving’ or ‘clapping’.",
+    "defaultMessage": "The type of movement you want the {appNameFull} to recognise e.g. ‘waving’ or ‘clapping’.",
     "description": ""
   },
   "content.data.classPlaceholderNewClass": {
@@ -508,7 +508,7 @@
     "description": ""
   },
   "content.model.output.action.descriptionBody": {
-    "defaultMessage": "The type of movement you want the micro:bit AI creator to recognise e.g. ‘waving’ or ‘clapping’.",
+    "defaultMessage": "The type of movement you want the {appNameFull} to recognise e.g. ‘waving’ or ‘clapping’.",
     "description": ""
   },
   "content.model.output.action.descriptionTitle": {
@@ -556,7 +556,7 @@
     "description": ""
   },
   "content.trainer.description": {
-    "defaultMessage": "The computer program spots patterns or differences in your data samples, and uses these to build a mathematical model that allows the micro:bit AI creator to recognise different actions when you move your micro:bit.",
+    "defaultMessage": "The computer program spots patterns or differences in your data samples, and uses these to build a mathematical model that allows the {appNameFull} to recognise different actions when you move your micro:bit.",
     "description": ""
   },
   "content.trainer.failure.body": {
@@ -701,11 +701,7 @@
   },
   "homepage-subtitle": {
     "defaultMessage": "Introduce students to machine learning concepts through physical movement and data",
-    "description": "Subtitle of micro:bit AI creator home page"
-  },
-  "homepage-title": {
-    "defaultMessage": "micro:bit AI creator",
-    "description": "Title of micro:bit AI creator home page"
+    "description": "Subtitle of the home page"
   },
   "homepage.Link": {
     "defaultMessage": "Home page",
@@ -979,4 +975,4 @@
     "defaultMessage": "Train model",
     "description": "Train model step title"
   }
-}
+}

src/components/AboutDialog.tsx

@@ -28,12 +28,11 @@ import {
 import { ReactNode } from "react";
 import { RiFileCopy2Line, RiGithubFill } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useDeployment } from "../deployment";
 import aarhusLogo from "../images/aulogo_uk_var2_blue.png";
 import microbitHeartImage from "../images/microbit-heart.png";
-import MicrobitLogo from "./MicrobitLogo";
 
 interface AboutDialogProps {
-  appName: string;
   isOpen: boolean;
   onClose: () => void;
   finalFocusRef?: React.RefObject<HTMLButtonElement>;
@@ -42,15 +41,11 @@ interface AboutDialogProps {
 /**
  * An about dialog with version information.
  */
-const AboutDialog = ({
-  isOpen,
-  onClose,
-  appName,
-  finalFocusRef,
-}: AboutDialogProps) => {
+const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
+  const { appNameFull, OrgLogo } = useDeployment();
   const versionInfo = [
     {
-      name: `micro:bit ${appName}`,
+      name: appNameFull,
       value: import.meta.env.VITE_VERSION,
       href: "https://github.com/microbit-foundation/ml-trainer",
     },
@@ -75,7 +70,7 @@ const AboutDialog = ({
             <ModalCloseButton />
             <VStack spacing={8} pl={5} pr={5} pt={5}>
               <HStack justifyContent="center" gap={8}>
-                <MicrobitLogo fill="#000" alt="micro:bit" height={55} />
+                {OrgLogo && <OrgLogo fill="#000" color="black" height={55} />}
                 <Image src={aarhusLogo} h="55px" />
               </HStack>
               <Text textAlign="center">
@@ -84,10 +79,10 @@ const AboutDialog = ({
                   values={{
                     link: (chunks: ReactNode) => (
                       <Link
-                        href="https://microbit.org"
+                        href="https://cctd.au.dk/"
                         target="_blank"
                         rel="noopener"
-                        color="purple.500"
+                        color="brand.600"
                       >
                         {chunks}
                       </Link>

src/components/ActionBar.tsx

@@ -18,7 +18,7 @@ const ActionBar = ({
       px={5}
       alignItems="center"
       justifyContent="space-between"
-      bgColor="green.500"
+      bgColor="brand2.500"
       h="64px"
       minH="64px"
       {...rest}

src/components/AppLogo.tsx

@@ -1,6 +1,5 @@
-import { As, Divider, HStack, Image } from "@chakra-ui/react";
-import AppNameLogo from "../images/app-name.svg";
-import MicrobitLogo from "./MicrobitLogo";
+import { As, Divider, HStack } from "@chakra-ui/react";
+import { useDeployment } from "../deployment";
 
 const AppLogo = ({
   color = "#FFF",
@@ -9,25 +8,31 @@ const AppLogo = ({
   color?: string;
   beta?: boolean;
   as?: As;
-  name: string;
-}) => (
-  <HStack
-    as={as}
-    spacing={4}
-    userSelect="none"
-    transform="scale(0.93)"
-    transformOrigin="left"
-  >
-    <MicrobitLogo fill={color} alt="micro:bit" />
-    <Divider
-      aria-hidden
-      borderColor={color}
-      orientation="vertical"
-      h="33px"
-      borderWidth="1px"
-    />
-    <Image src={AppNameLogo} alt="micro:bit" h="18px" />
-  </HStack>
-);
+}) => {
+  const { AppLogo, OrgLogo } = useDeployment();
+  return (
+    <HStack
+      as={as}
+      spacing={4}
+      userSelect="none"
+      transform="scale(0.93)"
+      transformOrigin="left"
+    >
+      {OrgLogo && (
+        <>
+          <OrgLogo />
+          <Divider
+            aria-hidden
+            borderColor={color}
+            orientation="vertical"
+            h="33px"
+            borderWidth="1px"
+          />
+        </>
+      )}
+      <AppLogo h="18px" />
+    </HStack>
+  );
+};
 
 export default AppLogo;

src/components/BluetoothPatternInput.tsx

@@ -128,9 +128,9 @@ const PatternBox = ({
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      bgColor={isOn ? "green.500" : "gray.300"}
+      bgColor={isOn ? "brand2.500" : "gray.300"}
       borderWidth={isHighlighted && !isOn ? 3 : 0}
-      borderColor={isHighlighted ? (isOn ? "white" : "green.500") : undefined}
+      borderColor={isHighlighted ? (isOn ? "white" : "brand2.500") : undefined}
       opacity={isHighlighted && isOn ? 0.25 : 1}
     />
   );

src/components/BrokenFirmwareDialog.tsx

@@ -55,7 +55,7 @@ const BrokenFirmwareDialog = ({
                     values={{
                       link: (chunks: ReactNode) => (
                         <Link
-                          color="purple.500"
+                          color="brand.600"
                           href="https://microbit.org/get-started/user-guide/firmware/"
                           target="_blank"
                           rel="noopener"
@@ -68,7 +68,7 @@ const BrokenFirmwareDialog = ({
                 </Text>
                 <Text w="100%">
                   <Link
-                    color="purple.500"
+                    color="brand.600"
                     href="https://microbit.org/get-started/user-guide/firmware/"
                     target="_blank"
                     rel="noopener"
@@ -80,7 +80,7 @@ const BrokenFirmwareDialog = ({
                     <Icon
                       as={RiExternalLinkLine}
                       boxSize={5}
-                      color="purple.500"
+                      color="brand.600"
                       position="relative"
                     />
                   </Link>

src/components/CertaintyThresholdGridItem.tsx

@@ -35,7 +35,7 @@ const CertaintyThresholdGridItem = ({
   const intl = useIntl();
   const barWidth = 240;
   const colorScheme = useMemo(
-    () => (isTriggered ? "green.500" : undefined),
+    () => (isTriggered ? "brand2.500" : undefined),
     [isTriggered]
   );
 

src/components/ConnectBatteryDialog.tsx

@@ -19,7 +19,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
         <Text alignSelf="left" width="100%">
           <FormattedMessage id="connectMB.connectBattery.subtitle" />
           <Link
-            color="purple.500"
+            color="brand.600"
             //TODO: Replace with real support link.
             href="https://support.microbit.org/support/home"
             target="_blank"
@@ -32,7 +32,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
             <Icon
               as={RiExternalLinkLine}
               boxSize={5}
-              color="purple.500"
+              color="brand.600"
               position="relative"
             />
           </Link>

src/components/DefaultPageLayout.tsx

@@ -14,7 +14,6 @@ import { ReactNode, useCallback, useEffect } from "react";
 import { RiDownload2Line, RiFolderOpenLine, RiHome2Line } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router";
-import { TOOL_NAME } from "../constants";
 import { flags } from "../flags";
 import { useProject } from "../hooks/project-hooks";
 import { SaveStep, TrainModelDialogStage } from "../model";
@@ -35,6 +34,7 @@ import SaveDialogs from "./SaveDialogs";
 import SettingsMenu from "./SettingsMenu";
 import ToolbarMenu from "./ToolbarMenu";
 import TrainModelDialogs from "./TrainModelFlowDialogs";
+import { useDeployment } from "../deployment";
 
 interface DefaultPageLayoutProps {
   titleId?: string;
@@ -63,13 +63,13 @@ const DefaultPageLayout = ({
   const { saveHex } = useProject();
   const [settings] = useSettings();
   const toast = useToast();
+  const { appNameFull } = useDeployment();
 
   useEffect(() => {
-    const appName = `micro:bit ${TOOL_NAME}`;
     document.title = titleId
-      ? `${intl.formatMessage({ id: titleId })} | ${appName}`
-      : appName;
-  }, [intl, titleId]);
+      ? `${intl.formatMessage({ id: titleId })} | ${appNameFull}`
+      : appNameFull;
+  }, [appNameFull, intl, titleId]);
 
   useEffect(() => {
     return useStore.subscribe(
@@ -134,7 +134,7 @@ const DefaultPageLayout = ({
               )}
             </>
           }
-          itemsLeft={toolbarItemsLeft || <AppLogo name={TOOL_NAME} />}
+          itemsLeft={toolbarItemsLeft || <AppLogo />}
           itemsRight={
             <>
               <HStack spacing={3} display={{ base: "none", lg: "flex" }}>
@@ -160,7 +160,7 @@ const DefaultPageLayout = ({
                 )}
                 <SettingsMenu />
               </HStack>
-              <HelpMenu appName={TOOL_NAME} cookies />
+              <HelpMenu />
               <ToolbarMenu
                 isMobile
                 variant="plain"