Fixes for Windows high contrast modes (#545)

Author: microbit-robert

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

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>

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"

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={{

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}

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"