Revert "Remove duplicated Toggle.js component" (#742)

Revert "Remove duplicated Toggle.js component (#741)"

This reverts commit dd238ae7949e72e3b90235f56e14686cc5231f34.

8 files changed, 193 insertions, 121 deletions

diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 93ca124db..41b887974 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -97,7 +97,7 @@ class Import extends Component {
                 {this.form.$('import').map((service, i) => (
                   <tr key={service.id} className="service-table__row">
                     <td className="service-table__toggle">
-                      <Toggle {...service.$('add').bind()} showLabel={false} />
+                      <Toggle field={service.$('add')} showLabel={false} />
                     </td>
                     <td className="service-table__column-icon">
                       <img
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 30a78c807..eeb9ef54d 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -342,22 +342,22 @@ class EditServiceForm extends Component {
               <div className="settings__options">
                 <div className="settings__settings-group">
                   <H3>{intl.formatMessage(messages.headlineNotifications)}</H3>
-                  <Toggle {...form.$('isNotificationEnabled').bind()} />
-                  <Toggle {...form.$('isMuted').bind()} />
+                  <Toggle field={form.$('isNotificationEnabled')} />
+                  <Toggle field={form.$('isMuted')} />
                   <p className="settings__help indented__help">
                     {intl.formatMessage(messages.isMutedInfo)}
                   </p>
-                  <Toggle {...form.$('isMediaBadgeEnabled').bind()} />
+                  <Toggle field={form.$('isMediaBadgeEnabled')} />
                 </div>
 
                 <div className="settings__settings-group">
                   <H3>{intl.formatMessage(messages.headlineBadges)}</H3>
-                  <Toggle {...form.$('isBadgeEnabled').bind()} />
+                  <Toggle field={form.$('isBadgeEnabled')} />
                   {recipe.hasIndirectMessages &&
                     form.$('isBadgeEnabled').value && (
                       <>
                         <Toggle
-                          {...form.$('isIndirectMessageBadgeEnabled').bind()}
+                          field={form.$('isIndirectMessageBadgeEnabled')}
                         />
                         <p className="settings__help indented__help">
                           {intl.formatMessage(messages.indirectMessageInfo)}
@@ -365,21 +365,19 @@ class EditServiceForm extends Component {
                       </>
                     )}
                   {recipe.allowFavoritesDelineationInUnreadCount && (
-                    <Toggle
-                      {...form.$('onlyShowFavoritesInUnreadCount').bind()}
-                    />
+                    <Toggle field={form.$('onlyShowFavoritesInUnreadCount')} />
                   )}
                 </div>
 
                 <div className="settings__settings-group">
                   <H3>{intl.formatMessage(messages.headlineGeneral)}</H3>
-                  <Toggle {...form.$('isEnabled').bind()} />
-                  <Toggle {...form.$('isHibernationEnabled').bind()} />
+                  <Toggle field={form.$('isEnabled')} />
+                  <Toggle field={form.$('isHibernationEnabled')} />
                   <p className="settings__help indented__help">
                     {intl.formatMessage(messages.isHibernationEnabledInfo)}
                   </p>
-                  <Toggle {...form.$('isWakeUpEnabled').bind()} />
-                  <Toggle {...form.$('trapLinkClicks').bind()} />
+                  <Toggle field={form.$('isWakeUpEnabled')} />
+                  <Toggle field={form.$('trapLinkClicks')} />
                   {/* TODO: Need to figure out how to effect this change without a reload of the recipe */}
                   <p className="settings__help indented__help">
                     {intl.formatMessage(messages.serviceReloadRequired)}
@@ -388,7 +386,7 @@ class EditServiceForm extends Component {
 
                 <div className="settings__settings-group">
                   <H3>{intl.formatMessage(messages.headlineAppearance)}</H3>
-                  <Toggle {...form.$('isDarkModeEnabled').bind()} />
+                  <Toggle field={form.$('isDarkModeEnabled')} />
                   {form.$('isDarkModeEnabled').value && (
                     <>
                       <H3>
@@ -401,7 +399,7 @@ class EditServiceForm extends Component {
                       <Slider field={form.$('darkReaderSepia')} />
                     </>
                   )}
-                  <Toggle {...form.$('isProgressbarEnabled').bind()} />
+                  <Toggle field={form.$('isProgressbarEnabled')} />
                 </div>
               </div>
               <div className="service-icon">
@@ -431,7 +429,7 @@ class EditServiceForm extends Component {
                   {intl.formatMessage(messages.headlineProxy)}
                   <span className="badge badge--success">beta</span>
                 </H3>
-                <Toggle {...form.$('proxy.isEnabled').bind()} />
+                <Toggle field={form.$('proxy.isEnabled')} />
                 {form.$('proxy.isEnabled').value && (
                   <>
                     <div className="grid">
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index e796a48ec..1d89b53a9 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js';
 import Form from '../../../lib/Form';
 import Button from '../../ui/button';
-import Toggle from '../../ui/toggle';
+import Toggle from '../../ui/Toggle.js';
 import Select from '../../ui/Select';
 import Input from '../../ui/input/index';
 import ColorPickerInput from '../../ui/ColorPickerInput';
@@ -522,30 +522,26 @@ class EditSettingsForm extends Component<IProps, IState> {
                 <H2 className="settings__section_header">
                   {intl.formatMessage(messages.sectionMain)}
                 </H2>
-                <Toggle {...form.$('autoLaunchOnStart').bind()} />
-                <Toggle {...form.$('runInBackground').bind()} />
-                <Toggle {...form.$('confirmOnQuit').bind()} />
-                <Toggle {...form.$('enableSystemTray').bind()} />
+                <Toggle field={form.$('autoLaunchOnStart')} />
+                <Toggle field={form.$('runInBackground')} />
+                <Toggle field={form.$('confirmOnQuit')} />
+                <Toggle field={form.$('enableSystemTray')} />
                 {reloadAfterResume && <Hr />}
-                <Toggle {...form.$('reloadAfterResume').bind()} />
+                <Toggle field={form.$('reloadAfterResume')} />
                 {reloadAfterResume && (
                   <div>
                     <Input {...form.$('reloadAfterResumeTime').bind()} />
                     <Hr />
                   </div>
                 )}
-                <Toggle {...form.$('startMinimized').bind()} />
-                {isWindows && (
-                  <Toggle {...form.$('minimizeToSystemTray').bind()} />
-                )}
-                {isWindows && (
-                  <Toggle {...form.$('closeToSystemTray').bind()} />
-                )}
+                <Toggle field={form.$('startMinimized')} />
+                {isWindows && <Toggle field={form.$('minimizeToSystemTray')} />}
+                {isWindows && <Toggle field={form.$('closeToSystemTray')} />}
 
-                <Toggle {...form.$('keepAllWorkspacesLoaded').bind()} />
+                <Toggle field={form.$('keepAllWorkspacesLoaded')} />
 
                 {isTodosActivated && <Hr />}
-                <Toggle {...form.$('enableTodos').bind()} />
+                <Toggle field={form.$('enableTodos')} />
                 {isTodosActivated && (
                   <div>
                     <Select field={form.$('predefinedTodoServer')} />
@@ -575,7 +571,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                 {isTodosActivated && <Hr />}
 
                 {scheduledDNDEnabled && <Hr />}
-                <Toggle {...form.$('scheduledDNDEnabled').bind()} />
+                <Toggle field={form.$('scheduledDNDEnabled')} />
 
                 {scheduledDNDEnabled && (
                   <>
@@ -636,12 +632,12 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionServiceIconsSettings)}
                 </H2>
 
-                <Toggle {...form.$('showDisabledServices').bind()} />
-                <Toggle {...form.$('showServiceName').bind()} />
+                <Toggle field={form.$('showDisabledServices')} />
+                <Toggle field={form.$('showServiceName')} />
 
                 {isUseGrayscaleServicesEnabled && <Hr />}
 
-                <Toggle {...form.$('useGrayscaleServices').bind()} />
+                <Toggle field={form.$('useGrayscaleServices')} />
 
                 {isUseGrayscaleServicesEnabled && (
                   <>
@@ -654,8 +650,8 @@ class EditSettingsForm extends Component<IProps, IState> {
                   </>
                 )}
 
-                <Toggle {...form.$('showMessageBadgeWhenMuted').bind()} />
-                <Toggle {...form.$('enableLongPressServiceHint').bind()} />
+                <Toggle field={form.$('showMessageBadgeWhenMuted')} />
+                <Toggle field={form.$('enableLongPressServiceHint')} />
                 <Select field={form.$('iconSize')} />
 
                 <Select field={form.$('navigationBarBehaviour')} />
@@ -666,7 +662,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionHibernation)}
                 </H2>
                 <Select field={form.$('hibernationStrategy')} />
-                <Toggle {...form.$('hibernateOnStartup').bind()} />
+                <Toggle field={form.$('hibernateOnStartup')} />
                 <p
                   className="settings__message"
                   style={{
@@ -681,7 +677,7 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Select field={form.$('wakeUpStrategy')} />
                 <Select field={form.$('wakeUpHibernationStrategy')} />
-                <Toggle {...form.$('wakeUpHibernationSplay').bind()} />
+                <Toggle field={form.$('wakeUpHibernationSplay')} />
               </div>
             )}
 
@@ -691,15 +687,15 @@ class EditSettingsForm extends Component<IProps, IState> {
                 <H2 className="settings__section_header">
                   {intl.formatMessage(messages.sectionGeneralUi)}
                 </H2>
-                {isMac && <Toggle {...form.$('showDragArea').bind()} />}
+                {isMac && <Toggle field={form.$('showDragArea')} />}
 
-                <Toggle {...form.$('adaptableDarkMode').bind()} />
+                <Toggle field={form.$('adaptableDarkMode')} />
                 {!isAdaptableDarkModeEnabled && (
-                  <Toggle {...form.$('darkMode').bind()} />
+                  <Toggle field={form.$('darkMode')} />
                 )}
                 {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && (
                   <>
-                    <Toggle {...form.$('universalDarkMode').bind()} />
+                    <Toggle field={form.$('universalDarkMode')} />
                     <p
                       className="settings__message"
                       style={{
@@ -717,7 +713,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                 )}
 
                 {isSplitModeEnabled && <Hr />}
-                <Toggle {...form.$('splitMode').bind()} />
+                <Toggle field={form.$('splitMode')} />
                 {isSplitModeEnabled && (
                   <Input
                     type="number"
@@ -780,21 +776,21 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Select field={form.$('sidebarServicesLocation')} />
 
-                <Toggle {...form.$('useHorizontalStyle').bind()} />
+                <Toggle field={form.$('useHorizontalStyle')} />
 
-                <Toggle {...form.$('hideCollapseButton').bind()} />
+                <Toggle field={form.$('hideCollapseButton')} />
 
-                <Toggle {...form.$('hideRecipesButton').bind()} />
+                <Toggle field={form.$('hideRecipesButton')} />
 
-                <Toggle {...form.$('hideSplitModeButton').bind()} />
+                <Toggle field={form.$('hideSplitModeButton')} />
 
-                <Toggle {...form.$('hideWorkspacesButton').bind()} />
+                <Toggle field={form.$('hideWorkspacesButton')} />
 
-                <Toggle {...form.$('hideNotificationsButton').bind()} />
+                <Toggle field={form.$('hideNotificationsButton')} />
 
-                <Toggle {...form.$('hideSettingsButton').bind()} />
+                <Toggle field={form.$('hideSettingsButton')} />
 
-                <Toggle {...form.$('alwaysShowWorkspaces').bind()} />
+                <Toggle field={form.$('alwaysShowWorkspaces')} />
               </div>
             )}
 
@@ -805,17 +801,17 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionPrivacy)}
                 </H2>
 
-                <Toggle {...form.$('privateNotifications').bind()} />
-                <Toggle {...form.$('clipboardNotifications').bind()} />
+                <Toggle field={form.$('privateNotifications')} />
+                <Toggle field={form.$('clipboardNotifications')} />
                 {(isWindows || isMac) && (
-                  <Toggle {...form.$('notifyTaskBarOnMessage').bind()} />
+                  <Toggle field={form.$('notifyTaskBarOnMessage')} />
                 )}
 
                 <Hr />
 
                 <Select field={form.$('webRTCIPHandlingPolicy')} />
 
-                <Toggle {...form.$('sentry').bind()} />
+                <Toggle field={form.$('sentry')} />
                 <p className="settings__help">
                   {intl.formatMessage(messages.sentryInfo)}
                 </p>
@@ -834,11 +830,11 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Hr />
 
-                <Toggle {...form.$('lockingFeatureEnabled').bind()} />
+                <Toggle field={form.$('lockingFeatureEnabled')} />
                 {lockingFeatureEnabled && (
                   <>
                     {isMac && systemPreferences.canPromptTouchID() && (
-                      <Toggle {...form.$('useTouchIdToUnlock').bind()} />
+                      <Toggle field={form.$('useTouchIdToUnlock')} />
                     )}
 
                     <Input
@@ -889,7 +885,7 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Hr />
 
-                <Toggle {...form.$('enableSpellchecking').bind()} />
+                <Toggle field={form.$('enableSpellchecking')} />
                 {!isMac && form.$('enableSpellchecking').value && (
                   <Select field={form.$('spellcheckerLanguage')} />
                 )}
@@ -905,7 +901,7 @@ class EditSettingsForm extends Component<IProps, IState> {
 
                 <Hr />
 
-                <Toggle {...form.$('enableTranslator').bind()} />
+                <Toggle field={form.$('enableTranslator')} />
 
                 {form.$('enableTranslator').value && (
                   <Select field={form.$('translatorEngine')} />
@@ -935,8 +931,8 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionAdvanced)}
                 </H2>
 
-                <Toggle {...form.$('enableGPUAcceleration').bind()} />
-                <Toggle {...form.$('enableGlobalHideShortcut').bind()} />
+                <Toggle field={form.$('enableGPUAcceleration')} />
+                <Toggle field={form.$('enableGlobalHideShortcut')} />
                 <p className="settings__help indented__help">
                   {intl.formatMessage(messages.appRestartRequired)}
                 </p>
@@ -1040,12 +1036,12 @@ class EditSettingsForm extends Component<IProps, IState> {
                   {intl.formatMessage(messages.sectionUpdates)}
                 </H2>
 
-                <Toggle {...form.$('automaticUpdates').bind()} />
+                <Toggle field={form.$('automaticUpdates')} />
                 {automaticUpdates && (
                   <>
                     <>
                       <div>
-                        <Toggle {...form.$('beta').bind()} />
+                        <Toggle field={form.$('beta')} />
                         {updateIsReadyToInstall ? (
                           <Button
                             label={intl.formatMessage(
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
new file mode 100644
index 000000000..c1d86a7f6
--- /dev/null
+++ b/src/components/ui/Toggle.js
@@ -0,0 +1,72 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { Field } from 'mobx-react-form';
+
+// Can this file be merged into the './toggle/index.tsx' file?
+class Toggle extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    showLabel: PropTypes.bool,
+    disabled: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: '',
+    showLabel: true,
+    disabled: false,
+  };
+
+  onChange(e) {
+    const { field } = this.props;
+
+    field.onChange(e);
+  }
+
+  render() {
+    const { field, className, showLabel, disabled } = this.props;
+
+    if (field.value === '' && field.default !== '') {
+      field.value = field.default;
+    }
+
+    return (
+      <div
+        className={classnames([
+          'franz-form__field',
+          'franz-form__toggle-wrapper',
+          'franz-form__toggle-disabled',
+          className,
+        ])}
+      >
+        <label
+          htmlFor={field.id}
+          className={classnames({
+            'franz-form__toggle': true,
+            'is-active': field.value,
+          })}
+        >
+          <div className="franz-form__toggle-button" />
+          <input
+            type="checkbox"
+            id={field.id}
+            name={field.name}
+            value={field.name}
+            checked={field.value}
+            onChange={e => (!disabled ? this.onChange(e) : null)}
+          />
+        </label>
+        {field.error && <div className={field.error}>{field.error}</div>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
+      </div>
+    );
+  }
+}
+
+export default observer(Toggle);
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index fee8adbc7..d478cbba5 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -1,26 +1,27 @@
 import classnames from 'classnames';
 import { Property } from 'csstype';
-import { noop } from 'lodash';
 import { Component, InputHTMLAttributes } from 'react';
-import withStyles, { WithStylesProps } from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
+
 import { Theme } from '../../../themes';
+import { IFormField } from '../typings/generic';
+
 import Error from '../error';
 import Label from '../label';
-import { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 
 interface IProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>,
+  extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
     WithStylesProps<typeof styles> {
   className?: string;
-  value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form
 }
 
-const buttonTransition: string =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'all .5s'
-    : 'none';
+let buttonTransition: string = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'all .5s';
+}
 
 const styles = (theme: Theme) => ({
   toggle: {
@@ -63,18 +64,25 @@ const styles = (theme: Theme) => ({
 });
 
 class ToggleComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
   render() {
     const {
       classes,
       className,
-      id = '',
-      name = '',
-      label = '',
-      error = '',
-      value = false,
-      showLabel = true,
-      disabled = false,
-      onChange = noop,
+      disabled,
+      error,
+      id,
+      label,
+      showLabel,
+      checked,
+      value,
+      onChange,
     } = this.props;
 
     return (
@@ -94,24 +102,24 @@ class ToggleComponent extends Component<IProps> {
             <div
               className={classnames({
                 [`${classes.button}`]: true,
-                [`${classes.buttonActive}`]: value,
+                [`${classes.buttonActive}`]: checked,
               })}
             />
             <input
-              type="checkbox"
-              id={id}
-              name={name}
-              checked={value as boolean | undefined}
               className={classes.input}
+              id={id}
+              type="checkbox"
+              checked={checked}
+              value={value}
               onChange={onChange}
               disabled={disabled}
             />
           </div>
         </Label>
-        {error ? <Error message={error as string} /> : null}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
 }
 
-export default withStyles(styles, { injectTheme: true })(ToggleComponent);
+export default injectStyle(styles, { injectTheme: true })(ToggleComponent);
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 509df97e6..6bc9ae6f0 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -176,7 +176,7 @@ class EditWorkspaceForm extends Component {
           )}
           <div className={classes.nameInput}>
             <Input {...form.$('name').bind()} />
-            <Toggle {...form.$('keepLoaded').bind()} />
+            <Toggle field={form.$('keepLoaded')} />
             <p className={`${classes.keepLoadedInfo} franz-form__label`}>
               {intl.formatMessage(messages.keepLoadedInfo)}
             </p>
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.tsx b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index 420aed595..0233d5749 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.tsx
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -1,10 +1,10 @@
-import { Component, ReactElement } from 'react';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
-import withStyles, { WithStylesProps } from 'react-jss';
+import injectSheet from 'react-jss';
 import classnames from 'classnames';
-import Toggle from '../../../components/ui/toggle';
+
+import Toggle from '../../../components/ui/toggle/index';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
-import Service from '../../../models/Service';
 
 const styles = theme => ({
   listItem: {
@@ -29,15 +29,15 @@ const styles = theme => ({
   },
 });
 
-interface IProps extends WithStylesProps<typeof styles> {
+type Props = {
+  classes: any;
   isInWorkspace: boolean;
   onToggle: () => void;
-  service: Service;
-}
+  service: any;
+};
 
-@observer
-class WorkspaceServiceListItem extends Component<IProps> {
-  render(): ReactElement {
+class WorkspaceServiceListItem extends Component<Props> {
+  render() {
     const { classes, isInWorkspace, onToggle, service } = this.props;
 
     return (
@@ -53,7 +53,7 @@ class WorkspaceServiceListItem extends Component<IProps> {
         </span>
         <Toggle
           className={classes.toggle}
-          value={isInWorkspace}
+          checked={isInWorkspace}
           onChange={onToggle}
         />
       </div>
@@ -61,6 +61,6 @@ class WorkspaceServiceListItem extends Component<IProps> {
   }
 }
 
-export default withStyles(styles, { injectTheme: true })(
-  WorkspaceServiceListItem,
+export default injectSheet(styles, { injectTheme: true })(
+  observer(WorkspaceServiceListItem),
 );
diff --git a/src/lib/Tray.ts b/src/lib/Tray.ts
index dafbb68aa..8e489edde 100644
--- a/src/lib/Tray.ts
+++ b/src/lib/Tray.ts
@@ -20,7 +20,7 @@ const INDICATOR_TRAY_INDIRECT = 'tray-indirect';
 
 // TODO: Need to support i18n for a lot of the hard-coded strings in this file
 export default class TrayIcon {
-  tray: Tray | null = null;
+  trayIcon: Tray | null = null;
 
   indicator: string | number = 0;
 
@@ -97,9 +97,7 @@ export default class TrayIcon {
   }
 
   _updateTrayMenu(appSettings): void {
-    if (!this.tray) {
-      return;
-    }
+    if (!this.trayIcon) return;
 
     if (appSettings && appSettings.type === 'app') {
       this.isAppMuted = appSettings.data.isAppMuted; // save current state after a change
@@ -107,7 +105,7 @@ export default class TrayIcon {
 
     this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate(this));
     if (isLinux) {
-      this.tray.setContextMenu(this.trayMenu);
+      this.trayIcon.setContextMenu(this.trayMenu);
     }
   }
 
@@ -117,26 +115,26 @@ export default class TrayIcon {
   }
 
   _show(): void {
-    if (this.tray) {
+    if (this.trayIcon) {
       return;
     }
 
-    this.tray = new Tray(this._getAsset('tray', INDICATOR_TRAY_PLAIN));
-    this.tray.setToolTip('Ferdium');
+    this.trayIcon = new Tray(this._getAsset('tray', INDICATOR_TRAY_PLAIN));
+    this.trayIcon.setToolTip('Ferdium');
 
     this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate(this));
     if (isLinux) {
-      this.tray.setContextMenu(this.trayMenu);
+      this.trayIcon.setContextMenu(this.trayMenu);
     }
 
-    this.tray.on('click', () => {
+    this.trayIcon.on('click', () => {
       this._toggleWindow();
     });
 
     if (isMac || isWindows) {
-      this.tray.on('right-click', () => {
-        if (this.tray && this.trayMenu) {
-          this.tray.popUpContextMenu(this.trayMenu);
+      this.trayIcon.on('right-click', () => {
+        if (this.trayIcon && this.trayMenu) {
+          this.trayIcon.popUpContextMenu(this.trayMenu);
         }
       });
     }
@@ -179,10 +177,10 @@ export default class TrayIcon {
   }
 
   _hide(): void {
-    if (!this.tray) return;
+    if (!this.trayIcon) return;
 
-    this.tray.destroy();
-    this.tray = null;
+    this.trayIcon.destroy();
+    this.trayIcon = null;
 
     if (isMac && this.themeChangeSubscriberId) {
       systemPreferences.unsubscribeNotification(this.themeChangeSubscriberId);
@@ -218,16 +216,16 @@ export default class TrayIcon {
   }
 
   _refreshIcon(): void {
-    if (!this.tray) {
+    if (!this.trayIcon) {
       return;
     }
 
-    this.tray.setImage(
+    this.trayIcon.setImage(
       this._getAsset('tray', this._getAssetFromIndicator(this.indicator)),
     );
 
     if (isMac && !macosVersion.isGreaterThanOrEqualTo('11')) {
-      this.tray.setPressedImage(
+      this.trayIcon.setPressedImage(
         this._getAsset(
           'tray',
           `${this._getAssetFromIndicator(this.indicator)}-active`,