Fix: Various bugs

Co-authored-by: David Ralph <me@davidcralph.co.uk>
Co-authored-by: Isaac <contact@eartharoid.me>

src/components/Elements/MainModal/scss/index.scss

@@ -49,13 +49,16 @@
   padding: 0.5em;
   border-radius: 12px;
   cursor: pointer;
+  transition: 0.5s;
 
   svg {
     font-size: 2em;
   }
 
   &:hover {
-    background: rgb(121 121 121 / 22.6%);
+    @include themed {
+      background: t($modal-sidebarActive);
+    }
   }
 }
 

src/components/Elements/MainModal/scss/marketplace/modules/_item.scss

@@ -22,42 +22,51 @@ p.description {
   .item {
     flex: 1 0 40% !important;
   }
+  .infoItem {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 15px;
+    flex: 1 0 44%;
 
-  @include themed {
+    svg {
-    background: t($modal-sidebar);
+      @include themed() {
-    box-shadow: t(boxshadow);
+        background-image: t($slightGradient);
-    border-radius: t($borderRadius);
-    padding: 15px;
-
-    .infoItem {
-      display: flex;
-      flex-flow: row;
-      align-items: center;
-      gap: 15px;
-      flex: 1 0 44%;
-
-      svg {
-        font-size: 25px;
-        color: t($subColor);
-      }
-
-      .text {
-        display: flex;
-        flex-flow: column;
       }
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 20px;
+      border-radius: 100%;
     }
 
-    .header {
+    .text {
-      text-transform: uppercase;
+      display: flex;
+      flex-flow: column;
+    }
+  }
+
+  .header {
+    text-transform: uppercase;
+    @include themed {
       color: t($subColor);
     }
+  }
 
-    span {
+  span {
+    @include themed {
       color: t($color);
     }
   }
+
+  @include themed {
+    background: t($modal-sidebar);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    border-radius: t($borderRadius);
+    padding: 15px;
+  }
 }
 
+
 .showMoreItems {
   display: flex;
   flex-flow: column;
@@ -65,3 +74,9 @@ p.description {
   align-items: center;
   gap: 10px;
 }
+
+.marketplaceDescription {
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+}

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -148,6 +148,11 @@ table {
   gap: 25px;
   padding: 25px;
   justify-content: space-between;
+  @include themed {
+    background: t($modal-sidebar);
+    border-radius: t($borderRadius);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+  }
 
   div:nth-child(1) {
     display: flex;
@@ -157,15 +162,13 @@ table {
   }
 
   .icon {
-    border-radius: 100%;
+    @include themed() {
-    display: grid;
+      background-image: t($slightGradient);
-    place-items: center;
+      box-shadow: t($boxShadow);
-    padding: 15px;
-    font-size: 25px;
-
-    @include themed {
-      background: t($modal-sidebarActive);
     }
+    padding: 15px;
+    border-radius: 100%;
+    font-size: 25px;
   }
 
   .messageText {
@@ -190,11 +193,6 @@ table {
   .messageAction {
     float: right;
   }
-
-  @include themed {
-    background: t($modal-sidebar);
-    border-radius: t($borderRadius);
-  }
 }
 
 .messagesContainer {

src/components/Elements/ShareModal/sharemodal.scss

@@ -87,19 +87,6 @@
     outline: none;
   }
 
-  .close {
-    padding: 15px;
-    place-items: center;
-    display: grid;
-    cursor: pointer;
-
-    &:hover {
-      @include themed {
-        background: t($modal-sidebar);
-        border-radius: t($borderRadius);
-      }
-    }
-  }
 }
 
 .shareHeader {
@@ -107,4 +94,20 @@
   flex-flow: row;
   justify-content: space-between;
   align-items: center;
+  .close {
+    padding: 15px;
+    place-items: center;
+    display: grid;
+    cursor: pointer;
+    transition: 0.3s;
+    @include themed {
+      border-radius: t($borderRadius);
+    }
+
+    &:hover {
+      @include themed {
+        background: t($modal-sidebarActive);
+      }
+    }
+  }
 }

src/features/background/components/Favourite.jsx

@@ -23,6 +23,7 @@ class Favourite extends PureComponent {
       this.setState({
         favourited: this.buttons.unfavourited,
       });
+      this.props.tooltipText(variables.getMessage('widgets.quote.favourite'));
       variables.stats.postEvent('feature', 'Background favourite');
     } else {
       const type = localStorage.getItem('backgroundType');
@@ -91,6 +92,7 @@ class Favourite extends PureComponent {
       this.setState({
         favourited: this.buttons.favourited,
       });
+      this.props.tooltipText(variables.getMessage('widgets.quote.unfavourite'));
       variables.stats.postEvent('feature', 'Background unfavourite');
     }
   }
@@ -100,6 +102,12 @@ class Favourite extends PureComponent {
       return null;
     }
 
+    this.props.tooltipText(
+      localStorage.getItem('favourite')
+        ? variables.getMessage('widgets.quote.unfavourite')
+        : variables.getMessage('widgets.quote.favourite'),
+    );
+
     return this.state.favourited;
   }
 }

src/features/background/components/PhotoInformation.jsx

@@ -63,6 +63,7 @@ function PhotoInformation({ info, url, api }) {
   const [other, setOther] = useState(false);
   const [shareModal, openShareModal] = useState(false);
   const [excludeModal, openExcludeModal] = useState(false);
+  const [favouriteTooltipText, setFavouriteTooltipText] = useState(variables.getMessage('widgets.quote.favourite'));
 
   if (info.hidden === true || !info.credit) {
     return null;
@@ -207,7 +208,7 @@ function PhotoInformation({ info, url, api }) {
           </Tooltip>
         )}
         <Tooltip
-          title={variables.getMessage('widgets.quote.favourite')}
+          title={favouriteTooltipText}
           key="favourite"
           placement="top"
         >
@@ -216,6 +217,7 @@ function PhotoInformation({ info, url, api }) {
             offline={info.offline}
             credit={info.credit}
             photoURL={info.url}
+            tooltipText={(text) => setFavouriteTooltipText(text)}
           />
         </Tooltip>
         {!info.offline && (

src/features/background/options/Colour.jsx

@@ -2,7 +2,9 @@ import variables from 'config/variables';
 import { PureComponent, Fragment } from 'react';
 import { ColorPicker } from '@muetab/react-color-gradient-picker';
 import { toast } from 'react-toastify';
-import { Row, Content, Action } from '../../../components/Layout/Settings/Item/SettingsItem';
+import { Row, Content, Action } from 'components/Layout/Settings';
+import { Button } from 'components/Elements';
+import { MdAdd, MdRefresh } from 'react-icons/md';
 
 import { hexToRgb, rgbToHex } from '../api/gradient';
 
@@ -208,9 +210,7 @@ export default class ColourSettings extends PureComponent {
           <div className="colourInput">{gradientInputs}</div>
           {!gradientHasMoreThanOneColour && (
             <>
-              <button type="button" className="add" onClick={this.addColour}>
+              <Button type="settings" onClick={this.addColour} icon={<MdAdd />} label={variables.getMessage('modals.main.settings.sections.background.source.add_colour')} />
-                {variables.getMessage('modals.main.settings.sections.background.source.add_colour')}
-              </button>
             </>
           )}
         </>
@@ -229,6 +229,7 @@ export default class ColourSettings extends PureComponent {
             {colourSettings}
             <div className="colourReset">
               <span className="link" onClick={() => this.resetColour()}>
+                <MdRefresh />
                 {variables.getMessage('modals.main.settings.buttons.reset')}
               </span>
             </div>

src/features/background/options/Custom.jsx

@@ -13,9 +13,8 @@ import EventBus from 'utils/eventbus';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
 import videoCheck from '../api/videoCheck';
 
-import Checkbox from '../../../components/Form/Settings/Checkbox/Checkbox';
+import { Checkbox, FileUpload } from 'components/Form/Settings';
-import FileUpload from '../../../components/Form/Settings/FileUpload/FileUpload';
+import { Tooltip, Button } from 'components/Elements';
-import { Tooltip } from 'components/Elements';
 import Modal from 'react-modal';
 
 import CustomURLModal from './CustomURLModal';
@@ -198,14 +197,8 @@ export default class CustomSettings extends PureComponent {
               </div>
             </div>
             <div className="topbarbuttons">
-              <button onClick={() => this.uploadCustomBackground()}>
+              <Button type="settings" onClick={() => this.uploadCustomBackground()} icon={<MdOutlineFileUpload />} label={variables.getMessage('modals.main.settings.sections.background.source.upload')} />
-                {variables.getMessage('modals.main.settings.sections.background.source.upload')}{' '}
+              <Button type="settings" onClick={() => this.setState({ customURLModal: true })} icon={<MdAddLink />} label={variables.getMessage('modals.main.settings.sections.background.source.add_url')} />
-                <MdOutlineFileUpload />
-              </button>
-              <button onClick={() => this.setState({ customURLModal: true })}>
-                {variables.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
-                <MdAddLink />
-              </button>
             </div>
           </div>
           <div className="dropzone-content">
@@ -224,9 +217,7 @@ export default class CustomSettings extends PureComponent {
                           'modals.main.settings.sections.background.source.remove',
                         )}
                       >
-                        <button onClick={() => this.modifyCustomBackground('remove', index)}>
+                        <Button type="settings" onClick={() => this.modifyCustomBackground('remove', index)} icon={<MdCancel />} />
-                          <MdCancel />
-                        </button>
                       </Tooltip>
                     )}
                   </div>
@@ -249,10 +240,7 @@ export default class CustomSettings extends PureComponent {
                       },
                     )}
                   </span>
-                  <button onClick={() => this.uploadCustomBackground()}>
+                  <Button type="settings" onClick={() => this.uploadCustomBackground()} icon={<MdFolder />} label={variables.getMessage('modals.main.settings.sections.background.source.select')} />
-                    {variables.getMessage('modals.main.settings.sections.background.source.select')}
-                    <MdFolder />
-                  </button>
                 </div>
               </div>
             )}

src/features/background/scss/react-color-picker-gradient-picker-custom-styles.scss

@@ -63,7 +63,7 @@ div.color-preview-area > div > div:nth-child(5) {
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
 .input-field .input-container .input {

src/features/marketplace/components/Items/Item.jsx

@@ -21,6 +21,7 @@ import { Button } from 'components/Elements';
 import { install, uninstall } from 'utils/marketplace';
 import { Carousel } from '../Elements/Carousel';
 import { ShareModal } from 'components/Elements';
+import { MdClose } from 'react-icons/md';
 
 class Item extends PureComponent {
   constructor(props) {
@@ -77,9 +78,11 @@ class Item extends PureComponent {
     if (this.state.showUpdateButton) {
       updateButton = (
         <Fragment key="update">
-          <button className="removeFromMue" onClick={() => this.updateAddon()}>
+          <Button
-            {variables.getMessage('modals.main.addons.product.buttons.update_addon')}
+            type="settings"
-          </button>
+            onClick={() => this.updateAddon()}
+            label={variables.getMessage('modals.main.addons.product.buttons.update_addon')}
+          />
         </Fragment>
       );
     }
@@ -202,11 +205,11 @@ class Item extends PureComponent {
                 </div>
               </>
             )}
-            <div>
+            <div className="marketplaceDescription">
-              <p className="title">
+              <span className="title">
                 {variables.getMessage('modals.main.marketplace.product.description')}
-              </p>
+              </span>
-              <p dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
+              <span className="subtitle" dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
             </div>
             <div className="moreInfo">
               {moreInfoItem(
@@ -279,7 +282,13 @@ class Item extends PureComponent {
                 />
                 <Button
                   type="icon"
-                  onClick={() => this.setState({ shareModal: true })}
+                  onClick={() =>
+                    window.open(
+                      variables.constants.REPORT_ITEM +
+                        this.props.data.datadisplay_name.split(' ').join('+'),
+                      '_blank',
+                    )
+                  }
                   icon={<MdFlag />}
                   tooltipTitle={variables.getMessage(
                     'modals.main.marketplace.product.buttons.report',

src/features/marketplace/views/Added.jsx

@@ -25,9 +25,7 @@ export default class Added extends PureComponent {
     };
     this.buttons = {
       uninstall: (
-        <button className="removeFromMue" onClick={() => this.uninstall()}>
+        <Button type="settings" onClick={() => this.uninstall()} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
-          {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-        </button>
       ),
     };
   }

src/features/marketplace/views/Create.jsx

@@ -2,6 +2,7 @@
 import variables from 'config/variables';
 import { PureComponent } from 'react';
 import { MdOutlineExtensionOff } from 'react-icons/md';
+import { Button } from 'components/Elements';
 
 export default class Create extends PureComponent {
   constructor() {
@@ -27,7 +28,7 @@ export default class Create extends PureComponent {
               {variables.getMessage('modals.main.addons.create.moved_description')}
             </span>
             <div className="createButtons">
-              <button>Coming soon...</button>
+              <Button type="settings" label={variables.getMessage('modals.main.addons.create.moved_button')} />
             </div>
           </div>
         </div>

src/features/message/options/MessageOptions.jsx

@@ -105,13 +105,7 @@ class MessageOptions extends PureComponent {
                 </div>
                 <div>
                   <div className="messageAction">
-                    <button
+                    <Button type="settings" onClick={() => this.modifyMessage('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
-                      className="deleteButton"
-                      onClick={() => this.modifyMessage('remove', index)}
-                    >
-                      {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-                      <MdCancel />
-                    </button>
                   </div>
                 </div>
               </div>

src/features/misc/sections/Advanced.jsx

@@ -24,34 +24,36 @@ function AdvancedOptions() {
 
   const Data = () => {
     return (
-      <>
+      localStorage.getItem('welcomePreview') !== 'true' && (
-        {localStorage.getItem('welcomePreview') !== 'true' && (
+        <Row final={true}>
-          <div className="settingsRow">
+          <Content
-            <div className="content">
+            title={variables.getMessage('modals.main.settings.sections.advanced.data')}
-              <span className="title">
+            subtitle={variables.getMessage(
-                {variables.getMessage('modals.main.settings.sections.advanced.data')}
+              'modals.main.settings.sections.advanced.data_description',
-              </span>
+            )}
-              <span className="subtitle">
+          />
-                {variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
+          <div className="action activityButtons">
-              </span>
+            <button onClick={() => setResetModal(true)}>
-            </div>
+              {variables.getMessage('modals.main.settings.buttons.reset')}
-            <div className="action activityButtons">
+              <ResetIcon />
-              <button onClick={() => setResetModal(true)}>
+            </button>
-                {variables.getMessage('modals.main.settings.buttons.reset')}
+            <button onClick={() => exportSettings()}>
-                <ResetIcon />
+              {variables.getMessage('modals.main.settings.buttons.export')}
-              </button>
+              <ExportIcon />
-              <button onClick={() => exportSettings()}>
+            </button>
-                {variables.getMessage('modals.main.settings.buttons.export')}
+            <button onClick={() => document.getElementById('file-input').click()}>
-                <ExportIcon />
+              {variables.getMessage('modals.main.settings.buttons.import')}
-              </button>
+              <ImportIcon />
-              <button onClick={() => document.getElementById('file-input').click()}>
+            </button>
-                {variables.getMessage('modals.main.settings.buttons.import')}
-                <ImportIcon />
-              </button>
-            </div>
           </div>
-        )}
+          <FileUpload
-      </>
+            id="file-input"
+            accept="application/json"
+            type="settings"
+            loadFunction={(e) => importSettings(e)}
+          />
+        </Row>
+      )
     );
   };
 
@@ -90,9 +92,7 @@ function AdvancedOptions() {
         <>
           <Section
             title={variables.getMessage(`${ADVANCED_SECTION}.data`)}
-            subtitle={variables.getMessage(
+            subtitle={variables.getMessage(`${ADVANCED_SECTION}.data_subtitle`)}
-              'modals.main.settings.sections.appearance.accessibility.description',
-            )}
             onClick={() => setData(true)}
             icon={<MdDataUsage />}
           />
@@ -142,12 +142,6 @@ function AdvancedOptions() {
               <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
             </Action>
           </Row>
-          <FileUpload
-            id="file-input"
-            accept="application/json"
-            type="settings"
-            loadFunction={(e) => importSettings(e)}
-          />
           <Row>
             <Content
               title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}

src/features/misc/sections/Appearance.jsx

@@ -143,7 +143,7 @@ function AppearanceOptions() {
 
   const WidgetStyle = () => {
     return (
-      <Row>
+      <Row final={true}>
         <Content
           title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
           subtitle={variables.getMessage(

src/features/misc/sections/Stats.jsx

@@ -14,7 +14,7 @@ import { getLocalisedAchievementData, achievements, checkAchievements } from 'ut
 
 class Stats extends PureComponent {
   constructor() {
-    super();
+  super();
     this.state = {
       stats: JSON.parse(localStorage.getItem('statsData')) || {},
       achievements,
@@ -193,7 +193,7 @@ class Stats extends PureComponent {
                 }
               })}
             </div>
-            <span className="title">Locked</span>
+            <span className="title">{variables.getMessage(`${STATS_SECTION}.locked`)}</span>
             <div className="achievementsGrid preferencesInactive">
               {this.state.achievements.map((achievement, index) => {
                 if (!achievement.achieved) {

src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx

@@ -0,0 +1,63 @@
+import variables from 'config/variables';
+
+import { MdEdit, MdCancel } from 'react-icons/md';
+import { Button } from 'components/Elements';
+
+const QuickLink = ({ item, deleteLink, startEditLink }) => {
+  let target,
+    rel = null;
+  if (localStorage.getItem('quicklinksnewtab') === 'true') {
+    target = '_blank';
+    rel = 'noopener noreferrer';
+  }
+
+  const useText = localStorage.getItem('quicklinksText') === 'true';
+
+  if (useText) {
+    return (
+      <a
+        className="quicklinkstext"
+        onContextMenu={(e) => deleteLink(item.key, e)}
+        href={item.url}
+        target={target}
+        rel={rel}
+        draggable={false}
+      >
+        {item.name}
+      </a>
+    );
+  }
+
+  const img =
+    item.icon ||
+    'https://icon.horse/icon/ ' + item.url.replace('https://', '').replace('http://', '');
+
+  return (
+    <div className="messageMap">
+      <div className="icon">
+        <img
+          src={img}
+          alt={item.name}
+          draggable={false}
+          style={{ height: '30px', width: '30px' }}
+        />
+      </div>
+      <div className="messageText">
+        <div className="title">{item.name}</div>
+        <div className="subtitle">
+          <a className="quicklinknostyle" target="_blank" rel="noopener noreferrer" href={item.url}>
+            {item.url}
+          </a>
+        </div>
+      </div>
+      <div>
+        <div className="messageAction">
+          <Button type="settings" onClick={() => startEditLink(item)} icon={<MdEdit />} label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')} />
+          <Button type="settings" onClick={(e) => deleteLink(item.key, e)} icon={ <MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuickLink;

src/features/navbar/Navbar.jsx

@@ -125,6 +125,7 @@ class Navbar extends PureComponent {
             })}
           >
             <button
+              className="navbarButton"
               onClick={() => this.props.openModal('mainModal')}
               style={{ fontSize: this.state.zoomFontSize }}
               aria-label={variables.getMessage('modals.main.navbar.settings', {

src/features/navbar/components/Apps.jsx

@@ -60,7 +60,7 @@ class Apps extends PureComponent {
     return (
       <div className="notes" onMouseLeave={() => this.hideApps()} onFocus={() => this.showApps()}>
         <button
-          className="first"
+          className="navbarButton"
           onMouseEnter={() => this.showApps()}
           onFocus={() => this.hideApps()}
           onBlur={() => this.showApps()}

src/features/navbar/components/Maximise.jsx

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

src/features/navbar/components/Notes.jsx

@@ -91,7 +91,7 @@ class Notes extends PureComponent {
     return (
       <div className="notes" onMouseLeave={() => this.hideNotes()} onFocus={() => this.showNotes()}>
         <button
-          className="first"
+          className="navbarButton"
           onMouseEnter={() => this.showNotes()}
           onFocus={() => this.showNotes()}
           onBlur={() => this.hideNotes()}

src/features/navbar/components/Refresh.jsx

@@ -61,6 +61,7 @@ function Refresh() {
   return (
     <Tooltip title={variables.getMessage('widgets.navbar.tooltips.refresh')} subtitle={refreshText}>
       <button
+        className="navbarButton"
         onClick={refresh}
         aria-label={variables.getMessage('widgets.navbar.tooltips.refresh')}
       >

src/features/navbar/components/Todo.jsx

@@ -139,7 +139,7 @@ class Todo extends PureComponent {
     return (
       <div className="notes" onMouseLeave={() => this.hideTodo()} onFocus={() => this.showTodo()}>
         <button
-          className="first"
+          className="navbarButton"
           onMouseEnter={() => this.showTodo()}
           onFocus={() => this.hideTodo()}
           onBlur={() => this.showTodo()}

src/features/navbar/scss/index.scss

@@ -37,19 +37,13 @@
 }
 
 .old {
-  .tooltip {
+  button.navbarButton {
-    button {
-      @include basicIconButton(12px, 1.2rem, legacy);
-    }
-  }
-
-  .first {
     @include basicIconButton(12px, 1.2rem, legacy);
   }
 }
 
 .new {
-  button {
+  button.navbarButton {
     @include basicIconButton(12px, 1.2rem, ui);
   }
 }

src/features/quicklinks/options/QuickLink.jsx

@@ -1,6 +1,7 @@
 import variables from 'config/variables';
 
 import { MdEdit, MdCancel } from 'react-icons/md';
+import { Button } from 'components/Elements';
 
 const QuickLink = ({ item, deleteLink, startEditLink }) => {
   let target,
@@ -51,14 +52,8 @@ const QuickLink = ({ item, deleteLink, startEditLink }) => {
       </div>
       <div>
         <div className="messageAction">
-          <button className="deleteButton" onClick={() => startEditLink(item)}>
+        <Button type="settings" onClick={() => startEditLink(item)} icon={<MdEdit />} label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')} />
-            {variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+          <Button type="settings" onClick={(e) => deleteLink(item.key, e)} icon={ <MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
-            <MdEdit />
-          </button>
-          <button className="deleteButton" onClick={(e) => deleteLink(item.key, e)}>
-            {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-            <MdCancel />
-          </button>
         </div>
       </div>
     </div>

src/features/quicklinks/options/QuickLinksOptions.jsx

@@ -44,7 +44,7 @@ class QuickLinksOptions extends PureComponent {
     const data = JSON.parse(localStorage.getItem('quicklinks'));
 
     if (!url.startsWith('http://') && !url.startsWith('https://')) {
-      url = 'http://' + url;
+      url = 'https://' + url;
     }
 
     if (url.length <= 0 || isValidUrl(url) === false) {

src/features/quote/options/QuoteOptions.jsx

@@ -12,6 +12,7 @@ import {
   PreferencesWrapper,
 } from 'components/Layout/Settings';
 import { Checkbox, Dropdown } from 'components/Form/Settings';
+import { Button } from 'components/Elements';
 
 import { toast } from 'react-toastify';
 import EventBus from 'utils/eventbus';
@@ -169,9 +170,7 @@ class QuoteOptions extends PureComponent {
               subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
             />
             <Action>
-              <button onClick={() => this.modifyCustomQuote('add')}>
+              <Button type="settings" onClick={() => this.modifyCustomQuote('add')} icon={<MdAdd />} label={variables.getMessage(`${QUOTE_SECTION}.add`)} />
-                {variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
-              </button>
             </Action>
           </Row>
 
@@ -204,14 +203,7 @@ class QuoteOptions extends PureComponent {
                   </div>
                   <div>
                     <div className="messageAction">
-                      <button
+                      <Button type="settings" onClick={() => this.modifyCustomQuote('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
-                        className="deleteButton"
-                        onClick={() => this.modifyCustomQuote('remove', index)}
-                        style={{}}
-                      >
-                        {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-                        <MdCancel />
-                      </button>
                     </div>
                   </div>
                 </div>
@@ -225,9 +217,7 @@ class QuoteOptions extends PureComponent {
                 <span className="subtitle">
                   {variables.getMessage('modals.main.settings.sections.message.add_some')}
                 </span>
-                <button onClick={() => this.modifyCustomQuote('add')}>
+                <Button type="settings" onClick={() => this.modifyCustomQuote('add')} icon={<MdAdd />} label={variables.getMessage(`${QUOTE_SECTION}.add`)} />
-                  {variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
-                </button>
               </div>
             </div>
           )}

src/features/search/Search.jsx

@@ -100,6 +100,7 @@ export default class Search extends PureComponent {
     if (localStorage.getItem('voiceSearch') === 'true') {
       microphone = (
         <button
+          className="navbarButton"
           onClick={this.startSpeechRecognition}
           ref={this.micIcon}
           aria-label="Microphone Search"
@@ -214,6 +215,7 @@ export default class Search extends PureComponent {
                 title={variables.getMessage('modals.main.settings.sections.search.search_engine')}
               >
                 <button
+                  className="navbarButton"
                   aria-label="Search Engine"
                   onClick={() => this.setState({ searchDropdown: !this.state.searchDropdown })}
                 >
@@ -232,7 +234,7 @@ export default class Search extends PureComponent {
           <form onSubmit={this.searchButton} className="searchBar">
             <div className={this.state.classList}>
               <Tooltip title={variables.getMessage('widgets.search')}>
-                <button onClick={this.searchButton} aria-label="Search">
+                <button className="navbarButton" onClick={this.searchButton} aria-label="Search">
                   <MdSearch />
                 </button>
               </Tooltip>

src/i18n/locales/bn.json

@@ -420,6 +420,7 @@
             "offline_mode": "নীরব কার্যপদ্ধতি",
             "offline_subtitle": "সক্রিয় করা হলে, অনলাইন পরিষেবাগুলির সমস্ত অনুরোধ অক্ষম করা হবে।",
             "data": "ডেটা",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "আপনার কম্পিউটারে আপনার Mue সেটিংস রপ্তানি করতে, একটি বিদ্যমান সেটিংস ফাইল আমদানি করতে বা আপনার সেটিংসকে তাদের ডিফল্ট মানগুলিতে পুনরায় সেট করতে চান তা চয়ন করুন",
             "reset_modal": {
               "title": "সতর্কতা",
@@ -453,7 +454,8 @@
             },
             "usage": "ব্যবহারের পরিসংখ্যান",
             "achievements": "অর্জনগুলি",
-            "unlocked": "{count} আনলক করা হয়েছে"
+            "unlocked": "{count} আনলক করা হয়েছে",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "পরীক্ষামূলক",

src/i18n/locales/de_DE.json

@@ -420,6 +420,7 @@
             "offline_mode": "Offline Modus",
             "offline_subtitle": "Wenn diese Option aktiviert ist, werden alle Anfragen an Online-Dienste deaktiviert.",
             "data": "Daten",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Wählen Sie, ob Sie Ihre Mue-Einstellungen auf Ihren Computer exportieren, eine vorhandene Einstellungsdatei importieren oder Ihre Einstellungen auf die Standardwerte zurücksetzen möchten",
             "reset_modal": {
               "title": "ACHTUNG",
@@ -453,7 +454,8 @@
             },
             "usage": "Nutzungsstatistiken",
             "achievements": "Errungenschaften",
-            "unlocked": "{count} Freigeschaltet"
+            "unlocked": "{count} Freigeschaltet",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimentell",

src/i18n/locales/en_GB.json

@@ -326,7 +326,7 @@
             "tooltip": "Tooltip",
             "text_only": "Show text only",
             "add_link": "Add Link",
-            "no_quicklinks": "No quicklinks",
+            "no_quicklinks": "No quick links",
             "edit": "Edit",
             "style": "Style",
             "options": {
@@ -420,7 +420,8 @@
             "offline_mode": "Offline mode",
             "offline_subtitle": "When enabled, all requests to online services will be disabled.",
             "data": "Data",
-            "data_subtitle": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
+            "data_subtitle": "Manage your data on Mue.",
             "reset_modal": {
               "title": "WARNING",
               "question": "Do you want to reset Mue?",
@@ -453,7 +454,8 @@
             },
             "usage": "Usage Stats",
             "achievements": "Achievements",
-            "unlocked": "{count} Unlocked"
+            "unlocked": "{count} Unlocked",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimental",
@@ -580,7 +582,7 @@
           "title": "Create",
           "moved_title": "Create add-on has moved!",
           "moved_description": "Following the 7.1 update, the creation of addons has now moved to the web UI",
-          "moved_button": "Get Started"
+          "moved_button": "Coming Soon...."
         }
       }
     },

src/i18n/locales/en_US.json

@@ -326,7 +326,7 @@
             "tooltip": "Tooltip",
             "text_only": "Show text only",
             "add_link": "Add Link",
-            "no_quicklinks": "No quicklinks",
+            "no_quicklinks": "No quick links",
             "edit": "Edit",
             "style": "Style",
             "options": {
@@ -420,6 +420,7 @@
             "offline_mode": "Offline mode",
             "offline_subtitle": "When enabled, all requests to online services will be disabled.",
             "data": "Data",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "reset_modal": {
               "title": "WARNING",
@@ -453,7 +454,8 @@
             },
             "usage": "Usage Stats",
             "achievements": "Achievements",
-            "unlocked": "{count} Unlocked"
+            "unlocked": "{count} Unlocked",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimental",

src/i18n/locales/es.json

@@ -420,6 +420,7 @@
             "offline_mode": "Modo sin conexión",
             "offline_subtitle": "Cuando esté activada, se desactivarán todas las solicitudes a los servicios en línea.",
             "data": "Datos",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Elija si desea exportar la configuración de Mue a su ordenador, importar un archivo de configuración existente o restablecer los valores predeterminados",
             "reset_modal": {
               "title": "ADVERTENCIA",
@@ -453,7 +454,8 @@
             },
             "usage": "Estadísticas de uso",
             "achievements": "Logros",
-            "unlocked": "{count} Desbloqueado"
+            "unlocked": "{count} Desbloqueado",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimental",

src/i18n/locales/es_419.json

@@ -326,7 +326,7 @@
             "tooltip": "Descripción emergente",
             "text_only": "Mostrar solo texto",
             "add_link": "Add Link",
-            "no_quicklinks": "No quicklinks",
+            "no_quicklinks": "No quick links",
             "edit": "Edit",
             "style": "Style",
             "options": {
@@ -420,6 +420,7 @@
             "offline_mode": "Modo sin conexión",
             "offline_subtitle": "When enabled, all requests to online services will be disabled.",
             "data": "Datos",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "reset_modal": {
               "title": "ADVERTENCIA",
@@ -453,7 +454,8 @@
             },
             "usage": "Estadísticas de uso",
             "achievements": "Achievements",
-            "unlocked": "{count} Unlocked"
+            "unlocked": "{count} Unlocked",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimental",

src/i18n/locales/fr.json

@@ -326,7 +326,7 @@
             "tooltip": "Info-bulle",
             "text_only": "Show text only",
             "add_link": "Add Link",
-            "no_quicklinks": "No quicklinks",
+            "no_quicklinks": "No quick links",
             "edit": "Edit",
             "style": "Style",
             "options": {
@@ -420,6 +420,7 @@
             "offline_mode": "Mode hors-ligne",
             "offline_subtitle": "When enabled, all requests to online services will be disabled.",
             "data": "Donnés",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "reset_modal": {
               "title": "ATTENTION",
@@ -453,7 +454,8 @@
             },
             "usage": "Usage Stats",
             "achievements": "Achievements",
-            "unlocked": "{count} Unlocked"
+            "unlocked": "{count} Unlocked",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Expérimental",

src/i18n/locales/id_ID.json

@@ -326,7 +326,7 @@
             "tooltip": "Tooltip",
             "text_only": "Hanya teks",
             "add_link": "Add Link",
-            "no_quicklinks": "No quicklinks",
+            "no_quicklinks": "No quick links",
             "edit": "Edit",
             "style": "Style",
             "options": {
@@ -420,6 +420,7 @@
             "offline_mode": "Mode Luring",
             "offline_subtitle": "When enabled, all requests to online services will be disabled.",
             "data": "Data",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "reset_modal": {
               "title": "PERINGATAN",
@@ -453,7 +454,8 @@
             },
             "usage": "Statistik Penggunaan",
             "achievements": "Achievements",
-            "unlocked": "{count} Unlocked"
+            "unlocked": "{count} Unlocked",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimental",

src/i18n/locales/nl.json

@@ -420,6 +420,7 @@
             "offline_mode": "Offline-modus",
             "offline_subtitle": "Indien ingeschakeld worden alle verzoeken naar online diensten uitgeschakeld.",
             "data": "Data",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Kies of je jou Mue-instellingen naar je computer wilt exporteren, een bestaand instellingenbestand wilt importeren of je instellingen wilt terugzetten naar hun standaardwaarden",
             "reset_modal": {
               "title": "WARNING",
@@ -453,7 +454,8 @@
             },
             "usage": "Usage Stats",
             "achievements": "Prestaties",
-            "unlocked": "{count} Ontgrendeld"
+            "unlocked": "{count} Ontgrendeld",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimenteel",

src/i18n/locales/no.json

@@ -326,7 +326,7 @@
             "tooltip": "Tooltip",
             "text_only": "Show text only",
             "add_link": "Add Link",
-            "no_quicklinks": "No quicklinks",
+            "no_quicklinks": "No quick links",
             "edit": "Edit",
             "style": "Style",
             "options": {
@@ -420,6 +420,7 @@
             "offline_mode": "Frakoblet Modus",
             "offline_subtitle": "When enabled, all requests to online services will be disabled.",
             "data": "Data",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "reset_modal": {
               "title": "WARNING",
@@ -453,7 +454,8 @@
             },
             "usage": "Usage Stats",
             "achievements": "Achievements",
-            "unlocked": "{count} Unlocked"
+            "unlocked": "{count} Unlocked",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Eksperimental",

src/i18n/locales/pt.json

@@ -420,6 +420,7 @@
             "offline_mode": "Modo offline",
             "offline_subtitle": "Quando ativado, todos os pedidos de serviços online serão desativados.",
             "data": "Dados",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Escolha se deseja exportar as suas configurações de Mue para o seu computador, importar um ficheiro de configurações existente ou redefinir as suas configurações para os valores padrão deles",
             "reset_modal": {
               "title": "AVISO",
@@ -453,7 +454,8 @@
             },
             "usage": "Estatísticas de uso",
             "achievements": "Conquistas",
-            "unlocked": "{count} Desbloqueado"
+            "unlocked": "{count} Desbloqueado",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimental",

src/i18n/locales/pt_BR.json

@@ -420,6 +420,7 @@
             "offline_mode": "Modo offline",
             "offline_subtitle": "Quando ativado, todos os pedidos de serviços online serão desativados.",
             "data": "Dados",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Escolha se deseja exportar suas configurações de Mue para o seu computador, importar um arquivo de configurações existente ou redefinir suas configurações para seus valores padrão",
             "reset_modal": {
               "title": "AVISO",
@@ -453,7 +454,8 @@
             },
             "usage": "Estatísticas de uso",
             "achievements": "Conquistas",
-            "unlocked": "{count} Desbloqueado"
+            "unlocked": "{count} Desbloqueado",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Experimental",

src/i18n/locales/ru.json

@@ -420,6 +420,7 @@
             "offline_mode": "Офлайн режим",
             "offline_subtitle": "При включении все запросы к онлайн-сервисам будут отключены.",
             "data": "Data",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Выберите, следует ли экспортировать настройки Mue на компьютер, импортировать существующий файл настроек или сбросить настройки до значений по умолчанию",
             "reset_modal": {
               "title": "WARNING",
@@ -453,7 +454,8 @@
             },
             "usage": "Статистика использования",
             "achievements": "Достижения",
-            "unlocked": "{count} разблокировано"
+            "unlocked": "{count} разблокировано",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Экспериментальные настройки",

src/i18n/locales/tr_TR.json

@@ -420,6 +420,7 @@
             "offline_mode": "Çevrimdışı Mod",
             "offline_subtitle": "Etkinleştirildiğinde, çevrimiçi hizmetlere yönelik tüm istekler devre dışı bırakılır.",
             "data": "Veri",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Mue Tab ayarlarınızı bilgisayarınıza kaydetmenize, mevcut ayarlarınızı başka bir bilgisayara aktarmanıza veya ayarlarınızı varsayılan değerlerine sıfırlamınıza olanak sağlar. İstediğiniz işlemi seçin.",
             "reset_modal": {
               "title": "UYARI",
@@ -453,7 +454,8 @@
             },
             "usage": "Kullanım İstatistikleri",
             "achievements": "Başarılar",
-            "unlocked": "{count} Kilidi Açıldı"
+            "unlocked": "{count} Kilidi Açıldı",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "Deneysel Özellikler",

src/i18n/locales/zh_CN.json

@@ -326,7 +326,7 @@
             "tooltip": "光标停留时下方显示标题",
             "text_only": "仅显示标题",
             "add_link": "Add Link",
-            "no_quicklinks": "No quicklinks",
+            "no_quicklinks": "No quick links",
             "edit": "Edit",
             "style": "Style",
             "options": {
@@ -420,6 +420,7 @@
             "offline_mode": "启用离线模式",
             "offline_subtitle": "When enabled, all requests to online services will be disabled.",
             "data": "数据和设置",
+            "data_description": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "data_subtitle": "Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values",
             "reset_modal": {
               "title": "警告",
@@ -453,7 +454,8 @@
             },
             "usage": "启用统计",
             "achievements": "Achievements",
-            "unlocked": "{count} Unlocked"
+            "unlocked": "{count} Unlocked",
+            "locked": "Locked"
           },
           "experimental": {
             "title": "实验性功能",