fix: custom search engine settings, marketplace translation

src/components/modals/main/Main.jsx

@@ -22,9 +22,7 @@ const renderLoader = (current) => (
         <div className="emptyMessage">
           <div className="loaderHolder">
             <div id="loader"></div>
-            <span className="subtitle">
-              {getMessage('modals.main.loading')}
-            </span>
+            <span className="subtitle">{getMessage('modals.main.loading')}</span>
           </div>
         </div>
       </div>

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

@@ -49,7 +49,12 @@ export default function Items({
           <span className="title">{getMessage('modals.main.marketplace.cant_find')}</span>
           <span className="subtitle">
             {getMessage('modals.main.marketplace.knowledgebase_one')}{' '}
-            <a className="link" target="_blank" href={variables.constants.KNOWLEDGEBASE} rel="noreferrer">
+            <a
+              className="link"
+              target="_blank"
+              href={variables.constants.KNOWLEDGEBASE}
+              rel="noreferrer"
+            >
               {getMessage('modals.main.marketplace.knowledgebase_two')}
             </a>{' '}
             {getMessage('modals.main.marketplace.knowledgebase_three')}

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

@@ -1,9 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { MdWifiOff, MdLocalMall, MdArrowBack, MdOutlineKeyboardArrowRight } from 'react-icons/md';
-
-import Tooltip from '../../../../helpers/tooltip/Tooltip';
+import { MdWifiOff, MdLocalMall, MdOutlineKeyboardArrowRight } from 'react-icons/md';
 
 import Item from '../Item';
 import Items from '../Items';
@@ -301,10 +299,9 @@ export default class Marketplace extends PureComponent {
             <div className="flexTopMarketplace">
               <span className="mainTitle" onClick={() => this.returnToMain()}>
                 <span className="backTitle">
-                  {this.getMessage('modals.main.settings.sections.background.title')}
+                  {this.getMessage('modals.main.navbar.marketplace')}
                 </span>
-                <MdOutlineKeyboardArrowRight />{' '}
-                Collection
+                <MdOutlineKeyboardArrowRight /> Collection
               </span>
             </div>
           </>

src/components/modals/main/scss/modules/_tab-content.scss

@@ -149,4 +149,4 @@ table {
   display: flex;
   flex-flow: column;
   gap: 25px;
-}
+}

src/components/modals/main/scss/settings/modules/tabs/_order.scss

@@ -100,7 +100,6 @@
   }
 
   .previewContainer {
-
   }
 
   .previewItem {
@@ -112,4 +111,4 @@
       font-size: 1em !important;
     }
   }
-}
+}

src/components/modals/main/settings/FileUpload.jsx

