fix: various fixes and improvements

Co-authored-by: David Ralph <me@davidcralph.co.uk>
2022-08-16 16:38:22 +01:00 · 2022-08-16 16:38:22 +01:00 · c77a37cbb8
parent ff49fa6d48
commit c77a37cbb8
39 changed files with 482 additions and 125 deletions
--- a/public/icons/undraw_making_art.svg
+++ b/public/icons/undraw_making_art.svg
--- a/src/components/modals/main/marketplace/Items.jsx
+++ b/src/components/modals/main/marketplace/Items.jsx
@ -26,7 +26,7 @@ export default function Items({

  return (
    <>
-      {(type === 'all' && !onCollection) || type === 'collections' ? (
+      {(type === 'all' && !onCollection) || (type === 'collections' && !onCollection) ? (
        <>
          <div
            className="collection"
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@ -207,13 +207,13 @@ export default class Create extends PureComponent {
        <div className="smallBanner">
          <div className="content">
            <span className="title" style={{ textTransform: 'capitalize' }}>
-              {getMessage('modals.main.addons.create.metadata.create_type', {
-                type: this.state.addonMetadata.type,
-              })}
+            {getMessage(
+                'modals.main.addons.create.types.' + this.state.addonMetadata.type,
+              ) || 'marketplace'}
            </span>
            <span className="subtitle">
              {getMessage(
-                'modals.main.addons.create.metadata.descriptions.' + this.state.addonMetadata.type,
+                'modals.main.addons.create.descriptions.' + this.state.addonMetadata.type,
              ) || 'marketplace'}
            </span>
          </div>
@ -236,7 +236,7 @@ export default class Create extends PureComponent {
            <span className="subtitle">
              <InfoTooltip
                title={getMessage('modals.main.addons.create.information')}
-                subtitle={getMessage('modals.main.addons.create.metadata.information_subtitle')}
+                subtitle={getMessage('modals.main.addons.create.information_subtitle')}
              />
            </span>
          </div>
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@ -1,7 +1,14 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { MdWifiOff, MdLocalMall, MdOutlineKeyboardArrowRight, MdRefresh } from 'react-icons/md';
+import {
+  MdWifiOff,
+  MdLocalMall,
+  MdOutlineKeyboardArrowRight,
+  MdRefresh,
+  MdOutlineArrowForward,
+  MdOutlineOpenInNew,
+} from 'react-icons/md';

 import Item from '../Item';
 import Items from '../Items';
@ -122,8 +129,12 @@ export default class Marketplace extends PureComponent {
  }

  async getItems() {
+    const dataURL =
+      this.props.type === 'collections'
+        ? variables.constants.MARKETPLACE_URL + '/collections'
+        : variables.constants.MARKETPLACE_URL + '/items/' + this.props.type;
    const { data } = await (
-      await fetch(variables.constants.MARKETPLACE_URL + '/items/' + this.props.type, {
+      await fetch(dataURL, {
        signal: this.controller.signal,
      })
    ).json();
@ -355,14 +366,46 @@ export default class Marketplace extends PureComponent {
            </div>
          </>
        )}
-        <Items
-          type={this.props.type}
-          items={this.state.items}
-          collections={this.state.collections}
-          onCollection={this.state.collection}
-          toggleFunction={(input) => this.toggle('item', input)}
-          collectionFunction={(input) => this.toggle('collection', input)}
-        />
+        {this.props.type === 'collections' && !this.state.collection ? (
+          this.state.items.map((item) => (
+            <>
+              {!item.news ? (
+                <div
+                  className="collection"
+                  style={
+                    item.news
+                      ? { backgroundColor: item.background_colour }
+                      : {
+                          backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${item.img}')`,
+                        }
+                  }
+                >
+                  <div className="content">
+                    <span className="title">{item.display_name}</span>
+                    <span className="subtitle">{item.description}</span>
+                  </div>
+                  <button
+                    className="nice-button"
+                    onClick={() => this.toggle('collection', item.name)}
+                  >
+                    <MdOutlineArrowForward />{' '}
+                    {this.getMessage('modals.main.marketplace.explore_collection')}
+                  </button>
+                  
+                </div>
+              ) : null}
+            </>
+          ))
+        ) : (
+          <Items
+            type={this.props.type}
+            items={this.state.items}
+            collections={this.state.collections}
+            onCollection={this.state.collection}
+            toggleFunction={(input) => this.toggle('item', input)}
+            collectionFunction={(input) => this.toggle('collection', input)}
+          />
+        )}
      </>
    );
  }
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@ -40,8 +40,9 @@
    }

    img {
-      height: 80% !important;
-      width: auto !important;
+      object-fit: cover !important;
+      height: 50px !important;
+      width: 50px !important;
      border-radius: 12px;
      transition: 0.5s;

@ -407,7 +408,8 @@ p.author {
    justify-content: center;
  }

-  button.nice-button, a.nice-button{
+  button.nice-button,
+  a.nice-button {
    display: flex;
    align-items: center;
    gap: 15px;
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@ -191,7 +191,7 @@ h4 {
 .achievements {
  margin-top: 25px;
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
 }

@ -215,7 +215,7 @@ h4 {
  }
 }

-.statSection {
+.statSection.rightPanel {
  padding: 25px;
  @include themed() {
    border-radius: t($borderRadius);
--- a/src/components/modals/main/settings/sections/Experimental.jsx
+++ b/src/components/modals/main/settings/sections/Experimental.jsx
@ -6,6 +6,7 @@ import { TextField } from '@mui/material';

 import EventBus from 'modules/helpers/eventbus';
 import { values } from 'modules/helpers/settings/modals';
+import SettingsItem from '../SettingsItem';

 export default function ExperimentalSettings() {
  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@ -14,46 +15,50 @@ export default function ExperimentalSettings() {

  return (
    <>
-      <h2>{getMessage('modals.main.settings.sections.experimental.title')}</h2>
-      <p>{getMessage('modals.main.settings.sections.experimental.warning')}</p>
-      <h3>{getMessage('modals.main.settings.sections.experimental.developer')}</h3>
-      <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
-      <Slider
-        title="Debug timeout"
-        name="debugtimeout"
-        min="0"
-        max="5000"
-        default="0"
-        step="100"
-        marks={values('experimental')}
-        element=".other"
-      />
-      <p>Send Event</p>
-      <TextField
-        label={'Type'}
-        value={eventType}
-        onChange={(e) => setEventType(e.target.value)}
-        spellCheck={false}
-        varient="outlined"
-        InputLabelProps={{ shrink: true }}
-      />
-      <TextField
-        label={'Name'}
-        value={eventName}
-        onChange={(e) => setEventName(e.target.value)}
-        spellCheck={false}
-        varient="outlined"
-        InputLabelProps={{ shrink: true }}
-      />
-      <br />
+      <span className="mainTitle">
+        {getMessage('modals.main.settings.sections.experimental.title')}
+      </span>
+      <span className="subtitle">
+        {getMessage('modals.main.settings.sections.experimental.warning')}
+      </span>
+      <SettingsItem title={getMessage('modals.main.settings.sections.experimental.developer')}>
+        <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
+        <Slider
+          title="Debug timeout"
+          name="debugtimeout"
+          min="0"
+          max="5000"
+          default="0"
+          step="100"
+          marks={values('experimental')}
+          element=".other"
+        />
+        <p>Send Event</p>
+        <TextField
+          label={'Type'}
+          value={eventType}
+          onChange={(e) => setEventType(e.target.value)}
+          spellCheck={false}
+          varient="outlined"
+          InputLabelProps={{ shrink: true }}
+        />
+        <TextField
+          label={'Name'}
+          value={eventName}
+          onChange={(e) => setEventName(e.target.value)}
+          spellCheck={false}
+          varient="outlined"
+          InputLabelProps={{ shrink: true }}
+        />
+      </SettingsItem>
+      <SettingsItem title={getMessage('modals.main.settings.sections.experimental.developer')} final={true}>
      <button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>
        Send
      </button>
-      <br />
-      <br />
      <button className="reset" style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>
        Clear LocalStorage
      </button>
+      </SettingsItem>
    </>
  );
 }
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/src/components/modals/main/settings/sections/Stats.jsx
@ -9,6 +9,23 @@ import { FaTrophy } from 'react-icons/fa';

 import EventBus from 'modules/helpers/eventbus';
 import achievementsData from 'modules/helpers/settings/achievements.json';
+import translations from 'modules/helpers/settings/achievement_translations/index';
+
+const achievementLanguage = {
+  de_DE: translations.de_DE,
+  en_GB: translations.en_GB,
+  en_US: translations.en_US,
+  es: translations.es,
+  fr: translations.fr,
+  nl: translations.nl,
+  no: translations.no,
+  ru: translations.ru,
+  zh_CN: translations.zh_CN,
+  id_ID: translations.id_ID,
+  tr_TR: translations.tr_TR,
+};
+
+console.log(achievementLanguage.en_GB)

 export default class Stats extends PureComponent {
  constructor() {
@ -19,7 +36,7 @@ export default class Stats extends PureComponent {
    };
  }

-  getAchivements() {
+  getAchievements() {
    const achievements = this.state.achievements;
    achievements.forEach((achievement) => {
      switch (achievement.condition.type) {
@ -68,7 +85,8 @@ export default class Stats extends PureComponent {
      }
    });

-    this.getAchivements();
+    this.getAchievements();
+    this.forceUpdate();
  }

  componentWillUnmount() {
@ -99,12 +117,12 @@ export default class Stats extends PureComponent {
      );
    }

-    const achievementElement = (name, description) => (
+    const achievementElement = (key, name, description) => (
      <div className="achievement">
        <FaTrophy />
        <div className="achievementContent">
          <span>{name}</span>
-          <span className="subtitle">{description}</span>
+          <span className="subtitle">{achievementLanguage[localStorage.getItem('language')][key]}</span>
        </div>
      </div>
    );
@ -132,9 +150,9 @@ export default class Stats extends PureComponent {
              {this.getUnlockedCount()}/{this.state.achievements.length} Unlocked
            </span>
            <div className="achievements">
-              {this.state.achievements.map((achievement) => {
+              {this.state.achievements.map((achievement, index) => {
                if (achievement.achieved) {
-                  return achievementElement(achievement.name, achievement.description);
+                  return achievementElement(index, achievement.name, achievement.description);
                }
              })}
            </div>
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@ -17,16 +17,33 @@ export default class TimeSettings extends PureComponent {
    super();
    this.state = {
      timeType: localStorage.getItem('timeType') || 'digital',
-      colour: localStorage.getItem('minuteColour') || '#ffa500',
+      hourColour: localStorage.getItem('hourColour') || '#fff',
+      minuteColour: localStorage.getItem('minuteColour') || '#fff',
    };
  }

-  updateColour(event) {
-    const colour = event.target.value;
-    this.setState({ colour });
-    localStorage.setItem('minuteColour', colour);
+  updateHourColour(event) {
+    const hourColour = event.target.value;
+    this.setState({ hourColour });
+    localStorage.setItem('hourColour', hourColour);
  }

+  updateMinuteColour(event) {
+    const minuteColour = event.target.value;
+    this.setState({ minuteColour });
+    localStorage.setItem('minuteColour', minuteColour);
+  }
+
+  resetHourColour() {
+    localStorage.setItem('hourColour', '#fff')
+  }
+
+  resetMinuteColour() {
+    localStorage.setItem('minuteColour', '#fff')
+  }
+
+
+
  render() {
    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);

@ -102,24 +119,41 @@ export default class TimeSettings extends PureComponent {

    const verticalClock = (
      <>
-      <SettingsItem
-        title="Change minute text colour"
-        subtitle=""
-      >
-        <div className="colorPicker">
-          <input
-            type="color"
-            name="colour"
-            className="colour"
-            onChange={(event) => this.updateColour(event)}
-            value={this.state.colour}
-          ></input>
-          <label htmlFor={'colour'} className="customBackgroundHex">
-            {this.state.colour}
-          </label>
-        </div>
-      </SettingsItem>
-      {digitalSettings}
+        <SettingsItem title="Change minute text hour colour" subtitle="">
+          <div className="colourInput">
+            <input
+              type="color"
+              name="minuteColour"
+              className="minuteColour"
+              onChange={(event) => this.updateHourColour(event)}
+              value={this.state.hourColour}
+            ></input>
+            <label htmlFor={'hourColour'} className="customBackgroundHex">
+              {this.state.hourColour}
+            </label>
+          </div>
+          <span className="link" onClick={() => this.resetHourColour()}>
+            {getMessage('modals.main.settings.buttons.reset')}
+          </span>
+        </SettingsItem>
+        <SettingsItem title="Change minute text minute colour" subtitle="">
+          <div className="colourInput">
+            <input
+              type="color"
+              name="minuteColour"
+              className="minuteColour"
+              onChange={(event) => this.updateMinuteColour(event)}
+              value={this.state.minuteColour}
+            ></input>
+            <label htmlFor={'minuteColour'} className="customBackgroundHex">
+              {this.state.minuteColour}
+            </label>
+          </div>
+          <span className="link" onClick={() => this.resetMinuteColour()}>
+            {getMessage('modals.main.settings.buttons.reset')}
+          </span>
+        </SettingsItem>
+        {digitalSettings}
      </>
    );

--- a/src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx
+++ b/src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx
@ -3,14 +3,14 @@ import { MdPerson } from 'react-icons/md';
 export default function QuoteSkeleton() {
  return (
    <div className="quoteSkeleton">
-      <span className="subtitle">"Cheese good"</span>
+      <span className="subtitle">"Never gonna give you up"</span>
        <div className="skeletonAuthor">
          <div>
            <MdPerson />
          </div>
          <div className="text">
-            <span className="title">James May</span>
-            <span className="subtitle">Cheese Man</span>
+            <span className="title">Rick Astley</span>
+            <span className="subtitle">Music Genius</span>
          </div>
        </div>
    </div>
--- a/src/components/modals/main/tabs/Marketplace.jsx
+++ b/src/components/modals/main/tabs/Marketplace.jsx
@ -20,8 +20,8 @@ export default function Marketplace(props) {
      <div label={getMessage('modals.main.marketplace.preset_settings')} name="preset_settings">
        <MarketplaceTab type="preset_settings" />
      </div>
-      <div label="Collections" name="collection">
-        <MarketplaceTab type="collection" />
+      <div label="Collections" name="collections">
+        <MarketplaceTab type="collections" />
      </div>
    </Tabs>
  );
--- a/src/components/modals/welcome/Welcome.jsx
+++ b/src/components/modals/welcome/Welcome.jsx
@ -16,7 +16,7 @@ export default class WelcomeModal extends PureComponent {
    this.state = {
      image: './././icons/undraw_celebration.svg',
      currentTab: 0,
-      finalTab: 4,
+      finalTab: 5,
      buttonText: this.getMessage('modals.welcome.buttons.next'),
    };
    this.images = [
@ -24,6 +24,7 @@ export default class WelcomeModal extends PureComponent {
      './././icons/undraw_around_the_world_modified.svg',
      './././icons/undraw_add_files_modified.svg',
      './././icons/undraw_dark_mode.svg',
+      './././icons/undraw_making_art.svg',
      './././icons/undraw_private_data_modified.svg',
      './././icons/undraw_upgrade_modified.svg',
    ];
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@ -1,6 +1,15 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdCloudUpload, MdAutoAwesome, MdLightMode, MdDarkMode, MdCelebration, MdOpenInNew} from 'react-icons/md';
+import {
+  MdCloudUpload,
+  MdAutoAwesome,
+  MdLightMode,
+  MdDarkMode,
+  MdOutlineWavingHand,
+  MdOpenInNew,
+  MdOutlineWhatshot,
+  MdArchive,
+} from 'react-icons/md';
 import { FaDiscord, FaGithub } from 'react-icons/fa';

 import Radio from '../main/settings/Radio';
@ -132,7 +141,9 @@ export default class WelcomeSections extends PureComponent {

        <span className="link">#shareyourmue</span>
        <div className="welcomeNotice">
-          <div className="icon"><MdCelebration /></div>
+          <div className="icon">
+            <MdOutlineWavingHand />
+          </div>
          <div className="text">
            <span className="title">{this.getMessage('modals.welcome.sections.intro.title')}</span>
            <span className="subtitle">
@ -144,21 +155,25 @@ export default class WelcomeSections extends PureComponent {
          <div className="icon">
            <FaDiscord />
          </div>
-          <div className="text"> 
-            <span className="title">Join our discord</span>
-            <span className="subtitle">Join our community</span>
+          <div className="text">
+            <span className="title">Join our Discord</span>
+            <span className="subtitle">Talk with the Mue community and developers</span>
          </div>
-          <button><MdOpenInNew /> Join</button>
+          <button>
+            <MdOpenInNew /> Join
+          </button>
        </div>
        <div className="welcomeNotice">
          <div className="icon">
            <FaGithub />
          </div>
-          <div className="text"> 
-            <span className="title">Contribute on Github</span>
-            <span className="subtitle">Contribute</span>
+          <div className="text">
+            <span className="title">Contribute on GitHub</span>
+            <span className="subtitle">Report bugs, add features or donate</span>
          </div>
-          <button><MdOpenInNew /> Open</button>
+          <button>
+            <MdOpenInNew /> Open
+          </button>
        </div>
      </>
    );
@ -213,6 +228,25 @@ export default class WelcomeSections extends PureComponent {
      </>
    );

+    const style = (
+      <>
+        <span className='mainTitle'>Choose a theme</span>
+        <span className="subtitle">Mue currently offers the choice between the legacy styling and the newly released modern styling.</span>
+        <div className="themesToggleArea">
+          <div className="options">
+            <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
+              <MdArchive />
+              <span>Legacy</span>
+            </div>
+            <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
+              <MdOutlineWhatshot />
+              <span>Modern</span>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+
    const settings = (
      <>
        <span className="mainTitle">
@ -340,8 +374,10 @@ export default class WelcomeSections extends PureComponent {
      case 3:
        return theme;
      case 4:
-        return privacy;
+        return style;
      case 5:
+        return privacy;
+      case 6:
        return final;
      // 0
      default:
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@ -118,10 +118,12 @@ export default class Quote extends PureComponent {
        `https://en.wikipedia.org/w/api.php?action=query&titles=${author}&origin=*&prop=pageimages&format=json&pithumbsize=100`,
      )
    ).json();
+
    let authorimg, authorimglicense;
    try {
      authorimg =
        authorimgdata.query.pages[Object.keys(authorimgdata.query.pages)[0]].thumbnail.source;
+
      const authorimglicensedata = await (
        await fetch(
          `https://en.wikipedia.org/w/api.php?action=query&prop=imageinfo&iiprop=extmetadata&titles=File:${
@ -129,6 +131,7 @@ export default class Quote extends PureComponent {
          }&origin=*&format=json`,
        )
      ).json();
+
      const license =
        authorimglicensedata.query.pages[Object.keys(authorimglicensedata.query.pages)[0]]
          .imageinfo[0].extmetadata.LicenseShortName;
@ -136,6 +139,7 @@ export default class Quote extends PureComponent {
        authorimglicensedata.query.pages[Object.keys(authorimglicensedata.query.pages)[0]]
          .imageinfo[0].extmetadata.Attribution || 'Unknown';
      authorimglicense = `© ${photographer.value}. ${license.value}`;
+
      if (license.value === 'Public domain') {
        authorimglicense = null;
      } else if (photographer.value === 'Unknown' || !photographer) {
@ -458,7 +462,7 @@ export default class Quote extends PureComponent {
                    {this.state.authorOccupation !== 'Unknown' ? (
                      <span className="subtitle">{this.state.authorOccupation}</span>
                    ) : null}
-                    <span className="author-license">{this.state.authorimglicense}</span>
+                    <span className="author-license">{this.state.authorimglicense ? this.state.authorimglicense.replace(' undefined. ', ' ') : null}</span>
                  </div>
                ) : (
                  <div className="author-content whileLoading" ref={this.quoteauthor}>
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@ -21,6 +21,7 @@ export default class Clock extends PureComponent {
      ampm: '',
      nowGlobal: new Date(),
      minuteColour: localStorage.getItem('minuteColour'),
+      hourColour: localStorage.getItem('hourColour'),
    };
  }

@ -189,7 +190,7 @@ export default class Clock extends PureComponent {
        <>
          <span className="new-clock clock-container">
            {' '}
-            <div className="hour">{this.state.finalHour}</div>{' '}
+            <div className="hour" style={{ color: this.state.hourColour }}>{this.state.finalHour}</div>{' '}
            <div className="minute" style={{ color: this.state.minuteColour }}>{this.state.finalMinute}</div>{' '}
            <div className="seconds">{this.state.finalSeconds}</div>{' '}
          </span>
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@ -146,8 +146,9 @@ export default class Weather extends PureComponent {
  }

  render() {
+    const weatherType = localStorage.getItem('weatherType');
    const enabled = (setting) => {
-      return localStorage.getItem(setting) === 'true' && localStorage.getItem('weatherType') >= 3;
+      return localStorage.getItem(setting) === 'true' && weatherType >= 3;
    };

    if (
@ -213,7 +214,7 @@ export default class Weather extends PureComponent {
              </>
            ) : null}
            */}
-          {localStorage.getItem('weatherType') >= 3 && (
+          {weatherType >= 3 && (
            <span className="subtitle">
              {variables.language.getMessage(
                variables.languagecode,
@ -221,13 +222,13 @@ export default class Weather extends PureComponent {
              )}
            </span>
          )}
-          {enabled('cloudiness') ? (
+          {enabled('cloudiness') || weatherType === 3 ? (
            <span>
              <WiCloud className="weatherIcon" />
              {this.state.weather.cloudiness}%
            </span>
          ) : null}
-          {enabled('windspeed') ? (
+          {enabled('windspeed') || weatherType === 3 ? (
            <span>
              <WiWindy className="weatherIcon" />
              {this.state.weather.wind_speed}
@ -242,14 +243,14 @@ export default class Weather extends PureComponent {
              ) : null}
            </span>
          ) : null}
-          {enabled('atmosphericpressure') ? (
+          {enabled('atmosphericpressure') || weatherType === 3 ? (
            <span>
              <WiBarometer className="weatherIcon" />
              {this.state.weather.pressure}
              <span className="minmax"> hPa</span>
            </span>
          ) : null}
-          {enabled('weatherdescription') ? (
+          {enabled('weatherdescription') || weatherType === 3 ? (
            <span>
              <div className="weatherIcon">
                <WeatherIcon name={this.state.icon} />
@ -257,7 +258,7 @@ export default class Weather extends PureComponent {
              {this.state.weather.description}
            </span>
          ) : null}
-          {enabled('visibility') ? (
+          {enabled('visibility') || weatherType === 3 ? (
            <span>
              <MdDisabledVisible style={{ padding: '3px' }} />
              {variables.language.getMessage(variables.languagecode, 'widgets.weather.meters', {
@ -297,7 +298,7 @@ export default class Weather extends PureComponent {
            </div>
          )}
        </div>
-        {expandedInfo()}
+        {weatherType == 3 ? expandedInfo() : null}
      </div>
    );
  }
--- a/src/modules/helpers/settings/achievement_translations/de_DE.json
+++ b/src/modules/helpers/settings/achievement_translations/de_DE.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/en_GB.json
+++ b/src/modules/helpers/settings/achievement_translations/en_GB.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/en_US.json
+++ b/src/modules/helpers/settings/achievement_translations/en_US.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/es.json
+++ b/src/modules/helpers/settings/achievement_translations/es.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/fr.json
+++ b/src/modules/helpers/settings/achievement_translations/fr.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/id_ID.json
+++ b/src/modules/helpers/settings/achievement_translations/id_ID.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/index.js
+++ b/src/modules/helpers/settings/achievement_translations/index.js
@ -0,0 +1,27 @@
+import de_DE from './de_DE.json';
+import en_GB from './en_GB.json';
+import en_US from './en_US.json';
+import es from './es.json';
+import fr from './fr.json';
+import nl from './nl.json';
+import no from './no.json';
+import ru from './ru.json';
+import zh_CN from './zh_CN.json';
+import id_ID from './id_ID.json';
+import tr_TR from './tr_TR.json';
+
+const translations = {
+  de_DE,
+  en_GB,
+  en_US,
+  es,
+  fr,
+  nl,
+  no,
+  ru,
+  zh_CN,
+  id_ID,
+  tr_TR,
+};
+
+export default translations;
--- a/src/modules/helpers/settings/achievement_translations/nl.json
+++ b/src/modules/helpers/settings/achievement_translations/nl.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/no.json
+++ b/src/modules/helpers/settings/achievement_translations/no.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/ru.json
+++ b/src/modules/helpers/settings/achievement_translations/ru.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/tr_TR.json
+++ b/src/modules/helpers/settings/achievement_translations/tr_TR.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/modules/helpers/settings/achievement_translations/zh_CN.json
+++ b/src/modules/helpers/settings/achievement_translations/zh_CN.json
@ -0,0 +1,8 @@
+[
+    "Opened 10 tabs",
+    "Opened 39 tabs",
+    "Opened 100 tabs",
+    "Opened 305 tabs",
+    "Installed an add-on",
+    "Installed 5 add-ons"
+]
--- a/src/translations/de_DE.json
+++ b/src/translations/de_DE.json
@ -146,6 +146,7 @@
            "custom_author": "Benutzerdefinierter Autor",
            "author_img": "Show author image",
            "add": "Add quote",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Schaltflächen",
              "subtitle": "Choose which buttons to show on the quote",
@ -527,8 +528,15 @@
          "example": "Example",
          "other_title": "Add-on erstellen",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -544,7 +552,8 @@
            "name": "Name",
            "icon_url": "Icon URL",
            "screenshot_url": "Screenshot URL",
-            "description": "Beschreibung"
+            "description": "Beschreibung",
+            "example": "Download example"
          },
          "finish": {
            "title": "Fertig",
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@ -527,10 +527,15 @@
          "example": "Example",
          "other_title": "Create Add-on",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
-            "settings": "",
-            "photo_pack": "",
-            "quote_pack": ""
+            "settings": "This a shared settings ting.",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic."
          },
          "information": "Information",
          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
@ -544,7 +549,8 @@
            "name": "Name",
            "icon_url": "Icon URL",
            "screenshot_url": "Screenshot URL",
-            "description": "Description"
+            "description": "Description",
+            "example": "Download example"
          },
          "finish": {
            "title": "Finish",
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@ -146,6 +146,7 @@
            "custom_author": "Custom author",
            "author_img": "Show author image",
            "add": "Add quote",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Buttons",
              "subtitle": "Choose which buttons to show on the quote",
@ -526,8 +527,15 @@
          "example": "Example",
          "other_title": "Create Add-on",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "Name",
            "icon_url": "Icon URL",
            "screenshot_url": "Screenshot URL",
-            "description": "Description"
+            "description": "Description",
+            "example": "Download example"
          },
          "finish": {
            "title": "Finish",
--- a/src/translations/es.json
+++ b/src/translations/es.json
@ -146,6 +146,7 @@
            "custom_author": "Autor personalizado",
            "author_img": "Show author image",
            "add": "Añadir cita",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Botones",
              "subtitle": "Choose which buttons to show on the quote",
@ -526,8 +527,15 @@
          "example": "Example",
          "other_title": "Crear complemento",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "Nombre",
            "icon_url": "URL del icono",
            "screenshot_url": "URL de la captura de pantalla",
-            "description": "Descripción"
+            "description": "Descripción",
+            "example": "Download example"
          },
          "finish": {
            "title": "Acabar",
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@ -146,6 +146,7 @@
            "custom_author": "Auteur de devis personnalisé",
            "author_img": "Show author image",
            "add": "Add quote",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Boutons",
              "subtitle": "Choose which buttons to show on the quote",
@ -526,8 +527,15 @@
          "example": "Example",
          "other_title": "Create Add-on",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "Name",
            "icon_url": "Icon URL",
            "screenshot_url": "Screenshot URL",
-            "description": "Description"
+            "description": "Description",
+            "example": "Download example"
          },
          "finish": {
            "title": "Finish",
--- a/src/translations/id_ID.json
+++ b/src/translations/id_ID.json
@ -146,6 +146,7 @@
            "custom_author": "Penulis kustom",
            "author_img": "Show author image",
            "add": "Tambahkan kutipan",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Aksi",
              "subtitle": "Choose which buttons to show on the quote",
@ -526,8 +527,15 @@
          "example": "Example",
          "other_title": "Buat Add-on",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "Nama",
            "icon_url": "URL Ikon",
            "screenshot_url": "URL Screenshot",
-            "description": "Deskripsi"
+            "description": "Deskripsi",
+            "example": "Download example"
          },
          "finish": {
            "title": "Selesai",
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@ -146,6 +146,7 @@
            "custom_author": "Custom author",
            "author_img": "Show author image",
            "add": "Add quote",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Buttons",
              "subtitle": "Choose which buttons to show on the quote",
@ -526,8 +527,15 @@
          "example": "Example",
          "other_title": "Create Add-on",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "Name",
            "icon_url": "Icon URL",
            "screenshot_url": "Screenshot URL",
-            "description": "Description"
+            "description": "Description",
+            "example": "Download example"
          },
          "finish": {
            "title": "Finish",
--- a/src/translations/no.json
+++ b/src/translations/no.json
@ -146,6 +146,7 @@
            "custom_author": "Custom author",
            "author_img": "Show author image",
            "add": "Add quote",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Buttons",
              "subtitle": "Choose which buttons to show on the quote",
@ -526,8 +527,15 @@
          "example": "Example",
          "other_title": "Create Add-on",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "Name",
            "icon_url": "Icon URL",
            "screenshot_url": "Screenshot URL",
-            "description": "Description"
+            "description": "Description",
+            "example": "Download example"
          },
          "finish": {
            "title": "Finish",
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@ -146,6 +146,7 @@
            "custom_author": "Custom author",
            "author_img": "Show author image",
            "add": "Add quote",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Buttons",
              "subtitle": "Choose which buttons to show on the quote",
@ -526,8 +527,15 @@
          "example": "Example",
          "other_title": "Create Add-on",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "Name",
            "icon_url": "Icon URL",
            "screenshot_url": "Screenshot URL",
-            "description": "Description"
+            "description": "Description",
+            "example": "Download example"
          },
          "finish": {
            "title": "Finish",
--- a/src/translations/tr_TR.json
+++ b/src/translations/tr_TR.json
@ -146,6 +146,7 @@
            "custom_author": "Yazar Özelleştir",
            "author_img": "Yazar Resmini Göster",
            "add": "Alıntı Ekle.",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "Butonlar",
              "subtitle": "Alıntıda hangi butonların gösterileceğini seçin.",
@ -526,8 +527,15 @@
          "example": "Örnek",
          "other_title": "Eklenti Oluştur",
          "create_type": "{type} Paketi Oluştur",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "İsmi",
            "icon_url": "İkon URL'si ",
            "screenshot_url": "Arka plan URL'si",
-            "description": "Açıklama"
+            "description": "Açıklama",
+            "example": "Download example"
          },
          "finish": {
            "title": "Bitiş",
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@ -146,6 +146,7 @@
            "custom_author": "自定义出处",
            "author_img": "Show author image",
            "add": "继续添加名言",
+            "source_subtitle": "Choose where to get quotes from",
            "buttons": {
              "title": "下方按钮",
              "subtitle": "Choose which buttons to show on the quote",
@ -526,8 +527,15 @@
          "example": "Example",
          "other_title": "创建插件",
          "create_type": "Create {type} Pack",
+          "types": {
+            "settings": "Preset Settings Pack",
+            "photos": "Photo Pack",
+            "quotes": "Quotes Pack"
+          },
          "descriptions": {
            "settings": "",
+            "photos": "Collection of photos relating to a topic.",
+            "quotes": "Collection of quotes relating to a topic.",
            "photo_pack": "",
            "quote_pack": ""
          },
@ -543,7 +551,8 @@
            "name": "名称",
            "icon_url": "图标URL",
            "screenshot_url": "示例图片URL",
-            "description": "描述"
+            "description": "描述",
+            "example": "Download example"
          },
          "finish": {
            "title": "完成",