Mobilemenu Focus Border Different Color

[Shaun Guimond]

When focusing on the mobileMenu component, the border is a different color then the one that you have for the other focuses. You can see the green color on the image below.

It appears to me the issue is due to the fact that the Button component in mobileMenu.js is not from Theme-UI but from Grommet, which has it's own styling.

To fix it, I added this code to it's own file and then imported the component to the mobileMenu.js file.

const myTheme = {
  global: {
    focus: {
        border: {
            color: 'lightGrey',
        },
    },
  },
};

export default myTheme;

I then added

<Grommet theme={myTheme}>

to add the styling into the mobileMenu.js

I also had to change the import from grommet to this:

import { Layer, Button, Grommet } from "grommet";

There may be a more efficient manner of doing this, or you may have meant to use the green color, but I assume not as all other focus on the website is white/grey or dark grey/black. Also, I have hard coded the color, when you may want to have that synced with the rest of your styling from Theme-UI.

Hope this helps, this is my first time doing this...