Skip to content

Commit 3d92b45

Browse files
microbit-matt-hillsdonmicrobit-matt-hillsdon
authored
Theme package (#336)
- Separate out micro:bit branding for clarity if folks deploy alternative versions - Parameterise the app name - Don't pull purple in just for links
1 parent 415f778 commit 3d92b45

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+183
-522
lines changed

‎.github/workflows/build.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ jobs:
3636
- run: npm ci
3737
env:
3838
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
39-
- run: npm install --no-save @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
39+
- 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
4040
if: github.repository_owner == 'microbit-foundation'
4141
env:
4242
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎lang/ui.en.json‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@
368368
"description": ""
369369
},
370370
"connectMB.usbTryAgain.closeTabs2": {
371-
"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.",
371+
"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.",
372372
"description": ""
373373
},
374374
"connectMB.usbTryAgain.heading": {
@@ -432,7 +432,7 @@
432432
"description": ""
433433
},
434434
"content.data.classHelpBody": {
435-
"defaultMessage": "The type of movement you want the micro:bit AI creator to recognise e.g. ‘waving’ or ‘clapping’.",
435+
"defaultMessage": "The type of movement you want the {appNameFull} to recognise e.g. ‘waving’ or ‘clapping’.",
436436
"description": ""
437437
},
438438
"content.data.classPlaceholderNewClass": {
@@ -508,7 +508,7 @@
508508
"description": ""
509509
},
510510
"content.model.output.action.descriptionBody": {
511-
"defaultMessage": "The type of movement you want the micro:bit AI creator to recognise e.g. ‘waving’ or ‘clapping’.",
511+
"defaultMessage": "The type of movement you want the {appNameFull} to recognise e.g. ‘waving’ or ‘clapping’.",
512512
"description": ""
513513
},
514514
"content.model.output.action.descriptionTitle": {
@@ -552,7 +552,7 @@
552552
"description": ""
553553
},
554554
"content.trainer.description": {
555-
"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.",
555+
"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.",
556556
"description": ""
557557
},
558558
"content.trainer.failure.body": {
@@ -697,11 +697,7 @@
697697
},
698698
"homepage-subtitle": {
699699
"defaultMessage": "Introduce students to machine learning concepts through physical movement and data",
700-
"description": "Subtitle of micro:bit AI creator home page"
701-
},
702-
"homepage-title": {
703-
"defaultMessage": "micro:bit AI creator",
704-
"description": "Title of micro:bit AI creator home page"
700+
"description": "Subtitle of the home page"
705701
},
706702
"homepage.Link": {
707703
"defaultMessage": "Home page",
@@ -979,4 +975,4 @@
979975
"defaultMessage": "unknown",
980976
"description": "Label for unknown ML event"
981977
}
982-
}
978+
}

