Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Adjusted Styling on Theme Selector Button

Browse source
This commit is contained in:
Neshura 2022-12-18 04:56:51 +01:00
parent 3c5c43bc47
commit 97acd1c5fe
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/themeselector.tsx
View file

@ -6,7 +6,7 @@ import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownO
import Themes from '../public/data/themes.json'; import Themes from '../public/data/themes.json';
export const StyleSelector = () => { export const StyleSelector = () => {
const themes = Themes.themes; const themes: DefaultTheme[] = Themes.themes;
const updateTheme = useUpdateTheme(); const updateTheme = useUpdateTheme();
const currentTheme = useContext(ThemeContext); const currentTheme = useContext(ThemeContext);
const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]); const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]);
@ -35,16 +35,19 @@ export const StyleSelector = () => {
} }
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [buttonFocus, setButtonFocus] = useState(visible);
function handleBlur(event:any) { function handleBlur(event:any) {
if (!event.currentTarget.contains(event.relatedTarget)) { if (!event.currentTarget.contains(event.relatedTarget)) {
setButtonFocus(false);
setVisible(false); setVisible(false);
} }
} }
return ( return (
<ThemeDropDown onBlur={(event) => handleBlur(event)}> <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}> <ThemeDropDownOptions id="themesDropdown" show={+visible}>
{themes.map((theme) => ( {themes.map((theme) => (
<ThemeDropDownOption active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}> <ThemeDropDownOption active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>