refactor: minor changes to tab and prettier

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

@@ -180,7 +180,7 @@ export default class BackgroundSettings extends PureComponent {
               {
                 name: 'Unsplash',
                 value: 'unsplash',
-              }
+              },
             ]}
             name="backgroundAPI"
             category="background"

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

@@ -38,10 +38,11 @@ class Tabs extends PureComponent {
   }
 
   render() {
-    const display = localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none';
-
     const reminderInfo = (
-      <div className="reminder-info" style={{ display }}>
+      <div
+        className="reminder-info"
+        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
+      >
         <div className="shareHeader">
           <span className="title">
             {variables.getMessage('modals.main.settings.reminder.title')}
@@ -60,24 +61,6 @@ class Tabs extends PureComponent {
       </div>
     );
 
-    let settingsActive = '';
-    let addonsActive = '';
-    let marketplaceActive = '';
-
-    switch (this.props.current) {
-      case 'settings':
-        settingsActive = ' navbar-item-active';
-        break;
-      case 'addons':
-        addonsActive = ' navbar-item-active';
-        break;
-      case 'marketplace':
-        marketplaceActive = ' navbar-item-active';
-        break;
-      default:
-        break;
-    }
-
     return (
       <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
         <ul className="sidebar">
@@ -96,21 +79,31 @@ class Tabs extends PureComponent {
           <ErrorBoundary>
             <div className="modalNavbar">
               <button
-                className={'navbar-item' + settingsActive}
+                className={
+                  this.props.current === 'settings'
+                    ? 'navbar-item navbar-item-active'
+                    : 'navbar-item'
+                }
                 onClick={() => this.props.changeTab('settings')}
               >
                 <MdSettings />
-                <span> {variables.getMessage('modals.main.navbar.settings')}</span>
+                <span>{variables.getMessage('modals.main.navbar.settings')}</span>
               </button>
               <button
-                className={'navbar-item' + addonsActive}
+                className={
+                  this.props.current === 'addons' ? 'navbar-item navbar-item-active' : 'navbar-item'
+                }
                 onClick={() => this.props.changeTab('addons')}
               >
                 <MdOutlineExtension />
                 <span>{variables.getMessage('modals.main.navbar.addons')}</span>
               </button>
               <button
-                className={'navbar-item' + marketplaceActive}
+                className={
+                  this.props.current === 'marketplace'
+                    ? 'navbar-item navbar-item-active'
+                    : 'navbar-item'
+                }
                 onClick={() => this.props.changeTab('marketplace')}
               >
                 <MdOutlineShoppingBasket />

src/components/widgets/background/Maximise.jsx

@@ -76,7 +76,11 @@ class Maximise extends PureComponent {
       <Tooltip
         title={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
       >
-        <button style={{ fontSize: this.props.fontSize }} onClick={this.maximise} aria-label={variables.getMessage('modals.main.settings.sections.background.buttons.view')}>
+        <button
+          style={{ fontSize: this.props.fontSize }}
+          onClick={this.maximise}
+          aria-label={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
+        >
           <MdCropFree className="topicons" />
         </button>
       </Tooltip>

src/components/widgets/quote/Quote.jsx

@@ -25,28 +25,40 @@ export default class Quote extends PureComponent {
   buttons = {
     share: (
       <Tooltip title={variables.getMessage('widgets.quote.share')}>
-        <button onClick={() => this.setState({ shareModal: true })} aria-label={variables.getMessage('widgets.quote.share')}>
+        <button
+          onClick={() => this.setState({ shareModal: true })}
+          aria-label={variables.getMessage('widgets.quote.share')}
+        >
           <MdIosShare className="copyButton" />
         </button>
       </Tooltip>
     ),
     copy: (
       <Tooltip title={variables.getMessage('widgets.quote.copy')}>
-        <button onClick={() => this.copyQuote()} aria-label={variables.getMessage('widgets.quote.copy')}>
+        <button
+          onClick={() => this.copyQuote()}
+          aria-label={variables.getMessage('widgets.quote.copy')}
+        >
           <MdContentCopy className="copyButton" />
         </button>
       </Tooltip>
     ),
     unfavourited: (
       <Tooltip title={variables.getMessage('widgets.quote.favourite')}>
-        <button onClick={() => this.favourite()} aria-label={variables.getMessage('widgets.quote.favourite')}>
+        <button
+          onClick={() => this.favourite()}
+          aria-label={variables.getMessage('widgets.quote.favourite')}
+        >
           <MdStarBorder className="copyButton" />
         </button>
       </Tooltip>
     ),
     favourited: (
       <Tooltip title={variables.getMessage('widgets.quote.unfavourite')}>
-        <button onClick={() => this.favourite()} aria-label={variables.getMessage('widgets.quote.unfavourite')}>
+        <button
+          onClick={() => this.favourite()}
+          aria-label={variables.getMessage('widgets.quote.unfavourite')}
+        >
           <MdStar className="copyButton" />
         </button>
       </Tooltip>

src/components/widgets/search/Search.jsx

@@ -100,7 +100,11 @@ export default class Search extends PureComponent {
 
     if (localStorage.getItem('voiceSearch') === 'true') {
       microphone = (
-        <button onClick={this.startSpeechRecognition} ref={this.micIcon} aria-label="Microphone Search">
+        <button
+          onClick={this.startSpeechRecognition}
+          ref={this.micIcon}
+          aria-label="Microphone Search"
+        >
           <MdMic className="micIcon" />
         </button>
       );

src/components/widgets/weather/Expanded.jsx

@@ -52,8 +52,8 @@ function Expanded({ state, weatherType, variables }) {
             {state.weather.wind_speed}
             <span className="minmax">m/s</span>{' '}
             {enabled('windDirection') ? (
-              <div style={{ fontSize: "25px", display: "grid" }}>
-              <WindDirectionIcon className="weatherIcon" degrees={state.weather.wind_degrees} />
+              <div style={{ fontSize: '25px', display: 'grid' }}>
+                <WindDirectionIcon className="weatherIcon" degrees={state.weather.wind_degrees} />
               </div>
             ) : null}
           </span>

src/modules/translations.js

@@ -41,17 +41,17 @@ export function initTranslations(locale) {
 }
 
 export const translations = {
-    de_DE,
-    en_GB,
-    en_US,
-    es,
-    es_419,
-    fr,
-    nl,
-    no,
-    ru,
-    zh_CN,
-    id_ID,
-    tr_TR,
-    pt_BR,
-}
+  de_DE,
+  en_GB,
+  en_US,
+  es,
+  es_419,
+  fr,
+  nl,
+  no,
+  ru,
+  zh_CN,
+  id_ID,
+  tr_TR,
+  pt_BR,
+};

src/scss/index.scss

@@ -119,15 +119,14 @@ body {
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
-
 .statsTopBar {
   display: flex;
-  justify-content: space-between; 
+  justify-content: space-between;
   align-items: center;
   button {
     margin-bottom: 15px;
     flex-flow: row !important;
-    padding-left: 20px; 
+    padding-left: 20px;
     padding-right: 20px;
   }
-}
+}

vite.config.js

@@ -95,7 +95,7 @@ export default defineConfig({
       components: path.resolve(__dirname, './src/components'),
       modules: path.resolve(__dirname, './src/modules'),
       translations: path.resolve(__dirname, './src/translations'),
-      scss: path.resolve(__dirname, './src/scss')
+      scss: path.resolve(__dirname, './src/scss'),
     },
   },
 });