Fix: Various bugs

Co-authored-by: David Ralph <me@davidcralph.co.uk> Co-authored-by: Isaac <contact@eartharoid.me>
2026-07-20 07:24:08 +02:00 · 2024-03-18 22:08:08 +00:00
parent c2019de7d2
commit ae0530cfc6
43 changed files with 283 additions and 192 deletions
--- a/src/features/background/components/Favourite.jsx
+++ b/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;
  }
 }
--- a/src/features/background/components/PhotoInformation.jsx
+++ b/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 && (
--- a/src/features/background/options/Colour.jsx
+++ b/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}>
-                {variables.getMessage('modals.main.settings.sections.background.source.add_colour')}
-              </button>
+              <Button type="settings" onClick={this.addColour} icon={<MdAdd />} label={variables.getMessage('modals.main.settings.sections.background.source.add_colour')} />
            </>
          )}
        </>
@@ -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>
--- a/src/features/background/options/Custom.jsx
+++ b/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 FileUpload from '../../../components/Form/Settings/FileUpload/FileUpload';
-import { Tooltip } from 'components/Elements';
+import { Checkbox, FileUpload } from 'components/Form/Settings';
+import { Tooltip, Button } 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()}>
-                {variables.getMessage('modals.main.settings.sections.background.source.upload')}{' '}
-                <MdOutlineFileUpload />
-              </button>
-              <button onClick={() => this.setState({ customURLModal: true })}>
-                {variables.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
-                <MdAddLink />
-              </button>
+              <Button type="settings" onClick={() => this.uploadCustomBackground()} icon={<MdOutlineFileUpload />} label={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')} />
            </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)}>
-                          <MdCancel />
-                        </button>
+                        <Button type="settings" onClick={() => this.modifyCustomBackground('remove', index)} icon={<MdCancel />} />
                      </Tooltip>
                    )}
                  </div>
@@ -249,10 +240,7 @@ export default class CustomSettings extends PureComponent {
                      },
                    )}
                  </span>
-                  <button onClick={() => this.uploadCustomBackground()}>
-                    {variables.getMessage('modals.main.settings.sections.background.source.select')}
-                    <MdFolder />
-                  </button>
+                  <Button type="settings" onClick={() => this.uploadCustomBackground()} icon={<MdFolder />} label={variables.getMessage('modals.main.settings.sections.background.source.select')} />
                </div>
              </div>
            )}
--- a/src/features/background/scss/react-color-picker-gradient-picker-custom-styles.scss
+++ b/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 {
--- a/src/features/marketplace/components/Items/Item.jsx
+++ b/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()}>
-            {variables.getMessage('modals.main.addons.product.buttons.update_addon')}
-          </button>
+          <Button
+            type="settings"
+            onClick={() => this.updateAddon()}
+            label={variables.getMessage('modals.main.addons.product.buttons.update_addon')}
+          />
        </Fragment>
      );
    }
@@ -202,11 +205,11 @@ class Item extends PureComponent {
                </div>
              </>
            )}
-            <div>
-              <p className="title">
+            <div className="marketplaceDescription">
+              <span className="title">
                {variables.getMessage('modals.main.marketplace.product.description')}
-              </p>
-              <p dangerouslySetInnerHTML={{ __html: this.props.data.description }} />
+              </span>
+              <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',
--- a/src/features/marketplace/views/Added.jsx
+++ b/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()}>
-          {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-        </button>
+        <Button type="settings" onClick={() => this.uninstall()} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
      ),
    };
  }
