Style and code refactor (#166)

* Move all settings below card

* refactor components; lifting state up

* background color

* Evergreen components for everything

* password error

* Tighten card size

* Simply hide password to basic toggle, never disable

* Hide password label, too

* Maximize mobile portrait width

* Make wifi tip smaller

* Small style tweaks

* Copy: update password length error text to include helpful instructions

This will need a backfill for other translations

* Remove unused css

* Use empty string for EncryptionMode=None value

* Remove light.min.css

* Include logo on wificard

* Cleanup after rebase

* Clean-up comments on state

* Padding for mobile

1 files changed, 28 insertions, 5 deletions

diff --git a/src/i18n.js b/src/i18n.js
index 452bf23..891e291 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -16,16 +16,19 @@ const resources = {
       'wifi.name.placeholder': 'WiFi Network name',
       'wifi.password': 'Password',
       'wifi.password.placeholder': 'Password',
-      'wifi.password.hide': 'Hide password field before printing',
+      'wifi.password.hide': 'Hide password',
       'wifi.password.encryption': 'Encryption',
       'wifi.password.encryption.none': 'None',
       'wifi.tip':
         "Point your phone's camera at the QR Code to connect automatically",
       'wifi.alert.name': 'Network name cannot be empty',
-      'wifi.alert.password.length.5': 'Password must be at least 5 characters',
-      'wifi.alert.password.length.8': 'Password must be at least 8 characters',
+      'wifi.alert.password.length.5':
+        'Password must be at least 5 characters, or change the encryption to "None"',
+      'wifi.alert.password.length.8':
+        'Password must be at least 8 characters, or change the encryption to "None"',
       'button.rotate': 'Rotate',
       'button.print': 'Print',
+      'button.settings': 'Settings',
       select: 'Select Language',
     },
   },
@@ -80,6 +83,7 @@ const resources = {
         'Wachtwoord moet ten minste 8 tekens bevatten',
       'button.rotate': 'Draai',
       'button.print': 'Print',
+      'button.settings': 'Instellingen',
       select: 'Selecteer Taal',
     },
   },
@@ -105,6 +109,7 @@ const resources = {
       'wifi.alert.password.length.8': '密码至少 8 个字符',
       'button.rotate': '翻转',
       'button.print': '打印',
+      'button.settings': '设置',
       select: '选择语言',
     },
   },
@@ -130,6 +135,7 @@ const resources = {
       'wifi.alert.password.8': '密碼至少要有 8 個字符 ',
       'button.rotate': '翻轉',
       'button.print': '打印',
+      'button.settings': '设置',
       select: '選擇語言',
     },
   },
@@ -159,6 +165,7 @@ const resources = {
         'La contraseña debe tener al menos 8 caracteres',
       'button.rotate': 'Girar',
       'button.print': 'Imprimir',
+      'button.settings': 'Ajustes',
       select: 'Seleccionar idioma',
     },
   },
@@ -185,6 +192,7 @@ const resources = {
       'wifi.alert.password.length.8': 'A senha precisa ter no mínimo 8 dígtos',
       'button.rotate': 'Girar',
       'button.print': 'Imprimir',
+      'button.settings': 'Definições',
       select: 'Selecionar Idioma',
     },
   },
@@ -212,6 +220,7 @@ const resources = {
         'パスワードは8文字以上でなければなりません',
       'button.rotate': '回転する',
       'button.print': '印刷する',
+      'button.settings': '設定',
       select: '言語を選択',
     },
   },
@@ -240,6 +249,7 @@ const resources = {
         'Пароль должен состоять не менее чем из 8 символов',
       'button.rotate': 'Повернуть',
       'button.print': 'Распечатать',
+      'button.settings': 'настройки',
       select: 'Выбор языка',
     },
   },
@@ -266,6 +276,7 @@ const resources = {
       'wifi.alert.password.8': 'رمز‌عبور باید حداقل ۸ حرف داشته باشد.',
       'button.rotate': 'چرخاندن',
       'button.print': 'چاپ',
+      'button.settings': 'تنظیمات',
       select: 'انتخاب زبان',
     },
   },