‎src/compliance.tsx‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎src/components/AboutDialog.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,11 @@ import {
2828
import { ReactNode } from "react";
2929
import { RiFileCopy2Line, RiGithubFill } from "react-icons/ri";
3030
import { FormattedMessage, useIntl } from "react-intl";
31+
import { useDeployment } from "../deployment";
3132
import aarhusLogo from "../images/aulogo_uk_var2_blue.png";
3233
import microbitHeartImage from "../images/microbit-heart.png";
33-
import MicrobitLogo from "./MicrobitLogo";
3434

3535
interface AboutDialogProps {
36-
appName: string;
3736
isOpen: boolean;
3837
onClose: () => void;
3938
finalFocusRef?: React.RefObject<HTMLButtonElement>;
@@ -42,15 +41,11 @@ interface AboutDialogProps {
4241
/**
4342
* An about dialog with version information.
4443
*/
45-
const AboutDialog = ({
46-
isOpen,
47-
onClose,
48-
appName,
49-
finalFocusRef,
50-
}: AboutDialogProps) => {
44+
const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
45+
const { appNameFull, OrgLogo } = useDeployment();
5146
const versionInfo = [
5247
{
53-
name: `micro:bit ${appName}`,
48+
name: appNameFull,
5449
value: import.meta.env.VITE_VERSION,
5550
href: "https://github.com/microbit-foundation/ml-trainer",
5651
},
@@ -75,7 +70,7 @@ const AboutDialog = ({
7570
<ModalCloseButton />
7671
<VStack spacing={8} pl={5} pr={5} pt={5}>
7772
<HStack justifyContent="center" gap={8}>
78-
<MicrobitLogo fill="#000" alt="micro:bit" height={55} />
73+
{OrgLogo && <OrgLogo fill="#000" color="black" height={55} />}
7974
<Image src={aarhusLogo} h="55px" />
8075
</HStack>
8176
<Text textAlign="center">
@@ -84,10 +79,10 @@ const AboutDialog = ({
8479
values={{
8580
link: (chunks: ReactNode) => (
8681
<Link
87-
href="https://microbit.org"
82+
href="https://cctd.au.dk/"
8883
target="_blank"
8984
rel="noopener"
90-
color="purple.500"
85+
color="brand.600"
9186
>
9287
{chunks}
9388
</Link>

‎src/components/ActionBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ActionBar = ({
1818
px={5}
1919
alignItems="center"
2020
justifyContent="space-between"
21-
bgColor="green.500"
21+
bgColor="brand2.500"
2222
h="64px"
2323
minH="64px"
2424
{...rest}

‎src/components/AppLogo.tsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { As, Divider, HStack, Image } from "@chakra-ui/react";
2-
import AppNameLogo from "../images/app-name.svg";
3-
import MicrobitLogo from "./MicrobitLogo";
1+
import { As, Divider, HStack } from "@chakra-ui/react";
2+
import { useDeployment } from "../deployment";
43

54
const AppLogo = ({
65
color = "#FFF",
@@ -9,25 +8,31 @@ const AppLogo = ({
98
color?: string;
109
beta?: boolean;
1110
as?: As;
12-
name: string;
13-
}) => (
14-
<HStack
15-
as={as}
16-
spacing={4}
17-
userSelect="none"
18-
transform="scale(0.93)"
19-
transformOrigin="left"
20-
>
21-
<MicrobitLogo fill={color} alt="micro:bit" />
22-
<Divider
23-
aria-hidden
24-
borderColor={color}
25-
orientation="vertical"
26-
h="33px"
27-
borderWidth="1px"
28-
/>
29-
<Image src={AppNameLogo} alt="micro:bit" h="18px" />
30-
</HStack>
31-
);
11+
}) => {
12+
const { AppLogo, OrgLogo } = useDeployment();
13+
return (
14+
<HStack
15+
as={as}
16+
spacing={4}
17+
userSelect="none"
18+
transform="scale(0.93)"
19+
transformOrigin="left"
20+
>
21+
{OrgLogo && (
22+
<>
23+
<OrgLogo />
24+
<Divider
25+
aria-hidden
26+
borderColor={color}
27+
orientation="vertical"
28+
h="33px"
29+
borderWidth="1px"
30+
/>
31+
</>
32+
)}
33+
<AppLogo h="18px" />
34+
</HStack>
35+
);
36+
};
3237

3338
export default AppLogo;

‎src/components/BluetoothPatternInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,9 +128,9 @@ const PatternBox = ({
128128
onClick={onClick}
129129
onMouseEnter={onMouseEnter}
130130
onMouseLeave={onMouseLeave}
131-
bgColor={isOn ? "green.500" : "gray.300"}
131+
bgColor={isOn ? "brand2.500" : "gray.300"}
132132
borderWidth={isHighlighted && !isOn ? 3 : 0}
133-
borderColor={isHighlighted ? (isOn ? "white" : "green.500") : undefined}
133+
borderColor={isHighlighted ? (isOn ? "white" : "brand2.500") : undefined}
134134
opacity={isHighlighted && isOn ? 0.25 : 1}
135135
/>
136136
);

‎src/components/BrokenFirmwareDialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const BrokenFirmwareDialog = ({
5555
values={{
5656
link: (chunks: ReactNode) => (
5757
<Link
58-
color="purple.500"
58+
color="brand.600"
5959
href="https://microbit.org/get-started/user-guide/firmware/"
6060
target="_blank"
6161
rel="noopener"
@@ -68,7 +68,7 @@ const BrokenFirmwareDialog = ({
6868
</Text>
6969
<Text w="100%">
7070
<Link
71-
color="purple.500"
71+
color="brand.600"
7272
href="https://microbit.org/get-started/user-guide/firmware/"
7373
target="_blank"
7474
rel="noopener"
@@ -80,7 +80,7 @@ const BrokenFirmwareDialog = ({
8080
<Icon
8181
as={RiExternalLinkLine}
8282
boxSize={5}
83-
color="purple.500"
83+
color="brand.600"
8484
position="relative"
8585
/>
8686
</Link>

‎src/components/CertaintyThresholdGridItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const CertaintyThresholdGridItem = ({
3535
const intl = useIntl();
3636
const barWidth = 240;
3737
const colorScheme = useMemo(
38-
() => (isTriggered ? "green.500" : undefined),
38+
() => (isTriggered ? "brand2.500" : undefined),
3939
[isTriggered]
4040
);
4141

‎src/components/ConnectBatteryDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
1919
<Text alignSelf="left" width="100%">
2020
<FormattedMessage id="connectMB.connectBattery.subtitle" />
2121
<Link
22-
color="purple.500"
22+
color="brand.600"
2323
//TODO: Replace with real support link.
2424
href="https://support.microbit.org/support/home"
2525
target="_blank"
@@ -32,7 +32,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
3232
<Icon
3333
as={RiExternalLinkLine}
3434
boxSize={5}
35-
color="purple.500"
35+
color="brand.600"
3636
position="relative"
3737
/>
3838
</Link>

0 commit comments

Comments
 (0)