More cleanup (some marketplace stuff broken, will fix later)

src/App.jsx

@@ -20,7 +20,7 @@ import merge from 'lodash.merge';
 // Modals are lazy loaded as the user won't use them every time they open a tab
 const MainModal = React.lazy(() => import('./components/modals/MainModal'));
 const Update = React.lazy(() => import('./components/modals/Update'));
-//const Welcome = React.lazy(() => import('./components/modals/Welcome'));
+const Welcome = React.lazy(() => import('./components/modals/Welcome'));
 const renderLoader = () => <div></div>;
 
 export default class App extends React.PureComponent {
@@ -28,20 +28,13 @@ export default class App extends React.PureComponent {
     super(...args);
     this.state = {
       mainModal: false,
-      updateModal: false
+      updateModal: false,
+      welcomeModal: false
     };
   }
 
   componentDidMount() {
     if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings();
-
-    const theme = localStorage.getItem('theme'); // Marketplace themes (WIP)
-    if (theme) {
-      const style = document.createElement('link');
-      style.href = theme;
-      style.rel = 'stylesheet';
-      document.head.appendChild(style);
-    }
   }
 
   // Render all the components
@@ -84,9 +77,9 @@ export default class App extends React.PureComponent {
                 language={language.update}
                 modalClose={() => this.setState({ updateModal: false })} />
             </Modal>
-            {/* <Modal onRequestClose={() => this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
+            <Modal onRequestClose={() => this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
               <Welcome modalClose={() => this.setState({ welcomeModal: false })} />
-             </Modal> */ }
+            </Modal>
           </React.Suspense>
         </div>
       </React.Fragment>

src/components/modals/Welcome.jsx

@@ -3,22 +3,15 @@ import EmailIcon from '@material-ui/icons/Email';
 
 export default class Welcome extends React.PureComponent {
   render() {
-    return <div className='welcomeContent'>
+    return (
+      <div className='welcomeContent'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <div className='welcomeModalText'>
           <h2 className='subtitle'>Welcome to</h2>
           <h1 className='welcometitle'>Mue Tab</h1>
-          <img alt='celebration' style={{'height': '200px', 'width': 'auto'}} src='./././icons/undraw_celebration.svg' />
+          <img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} src='./././icons/undraw_celebration.svg' />
           <h2 className='subtitle'>Information</h2>
           <p>Thank you for downloading Mue Tab,<br/> we hope you enjoy your time with our extension.</p>
-          <h2 className='subtitle'>Tutorials</h2>
-          <a href=''>General Start</a>
-          <br/>
-          <a href='https://blog.muetab.xyz/welcome-to-marketplace/'>Marketplace</a>
-          <br/>
-          <a href=''>Submitting Photos</a>
-          <br/>
-          <a href=''>Settings</a>
           <h2 className='subtitle'>Support</h2>
          {/* <img alt='twitter' href='https://twitter.com/getmue' className='icon' src=''/>
           <img alt='discord' href='https://discord.gg/kJsufA9' className='icon' src=''/> */}
@@ -26,6 +19,7 @@ export default class Welcome extends React.PureComponent {
           <br/>
           <button className='close' onClick={this.props.modalClose}>Close</button>
         </div>
-      </div>;
+      </div>
+      );
     }
 }

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -156,28 +156,30 @@ export default class BackgroundSettings extends React.PureComponent {
       const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
       let gradientInputs;
       if (gradientHasMoreThanOneColour) {
-        if (this.GradientPickerInitalState === undefined) {
-          this.InitializeColorPickerState(this.state.gradientSettings);
-        }
-        gradientInputs = (<ColorPicker
-          onStartChange={color => this.onColorPickerChange(color, 'start')}
-          onChange={color => this.onColorPickerChange(color, 'change')}
-          onEndChange={color => this.onColorPickerChange(color, 'end')}
+        if (this.GradientPickerInitalState === undefined) this.InitializeColorPickerState(this.state.gradientSettings);
+        gradientInputs = (
+        <ColorPicker
+          onStartChange={(color) => this.onColorPickerChange(color, 'start')}
+          onChange={(color) => this.onColorPickerChange(color, 'change')}
+          onEndChange={(color) => this.onColorPickerChange(color, 'end')}
           gradient={this.GradientPickerInitalState}
-          isGradient />);
+          isGradient/>
+        );
       } else {
         gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
           return (
             <div key={i}>
-              <input id={'colour_' + i} type='color' name='colour' className="colour" onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
-              <label htmlFor={'colour_' + i} className="customBackgroundHex">{g.colour}</label>
+              <input id={'colour_' + i} type='color' name='colour' className='colour' onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
+              <label htmlFor={'colour_' + i} className='customBackgroundHex'>{g.colour}</label>
             </div>);
         });
       }
       colourSettings = (
         <div>
           {gradientInputs}
-          {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled && !gradientHasMoreThanOneColour ? (<button type="button" className="add" onClick={this.addColour}>{this.props.language.background.add_colour}</button>) : null}
+          {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled &&
+           !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.background.add_colour}</button>) : null
+          }
         </div>);
     }
     return (
@@ -193,8 +195,7 @@ export default class BackgroundSettings extends React.PureComponent {
               label={this.props.language.background.api}
               name='backgroundapi'
               id='backgroundAPI'
-              onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}
-            >
+              onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
               <option className='choices' value='mue'>Mue</option>
               <option className='choices' value='unsplash'>Unsplash</option>
             </Dropdown>

src/components/modals/tabs/Addons.jsx

@@ -23,7 +23,10 @@ export default class Addons extends React.PureComponent {
                 version: '1.0.0',
                 icon: ''
             },
-            button: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>
+            button: ''
+        }
+        this.buttons = {
+            uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>,
         }
     }
 