@@ -294,6 +305,7 @@ const resources = {
         'Пароль повинен містити принаймні 8 символів',
       'button.rotate': 'Повернути',
       'button.print': 'Друкувати',
+      'button.settings': 'налаштування',
       select: 'Вибір мови',
     },
   },
@@ -322,6 +334,7 @@ const resources = {
         'Das Passwort muss mindestends 8 Zeichen lang sein',
       'button.rotate': 'Drehen',
       'button.print': 'Drucken',
+      'button.settings': 'Einstellungen',
       select: 'Sprache auswählen',
     },
   },
@@ -352,6 +365,7 @@ const resources = {
       'wifi.alert.password.8': 'Hasło musi mieć co najmniej 8 znaków',
       'button.rotate': 'Obróć',
       'button.print': 'Drukuj',
+      'button.settings': 'Ustawienia',
       select: 'Wybierz język',
     },
   },
@@ -380,6 +394,7 @@ const resources = {
         'Le mot de passe doit au moins faire 8 caractères',
       'button.rotate': 'Pivoter',
       'button.print': 'Imprimer',
+      'button.settings': 'Paramètres',
       select: 'Choisir la langue',
     },
   },
@@ -407,6 +422,7 @@ const resources = {
       'wifi.alert.password.8': 'Lo senhal deu conténer almens 8 caractèrs',
       'button.rotate': 'Pivotar',
       'button.print': 'Imprimir',
+      'button.settings': 'Paramètres',
       select: 'Causir la lenga',
     },
   },
@@ -434,6 +450,7 @@ const resources = {
       'wifi.alert.password.8': 'A Senha deve ter pelo menos 8 caracteres',
       'button.rotate': 'Rotacionar',
       'button.print': 'Imprimir',
+      'button.settings': 'Definições',
       select: 'Escolha o idioma',
     },
   },
@@ -462,6 +479,7 @@ const resources = {
         'La password deve contenere almeno 8 caratteri',
       'button.rotate': 'Ruota',
       'button.print': 'Stampa',
+      'button.settings': 'Impostazioni',
       select: 'Seleziona una lingua',
     },
   },
@@ -488,6 +506,7 @@ const resources = {
       'wifi.alert.password.length.8': 'Parola en az 8 karakter olmalıdır',
       'button.rotate': 'Döndür',
       'button.print': 'Yazdır',
+      'button.settings': 'Ayarlar',
       select: 'Dil Seçin',
     },
   },
@@ -516,6 +535,7 @@ const resources = {
         'يجب أن تكون كلمة المرور مكونة من ٨ أحرف على الأقل',
       'button.rotate': 'تدوير',
       'button.print': 'طباعة',
+      'button.settings': 'إعدادات',
       select: 'اختر لغة',
     },
   },
@@ -544,6 +564,7 @@ const resources = {
         'पासवर्ड कम से कम 8 अक्षरों का होना चाहिए',
       'button.rotate': 'घुमाएँ',
       'button.print': 'प्रिंट करे',
+      'button.settings': 'समायोजन',
       select: 'भाषा चुने',
     },
   },
@@ -568,10 +589,11 @@ const resources = {
       'wifi.alert.name': 'El nom de la xarxa no pot estar buit',
       'wifi.alert.password.length.5':
         'La contrasenya ha de tenir com a mínim 5 caràcters',
-      'wifi.alert.password.8':
+      'wifi.alert.password.length.8':
         'La contrasenya ha de tenir com a mínim 8 caràcters',
       'button.rotate': 'Gira',
       'button.print': 'Imprimeix',
+      'button.settings': 'Configuració',
       select: 'Escolliu l’idioma',
     },
   },
@@ -595,9 +617,10 @@ const resources = {
         'Arahkan kamera ponsel anda ke Kode QR untuk terhubung ke WiFi secara otomatis',
       'wifi.alert.name': 'Nama jaringan tidak boleh kosong',
       'wifi.alert.password.length.5': 'Kata sandi minimal harus 5 karakter',
-      'wifi.alert.password.8': 'Kata sandi minimal harus 8 karakter',
+      'wifi.alert.password.length.8': 'Kata sandi minimal harus 8 karakter',
       'button.rotate': 'Putar',
       'button.print': 'Cetak',
+      'button.settings': 'Pengaturan',
       select: 'Pilih Bahasa',
     },
   },