Fixes for Windows high contrast modes (#545)

microbit-foundation · Nov 22, 2024 · 515fac4 · 515fac4
1 parent 1331735
commit 515fac4
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 7 deletions.
diff --git a/src/components/AppLogo.tsx b/src/components/AppLogo.tsx
@@ -13,11 +13,12 @@ const AppLogo = ({ color = "#FFF", ...props }: AppLogoProps) => {
       userSelect="none"
       transform="scale(0.93)"
       transformOrigin="left"
+      color="white"
       {...props}
     >
       {OrgLogo && (
         <>
-          <OrgLogo color="white" />
+          <OrgLogo />
           <Divider
             aria-hidden
             borderColor={color}
@@ -27,7 +28,7 @@ const AppLogo = ({ color = "#FFF", ...props }: AppLogoProps) => {
           />
         </>
       )}
-      <AppLogo h="19px" color="white" />
+      <AppLogo h="19px" />
     </HStack>
   );
 };

diff --git a/src/components/DataSamplesMenu.tsx b/src/components/DataSamplesMenu.tsx
@@ -112,8 +112,9 @@ const DataSamplesMenu = () => {
           aria-label={intl.formatMessage({
             id: "data-actions-menu",
           })}
+          color="gray.800"
           variant="ghost"
-          icon={<Icon as={MdMoreVert} color="gray.800" boxSize={7} />}
+          icon={<Icon as={MdMoreVert} boxSize={7} />}
           isRound
         />
         <Portal>

diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx
@@ -223,7 +223,8 @@ export const HomeToolbarItem = () => {
   return (
     <IconButton
       onClick={handleHomeClick}
-      icon={<RiHome2Line size={24} color="white" />}
+      color="white"
+      icon={<RiHome2Line size={24} />}
       aria-label={intl.formatMessage({ id: "homepage" })}
       variant="plain"
       size="lg"

diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
@@ -47,7 +47,8 @@ const HelpMenu = ({ ...rest }: HelpMenuProps) => {
           fontSize="2xl"
           h={12}
           w={12}
-          icon={<RiQuestionLine fill="white" size={24} />}
+          color="white"
+          icon={<RiQuestionLine size={24} />}
           variant="plain"
           isRound
           _focusVisible={{

diff --git a/src/components/SettingsMenu.tsx b/src/components/SettingsMenu.tsx
@@ -28,7 +28,8 @@ const SettingsMenu = () => {
           aria-label={intl.formatMessage({ id: "settings-menu-action" })}
           size="lg"
           fontSize="2xl"
-          icon={<RiSettings2Line fill="white" size={24} />}
+          color="white"
+          icon={<RiSettings2Line size={24} />}
           variant="plain"
           isRound
           h={12}

diff --git a/src/components/ToolbarMenu.tsx b/src/components/ToolbarMenu.tsx
@@ -30,7 +30,8 @@ const ToolbarMenu = ({
         <MenuButton
           as={IconButton}
           aria-label={label}
-          icon={icon ?? <RiMenuLine size={24} color="white" />}
+          color="white"
+          icon={icon ?? <RiMenuLine size={24} />}
           variant={variant}
           size="lg"
           fontSize="xl"