test

src/components/modals/settings/Dropdown.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default class Dropdown extends React.PureComponent {
+  getLabel() {
+    return this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null;
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        {this.getLabel()}
+        <div className='dropdown' style={{ display: 'inline' }}>
+          <select name={this.props.name} id={this.props.id} onChange={this.props.onChange}>
+            {this.props.children}
+          </select>
+        </div>
+      </React.Fragment>
+    );
+  }
+}

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { toast } from 'react-toastify';
 import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
 import Section from '../Section';
 
 export default class BackgroundSettings extends React.PureComponent {
@@ -160,13 +161,15 @@ export default class BackgroundSettings extends React.PureComponent {
             <Checkbox name='refresh' text={this.props.language.background.refresh} />
           </ul>
           <ul>
-            <label htmlFor='backgroundapi'>{this.props.language.background.api} </label>
-            <label className='dropdown'>
-              <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
-                <option className='choices' value='mue'>Mue</option>
-                <option className='choices' value='unsplash'>Unsplash</option>
-              </select>
-            </label>
+            <Dropdown
+              label={this.props.language.background.API}
+              name='backgroundapi'
+              id='backgroundAPI'
+              onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}
+            >
+              <option className='choices' value='mue'>Mue</option>
+              <option className='choices' value='unsplash'>Unsplash</option>
+            </Dropdown>
           </ul>
           <ul>
             <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>

src/components/modals/settings/sections/LanguageSettings.jsx

@@ -1,18 +1,24 @@
 import React from 'react';
+import Dropdown from '../Dropdown';
 
 export default class LanguageSettings extends React.PureComponent {
   render() {
     return (
-        <div className='section'>
+      <div className='section'>
         <h4 htmlFor='language' className='nodropdown'>{this.props.language.language}</h4>
-          <select className='select-css' name='language' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
-            <option className='choices' value='en'>English</option>
-            <option className='choices' value='nl'>Nederlands</option>
-            <option className='choices' value='fr'>Français</option>
-            <option className='choices' value='no'>Norsk</option>
-            <option className='choices' value='ru'>Pусский</option>
-          </select>
-        </div>
+        <Dropdown
+          name='language'
+          id='language'
+          onChange={() => localStorage.setItem('language', document.getElementById('language').value)}
+        >
+          <option className='choices' value='en'>English</option>
+          <option className='choices' value='es'>Español</option>
+          <option className='choices' value='fr'>Français</option>
+          <option className='choices' value='nl'>Nederlands</option>
+          <option className='choices' value='no'>Norsk</option>
+          <option className='choices' value='ru'>Pусский</option>
+        </Dropdown>
+      </div>
     );
   }
 }

src/components/modals/settings/sections/SearchSettings.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import SettingsFunctions from '../../../../modules/settingsFunctions';
 import { toast } from 'react-toastify';
 import Section from '../Section';
+import Dropdown from '../Dropdown';
 
 const searchEngines = require('../../../../modules/searchEngines.json');
 
@@ -25,23 +26,26 @@ export default class SearchSettings extends React.PureComponent {
 
   render() {
     return (
-        <React.Fragment>
-          <Section title={this.props.language.searchbar.title} name='searchBar'>
-            <ul>
-              <label htmlFor='searchEngine'>{this.props.language.searchbar.search_engine} </label>
-                <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
-                  {searchEngines.map((engine) =>
-                    <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
-                  )}
-                  <option className='choices' value='custom'>Custom</option>
-                </select>
-              </ul>
-              <ul id='searchEngineInput' style={{ display: 'none' }}>
-                <p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
-                <input type='text' id='customSearchEngine'></input>
-              </ul>
-            </Section>
-        </React.Fragment>
+      <React.Fragment>
+        <Section title={this.props.language.searchbar.title} name='searchBar'>
+          <ul>
+            <Dropdown label={this.props.language.searchbar.searchengine}
+              name='searchEngine'
+              id='searchEngine'
+              onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}
+            >
+              {searchEngines.map((engine) =>
+                <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
+              )}
+              <option className='choices' value='custom'>Custom</option>
+            </Dropdown>
+          </ul>
+          <ul id='searchEngineInput' style={{ display: 'none' }}>
+            <p style={{ "marginTop": "0px" }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
+            <input type='text' id='customSearchEngine'></input>
+          </ul>
+        </Section>
+      </React.Fragment>
     );
   }
 }

src/modules/settingsFunctions.js

@@ -78,7 +78,7 @@ export default class SettingsFunctions {
         if (supportsWebP) localStorage.setItem('supportswebp', 'true');
 
         // Languages
-        const languages = ['nl', 'no', 'fr', 'ru'];
+        const languages = ['nl', 'no', 'fr', 'ru', 'es'];
         const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
         if (languages.includes(browserLanguage)) {
             localStorage.setItem('language', browserLanguage);

src/scss/index.scss

@@ -13,6 +13,7 @@
 @import 'modules/marketplace';
 @import 'modules/checkbox';
 @import 'modules/buttons';
+@import 'modules/dropdown';
 @import 'modules/welcome';
 
 body {

src/scss/modules/_dropdown.scss

@@ -0,0 +1,16 @@
+.dropdown {
+  select {
+    background: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
+    height: 34px;
+    width: 120px;
+    color: map-get($modal, "text");
+
+    border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
+    border-image-slice: 1;
+    border-width: 3px 4px;
+  }
+
+  select#language {
+    float: right;
+  }
+}

src/scss/modules/_settings.scss

@@ -225,20 +225,6 @@ button.remove + input[type=color].colour  {
   margin-left: 7px;
 }
 
-select {
-  background: none;
-  height: 34px;
-  width: 120px;
-  border-image-slice: 1;
-  border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
-  border-left: 10px solid;
-  color: map-get($modal, "text");
-}
-
-select#language {
-  float: right;
-}
-
 #customBackgroundColour {
   cursor: pointer;
 }

src/translations/es.json

@@ -0,0 +1,135 @@
+{
+    "greeting": {
+        "morning": "Buenos días",
+        "afternoon": "Buenas tardes",
+        "evening": "Buenas noches",
+        "christmas": "Feliz Navidad",
+        "newyear": "Feliz año nuevo",
+        "halloween": "Feliz Halloween"
+    },
+    "credit": "Foto por",
+    "search": "Buscar",
+    "modals": {
+        "title": "Opciones",
+        "settings": "Ajustes",
+        "addons": "Mis complementos",
+        "marketplace": "Tienda"
+    },
+    "settings": {
+        "time": {
+            "title": "Tiempo",
+            "seconds": "Segundos",
+            "twentyfourhour": "24 Horas",
+            "ampm": "AM/PM (12 horas)",
+            "zero": "Sin ceros",
+            "analog": "Analógico"
+        },
+        "greeting": {
+            "title": "Saludos",
+            "events": "Eventos",
+            "default": "Mensaje del saludo por defecto",
+            "name": "Nombre para el saludo"
+        },
+        "quote": {
+            "title": "Cita",
+            "copy": "Botón de copiar",
+            "tweet": "Botón de Tweet",
+            "favourite": "Botón de favoritos"
+        },
+        "background": {
+            "title": "Fondo",
+            "API": "Fondos API",
+            "blur": "Ajustar difuminado",
+            "brightness": "Ajustar brillo",
+            "customURL": "URL del fondo personalizado",
+            "custombackground": "Fondo personalizado",
+            "customcolour": "Color del fondo personalizado",
+            "upload": "Subir",
+            "addcolour": "Añadir color",
+            "favourite": "Favorito",
+            "view": "Ver",
+            "refresh": "Refrescar",
+            "disabled": "Desactivado"
+        },
+        "searchbar": {
+            "title": "Barra de búsqueda",
+            "searchengine": "Motor de búsqueda",
+            "custom": "URL de búsqueda personalizada"
+        },
+        "offline": "Modo Offline",
+        "dark": "Tema Oscuro",
+        "experimental": {
+            "title": "Experimental",
+            "webp": "Activar WebP",
+            "animations": "Animaciones",
+            "voicesearch": "Búsqueda por voz",
+            "nightmode": "Modo nocturno automático"
+        },
+        "language": "Lenguaje",
+        "apply": "Aplicar",
+        "reset": "Reiniciar",
+        "import": "Importar",
+        "export": "Exportar"
+    },
+    "update": {
+        "title": "Actualizar",
+        "offline": {
+            "title": "Offline",
+            "description": "No se pueden obtener actualizaciones en modo sin conexión"
+        },
+        "error": {
+            "title": "Error",
+            "description": "No se pudo conectar con el servidor"
+        },
+        "loading": "Cargando...",
+        "readblog": "Leer en el blog aquí",
+        "contactsupport": "Contáctanos aquí"
+    },
+    "toasts": {
+        "quote": "Cita copiada",
+        "reset": "Restablecido correctamente",
+        "installed": "Instalado correctamente",
+        "removed": "Retirado correctamente",
+        "error": "Algo salió mal",
+        "imported": "Importado correctamente"
+    },
+    "marketplace": {
+        "photo_packs": "Paquetes de fotos",
+        "quote_packs": "Paquetes de citas",
+        "preset_settings": "Ajustes preestablecidos",
+        "themes": "Tema",
+        "product": {
+            "overview": "Visión general",
+            "information": "Información",
+            "last_updated": "Última actualización",
+            "version": "Versión",
+            "author": "Autor",
+            "notice": {
+                "title": "Aviso",
+                "description": "Para que se realice el cambio, la página debe actualizarse."
+            },
+            "buttons": {
+                "addtomue": "Añadir a Mue",
+                "remove": "Remover"
+            },
+            "quoteWarning": {
+                "title": "Advertencia",
+                "description": "¡Este paquete de citas solicita a servidores externos que pueden rastrearlo!"
+            }
+        },
+        "offline": {
+            "title": "Parece que estás desconectado",
+            "description": "Por favor conéctate a Internet."
+        },
+        "see_more": "Ver más"
+    },
+    "addons": {
+        "added": "Añadido",
+        "empty": {
+            "title": "Está vacío aquí",
+            "description": "Dirígete a la tienda para agregar algunos.",
+            "button": "Llévame allí"
+        },
+        "sideload": "Cargar complemento localmente"
+    }
+}