From 467233f771d745aeb9f4e69b93d2fb24a1a95d3e Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sat, 4 Sep 2021 00:35:54 +0200
Subject: media query fix

---
 components/App.js       |  2 +-
 components/Form.js      | 58 ++++++++++++++++++++++++-------------------------
 configs/appList.js      |  4 ++--
 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 {
-- 
cgit v1.2.3