@@ -46,29 +49,21 @@ export default class Addons extends React.PureComponent {
             document.getElementById('item').style.display = 'block';
             document.getElementById('marketplace').style.display = 'none';
          } else {
-            this.setState({
-                button: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>
-            });
             document.getElementById('marketplace').style.display = 'block';
             document.getElementById('item').style.display = 'none';
         }
+        this.setState({ button: this.buttons.uninstall });
     }
 
     uninstall() {
         let type, data = this.state.current_data.content.type;
         switch (data) {
-            case 'photos':
-                type = 'photo_packs';
-                break;
-            case 'quotes':
-                type = 'quote_packs';
-                break;
-            default:
-                type = this.state.current_data.type;
-                break;
+            case 'photos': type = 'photo_packs'; break;
+            case 'quotes': type = 'quote_packs'; break;
+            default: type = this.state.current_data.type; break;
         }
         MarketplaceFunctions.uninstall(this.state.current_data.name, type);
-        toast(this.props.toastLanguage.removed);
+        toast(this.props.toastLanguage.uninstalled);
         this.setState({
             button: '',
             installed: JSON.parse(localStorage.getItem('installed'))
@@ -76,28 +71,19 @@ export default class Addons extends React.PureComponent {
     }
 
     install(input) {
-        let button;
         MarketplaceFunctions.install(input.type, input, true);
         toast(this.props.toastLanguage.installed);
-        button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>;
         this.setState({
-            button: button,
+            button: this.buttons.uninstall,
             installed: JSON.parse(localStorage.getItem('installed'))
         });
     }
 
   componentDidMount() {
     document.getElementById('file-input').onchange = (e) => {
-        const file = e.target.files[0];
-        if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`);
-
         const reader = new FileReader();
-        reader.readAsText(file, 'UTF-8');
-
-        reader.onload = (readerEvent) => {
-          const content = JSON.parse(readerEvent.target.result);
-          this.install(content);
-        };
+        reader.readAsText(e.target.files[0], 'UTF-8');
+        reader.onload = (readerEvent) => this.install(JSON.parse(readerEvent.target.result));
     };
 
     this.setState({ installed: JSON.parse(localStorage.getItem('installed')) });
@@ -107,20 +93,22 @@ export default class Addons extends React.PureComponent {
     let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />
 
     if (this.state.installed.length === 0) {
-         content = <div className='items'>
-               <div className='emptyMessage'>
-                    <LocalMallIcon />
-                    <h1>{this.props.language.empty.title}</h1>
-                    <p className='description'>{this.props.language.empty.description}</p>
-                    <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
-              </div>
-           </div>;
+         content = (
+           <div className='items'>
+            <div className='emptyMessage'>
+                 <LocalMallIcon/>
+                 <h1>{this.props.language.empty.title}</h1>
+                 <p className='description'>{this.props.language.empty.description}</p>
+                 <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
+           </div>
+          </div>
+        );
     }
 
     return (
        <div>
          <div id='marketplace'>
-          <input id='file-input' type='file' name='name' className='hidden' />
+          <input id='file-input' type='file' name='name' className='hidden' accept='application/json' />
           <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
           <h1>{this.props.language.added}</h1>
           {content}

src/components/modals/tabs/Marketplace.jsx

@@ -8,59 +8,48 @@ import * as Constants from '../../../modules/constants';
 import Items from '../marketplace/Items';
 
 export default class Marketplace extends React.PureComponent {
-    constructor(...args) {
-        super(...args);
-        this.state = {
-            themes: [],
-            settings: [],
-            photo_packs: [],
-            quote_packs: [],
-            see_more: [],
-            see_more_type: '',
-            current_data: {
-                type: '',
-                name: '',
-                content: {}
-            },
-            button: '',
-            featured: {},
-            done: false,
-            item_data: {
-                name: 'Name',
-                author: 'Author',
-                description: 'Description',
-                updated: '???',
-                version: '1.0.0',
-                icon: ''
-            }
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        settings: [],
+        photo_packs: [],
+        quote_packs: [],
+        see_more: [],
+        see_more_type: '',
+        current_data: {
+            type: '',
+            name: '',
+            content: {}
+        },
+        button: '',
+        featured: {},
+        done: false,
+        item_data: {
+            name: 'Name',
+            author: 'Author',
+            description: 'Description',
+            updated: '???',
+            version: '1.0.0',
+            icon: ''
         }
-
-        this.offlineHTML = <div id='marketplace'>
-            <div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
-                <WifiOffIcon />
-                <h1>{this.props.language.offline.title}</h1>
-                <p className='description'>{this.props.language.offline.description}</p>
-            </div>
-        </div>;
+      }
+      this.buttons = {
+          uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.props.language.product.buttons.remove}</button>,
+          install: <button className='addToMue' onClick={() => this.manage('install')}>{this.props.language.product.buttons.addtomue}</button>
+      }
     }
 
-    async toggle(type, type2, data) {
-        if (type === 'seemore') {
+  async toggle(type, type2, data) {
+    switch (type) {
+        case 'seemore':
             document.getElementById('marketplace').style.display = 'none';
             document.getElementById('seemore').style.display = 'block';
-            return this.setState({
-                see_more: this.state[type2],
-                see_more_type: type2
-            });
-        }
-
-        if (type === 'item') {
+            this.setState({ see_more: this.state[type2], see_more_type: type2 });
+            break;
+        case 'item':
             let info;
-            try {
-                info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json();
-            } catch (e) {
-                return toast(this.props.toastLanguage.error);
-            }
+            try { info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); }
+            catch (e) { return toast(this.props.toastLanguage.error); }
 
             this.setState({
                 current_data: { type: type2, name: data, content: info },
@@ -74,111 +63,117 @@ export default class Marketplace extends React.PureComponent {
                 }
             });
 
+            let button = this.buttons.install;
+            const installed = JSON.parse(localStorage.getItem('installed'));
+            if (installed.some(item => item.name === data)) button = this.buttons.uninstall;
+            this.setState({ button: button });
+
             document.getElementById('marketplace').style.display = 'none';
             document.getElementById('seemore').style.display = 'none';
             document.getElementById('item').style.display = 'block';
-
-            let button = <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>;
-            const installed = JSON.parse(localStorage.getItem('installed'));
-            if (installed.some(item => item.name === data)) button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
-            this.setState({ button: button });
-        } else {
+            break;
+        default:
             document.getElementById('marketplace').style.display = 'block';
             document.getElementById('item').style.display = 'none';
             document.getElementById('seemore').style.display = 'none';
+            break;
         }
    }
 
-    async getItems() {
-        const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
-        const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
-        this.setState({
-            themes: data.data.themes,
-            settings: data.data.settings,
-            photo_packs: data.data.photo_packs,
-            quote_packs: data.data.quote_packs,
-            see_more: data.data.photo_packs,
-            featured: featured.data,
-            done: true
-        });
-    }
+  async getItems() {
+    const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
+    const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
+    this.setState({
+        settings: data.data.settings,
+        photo_packs: data.data.photo_packs,
+        quote_packs: data.data.quote_packs,
+        see_more: data.data.photo_packs,
+        featured: featured.data,
+        done: true
+    });
+  }
 
-    install() {
-        let button;
-        MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data);
-        toast(this.props.toastLanguage.installed);
-        button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
-        this.setState({ button: button });
+  manage(type) {
+    switch (type) {
+        case 'install': MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); break;
+        case 'uninstall': MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); break;
+        default: break;
     }
+    toast(this.props.toastLanguage[type + 'ed']);
+    let button = this.buttons.install;
+    if (type === 'install') button = this.buttons.uninstall;
+    this.setState({ button: button });
+  }
 
-    uninstall() {
-        MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.type);
-        toast(this.props.toastLanguage.removed);
-        this.setState({
-            button: <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>
-        });
-    }
-
-    componentDidMount() {
-      if (navigator.onLine === false) return;
-      this.getItems();
-    }
+  componentDidMount() {
+    if (navigator.onLine === false) return;
+    this.getItems();
+  }
 
   render() {
-    if (navigator.onLine === false) return this.offlineHTML;
-    if (this.state.done === false) {
+    const returnMessage = (msg) => {
         return (
             <div id='marketplace'>
               <div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
-                <h1>{this.props.updateLanguage.loading}</h1>
+                {msg}
               </div>
             </div>
         );
     }
 
+    if (navigator.onLine === false) {
+        return returnMessage(
+            <React.Fragment>
+                <WifiOffIcon/>
+                <h1>{this.props.language.offline.title}</h1>
+                <p className='description'>{this.props.language.offline.description}</p>
+            </React.Fragment>
+        );
+    }
+
+    if (this.state.done === false) return returnMessage(<h1>{this.props.updateLanguage.loading}</h1>)
+
     return (
         <React.Fragment>
             <div id='marketplace'>
-                 <div className='featured' style={{backgroundColor: this.state.featured.colour}}>
+                <div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
                     <p>{this.state.featured.title}</p>
                     <h1>{this.state.featured.name}</h1>
                     <button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
-                 </div>
-                 <Items
+                </div>
+                <Items
                    title={this.props.language.photo_packs}
                    seeMoreTitle={this.props.language.see_more}
                    items={this.state.photo_packs.slice(0, 3)}
                    toggleFunction={(input) => this.toggle('item', 'photo_packs', input)}
                    seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} />
-                 <Items
+                <Items
                    title={this.props.language.preset_settings}
                    seeMoreTitle={this.props.language.see_more}
                    items={this.state.settings.slice(0, 3)}
                    toggleFunction={(input) => this.toggle('item', 'settings', input)}
                    seeMoreFunction={() => this.toggle('seemore', 'settings')} />
-                 <Items
+                <Items
                    title={this.props.language.quote_packs}
                    seeMoreTitle={this.props.language.see_more}
                    items={this.state.quote_packs.slice(0, 3)}
                    toggleFunction={(input) => this.toggle('item', 'quote_packs', input)}
                    seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} />
-             </div>
-             <Item
+            </div>
+            <Item
                button={this.state.button}
                data={this.state.item_data}
                content={this.state.current_data}
-               function={() => this.toggle()} language={this.props.language.product}
-             />
-             <div id='seemore'>
+               function={() => this.toggle()} language={this.props.language.product} />
+            <div id='seemore'>
                 <ArrowBackIcon className='backArrow' onClick={() => this.toggle()} />
                 <Items
                   title={this.props.language.see_more}
                   seeMoreTitle={this.props.language.see_more}
                   toggleFunction={(input) => this.toggle('item', this.state.see_more_type, input)}
-                  items={this.state.see_more}
-                />
-             </div>
+                  items={this.state.see_more} />
+            </div>
         </React.Fragment>
-      )
+      );
     }
 }

src/components/widgets/Date.jsx

@@ -63,6 +63,6 @@ export default class DateWidget extends React.PureComponent {
   }
 
   render() {
-    return <span style={{ 'text-transform': 'capitalize', 'font-weight': 'bold'}}>{this.state.date}</span>
+    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold'}}>{this.state.date}</span>
   }
 }

src/modules/helpers/background/hexToRgb.js

@@ -10,7 +10,6 @@ export default function hexToRgb(value) {
 
     if (valid) {
         if (value[0] === '#') value = value.slice(1, value.length);
-
         if (value.length === 3) value = value.replace(regexp, '$1$1$2$2$3$3');
 
         const red = parseInt(value.substr(0, 2), 16);

src/modules/helpers/background/rgbToHsv.js

@@ -1,16 +1,14 @@
 export default function rgbToHSv({ red, green, blue }) {
-    let rr;
-    let gg;
-    let bb;
-    let h;
-    let s;
+    let rr, gg, bb, h, s;
 
     const rabs = red / 255;
     const gabs = green / 255;
     const babs = blue / 255;
+
     const v = Math.max(rabs, gabs, babs);
     const diff = v - Math.min(rabs, gabs, babs);
     const diffc = c => (v - c) / 6 / diff + 1 / 2;
+
     if (diff === 0) {
         h = 0;
         s = 0;
@@ -20,18 +18,11 @@ export default function rgbToHSv({ red, green, blue }) {
         gg = diffc(gabs);
         bb = diffc(babs);
 
-        if (rabs === v) {
-            h = bb - gg;
-        } else if (gabs === v) {
-            h = (1 / 3) + rr - bb;
-        } else if (babs === v) {
-            h = (2 / 3) + gg - rr;
-        }
-        if (h < 0) {
-            h += 1;
-        } else if (h > 1) {
-            h -= 1;
-        }
+        if (rabs === v) h = bb - gg;
+        else if (gabs === v)  h = (1 / 3) + rr - bb;
+        else if (babs === v) h = (2 / 3) + gg - rr;
+        if (h < 0)  h += 1;
+        else if (h > 1)  h -= 1;
     }
 
     return {

src/modules/helpers/background/setRgba.js

@@ -10,9 +10,7 @@ export default function setRGBA(red, green, blue, alpha) {
             blue: blue | 0,
         };
 
-        if (isValidRGBValue(alpha) === true) {
-            color.alpha = alpha | 0;
-        }
+        if (isValidRGBValue(alpha) === true) color.alpha = alpha | 0;
 
         // RGBToHSL(color.r, color.g, color.b);
 

src/modules/helpers/marketplace.js

@@ -7,39 +7,31 @@ export default class MarketplaceFunctions {
     }
 
     static uninstall(name, type) {
-        let installed = JSON.parse(localStorage.getItem('installed'));
-
-        const uninstallStuff = () => {
-          for (let i = 0; i < installed.length; i++) {
-              if (installed[i].name === name) {
-                  installed.splice(i, 1);
-                  break;
-              }
-          }
-          localStorage.setItem('installed', JSON.stringify(installed));
-        };
-
         switch (type) {
             case 'settings':
               const oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
               localStorage.clear();
               oldSettings.forEach(item => localStorage.setItem(item.name, item.value));
-              uninstallStuff();
               break;
             case 'quote_packs':
-                localStorage.removeItem('quote_packs');
-                localStorage.removeItem('quote_api');
-                uninstallStuff();
-                break;
+              localStorage.removeItem('quote_packs');
+              localStorage.removeItem('quote_api');
+              break;
             default:
-              try {
-                  localStorage.removeItem(type);
-                  uninstallStuff();
-              } catch (e) {
+              try { localStorage.removeItem(type); }
+              catch (e) {
                   toast('Failed to uninstall addon, check the console');
                   console.error(e);
               }
-          }
+        }
+        let installed = JSON.parse(localStorage.getItem('installed'));
+        for (let i = 0; i < installed.length; i++) {
+            if (installed[i].name === name) {
+                installed.splice(i, 1);
+                break;
+            }
+        }
+        localStorage.setItem('installed', JSON.stringify(installed));
     }
 
     static install(type, input, sideload) {
@@ -54,9 +46,6 @@ export default class MarketplaceFunctions {
             case 'photo_packs':
                 localStorage.setItem('photo_packs', JSON.stringify(input.photos));
                 break;
-            case 'theme':
-                localStorage.setItem('theme', input.theme);
-                break;
             case 'quote_packs':
                 if (input.quote_api) localStorage.setItem('quote_api', JSON.stringify(input.quote_api));
                 localStorage.setItem('quote_packs', JSON.stringify(input.quotes));

src/translations/en.json

@@ -90,7 +90,7 @@
         "quote": "Quote Copied",
         "reset": "Reset successfully",
         "installed": "Successfully installed",
-        "removed": "Successfully removed",
+        "uninstalled": "Successfully removed",
         "error": "Something went wrong",
         "imported": "Successfully imported"
     },
@@ -142,5 +142,13 @@
             "title": "Notes",
             "placeholder": "Type here"
         }
+    },
+    "welcome": {
+        "title": "Welcome to",
+        "information": "Information",
+        "thankyoumessage1": "Thank you for downloading Mue Tab,",
+        "thankyoumessage2": "we hope you enjoy your time with our extension.",
+        "support": "Support",
+        "close": "Close"
     }
 }