@@ -16,7 +16,7 @@ export default class FileUpload extends PureComponent {
         reader.readAsText(file, 'UTF-8');
         reader.onload = (e) => {
           return this.props.loadFunction(e.target.result);
-        }
+        };
       } else {
         // background upload
         const settings = {};

src/components/modals/main/settings/Header.jsx

@@ -19,7 +19,10 @@ export default class Header extends PureComponent {
         <div className="flexTopMarketplace">
           {this.props.backButton ? (
             <div className="returnButton" onClick={this.props.clickEffect}>
-              <Tooltip title={getMessage('modals.main.navbar.marketplace.product.buttons.back')} key="backArrow">
+              <Tooltip
+                title={getMessage('modals.main.navbar.marketplace.product.buttons.back')}
+                key="backArrow"
+              >
                 <MdArrowBack className="backArrow" />
               </Tooltip>
             </div>

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

@@ -109,7 +109,7 @@ export default class Changelog extends PureComponent {
       );
     }
 
-    if (this.state.error === true) { 
+    if (this.state.error === true) {
       return errorMessage(
         <>
           <MdOutlineWifiOff />

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

@@ -71,7 +71,9 @@ export default class GreetingSettings extends PureComponent {
             text={getMessage('modals.main.settings.sections.greeting.birthday_age')}
             category="greeting"
           />
-          <p style={{ marginRight: 'auto'}}>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
+          <p style={{ marginRight: 'auto' }}>
+            {getMessage('modals.main.settings.sections.greeting.birthday_date')}
+          </p>
           <input
             type="date"
             onChange={this.changeDate}

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

@@ -142,20 +142,16 @@ export default class Message extends PureComponent {
         </div>
         {this.state.messages.length === 0 ? (
           <div className="photosEmpty">
-          <div className="emptyNewMessage">
-            <MdOutlineTextsms />
-            <span className="title">
-              No messages
-            </span>
-            <span className="subtitle">
-              Go ahead and add some.
-            </span>
-            <button onClick={() => this.modifyMessage('add')}>
-            {this.getMessage('modals.main.settings.sections.message.add')}
-              <MdAdd />
-            </button>
+            <div className="emptyNewMessage">
+              <MdOutlineTextsms />
+              <span className="title">No messages</span>
+              <span className="subtitle">Go ahead and add some.</span>
+              <button onClick={() => this.modifyMessage('add')}>
+                {this.getMessage('modals.main.settings.sections.message.add')}
+                <MdAdd />
+              </button>
+            </div>
           </div>
-        </div>
         ) : null}
       </>
     );

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

@@ -104,13 +104,6 @@ export default class SearchSettings extends PureComponent {
             category="search"
             element=".other"
           />
-          <ul style={{ display: this.state.customDisplay }}>
-            <p style={{ marginTop: '0px' }}>
-              <span className="link" onClick={() => this.resetSearch()}>
-                {this.getMessage('modals.main.settings.buttons.reset')}
-              </span>
-            </p>
-          </ul>
           <Checkbox
             name="autocomplete"
             text={this.getMessage('modals.main.settings.sections.search.autocomplete')}
@@ -136,15 +129,22 @@ export default class SearchSettings extends PureComponent {
             </MenuItem>
           </Dropdown>
         </SettingsItem>
-        <SettingsItem title={this.getMessage('modals.main.settings.sections.search.custom')}>
-        <TextField
+        <div style={{ display: this.state.customDisplay }}>
+          <SettingsItem title={this.getMessage('modals.main.settings.sections.search.custom')}>
+            <TextField
               label={this.getMessage('modals.main.settings.sections.search.custom')}
               value={this.state.customValue}
               onInput={(e) => this.setState({ customValue: e.target.value })}
               varient="outlined"
               InputLabelProps={{ shrink: true }}
             />
-        </SettingsItem>
+            <p style={{ marginTop: '0px' }}>
+              <span className="link" onClick={() => this.resetSearch()}>
+                {this.getMessage('modals.main.settings.buttons.reset')}
+              </span>
+            </p>
+          </SettingsItem>
+        </div>
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
           subtitle={this.getMessage(

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

@@ -15,7 +15,7 @@ export default class Stats extends PureComponent {
     super();
     this.state = {
       stats: JSON.parse(localStorage.getItem('statsData')) || {},
-      achievements: achievementsData.achievements
+      achievements: achievementsData.achievements,
     };
   }
 
@@ -26,7 +26,7 @@ export default class Stats extends PureComponent {
         case 'tabsOpened':
           if (this.state.stats['tabs-opened'] >= achievement.condition.amount) {
             achievement.achieved = true;
-           }
+          }
           break;
         case 'addonInstall':
           if (this.state.stats.marketplace) {
@@ -41,7 +41,7 @@ export default class Stats extends PureComponent {
     });
 
     this.setState({
-      achievements
+      achievements,
     });
   }
 
@@ -128,14 +128,15 @@ export default class Stats extends PureComponent {
               {getMessage('modals.main.settings.sections.stats.achievements')}
             </span>
             <br />
-            <span className="subtitle">{this.getUnlockedCount()}/{this.state.achievements.length} Unlocked</span>
+            <span className="subtitle">
+              {this.getUnlockedCount()}/{this.state.achievements.length} Unlocked
+            </span>
             <div className="achievements">
               {this.state.achievements.map((achievement) => {
                 if (achievement.achieved) {
                   return achievementElement(achievement.name, achievement.description);
                 }
-              }
-              )}
+              })}
             </div>
           </div>
           <div className="statSection rightPanel">

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

@@ -207,7 +207,9 @@ export default class BackgroundSettings extends PureComponent {
     if (this.state.effects === true) {
       header = (
         <span className="mainTitle" onClick={() => this.setState({ effects: false })}>
-          <span className='backTitle'>{getMessage('modals.main.settings.sections.background.title')}</span>
+          <span className="backTitle">
+            {getMessage('modals.main.settings.sections.background.title')}
+          </span>
           <MdOutlineKeyboardArrowRight />{' '}
           {getMessage('modals.main.settings.sections.background.effects.title')}
         </span>
@@ -218,7 +220,9 @@ export default class BackgroundSettings extends PureComponent {
           className="mainTitle"
           onClick={() => this.setState({ backgroundSettingsSection: false })}
         >
-          <span className='backTitle'>{getMessage('modals.main.settings.sections.background.title')}{' '}</span>
+          <span className="backTitle">
+            {getMessage('modals.main.settings.sections.background.title')}{' '}
+          </span>
           <MdOutlineKeyboardArrowRight />{' '}
           {getMessage('modals.main.settings.sections.background.source.title')}
         </span>
@@ -284,28 +288,34 @@ export default class BackgroundSettings extends PureComponent {
                 </Dropdown>
               </div>
             </div>
-            {(this.state.backgroundType === 'api' ||
-          this.state.backgroundType === 'custom' ||
-          this.state.marketplaceEnabled) ? <><div className="moreSettings" onClick={() => this.setState({ effects: true })}>
-              <div className="left">
-                <MdOutlineAutoAwesome />
-                <div className="content">
-                  <span className="title">
-                    {getMessage('modals.main.settings.sections.background.effects.title')}
-                  </span>
-                  <span className="subtitle">
-                    {getMessage('modals.main.settings.sections.background.effects.subtitle')}
-                  </span>
+            {this.state.backgroundType === 'api' ||
+            this.state.backgroundType === 'custom' ||
+            this.state.marketplaceEnabled ? (
+              <>
+                <div className="moreSettings" onClick={() => this.setState({ effects: true })}>
+                  <div className="left">
+                    <MdOutlineAutoAwesome />
+                    <div className="content">
+                      <span className="title">
+                        {getMessage('modals.main.settings.sections.background.effects.title')}
+                      </span>
+                      <span className="subtitle">
+                        {getMessage('modals.main.settings.sections.background.effects.subtitle')}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="action">
+                    {' '}
+                    <MdOutlineKeyboardArrowRight />
+                  </div>
                 </div>
-              </div>
-              <div className="action">
-                {' '}
-                <MdOutlineKeyboardArrowRight />
-              </div>
-            </div></> : null}
+              </>
+            ) : null}
           </>
         ) : null}
-        {this.state.backgroundSettingsSection !== true && this.state.effects !== true && (this.state.backgroundType === 'api' ||
+        {this.state.backgroundSettingsSection !== true &&
+        this.state.effects !== true &&
+        (this.state.backgroundType === 'api' ||
           this.state.backgroundType === 'custom' ||
           this.state.marketplaceEnabled) ? (
           <SettingsItem
@@ -346,7 +356,10 @@ export default class BackgroundSettings extends PureComponent {
             <SettingsItem
               title={getMessage('modals.main.settings.sections.background.source.title')}
               subtitle={getMessage('modals.main.settings.sections.background.source.subtitle')}
-              final={this.state.backgroundType === 'random_colour' || this.state.backgroundType === 'random_gradient'}
+              final={
+                this.state.backgroundType === 'random_colour' ||
+                this.state.backgroundType === 'random_gradient'
+              }
             >
               <Dropdown
                 label={getMessage('modals.main.settings.sections.background.type.title')}

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

@@ -21,7 +21,8 @@ import Modal from 'react-modal';
 import CustomURLModal from './CustomURLModal';
 
 export default class CustomSettings extends PureComponent {
-  getMessage = (text, obj) => variables.language.getMessage(variables.languagecode, text, obj || {});
+  getMessage = (text, obj) =>
+    variables.language.getMessage(variables.languagecode, text, obj || {});
 
   constructor() {
     super();
@@ -224,13 +225,13 @@ export default class CustomSettings extends PureComponent {
         <div className="dropzone" ref={this.customDnd}>
           <div className="imagesTopBar">
             <div>
-            <MdAddPhotoAlternate />
-            <div>
-              <span className="title">Custom Images</span>
-              <span className="subtitle">Select images from your local computer</span>
+              <MdAddPhotoAlternate />
+              <div>
+                <span className="title">Custom Images</span>
+                <span className="subtitle">Select images from your local computer</span>
+              </div>
             </div>
-            </div>
-            <div className='topbarbuttons'>
+            <div className="topbarbuttons">
               <button onClick={() => this.uploadCustomBackground()}>
                 Upload
                 <MdOutlineFileUpload />
@@ -252,12 +253,10 @@ export default class CustomSettings extends PureComponent {
                     />
                     {this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
                     {this.state.customBackground.length > 0 ? (
-                      <button
-                        onClick={() => this.modifyCustomBackground('remove', index)}
-                      >
+                      <button onClick={() => this.modifyCustomBackground('remove', index)}>
                         Remove Image
                         <MdCancel />
-                    </button>
+                      </button>
                     ) : null}
                   </div>
                 ))}
@@ -272,16 +271,13 @@ export default class CustomSettings extends PureComponent {
                     )}
                   </span>
                   <span className="subtitle">
-                    {this.getMessage(
-                      'modals.main.settings.sections.background.source.formats',
-                      {
-                        list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
-                      },
-                    )}
+                    {this.getMessage('modals.main.settings.sections.background.source.formats', {
+                      list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
+                    })}
                   </span>
                   <button onClick={() => this.uploadCustomBackground()}>
                     {this.getMessage('modals.main.settings.sections.background.source.select')}
-                    <MdFolder/>
+                    <MdFolder />
                   </button>
                 </div>
               </div>

src/modules/helpers/settings/achievements.json

@@ -1,52 +1,52 @@
 {
-    "achievements": [
-        {
-            "name": "10/10 IGN",
-            "description": "Opened 10 tabs",
-            "condition": {
-                "type": "tabsOpened",
-                "amount": 10
-            }
-        },
-        {
-            "name": "Thank you",
-            "description": "Opened 39 tabs",
-            "condition": {
-                "type": "tabsOpened",
-                "amount": 39
-            }
-        },
-        {
-            "name": "Seasoning",
-            "description": "Opened 100 tabs",
-            "condition": {
-                "type": "tabsOpened",
-                "amount": 100
-            }
-        },
-        {
-            "name": "Mr Worldwide",
-            "description": "Opened 305 tabs",
-            "condition": {
-                "type": "tabsOpened",
-                "amount": 305
-            }
-        },
-        {
-            "name": "Average Linux user",
-            "description": "Installed an add-on",
-            "condition": {
-                "type": "addonInstall",
-                "amount": 1
-            }
-        },
-        {
-            "name": "Fully riced",
-            "description": "Installed 5 add-ons",
-            "condition": {
-                "type": "addonInstall",
-                "amount": 5
-            }
-        }
-    ]
-}
+  "achievements": [
+    {
+      "name": "10/10 IGN",
+      "description": "Opened 10 tabs",
+      "condition": {
+        "type": "tabsOpened",
+        "amount": 10
+      }
+    },
+    {
+      "name": "Thank you",
+      "description": "Opened 39 tabs",
+      "condition": {
+        "type": "tabsOpened",
+        "amount": 39
+      }
+    },
+    {
+      "name": "Seasoning",
+      "description": "Opened 100 tabs",
+      "condition": {
+        "type": "tabsOpened",
+        "amount": 100
+      }
+    },
+    {
+      "name": "Mr Worldwide",
+      "description": "Opened 305 tabs",
+      "condition": {
+        "type": "tabsOpened",
+        "amount": 305
+      }
+    },
+    {
+      "name": "Average Linux user",
+      "description": "Installed an add-on",
+      "condition": {
+        "type": "addonInstall",
+        "amount": 1
+      }
+    },
+    {
+      "name": "Fully riced",
+      "description": "Installed 5 add-ons",
+      "condition": {
+        "type": "addonInstall",
+        "amount": 5
+      }
+    }
+  ]
+}

src/modules/languages.json

@@ -37,6 +37,6 @@
   },
   {
     "name": "Turkish",
-    "value" : "tr_TR"
+    "value": "tr_TR"
   }
 ]

src/scss/_variables.scss

@@ -134,7 +134,7 @@ $themes: (
         &:hover {
           color: t($color);
         }
-      }  
+      }
     }
   }