style: Variables for translation to improve clarity and reduce line length

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

@@ -110,10 +110,12 @@ function Navbar() {
     variables.stats.postEvent('feature', 'App link delete');
   };
 
+  const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
+
   return (
     <>
       <Header
-        title={variables.getMessage('modals.main.settings.sections.appearance.navbar.title')}
+        title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
         setting="navbar"
         category="widgets"
         zoomSetting="zoomNavbar"
@@ -128,12 +130,12 @@ function Navbar() {
       >
         <Checkbox
           name="navbarHover"
-          text={variables.getMessage('modals.main.settings.sections.appearance.navbar.hover')}
+          text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
           category="navbar"
         />
         <Checkbox
           name="notesEnabled"
-          text={variables.getMessage('modals.main.settings.sections.appearance.navbar.notes')}
+          text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
           category="navbar"
         />
         <Checkbox
@@ -143,7 +145,7 @@ function Navbar() {
         />
         <Checkbox
           name="refresh"
-          text={variables.getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
+          text={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
           category="navbar"
           onChange={setShowRefreshOptions}
         />
@@ -161,7 +163,7 @@ function Navbar() {
       </SettingsItem>
       {showRefreshOptions && (
         <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
+          title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
           subtitle={variables.getMessage(
             'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
           )}

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

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { MdAddLink, MdLinkOff, MdCancel, MdEdit } from 'react-icons/md';
+import { MdAddLink, MdLinkOff } from 'react-icons/md';
 import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
@@ -124,10 +124,12 @@ export default class QuickLinks extends PureComponent {
   }
 
   render() {
+    const QUICKLINKS_SECTION = 'modals.main.settings.sections.quicklinks';
+
     return (
       <>
         <Header
-          title={variables.getMessage('modals.main.settings.sections.quicklinks.title')}
+          title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
           setting="quicklinksenabled"
           category="quicklinks"
           element=".quicklinks-container"
@@ -136,49 +138,45 @@ export default class QuickLinks extends PureComponent {
         />
         <SettingsItem
           title={variables.getMessage('modals.main.settings.additional_settings')}
-          subtitle={variables.getMessage('modals.main.settings.sections.quicklinks.additional')}
+          subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
         >
           <Checkbox
             name="quicklinksnewtab"
-            text={variables.getMessage('modals.main.settings.sections.quicklinks.open_new')}
+            text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
             category="quicklinks"
           />
           <Checkbox
             name="quicklinkstooltip"
-            text={variables.getMessage('modals.main.settings.sections.quicklinks.tooltip')}
+            text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
             category="quicklinks"
           />
         </SettingsItem>
         <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.quicklinks.styling')}
+          title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
           subtitle={variables.getMessage(
             'modals.main.settings.sections.quicklinks.styling_description',
           )}
         >
           <Dropdown
-            label={variables.getMessage('modals.main.settings.sections.quicklinks.style')}
+            label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
             name="quickLinksStyle"
             category="quicklinks"
           >
             <option value="icon">
-              {variables.getMessage('modals.main.settings.sections.quicklinks.options.icon')}
+              {variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
             </option>
             <option value="text">
-              {variables.getMessage('modals.main.settings.sections.quicklinks.options.text_only')}
+              {variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
             </option>
             <option value="metro">
-              {variables.getMessage('modals.main.settings.sections.quicklinks.options.metro')}
+              {variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
             </option>
           </Dropdown>
         </SettingsItem>
 
-        <SettingsItem
+        <SettingsItem title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} final={true}>
-          title={variables.getMessage('modals.main.settings.sections.quicklinks.title')}
-          final={true}
-        >
           <button onClick={() => this.setState({ showAddModal: true })}>
-            {variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}{' '}
+            {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
-            <MdAddLink />
           </button>
         </SettingsItem>
 
@@ -187,13 +185,13 @@ export default class QuickLinks extends PureComponent {
             <div className="emptyNewMessage">
               <MdLinkOff />
               <span className="title">
-                {variables.getMessage('modals.main.settings.sections.quicklinks.no_quicklinks')}
+                {variables.getMessage(`${QUICKLINKS_SECTION}.no_quicklinks`)}
               </span>
               <span className="subtitle">
                 {variables.getMessage('modals.main.settings.sections.message.add_some')}
               </span>
               <button onClick={() => this.setState({ showAddModal: true })}>
-                {variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
+                {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
                 <MdAddLink />
               </button>
             </div>

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

@@ -92,17 +92,19 @@ export default class QuoteSettings extends PureComponent {
   }
 
   render() {
+    const QUOTE_SECTION = 'modals.main.settings.sections.quote';
+
     let customSettings;
     if (this.state.quoteType === 'custom' && this.state.sourceSection === true) {
       customSettings = (
         <>
           <SettingsItem
-            title={variables.getMessage('modals.main.settings.sections.quote.custom')}
+            title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
-            subtitle={variables.getMessage('modals.main.settings.sections.quote.custom_subtitle')}
+            subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
             final={true}
           >
             <button onClick={() => this.modifyCustomQuote('add')}>
-              {variables.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
+              {variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
             </button>
           </SettingsItem>
 
@@ -152,14 +154,12 @@ export default class QuoteSettings extends PureComponent {
             <div className="photosEmpty">
               <div className="emptyNewMessage">
                 <MdOutlineFormatQuote />
-                <span className="title">
+                <span className="title">{variables.getMessage(`${QUOTE_SECTION}.no_quotes`)}</span>
-                  {variables.getMessage('modals.main.settings.sections.quote.no_quotes')}
-                </span>
                 <span className="subtitle">
                   {variables.getMessage('modals.main.settings.sections.message.add_some')}
                 </span>
                 <button onClick={() => this.modifyCustomQuote('add')}>
-                  {variables.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
+                  {variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
                 </button>
               </div>
             </div>
@@ -175,15 +175,13 @@ export default class QuoteSettings extends PureComponent {
       <>
         {this.state.sourceSection ? (
           <span className="mainTitle" onClick={() => this.setState({ sourceSection: false })}>
-            <span className="backTitle">
+            <span className="backTitle">{variables.getMessage(`${QUOTE_SECTION}.title`)}</span>
-              {variables.getMessage('modals.main.settings.sections.quote.title')}
-            </span>
             <MdOutlineKeyboardArrowRight />{' '}
             {variables.getMessage('modals.main.settings.sections.background.source.title')}
           </span>
         ) : (
           <Header
-            title={variables.getMessage('modals.main.settings.sections.quote.title')}
+            title={variables.getMessage(`${QUOTE_SECTION}.title`)}
             setting="quote"
             category="quote"
             element=".quotediv"
@@ -199,7 +197,7 @@ export default class QuoteSettings extends PureComponent {
                 {variables.getMessage('modals.main.settings.sections.background.source.title')}
               </span>
               <span className="subtitle">
-                {variables.getMessage('modals.main.settings.sections.quote.source_subtitle')}
+                {variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
               </span>
             </div>
           </div>
@@ -214,23 +212,21 @@ export default class QuoteSettings extends PureComponent {
               <option value="api">
                 {variables.getMessage('modals.main.settings.sections.background.type.api')}
               </option>
-              <option value="custom">
+              <option value="custom">{variables.getMessage(`${QUOTE_SECTION}.custom`)}</option>
-                {variables.getMessage('modals.main.settings.sections.quote.custom')}
-              </option>
             </Dropdown>
           </div>
         </div>
         {!this.state.sourceSection && (
           <>
             <SettingsItem
-              title={variables.getMessage('modals.main.settings.sections.quote.buttons.title')}
+              title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
               subtitle={variables.getMessage(
                 'modals.main.settings.sections.quote.buttons.subtitle',
               )}
             >
               <Checkbox
                 name="copyButton"
-                text={variables.getMessage('modals.main.settings.sections.quote.buttons.copy')}
+                text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
                 category="quote"
               />
               <Checkbox
@@ -240,14 +236,14 @@ export default class QuoteSettings extends PureComponent {
               />
               <Checkbox
                 name="favouriteQuoteEnabled"
-                text={variables.getMessage('modals.main.settings.sections.quote.buttons.favourite')}
+                text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
                 category="quote"
               />
             </SettingsItem>
 
             <SettingsItem
               title={variables.getMessage('modals.main.settings.additional_settings')}
-              subtitle={variables.getMessage('modals.main.settings.sections.quote.additional')}
+              subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
               final={true}
             >
               {/*<Dropdown
@@ -281,12 +277,12 @@ export default class QuoteSettings extends PureComponent {
                   </Dropdown>*/}
               <Checkbox
                 name="authorLink"
-                text={variables.getMessage('modals.main.settings.sections.quote.author_link')}
+                text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
                 element=".other"
               />
               <Checkbox
                 name="authorImg"
-                text={variables.getMessage('modals.main.settings.sections.quote.author_img')}
+                text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
                 element=".other"
               />
             </SettingsItem>

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

@@ -68,46 +68,48 @@ export default class SearchSettings extends PureComponent {
   }
 
   render() {
+    const SEARCH_SECTION = 'modals.main.settings.sections.search';
+
     return (
       <>
         <Header
-          title={variables.getMessage('modals.main.settings.sections.search.title')}
+          title={variables.getMessage(`${SEARCH_SECTION}.title`)}
           setting="searchBar"
           category="widgets"
           switch={true}
         />
         <SettingsItem
           title={variables.getMessage('modals.main.settings.additional_settings')}
-          subtitle={variables.getMessage('modals.main.settings.sections.search.additional')}
+          subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
         >
           {/* not supported on firefox */}
           {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
             <Checkbox
               name="voiceSearch"
-              text={variables.getMessage('modals.main.settings.sections.search.voice_search')}
+              text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
               category="search"
             />
           ) : null}
           <Checkbox
             name="searchDropdown"
-            text={variables.getMessage('modals.main.settings.sections.search.dropdown')}
+            text={variables.getMessage(`${SEARCH_SECTION}.dropdown`)}
             category="search"
             element=".other"
           />
           <Checkbox
             name="searchFocus"
-            text={variables.getMessage('modals.main.settings.sections.search.focus')}
+            text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
             category="search"
             element=".other"
           />
           <Checkbox
             name="autocomplete"
-            text={variables.getMessage('modals.main.settings.sections.search.autocomplete')}
+            text={variables.getMessage(`${SEARCH_SECTION}.autocomplete`)}
             category="search"
           />
         </SettingsItem>
         <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.search.search_engine')}
+          title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
           subtitle={variables.getMessage(
             'modals.main.settings.sections.search.search_engine_subtitle',
           )}
@@ -124,17 +126,14 @@ export default class SearchSettings extends PureComponent {
               </MenuItem>
             ))}
             <MenuItem value="custom">
-              {variables.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}
+              {variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]}
             </MenuItem>
           </Dropdown>
         </SettingsItem>
         <div style={{ display: this.state.customDisplay }}>
-          <SettingsItem
+          <SettingsItem title={variables.getMessage(`${SEARCH_SECTION}.custom`)} final={true}>
-            title={variables.getMessage('modals.main.settings.sections.search.custom')}
-            final={true}
-          >
             <TextField
-              label={variables.getMessage('modals.main.settings.sections.search.custom')}
+              label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
               value={this.state.customValue}
               onInput={(e) => this.setState({ customValue: e.target.value })}
               varient="outlined"

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

@@ -26,23 +26,23 @@ export default class TimeSettings extends PureComponent {
   render() {
     let timeSettings = null;
 
+    const TIME_SECTION = 'modals.main.settings.sections.time';
+
     const digitalSettings = (
       <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.time.digital.title')}
+        title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
-        subtitle={variables.getMessage('modals.main.settings.sections.time.digital.subtitle')}
+        subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
         final={true}
       >
         <Radio
           name="timeformat"
           options={[
             {
-              name: variables.getMessage(
+              name: variables.getMessage(`${TIME_SECTION}.digital.twentyfourhour`),
-                'modals.main.settings.sections.time.digital.twentyfourhour',
-              ),
               value: 'twentyfourhour',
             },
             {
-              name: variables.getMessage('modals.main.settings.sections.time.digital.twelvehour'),
+              name: variables.getMessage(`${TIME_SECTION}.digital.twelvehour`),
               value: 'twelvehour',
             },
           ]}
@@ -51,12 +51,12 @@ export default class TimeSettings extends PureComponent {
         />
         <Checkbox
           name="seconds"
-          text={variables.getMessage('modals.main.settings.sections.time.digital.seconds')}
+          text={variables.getMessage(`${TIME_SECTION}.digital.seconds`)}
           category="clock"
         />
         <Checkbox
           name="zero"
-          text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
+          text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
           category="clock"
         />
       </SettingsItem>
@@ -64,38 +64,38 @@ export default class TimeSettings extends PureComponent {
 
     const analogSettings = (
       <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.time.analogue.title')}
+        title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
-        subtitle={variables.getMessage('modals.main.settings.sections.time.analogue.subtitle')}
+        subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
         final={true}
       >
         <Checkbox
           name="secondHand"
-          text={variables.getMessage('modals.main.settings.sections.time.analogue.second_hand')}
+          text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
           category="clock"
         />
         <Checkbox
           name="minuteHand"
-          text={variables.getMessage('modals.main.settings.sections.time.analogue.minute_hand')}
+          text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)}
           category="clock"
         />
         <Checkbox
           name="hourHand"
-          text={variables.getMessage('modals.main.settings.sections.time.analogue.hour_hand')}
+          text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)}
           category="clock"
         />
         <Checkbox
           name="hourMarks"
-          text={variables.getMessage('modals.main.settings.sections.time.analogue.hour_marks')}
+          text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)}
           category="clock"
         />
         <Checkbox
           name="minuteMarks"
-          text={variables.getMessage('modals.main.settings.sections.time.analogue.minute_marks')}
+          text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)}
           category="clock"
         />
         <Checkbox
           name="roundClock"
-          text={variables.getMessage('modals.main.settings.sections.time.analogue.round_clock')}
+          text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
           category="clock"
         />
       </SettingsItem>
@@ -160,7 +160,7 @@ export default class TimeSettings extends PureComponent {
     return (
       <>
         <Header
-          title={variables.getMessage('modals.main.settings.sections.time.title')}
+          title={variables.getMessage(`${TIME_SECTION}.title`)}
           setting="time"
           category="clock"
           element=".clock-container"
@@ -168,8 +168,8 @@ export default class TimeSettings extends PureComponent {
           switch={true}
         />
         <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.time.type')}
+          title={variables.getMessage(`${TIME_SECTION}.type`)}
-          subtitle={variables.getMessage('modals.main.settings.sections.time.type_subtitle')}
+          subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
           final={this.state.timeType === 'percentageComplete'}
         >
           <Dropdown
@@ -177,17 +177,15 @@ export default class TimeSettings extends PureComponent {
             onChange={(value) => this.setState({ timeType: value })}
             category="clock"
           >
-            <option value="digital">
+            <option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
-              {variables.getMessage('modals.main.settings.sections.time.digital.title')}
-            </option>
             <option value="analogue">
-              {variables.getMessage('modals.main.settings.sections.time.analogue.title')}
+              {variables.getMessage(`${TIME_SECTION}.analogue.title`)}
             </option>
             <option value="percentageComplete">
-              {variables.getMessage('modals.main.settings.sections.time.percentage_complete')}
+              {variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
             </option>
             <option value="verticalClock">
-              {variables.getMessage('modals.main.settings.sections.time.vertical_clock.title')}
+              {variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
             </option>
           </Dropdown>
         </SettingsItem>

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

@@ -63,44 +63,64 @@ export default class TimeSettings extends PureComponent {
   render() {
     const weatherType = localStorage.getItem('weatherType');
 
+    const WEATHER_SECTION = 'modals.main.settings.sections.weather';
+
+    const weatherOptions = [
+      {
+        name: 'weatherdescription',
+        textKey: `${WEATHER_SECTION}.extra_info.show_description`,
+      },
+      {
+        name: 'cloudiness',
+        textKey: `${WEATHER_SECTION}.extra_info.cloudiness`,
+      },
+      { name: 'humidity', textKey: `${WEATHER_SECTION}.extra_info.humidity` },
+      {
+        name: 'visibility',
+        textKey: `${WEATHER_SECTION}.extra_info.visibility`,
+      },
+      {
+        name: 'windspeed',
+        textKey: `${WEATHER_SECTION}.extra_info.wind_speed`,
+        onChange: () => this.setState({ windSpeed: localStorage.getItem('windspeed') !== 'true' }),
+      },
+      {
+        name: 'windDirection',
+        textKey: `${WEATHER_SECTION}.extra_info.wind_direction`,
+        disabled: this.state.windSpeed,
+      },
+      {
+        name: 'atmosphericpressure',
+        textKey: `${WEATHER_SECTION}.extra_info.atmospheric_pressure`,
+      },
+    ];
+
     return (
       <>
         <Header
-          title={variables.getMessage('modals.main.settings.sections.weather.title')}
+          title={variables.getMessage(`${WEATHER_SECTION}.title`)}
           setting="weatherEnabled"
           category="widgets"
           zoomSetting="zoomWeather"
           zoomCategory="weather"
           switch={true}
         />
-        <SettingsItem
+        <SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)}>
-          title={variables.getMessage('modals.main.settings.sections.weather.widget_type')}
-        >
           <Dropdown
             label={variables.getMessage('modals.main.settings.sections.time.type')}
             name="weatherType"
             category="weather"
             onChange={() => this.forceUpdate()}
           >
-            <option value="1">
+            <option value="1">{variables.getMessage(`${WEATHER_SECTION}.options.basic`)}</option>
-              {variables.getMessage('modals.main.settings.sections.weather.options.basic')}
+            <option value="2">{variables.getMessage(`${WEATHER_SECTION}.options.standard`)}</option>
-            </option>
+            <option value="3">{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}</option>
-            <option value="2">
+            <option value="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
-              {variables.getMessage('modals.main.settings.sections.weather.options.standard')}
-            </option>
-            <option value="3">
-              {variables.getMessage('modals.main.settings.sections.weather.options.expanded')}
-            </option>
-            <option value="4">
-              {variables.getMessage('modals.main.settings.sections.weather.options.custom')}
-            </option>
           </Dropdown>
         </SettingsItem>
-        <SettingsItem
+        <SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.location`)}>
-          title={variables.getMessage('modals.main.settings.sections.weather.location')}
-        >
           <TextField
-            label={variables.getMessage('modals.main.settings.sections.weather.location')}
+            label={variables.getMessage(`${WEATHER_SECTION}.location`)}
             value={this.state.location}
             onChange={(e) => this.changeLocation(e)}
             placeholder="London"
@@ -109,34 +129,26 @@ export default class TimeSettings extends PureComponent {
           />
           <span className="link" onClick={() => this.getAuto()}>
             <MdAutoAwesome />
-            {variables.getMessage('modals.main.settings.sections.weather.auto')}
+            {variables.getMessage(`${WEATHER_SECTION}.auto`)}
           </span>
         </SettingsItem>
         <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.weather.temp_format.title')}
+          title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)}
           final={weatherType !== '4'}
         >
           <Radio
             name="tempformat"
             options={[
               {
-                name:
+                name: variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`) + ' (°C)',
-                  variables.getMessage(
-                    'modals.main.settings.sections.weather.temp_format.celsius',
-                  ) + ' (°C)',
                 value: 'celsius',
               },
               {
-                name:
+                name: variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`) + ' (°F)',
-                  variables.getMessage(
-                    'modals.main.settings.sections.weather.temp_format.fahrenheit',
-                  ) + ' (°F)',
                 value: 'fahrenheit',
               },
               {
-                name:
+                name: variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`) + ' (K)',
-                  variables.getMessage('modals.main.settings.sections.weather.temp_format.kelvin') +
-                  ' (K)',
                 value: 'kelvin',
               },
             ]}
@@ -145,64 +157,19 @@ export default class TimeSettings extends PureComponent {
         </SettingsItem>
         {weatherType === '4' && (
           <SettingsItem
-            title={variables.getMessage('modals.main.settings.sections.weather.custom_settings')}
+            title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)}
             final={true}
           >
-            <Checkbox
+            {weatherOptions.map((item) => (
-              name="weatherdescription"
+              <Checkbox
-              text={variables.getMessage(
+                key={item.name}
-                'modals.main.settings.sections.weather.extra_info.show_description',
+                name={item.name}
-              )}
+                text={variables.getMessage(item.textKey)}
-              category="weather"
+                category="weather"
-            />
+                onChange={item.onChange}
-            <Checkbox
+                disabled={item.disabled}
-              name="cloudiness"
+              />
-              text={variables.getMessage(
+            ))}
-                'modals.main.settings.sections.weather.extra_info.cloudiness',
-              )}
-              category="weather"
-            />
-            <Checkbox
-              name="humidity"
-              text={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.humidity',
-              )}
-              category="weather"
-            />
-            <Checkbox
-              name="visibility"
-              text={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.visibility',
-              )}
-              category="weather"
-            />
-            <Checkbox
-              name="windspeed"
-              text={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.wind_speed',
-              )}
-              category="weather"
-              onChange={() =>
-                this.setState({
-                  windSpeed: localStorage.getItem('windspeed') !== 'true',
-                })
-              }
-            />
-            <Checkbox
-              name="windDirection"
-              text={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.wind_direction',
-              )}
-              category="weather"
-              disabled={this.state.windSpeed}
-            />
-            <Checkbox
-              name="atmosphericpressure"
-              text={variables.getMessage(
-                'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
-              )}
-              category="weather"
-            />
           </SettingsItem>
         )}
       </>