feat(translations): add 7.0 support for most settings and some of marketplace

src/components/helpers/sharemodal/ShareModal.jsx

@@ -14,7 +14,7 @@ export default function ShareModal({ modalClose, data }) {
 
   const copyLink = () => {
     navigator.clipboard.writeText(data);
-    toast('Link copied!');
+    toast(getMessage('modals.share.copy_link'));
   };
 
   if (!data.data) {
@@ -24,7 +24,7 @@ export default function ShareModal({ modalClose, data }) {
   return (
     <div className="smallModal">
       <div className="shareHeader">
-        <span className="title">Share</span>
+        <span className="title">{getMessage('widgets.quote.share')}</span>
         <Tooltip title="Close">
           <div className="close" onClick={modalClose}>
             <MdClose />
@@ -100,7 +100,7 @@ export default function ShareModal({ modalClose, data }) {
       </div>
       <div className="copy">
         <input type="text" value={data} className="left field" readOnly />
-        <Tooltip title="Copy link" placement="top">
+        <Tooltip title={getMessage('modals.share.copy_link')} placement="top">
           <button onClick={() => copyLink()}>
             <MdContentCopy />
           </button>

src/components/helpers/tooltip/infoTooltip.jsx

@@ -1,10 +1,14 @@
+import variables from 'modules/variables';
 import { useState } from 'react';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
 import { MdClose, MdInfo, MdOpenInNew } from 'react-icons/md';
-import './tooltip.scss';
-import Tooltip from './/Tooltip';
+import Tooltip from './Tooltip';
+
+import './tooltip.scss';
+
+export default function InfoTooltip({ title, style, placement, subtitle }) {
+  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
-export default function InfoTooltip({ children, title, style, placement, subtitle }) {
   const [showTooltip, setShowTooltip] = useState(false);
   const { x, y, reference, floating, strategy } = useFloating({
     placement: placement || 'top-start',
@@ -34,7 +38,7 @@ export default function InfoTooltip({ children, title, style, placement, subtitl
           </div>
           <span className="subtitle">{subtitle}</span>
           <span className="link">
-            Open Knowledgebase <MdOpenInNew />
+            {getMessage('modals.main.settings.open_knowledgebase')} <MdOpenInNew />
           </span>
         </div>
       )}

src/components/modals/main/marketplace/Items.jsx

@@ -46,7 +46,11 @@ export default function Items({
           <MdAutoFixHigh />
           <span className="title">Can't find what you're looking for?</span>
           <span className="subtitle">
-            Visit the <a className="link">knowledgebase</a> to create your own.
+            Visit the{' '}
+            <a className="link" href="https://muetab.com">
+              knowledgebase
+            </a>{' '}
+            to create your own.
           </span>
         </div>
       ) : null}

src/components/modals/main/marketplace/sections/Added.jsx

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdLocalMall, MdUpdate, MdOutlineExtensionOff } from 'react-icons/md';
+import { MdUpdate, MdOutlineExtensionOff } from 'react-icons/md';
 import { toast } from 'react-toastify';
 
 import Item from '../Item';

src/components/modals/main/marketplace/sections/Sideload.jsx

@@ -73,7 +73,7 @@ export default class Sideload extends PureComponent {
           <MdIntegrationInstructions className="sideloadIcon" />
           <span className="title">{this.getMessage('modals.main.addons.sideload.title')}</span>
           <span className="subtitle">
-            Install a Mue addon not on the marketplace from your computer
+            {this.getMessage('modals.main.addons.sideload.description')}
           </span>
           <button onClick={() => document.getElementById('file-input').click()}>
             <MdOutlineFileUpload />

src/components/modals/main/settings/sections/About.jsx

@@ -219,14 +219,11 @@ export default class About extends PureComponent {
           <span className="title">
             {this.getMessage('modals.main.settings.sections.about.support_mue')}
           </span>
-          <p>
-            As Mue is entirely free, we rely on donations to cover pay the server bills and fund
-            development
-          </p>
+          <p>{this.getMessage('modals.main.settings.sections.about.support_subtitle')}</p>
           <div className="aboutContact">
             <a className="donateButton" href={variables.constants.DONATE_LINK}>
               <BiDonateHeart />
-              Donate
+              {this.getMessage('modals.main.settings.sections.about.support_donate')}
             </a>
             <Tooltip title={'GitHub Sponsors'}>
               <a

src/components/modals/main/settings/sections/Advanced.jsx

@@ -37,7 +37,7 @@ export default class AdvancedSettings extends PureComponent {
         </span>
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.offline_mode')}
-          subtitle="When enabled, all requests to online services will be disabled."
+          subtitle={getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
         >
           <Switch name="offlineMode" element=".other" />
         </SettingsItem>
@@ -48,8 +48,7 @@ export default class AdvancedSettings extends PureComponent {
                 {getMessage('modals.main.settings.sections.advanced.data')}
               </span>
               <span className="subtitle">
-                Choose whether to export your Mue settings to your computer, import an existing
-                settings file, or reset your settings to their default values.
+                {getMessage('modals.main.settings.sections.advanced.data_subtitle')}
               </span>
             </div>
             <div className="action activityButtons">
@@ -70,7 +69,7 @@ export default class AdvancedSettings extends PureComponent {
         ) : null}
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
-          subtitle="Choose a timezone from a list instead of the automatic default from your computer."
+          subtitle={getMessage('modals.main.settings.sections.advanced.timezone.subtitle')}
         >
           <Dropdown name="timezone" category="timezone" manual={true}>
             <MenuItem value="auto">
@@ -85,7 +84,7 @@ export default class AdvancedSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.tab_name')}
-          subtitle="Change the name of the tab that appears in your browser."
+          subtitle={getMessage('modals.main.settings.sections.advanced.tab_name_subtitle')}
         >
           <Text name="tabName" default={getMessage('tabname')} category="other" />
         </SettingsItem>
@@ -97,7 +96,7 @@ export default class AdvancedSettings extends PureComponent {
         />
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.custom_css')}
-          subtitle="Make Mue's styling customised to you with Cascading Style Sheets (CSS)."
+          subtitle={getMessage('modals.main.settings.sections.advanced.custom_css_subtitle')}
         >
           <Text name="customcss" textarea={true} category="other" />
         </SettingsItem>

src/components/modals/main/settings/sections/Appearance.jsx

@@ -118,6 +118,7 @@ export default function AppearanceSettings() {
       >
         <Radio
           name="widgetStyle"
+          element=".other"
           options={[
             {
               name: 'Legacy',

src/components/modals/main/settings/sections/Date.jsx

@@ -82,7 +82,7 @@ export default class DateSettings extends PureComponent {
         />
         <SettingsItem
           title={getMessage('modals.main.settings.sections.time.type')}
-          subtitle="Whether to display the date in long form or short form"
+          subtitle={getMessage('modals.main.settings.sections.date.type.subtitle')}
         >
           <Dropdown
             name="dateType"
@@ -103,7 +103,7 @@ export default class DateSettings extends PureComponent {
               ? getMessage('modals.main.settings.sections.date.type.long')
               : getMessage('modals.main.settings.sections.date.type.short')
           }
-          subtitle="Display settings and format for the selected date type"
+          subtitle={getMessage('modals.main.settings.sections.date.type_settings')}
           final={true}
         >
           {this.state.dateType === 'long' ? longSettings : shortSettings}

src/components/modals/main/settings/sections/Greeting.jsx

@@ -36,7 +36,10 @@ export default class GreetingSettings extends PureComponent {
           zoomSetting="zoomGreeting"
           switch={true}
         />
-        <SettingsItem title="Additional Settings" subtitle="Settings for the greeting display">
+        <SettingsItem
+          title={getMessage('modals.main.settings.additional_settings')}
+          subtitle={getMessage('modals.main.settings.sections.greeting.additional')}
+        >
           <Checkbox
             name="events"
             text={getMessage('modals.main.settings.sections.greeting.events')}
@@ -55,7 +58,7 @@ export default class GreetingSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={getMessage('modals.main.settings.sections.greeting.birthday')}
-          subtitle="Show a Happy Birthday message when it is your birthday"
+          subtitle={getMessage('modals.main.settings.sections.greeting.birthday_subtitle')}
           final={true}
         >
           <Switch

src/components/modals/main/settings/sections/Language.jsx

@@ -71,13 +71,13 @@ export default class LanguageSettings extends PureComponent {
         <span className="mainTitle">
           {this.getMessage('modals.main.settings.sections.language.title')}
         </span>
-        <div className={'languageSettings'}>
+        <div className="languageSettings">
           <Radio name="language" options={languages} element=".other" />
         </div>
-        <span className={'mainTitle'}>
+        <span className="mainTitle">
           {this.getMessage('modals.main.settings.sections.language.quote')}
         </span>
-        <div className={'languageSettings'}>
+        <div className="languageSettings">
           <Radio name="quotelanguage" options={this.state.quoteLanguages} category="quote" />
         </div>
       </>

src/components/modals/main/settings/sections/Navbar.jsx

@@ -8,8 +8,6 @@ import Dropdown from '../Dropdown';
 import SettingsItem from '../SettingsItem';
 import Header from '../Header';
 
-import InfoTooltip from '../../../../helpers/tooltip/infoTooltip';
-
 export default function Navbar() {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
   const [showRefreshOptions, setShowRefreshOptions] = useState(
@@ -26,8 +24,8 @@ export default function Navbar() {
         zoomCategory="navbar"
       />
       <SettingsItem
-        title="Extra Options"
-        subtitle="Modify navbar style and which buttons you want to display"
+        title={getMessage('modals.main.settings.additional_settings')}
+        subtitle={getMessage('modals.main.settings.sections.appearance.navbar.additional')}
         final={!showRefreshOptions}
       >
         <Checkbox
@@ -51,12 +49,12 @@ export default function Navbar() {
           category="navbar"
           onChange={setShowRefreshOptions}
         />
-        <Checkbox name="todo" text="Todos" category="navbar" />
+        <Checkbox name="todo" text={getMessage('widgets.navbar.todo')} category="navbar" />
       </SettingsItem>
       {showRefreshOptions ? (
         <SettingsItem
           title={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
-          subtitle="Choose what is refreshed when you click the refresh button"
+          subtitle={getMessage('modals.main.settings.sections.appearance.navbar.refresh_subtitle')}
           final={true}
         >
           <Dropdown name="refreshOption" category="navbar">

src/components/modals/main/settings/sections/QuickLinks.jsx

@@ -21,8 +21,8 @@ export default function QuickLinks() {
         switch={true}
       />
       <SettingsItem
-        title="Extra Options"
-        subtitle="Additional settings for quick links display and functions"
+        title={getMessage('modals.main.settings.additional_settings')}
+        subtitle={getMessage('modals.main.settings.sections.quicklinks.additional')}
         final={true}
       >
         <Checkbox

src/components/modals/main/settings/sections/Quote.jsx

@@ -98,7 +98,7 @@ export default class QuoteSettings extends PureComponent {
         <>
           <SettingsItem
             title={this.getMessage('modals.main.settings.sections.quote.custom')}
-            subtitle="Set your own custom quotes"
+            subtitle={this.getMessage('modals.main.settings.sections.quote.custom_subtitle')}
             final={true}
           >
             <button onClick={() => this.modifyCustomQuote('add')}>
@@ -107,9 +107,9 @@ export default class QuoteSettings extends PureComponent {
           </SettingsItem>
           <table style={{ width: '100%' }}>
             <tr>
-              <th>Quote</th>
-              <th>Author</th>
-              <th>Buttons</th>
+              <th>{this.getMessage('modals.main.settings.sections.quote.title')}</th>
+              <th>{this.getMessage('modals.main.settings.sections.quote.author')}</th>
+              <th>{this.getMessage('modals.main.settings.sections.custom_buttons')}</th>
             </tr>
             {this.state.customQuote.map((_url, index) => (
               <tr>
@@ -150,8 +150,8 @@ export default class QuoteSettings extends PureComponent {
       // api
       customSettings = (
         <SettingsItem
-          title="Additional Options"
-          subtitle="Other settings to customise the style of the quote widget"
+          title={this.getMessage('modals.main.settings.additional_settings')}
+          subtitle={this.getMessage('modals.main.settings.sections.quote.additional')}
           final={true}
         >
           <Dropdown
@@ -181,7 +181,11 @@ export default class QuoteSettings extends PureComponent {
             text={this.getMessage('modals.main.settings.sections.quote.author_link')}
             element=".other"
           />
-          <Checkbox name="authorImg" text="Show author image" element=".other" />
+          <Checkbox
+            name="authorImg"
+            text={this.getMessage('modals.main.settings.sections.quote.author_img')}
+            element=".other"
+          />
         </SettingsItem>
       );
     }
@@ -198,7 +202,7 @@ export default class QuoteSettings extends PureComponent {
         />
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.quote.buttons.title')}
-          subtitle="Choose which buttons to show on the quote"
+          subtitle={this.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
         >
           <Checkbox
             name="copyButton"

src/components/modals/main/settings/sections/Search.jsx

@@ -81,8 +81,8 @@ export default class SearchSettings extends PureComponent {
           switch={true}
         />
         <SettingsItem
-          title="Extra Options"
-          subtitle="Additional options for search widget display and functionality"
+          title={this.getMessage('modals.main.settings.additional_settings')}
+          subtitle={this.getMessage('modals.main.settings.sections.search.additional')}
         >
           {/* not supported on firefox */}
           {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
@@ -126,7 +126,7 @@ export default class SearchSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.search.search_engine')}
-          subtitle="Choose search engine to use in the search bar"
+          subtitle={this.getMessage('modals.main.settings.sections.search.search_engine_subtitle')}
         >
           <Dropdown
             name="searchEngine"
@@ -145,7 +145,9 @@ export default class SearchSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
-          subtitle="Search engine to use for autocomplete dropdown results"
+          subtitle={this.getMessage(
+            'modals.main.settings.sections.search.autocomplete_provider_subtitle',
+          )}
           final={true}
         >
           <Radio options={autocompleteProviders} name="autocompleteProvider" category="search" />

src/components/modals/main/settings/sections/Stats.jsx

@@ -87,9 +87,12 @@ export default class Stats extends PureComponent {
             <div className="achievements">
               {this.state.stats['tabs-opened'] >= 10 && achievement('10/10 IGN', 'Opened 10 tabs')}
               {this.state.stats['tabs-opened'] >= 39 && achievement('Thank you', 'Opened 39 tabs')}
-              {this.state.stats['tabs-opened'] >= 100 && achievement('Seasoning', 'Opened 100 tabs')}
-              {(this.state.stats.marketplace && this.state.stats.marketplace['install']) >= 1 && achievement('Average Linux User', 'Installed an add-on')}
-              {(this.state.stats.marketplace && this.state.stats.marketplace['install']) >= 5 && achievement('Fully riced', 'Installed 5 add-ons')}
+              {this.state.stats['tabs-opened'] >= 100 &&
+                achievement('Seasoning', 'Opened 100 tabs')}
+              {(this.state.stats.marketplace && this.state.stats.marketplace['install']) >= 1 &&
+                achievement('Average Linux User', 'Installed an add-on')}
+              {(this.state.stats.marketplace && this.state.stats.marketplace['install']) >= 5 &&
+                achievement('Fully riced', 'Installed 5 add-ons')}
             </div>
           </div>
           <div className="statSection rightPanel">

src/components/modals/main/settings/sections/Time.jsx

@@ -5,12 +5,12 @@ import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Radio from '../Radio';
-import Slider from '../Slider';
-import Switch from '../Switch';
+//import Slider from '../Slider';
+//import Switch from '../Switch';
 
 import SettingsItem from '../SettingsItem';
 
-import { values } from 'modules/helpers/settings/modals';
+//import { values } from 'modules/helpers/settings/modals';
 
 export default class TimeSettings extends PureComponent {
   constructor() {
@@ -128,7 +128,7 @@ export default class TimeSettings extends PureComponent {
           </Dropdown>
         </SettingsItem>
         {timeSettings}
-        <SettingsItem
+        {/*<SettingsItem
           title="Pomodoro"
           subtitle="The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It uses a timer to break work into intervals, typically 25 minutes in length, separated by short breaks"
           final={true}
@@ -159,7 +159,7 @@ export default class TimeSettings extends PureComponent {
             marks={values('pomodoroBreak')}
             display={' ms'}
           />
-        </SettingsItem>
+    </SettingsItem>*/}
       </>
     );
   }

src/components/modals/main/settings/sections/advanced/Advanced.jsx

@@ -6,8 +6,8 @@ import {
   MdUpload as ImportIcon,
   MdDownload as ExportIcon,
   MdRestartAlt as ResetIcon,
-  MdDataUsage,
-  MdOutlineKeyboardArrowRight,
+  /* MdDataUsage, */
+  /* MdOutlineKeyboardArrowRight, */
 } from 'react-icons/md';
 
 import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
@@ -44,7 +44,7 @@ export default class AdvancedSettings extends PureComponent {
         <span className="mainTitle">
           {getMessage('modals.main.settings.sections.advanced.title')}
         </span>
-        {localStorage.getItem('welcomePreview') !== 'true' ? (
+        {/* {localStorage.getItem('welcomePreview') !== 'true' ? (
           <div className="moreSettings" onClick={() => this.setState({ showData: true })}>
             <div className="left">
               <MdDataUsage />
@@ -62,14 +62,13 @@ export default class AdvancedSettings extends PureComponent {
               <MdOutlineKeyboardArrowRight />
             </div>
           </div>
-        ) : null}
+        ) : null} */}
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.offline_mode')}
           subtitle="When enabled, all requests to online services will be disabled."
         >
           <Switch name="offlineMode" element=".other" />
         </SettingsItem>
-        {/*
         {localStorage.getItem('welcomePreview') !== 'true' ? (
           <div className="settingsRow">
             <div className="content">
@@ -97,7 +96,6 @@ export default class AdvancedSettings extends PureComponent {
             </div>
           </div>
         ) : null}
-        */}
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
           subtitle="Choose a timezone from a list instead of the automatic default from your computer."

src/components/modals/main/settings/sections/background/Background.jsx

@@ -1,12 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MenuItem } from '@mui/material';
-import {
-  MdSource,
-  MdOutlineKeyboardArrowRight,
-  MdOutlineAutoAwesome,
-  MdArrowBack,
-} from 'react-icons/md';
+import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'react-icons/md';
 
 import Header from '../../Header';
 import Checkbox from '../../Checkbox';
@@ -14,7 +9,6 @@ import Dropdown from '../../Dropdown';
 import Slider from '../../Slider';
 import Radio from '../../Radio';
 import SettingsItem from '../../SettingsItem';
-import Tooltip from '../../../../../helpers/tooltip/Tooltip';
 
 import ColourSettings from './Colour';
 import CustomSettings from './Custom';

src/components/modals/main/settings/sections/background/Custom.jsx

@@ -131,6 +131,7 @@ export default class CustomSettings extends PureComponent {
       e.preventDefault();
     };
 
+    // todo: make this get from FileUpload.jsx to prevent duplication
     dnd.ondrop = (e) => {
       e.preventDefault();
       const file = e.dataTransfer.files[0];
@@ -143,7 +144,7 @@ export default class CustomSettings extends PureComponent {
       const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length;
       if (videoCheck(file) === true) {
         if (settingsSize + file.size > 4850000) {
-          return toast('Not enough storage!');
+          return toast(this.getMessage('toasts.no_storage'));
         }
 
         return this.customBackground(file, false, this.state.currentBackgroundIndex);
@@ -151,7 +152,7 @@ export default class CustomSettings extends PureComponent {
 
       compressAccurately(file, 200).then(async (res) => {
         if (settingsSize + res.size > 4850000) {
-          return toast('Not enough storage!');
+          return toast(this.getMessage('toasts.no_storage'));
         }
 
         this.customBackground(await filetoDataURL(res), false, this.state.currentBackgroundIndex);

src/components/modals/main/settings/sections/background/CustomURLModal.jsx

@@ -1,7 +1,6 @@
 import variables from 'modules/variables';
 import { useState } from 'react';
 import { MdAdd, MdClose } from 'react-icons/md';
-import { TextField } from '@mui/material';
 import Tooltip from '../../../../../helpers/tooltip/Tooltip';
 
 export default function CustomURLModal({ modalClose, modalCloseOnly }) {
@@ -16,7 +15,12 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
             'modals.main.settings.sections.background.source.add_url',
           )}
         </span>
-        <Tooltip title="Close">
+        <Tooltip
+          title={variables.language.getMessage(
+            variables.languagecode,
+            'modals.main.settings.sections.advanced.reset_modal.cancel',
+          )}
+        >
           <div className="close" onClick={modalCloseOnly}>
             <MdClose />
           </div>
@@ -29,7 +33,13 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
           onChange={(e) => setURL(e.target.value)}
           varient="outlined"
         />
-        <Tooltip title="Add Link" placement="top">
+        <Tooltip
+          title={variables.language.getMessage(
+            variables.languagecode,
+            'modals.main.settings.sections.background.source.add_url',
+          )}
+          placement="top"
+        >
           <button onClick={() => modalClose(url)}>
             <MdAdd />
           </button>

src/components/modals/main/tabs/Settings.jsx

@@ -48,9 +48,9 @@ export default function Settings(props) {
       <div label={getMessage('modals.main.settings.sections.date.title')} name="date">
         <Date />
       </div>
-      <div label="Reminder" name="reminder">
+      {/*<div label="Reminder" name="reminder">
         <Reminder />
-      </div>
+  </div>*/}
       <div label={getMessage('modals.main.settings.sections.message.title')} name="message">
         <Message />
       </div>
@@ -63,7 +63,6 @@ export default function Settings(props) {
       <div label={getMessage('modals.main.settings.sections.weather.title')} name="weather">
         <Weather />
       </div>
-
       <div label={getMessage('modals.main.settings.sections.order.title')} name="order">
         <Order />
       </div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -129,7 +129,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
       icon = <Create />;
       break;
 
-    case 'All':
+    case getMessage('modals.main.marketplace.all'):
       icon = <Addons />;
       divider = true;
       break;

src/components/widgets/background/PhotoInformation.jsx

@@ -35,7 +35,6 @@ const downloadImage = async (info) => {
   variables.stats.postEvent('feature', 'Background download');
 };
 
-
 const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
 export default function PhotoInformation({ info, url, api }) {

src/components/widgets/navbar/Todo.jsx

@@ -144,15 +144,30 @@ class Todo extends PureComponent {
             <div className="flexTodo">
               <div className="topBarNotes" style={{ display: 'flex' }}>
                 <MdChecklist />
-                <span>{variables.language.getMessage(variables.languagecode, 'widgets.navbar.todo.title')}</span>
+                <span>
+                  {variables.language.getMessage(
+                    variables.languagecode,
+                    'widgets.navbar.todo.title',
+                  )}
+                </span>
               </div>
               <div className="notes-buttons">
-                <Tooltip title={variables.language.getMessage(variables.languagecode, 'widgets.navbar.todo.pin')}>
+                <Tooltip
+                  title={variables.language.getMessage(
+                    variables.languagecode,
+                    'widgets.navbar.todo.pin',
+                  )}
+                >
                   <button onClick={() => this.pin()}>
                     <MdPushPin />
                   </button>
                 </Tooltip>
-                <Tooltip title={variables.language.getMessage(variables.languagecode, 'widgets.navbar.todo.add')}>
+                <Tooltip
+                  title={variables.language.getMessage(
+                    variables.languagecode,
+                    'widgets.navbar.todo.add',
+                  )}
+                >
                   <button onClick={() => this.updateTodo('add')}>
                     <MdPlaylistAdd />
                   </button>

src/components/widgets/weather/Weather.jsx

@@ -214,7 +214,12 @@ export default class Weather extends PureComponent {
             ) : null}
             */}
           {localStorage.getItem('weatherType') >= 3 && (
-            <span className="subtitle">{variables.language.getMessage(variables.languagecode, 'widgets.weather.extra_information')}</span>
+            <span className="subtitle">
+              {variables.language.getMessage(
+                variables.languagecode,
+                'widgets.weather.extra_information',
+              )}
+            </span>
           )}
           {enabled('cloudiness') ? (
             <span>
@@ -279,9 +284,15 @@ export default class Weather extends PureComponent {
           {localStorage.getItem('weatherType') >= 2 && (
             <div className="extra-info">
               {/*{enabled('humidity') ? <span><WiHumidity/>{this.state.weather.humidity}%</span> : null}*/}
-              <span>{variables.language.getMessage(variables.languagecode, 'widgets.weather.feels_like', {
-                amount: this.state.weather.temp_feels_like + this.state.temp_text
-              })}</span>
+              <span>
+                {variables.language.getMessage(
+                  variables.languagecode,
+                  'widgets.weather.feels_like',
+                  {
+                    amount: this.state.weather.temp_feels_like + this.state.temp_text,
+                  },
+                )}
+              </span>
               <span className="loc">{this.state.location}</span>
             </div>
           )}