--- a/src/features/marketplace/views/Create.jsx
+++ b/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>
--- a/src/features/message/options/MessageOptions.jsx
+++ b/src/features/message/options/MessageOptions.jsx
@@ -105,13 +105,7 @@ class MessageOptions extends PureComponent {
                </div>
                <div>
                  <div className="messageAction">
-                    <button
-                      className="deleteButton"
-                      onClick={() => this.modifyMessage('remove', index)}
-                    >
-                      {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-                      <MdCancel />
-                    </button>
+                    <Button type="settings" onClick={() => this.modifyMessage('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
                  </div>
                </div>
              </div>
--- a/src/features/misc/sections/Advanced.jsx
+++ b/src/features/misc/sections/Advanced.jsx
@@ -24,34 +24,36 @@ function AdvancedOptions() {

  const Data = () => {
    return (
-      <>
-        {localStorage.getItem('welcomePreview') !== 'true' && (
-          <div className="settingsRow">
-            <div className="content">
-              <span className="title">
-                {variables.getMessage('modals.main.settings.sections.advanced.data')}
-              </span>
-              <span className="subtitle">
-                {variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
-              </span>
-            </div>
-            <div className="action activityButtons">
-              <button onClick={() => setResetModal(true)}>
-                {variables.getMessage('modals.main.settings.buttons.reset')}
-                <ResetIcon />
-              </button>
-              <button onClick={() => exportSettings()}>
-                {variables.getMessage('modals.main.settings.buttons.export')}
-                <ExportIcon />
-              </button>
-              <button onClick={() => document.getElementById('file-input').click()}>
-                {variables.getMessage('modals.main.settings.buttons.import')}
-                <ImportIcon />
-              </button>
-            </div>
+      localStorage.getItem('welcomePreview') !== 'true' && (
+        <Row final={true}>
+          <Content
+            title={variables.getMessage('modals.main.settings.sections.advanced.data')}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.advanced.data_description',
+            )}
+          />
+          <div className="action activityButtons">
+            <button onClick={() => setResetModal(true)}>
+              {variables.getMessage('modals.main.settings.buttons.reset')}
+              <ResetIcon />
+            </button>
+            <button onClick={() => exportSettings()}>
+              {variables.getMessage('modals.main.settings.buttons.export')}
+              <ExportIcon />
+            </button>
+            <button onClick={() => document.getElementById('file-input').click()}>
+              {variables.getMessage('modals.main.settings.buttons.import')}
+              <ImportIcon />
+            </button>
          </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(
-              'modals.main.settings.sections.appearance.accessibility.description',
-            )}
+            subtitle={variables.getMessage(`${ADVANCED_SECTION}.data_subtitle`)}
            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')}
--- a/src/features/misc/sections/Appearance.jsx
+++ b/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(
--- a/src/features/misc/sections/Stats.jsx
+++ b/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) {
--- a/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx
+++ b/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;
--- a/src/features/navbar/Navbar.jsx
+++ b/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', {
--- a/src/features/navbar/components/Apps.jsx
+++ b/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()}
--- a/src/features/navbar/components/Maximise.jsx
+++ b/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')}
--- a/src/features/navbar/components/Notes.jsx
+++ b/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()}
--- a/src/features/navbar/components/Refresh.jsx
+++ b/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')}
      >
--- a/src/features/navbar/components/Todo.jsx
+++ b/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()}
--- a/src/features/navbar/scss/index.scss
+++ b/src/features/navbar/scss/index.scss
@@ -37,19 +37,13 @@
 }

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

 .new {
-  button {
+  button.navbarButton {
    @include basicIconButton(12px, 1.2rem, ui);
  }
 }
--- a/src/features/quicklinks/options/QuickLink.jsx
+++ b/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)}>
-            {variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
-            <MdEdit />
-          </button>
-          <button className="deleteButton" onClick={(e) => deleteLink(item.key, e)}>
-            {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-            <MdCancel />
-          </button>
+        <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>
--- a/src/features/quicklinks/options/QuickLinksOptions.jsx
+++ b/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) {
--- a/src/features/quote/options/QuoteOptions.jsx
+++ b/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')}>
-                {variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
-              </button>
+              <Button type="settings" onClick={() => this.modifyCustomQuote('add')} icon={<MdAdd />} label={variables.getMessage(`${QUOTE_SECTION}.add`)} />
            </Action>
          </Row>

@@ -204,14 +203,7 @@ class QuoteOptions extends PureComponent {
                  </div>
                  <div>
                    <div className="messageAction">
-                      <button
-                        className="deleteButton"
-                        onClick={() => this.modifyCustomQuote('remove', index)}
-                        style={{}}
-                      >
-                        {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-                        <MdCancel />
-                      </button>
+                      <Button type="settings" onClick={() => this.modifyCustomQuote('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
                    </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')}>
-                  {variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
-                </button>
+                <Button type="settings" onClick={() => this.modifyCustomQuote('add')} icon={<MdAdd />} label={variables.getMessage(`${QUOTE_SECTION}.add`)} />
              </div>
            </div>
          )}
--- a/src/features/search/Search.jsx
+++ b/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>