Adjusted Styling on Theme Selector Button
This commit is contained in:
parent
3c5c43bc47
commit
97acd1c5fe
1 changed files with 5 additions and 2 deletions
|
@ -6,7 +6,7 @@ import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownO
|
|||
import Themes from '../public/data/themes.json';
|
||||
|
||||
export const StyleSelector = () => {
|
||||
const themes = Themes.themes;
|
||||
const themes: DefaultTheme[] = Themes.themes;
|
||||
const updateTheme = useUpdateTheme();
|
||||
const currentTheme = useContext(ThemeContext);
|
||||
const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]);
|
||||
|
@ -35,16 +35,19 @@ export const StyleSelector = () => {
|
|||
}
|
||||
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [buttonFocus, setButtonFocus] = useState(visible);
|
||||
|
||||
function handleBlur(event:any) {
|
||||
if (!event.currentTarget.contains(event.relatedTarget)) {
|
||||
setButtonFocus(false);
|
||||
setVisible(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeDropDown onBlur={(event) => handleBlur(event)}>
|
||||
<ThemeDropDownButton show={+visible} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}</ThemeDropDownButton>
|
||||
<ThemeDropDownButton focus={+buttonFocus} show={+visible} onFocus={() => setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}
|
||||
</ThemeDropDownButton>
|
||||
<ThemeDropDownOptions id="themesDropdown" show={+visible}>
|
||||
{themes.map((theme) => (
|
||||
<ThemeDropDownOption active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
|
||||
|
|
Loading…
Reference in a new issue