diff options
| -rw-r--r-- | components/App.js | 2 | ||||
| -rw-r--r-- | components/Form.js | 58 | ||||
| -rw-r--r-- | configs/appList.js | 4 | ||||
| -rw-r--r-- | styles/Main.module.scss | 33 |
4 files changed, 52 insertions, 45 deletions
diff --git a/components/App.js b/components/App.js index 210e0e0..b24aead 100644 --- a/components/App.js +++ b/components/App.js @@ -8,7 +8,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' const App = ({children, app, setApps}) => { const {t} = useSettings() const winRef = useRef(null); - const forceMax = useMediaQuery(`(max-width: ${app.width}) or (max-height: ${app.height})`); + const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`); useEffect(() => { move(app.name, winRef, setApps) diff --git a/components/Form.js b/components/Form.js index 59f9710..9a17660 100644 --- a/components/Form.js +++ b/components/Form.js @@ -24,39 +24,37 @@ const Form = ({errorMessage, onSubmit, isLogin}) => { {!isLogin && ( <> <input type="password" name="password_confirm" placeholder={t('confirm_password')} required /> + <legend>{t('language')}</legend> <fieldset> - <legend>{t('language')}</legend> - {['en', 'pl', 'es', 'de'].map(l => ( - <> - <input - key={`i_${l}`} - id={`language_${l}`} - type="radio" - name="language" - value={l} - defaultChecked={settings.language === l} - onChange={() => languageChange(l)} - /> - <label key={`l_${l}`} htmlFor={`language_${l}`}>{l.toUpperCase()}</label> - </> - ))} + {['en', 'pl', 'es', 'de'].map(l => ( + <fieldset key={l}> + <input + id={`language_${l}`} + type="radio" + name="language" + value={l} + defaultChecked={settings.language === l} + onChange={() => languageChange(l)} + /> + <label htmlFor={`language_${l}`}>{l.toUpperCase()}</label> + </fieldset> + ))} </fieldset> + <legend>{t('color_theme')}</legend> <fieldset> - <legend>{t('color_theme')}</legend> - {['green', 'blue', 'black'].map(c => ( - <> - <input - key={`i_${c}`} - id={`theme_${c}`} - type="radio" - name="theme" - value={c} - defaultChecked={settings.theme === c} - onChange={() => themeChange(c)} - /> - <label key={`l_${c}`} htmlFor={`theme_${c}`} /> - </> - ))} + {['green', 'blue', 'black'].map(c => ( + <fieldset key={c}> + <input + id={`theme_${c}`} + type="radio" + name="theme" + value={c} + defaultChecked={settings.theme === c} + onChange={() => themeChange(c)} + /> + <label htmlFor={`theme_${c}`} /> + </fieldset> + ))} </fieldset> </> )} diff --git a/configs/appList.js b/configs/appList.js index a114a70..c8e49da 100644 --- a/configs/appList.js +++ b/configs/appList.js @@ -1,8 +1,8 @@ import {Notes, Settings} from 'apps' const appList = { - Notes: {component: Notes, icon: true, buttons: ['min', 'max', 'close'], height: '64em', width: '64em'}, - Settings: {component: Settings, icon: false, buttons: ['min'], height: '23em', width: '20em'}, + Notes: {component: Notes, icon: true, buttons: ['min', 'max', 'close'], height: '48em', width: '64em'}, + Settings: {component: Settings, icon: false, buttons: ['min'], height: '23em', width: '16em'}, }; export default appList diff --git a/styles/Main.module.scss b/styles/Main.module.scss index bac6a97..e5254d5 100644 --- a/styles/Main.module.scss +++ b/styles/Main.module.scss @@ -67,7 +67,11 @@ padding: 2em 0 1.5em; } - fieldset:nth-of-type(1) { + & > fieldset:nth-of-type(1) { + fieldset { + display: inline-block; + } + input { display: none; } @@ -77,6 +81,7 @@ transition: .3s color; display: inline-block; color: var(--color-decor); + margin-bottom: .5em; &:hover { color: #666; @@ -89,7 +94,11 @@ } } - fieldset:nth-of-type(2) { + & > fieldset:nth-of-type(2) { + fieldset { + display: inline-block; + } + input { display: none; } @@ -98,20 +107,20 @@ width: 2em; height: 2em; display: inline-block; - margin: 0 1em; + margin: 0 1em 1em; outline-offset: 4px; + } - &:nth-of-type(1) { - background-color: #53e3a6; - } + fieldset:nth-of-type(1) label { + background-color: #53e3a6; + } - &:nth-of-type(2) { - background-color: #2986b3; - } + fieldset:nth-of-type(2) label { + background-color: #2986b3; + } - &:nth-of-type(3) { - background-color: #000; - } + fieldset:nth-of-type(3) label { + background-color: #000; } input:checked + label { |