48 files changed, 112 insertions, 112 deletions

diff --git a/src/components/auth/Invite.tsx b/src/components/auth/Invite.tsx
index cebef9365..4f2cb19fe 100644
--- a/src/components/auth/Invite.tsx
+++ b/src/components/auth/Invite.tsx
@@ -86,7 +86,7 @@ class Invite extends Component<IProps, IState> {
               },
             },
           }),
-          // TODO - [TS DEBT] need to fix this type once mobx-react-form is updated to next version
+          // TODO: [TS DEBT] need to fix this type once mobx-react-form is updated to next version
         ] as any,
       },
     });
diff --git a/src/components/auth/SetupAssistant.tsx b/src/components/auth/SetupAssistant.tsx
index c5fb79919..fdcbba45e 100644
--- a/src/components/auth/SetupAssistant.tsx
+++ b/src/components/auth/SetupAssistant.tsx
@@ -135,7 +135,7 @@ const styles = theme => ({
 interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
   onSubmit: (...args: any[]) => void;
   isInviteSuccessful?: boolean;
-  services: any; //  TODO - [TS DEBT] check legacy services type
+  services: any; // TODO: [TS DEBT] check legacy services type
   isSettingUpServices: boolean;
 }
 
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 86b4e787e..97795212a 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -14,7 +14,6 @@ import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
 import ErrorBoundary from '../util/ErrorBoundary';
 import { updateVersionParse } from '../../helpers/update-helpers';
 
-// import globalMessages from '../../i18n/globalMessages';
 import { isMac, isWindows } from '../../environment';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
@@ -45,13 +44,11 @@ const messages = defineMessages({
   },
 });
 
-let transition = 'none';
+const transition = window?.matchMedia('(prefers-reduced-motion: no-preference)')
+  ? 'transform 0.5s ease'
+  : 'none';
 
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  transition = 'transform 0.5s ease';
-}
-
-const styles = theme => ({
+const styles = (theme: { workspaces: { drawer: { width: any } } }) => ({
   appContent: {
     // width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
     width: '100%',
diff --git a/src/components/services/content/ConnectionLostBanner.tsx b/src/components/services/content/ConnectionLostBanner.tsx
index 88731f3b9..7040337f0 100644
--- a/src/components/services/content/ConnectionLostBanner.tsx
+++ b/src/components/services/content/ConnectionLostBanner.tsx
@@ -21,10 +21,11 @@ const messages = defineMessages({
   },
 });
 
-const buttonTransition =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'opacity 0.25s'
-    : 'none';
+const buttonTransition = window?.matchMedia(
+  '(prefers-reduced-motion: no-preference)',
+)
+  ? 'opacity 0.25s'
+  : 'none';
 
 const styles = theme => ({
   root: {
diff --git a/src/components/services/content/ServiceView.tsx b/src/components/services/content/ServiceView.tsx
index 0754bccc5..19dcdd07a 100644
--- a/src/components/services/content/ServiceView.tsx
+++ b/src/components/services/content/ServiceView.tsx
@@ -21,7 +21,7 @@ interface IProps {
   reload: () => void;
   edit: () => void;
   enable: () => void;
-  // isActive?: boolean; // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it
+  // isActive?: boolean; // TODO: [TECH DEBT][PROP NOT USED IN COMPONENT] check it
   stores?: RealStores;
   isSpellcheckerEnabled: boolean;
 }
@@ -35,7 +35,7 @@ interface IState {
 @inject('stores', 'actions')
 @observer
 class ServiceView extends Component<IProps, IState> {
-  // hibernationTimer = null; //  TODO - [TS DEBT] class property not reassigned, need to find its purpose
+  // hibernationTimer = null; // TODO: [TS DEBT] class property not reassigned, need to find its purpose
 
   autorunDisposer: IReactionDisposer | undefined;
 
@@ -65,7 +65,7 @@ class ServiceView extends Component<IProps, IState> {
   componentWillUnmount() {
     this.autorunDisposer!();
     clearTimeout(this.forceRepaintTimeout!);
-    // clearTimeout(this.hibernationTimer); //  TODO - [TS DEBT] class property not reassigned, need to find its purpose
+    // clearTimeout(this.hibernationTimer); // TODO: [TS DEBT] class property not reassigned, need to find its purpose
   }
 
   render() {
@@ -111,7 +111,7 @@ class ServiceView extends Component<IProps, IState> {
             {service.hasCrashed && (
               <WebviewCrashHandler
                 name={service.recipe.name}
-                // webview={service.webview} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
+                // webview={service.webview} // TODO: [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
                 reload={reload}
               />
             )}
@@ -177,7 +177,7 @@ class ServiceView extends Component<IProps, IState> {
             {service.isActive && (
               <ServiceDisabled
                 name={service.name === '' ? service.recipe.name : service.name}
-                // webview={service.webview} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
+                // webview={service.webview} // TODO: [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it
                 enable={enable}
               />
             )}
diff --git a/src/components/services/content/ServiceWebview.tsx b/src/components/services/content/ServiceWebview.tsx
index ac8d1ea66..008e1b227 100644
--- a/src/components/services/content/ServiceWebview.tsx
+++ b/src/components/services/content/ServiceWebview.tsx
@@ -32,7 +32,7 @@ class ServiceWebview extends Component<IProps> {
     reaction(
       () => this.webview,
       () => {
-        if (this.webview && this.webview.view) {
+        if (this.webview?.view) {
           this.webview.view.addEventListener('console-message', e => {
             debug('Service logged a message:', e.message);
           });
@@ -97,7 +97,7 @@ class ServiceWebview extends Component<IProps> {
       <ElectronWebView
         ref={webview => {
           this._setWebview(webview);
-          if (webview && webview.view) {
+          if (webview?.view) {
             webview.view.addEventListener(
               'did-stop-loading',
               this.refocusWebview,
@@ -122,7 +122,7 @@ class ServiceWebview extends Component<IProps> {
             });
           }, 0);
         }}
-        // onUpdateTargetUrl={this.updateTargetUrl} // TODO - [TS DEBT] need to check where its from
+        // onUpdateTargetUrl={this.updateTargetUrl} // TODO: [TS DEBT] need to check where its from
         useragent={service.userAgent}
         disablewebsecurity={
           service.recipe.disablewebsecurity ? true : undefined
diff --git a/src/components/services/content/Services.tsx b/src/components/services/content/Services.tsx
index fa26edaa6..5766e0d75 100644
--- a/src/components/services/content/Services.tsx
+++ b/src/components/services/content/Services.tsx
@@ -42,8 +42,8 @@ interface IProps extends WrappedComponentProps, WithStylesProps<typeof styles> {
   services?: Service[];
   setWebviewReference: () => void;
   detachService: () => void;
-  // handleIPCMessage: () => void; // TODO - [TECH DEBT] later check it
-  // openWindow: () => void; // TODO - [TECH DEBT] later check it
+  // handleIPCMessage: () => void; // TODO: [TECH DEBT] later check it
+  // openWindow: () => void; // TODO: [TECH DEBT] later check it
   reload: (options: { serviceId: string }) => void;
   openSettings: (options: { path: string }) => void;
   update: (options: {
@@ -88,10 +88,10 @@ class Services extends Component<IProps, IState> {
   render(): ReactElement {
     const {
       services = [],
-      // handleIPCMessage, // TODO - [TECH DEBT] later check it
+      // handleIPCMessage, // TODO: [TECH DEBT] later check it
       setWebviewReference,
       detachService,
-      // openWindow, // TODO - [TECH DEBT] later check it
+      // openWindow, // TODO: [TECH DEBT] later check it
       reload,
       openSettings,
       update,
@@ -136,10 +136,10 @@ class Services extends Component<IProps, IState> {
             <ServiceView
               key={service.id}
               service={service}
-              // handleIPCMessage={handleIPCMessage} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] later check it
+              // handleIPCMessage={handleIPCMessage} //  TODO: [TECH DEBT][PROPS NOT EXIST IN COMPONENT] later check it
               setWebviewRef={setWebviewReference}
               detachService={detachService}
-              // openWindow={openWindow} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] later check it
+              // openWindow={openWindow} //  TODO: [TECH DEBT][PROPS NOT EXIST IN COMPONENT] later check it
               reload={() => reload({ serviceId: service.id })}
               edit={() => openSettings({ path: `services/edit/${service.id}` })}
               enable={() =>
diff --git a/src/components/settings/navigation/SettingsNavigation.tsx b/src/components/settings/navigation/SettingsNavigation.tsx
index 4e2c7f410..6ffaa411f 100644
--- a/src/components/settings/navigation/SettingsNavigation.tsx
+++ b/src/components/settings/navigation/SettingsNavigation.tsx
@@ -187,7 +187,7 @@ class SettingsNavigation extends Component<IProps> {
         <button
           type="button"
           // @ts-ignore
-          to="/auth/logout" // TODO - [TS DEBT] Need to check if button take this prop
+          to="/auth/logout" // TODO: [TS DEBT] Need to check if button take this prop
           className="settings-navigation__link"
           onClick={this.handleLogout.bind(this)}
         >
diff --git a/src/components/settings/services/ServiceItem.tsx b/src/components/settings/services/ServiceItem.tsx
index 0737a680c..bf2dfa9da 100644
--- a/src/components/settings/services/ServiceItem.tsx
+++ b/src/components/settings/services/ServiceItem.tsx
@@ -32,7 +32,7 @@ class ServiceItem extends Component<IProps> {
   render(): ReactElement {
     const {
       service,
-      // toggleAction, //  TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it later
+      // toggleAction, // TODO: [TECH DEBT][PROP NOT USED IN COMPONENT] check it later
       goToServiceForm,
     } = this.props;
     const { intl } = this.props;
diff --git a/src/components/settings/services/ServicesDashboard.tsx b/src/components/settings/services/ServicesDashboard.tsx
index 36057902f..d64779a36 100644
--- a/src/components/settings/services/ServicesDashboard.tsx
+++ b/src/components/settings/services/ServicesDashboard.tsx
@@ -54,7 +54,7 @@ const messages = defineMessages({
 interface IProps extends WrappedComponentProps {
   services: Service[];
   isLoading: boolean;
-  // toggleService: any; // TODO - - [TECH DEBT] check it later
+  // toggleService: any; // TODO: [TECH DEBT] check it later
   filterServices: any;
   resetFilter: () => void;
   goTo: (to: To, state?: any) => void;
@@ -70,7 +70,7 @@ class ServicesDashboard extends Component<IProps> {
     const {
       services,
       isLoading,
-      // toggleService, // TODO - - [TECH DEBT] check it later
+      // toggleService, // TODO: [TECH DEBT] check it later
       filterServices,
       resetFilter,
       goTo,
@@ -163,7 +163,7 @@ class ServicesDashboard extends Component<IProps> {
                   <ServiceItem
                     key={service.id}
                     service={service}
-                    // TODO -  - [TECH DEBT][PROPS NOT USED IN COMPONENT] check it later
+                    // TODO: [TECH DEBT][PROPS NOT USED IN COMPONENT] check it later
                     // toggleAction={() =>
                     //   toggleService({ serviceId: service.id })
                     // }
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 6ece340ba..11ae63737 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -28,7 +28,12 @@ import {
   SPLIT_COLUMNS_MAX,
   SPLIT_COLUMNS_MIN,
 } from '../../../config';
-import { isMac, isWinPortable, isWindows, lockFerdiumShortcutKey } from '../../../environment';
+import {
+  isMac,
+  isWinPortable,
+  isWindows,
+  lockFerdiumShortcutKey,
+} from '../../../environment';
 import { openExternalUrl, openPath } from '../../../helpers/url-helpers';
 import globalMessages from '../../../i18n/globalMessages';
 import Icon from '../../ui/icon';
@@ -376,8 +381,6 @@ class EditSettingsForm extends Component<IProps, IState> {
       updateButtonLabelMessage = messages.updateStatusSearching;
     } else if (isUpdateAvailable) {
       updateButtonLabelMessage = messages.updateStatusAvailable;
-    } else {
-      updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
     const { lockingFeatureEnabled, scheduledDNDEnabled, reloadAfterResume } =
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 3ef55fac6..6fd2d4426 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -1,3 +1,5 @@
+// TODO: Is this feature even being used? If not, then we can cleanup this code
+
 import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
diff --git a/src/components/ui/AppLoader/styles.ts b/src/components/ui/AppLoader/styles.ts
index 6bf3b4f3c..5ad41913a 100644
--- a/src/components/ui/AppLoader/styles.ts
+++ b/src/components/ui/AppLoader/styles.ts
@@ -1,7 +1,8 @@
-const sloganTransition =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'opacity 1s ease'
-    : 'none';
+const sloganTransition = window?.matchMedia(
+  '(prefers-reduced-motion: no-preference)',
+)
+  ? 'opacity 1s ease'
+  : 'none';
 
 export default {
   component: {
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx
index 1fc24816a..9782db151 100644
--- a/src/components/ui/Infobox.tsx
+++ b/src/components/ui/Infobox.tsx
@@ -35,7 +35,7 @@ interface IState {
   dismissed: boolean;
 }
 
-// Can this file be merged into the './infobox/index.tsx' file?
+// TODO: Can this file be merged into the './infobox/index.tsx' file?
 @observer
 class Infobox extends Component<IProps, IState> {
   constructor(props: IProps) {
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 17cb35f41..37555df16 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -12,7 +12,7 @@ interface IProps {
   children?: ReactNode;
 }
 
-// Can this file be merged into the './loader/index.tsx' file?
+// TODO: Can this file be merged into the './loader/index.tsx' file?
 @inject('stores')
 @observer
 class LoaderComponent extends Component<IProps> {
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index e6cb5d5a5..b5be64c5d 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -10,7 +10,7 @@ type Props = {
   showLabel: boolean;
 };
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
+// TODO: Should this file be converted into the coding style similar to './toggle/index.tsx'?
 class Radio extends Component<Props> {
   static defaultProps = {
     focus: false,
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index e8e305fdd..8ae2945ce 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -18,7 +18,7 @@ interface IProps {
   multiple?: boolean;
 }
 
-// Can this file be merged into the './select/index.tsx' file?
+// TODO: Can this file be merged into the './select/index.tsx' file?
 @observer
 class Select extends Component<IProps> {
   private element: RefObject<HTMLSelectElement> =
@@ -57,7 +57,7 @@ class Select extends Component<IProps> {
     let selected = field.value;
 
     if (multiple) {
-      if (typeof field.value === 'string' && field.value.slice(0, 1) === '[') {
+      if (typeof field.value === 'string' && field.value.startsWith('[')) {
         // Value is JSON encoded
         selected = JSON.parse(field.value);
       } else if (typeof field.value === 'object') {
diff --git a/src/components/ui/ServiceIcon.tsx b/src/components/ui/ServiceIcon.tsx
index 39a32e44d..6920611d0 100644
--- a/src/components/ui/ServiceIcon.tsx
+++ b/src/components/ui/ServiceIcon.tsx
@@ -27,7 +27,7 @@ interface IProps extends WithStylesProps<typeof styles> {
   className?: string;
 }
 
-// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+// TODO: [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
 @observer
 class ServiceIcon extends Component<IProps> {
   render(): ReactNode {
diff --git a/src/components/ui/Slider.tsx b/src/components/ui/Slider.tsx
index be0846513..aa351ccd2 100644
--- a/src/components/ui/Slider.tsx
+++ b/src/components/ui/Slider.tsx
@@ -12,7 +12,7 @@ interface IProps {
   onSliderChange?: (e: ChangeEvent) => void;
 }
 
-// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+// TODO: [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
 @observer
 class Slider extends Component<IProps> {
   onChange(e: ChangeEvent<HTMLInputElement>): void {
diff --git a/src/components/ui/StatusBarTargetUrl.tsx b/src/components/ui/StatusBarTargetUrl.tsx
index 7b053f410..d969267eb 100644
--- a/src/components/ui/StatusBarTargetUrl.tsx
+++ b/src/components/ui/StatusBarTargetUrl.tsx
@@ -8,7 +8,7 @@ interface IProps {
   text?: string;
 }
 
-// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+// TODO: [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
 @observer
 class StatusBarTargetUrl extends Component<IProps> {
   render() {
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index 3b878a9de..28ec2ff90 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -28,7 +28,7 @@ const buttonStyles = (theme: Theme) => {
 const infoBoxTransition: string = 'none';
 const ctaTransition: string = 'none';
 
-// TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdium
+// TODO: Not sure why, but this location alone, the `window` is not defined - and it throws an error thus aborting the startup sequence of ferdium
 // if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
 //   infoBoxTransition = 'all 0.5s';
 //   ctaTransition = 'opacity 0.3s';
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index fe8f35607..064c1807f 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -67,7 +67,7 @@ class Input extends Component<IProps, IState> {
   componentDidMount(): void {
     const { focus = false, data = {} } = this.props;
 
-    if (this.inputElement && this.inputElement.current) {
+    if (this.inputElement?.current) {
       if (focus) {
         this.inputElement.current.focus();
       }
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 695e70e28..017de5423 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -17,7 +17,7 @@ import Wrapper from '../wrapper';
 let popupTransition: string = 'none';
 let toggleTransition: string = 'none';
 
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window?.matchMedia('(prefers-reduced-motion: no-preference)')) {
   popupTransition = 'all 0.3s';
   toggleTransition = 'transform 0.3s';
 }
@@ -194,13 +194,13 @@ class SelectComponent extends Component<IProps, IState> {
   componentDidUpdate(): void {
     const { open } = this.state;
 
-    if (this.searchInputRef && this.searchInputRef.current && open) {
+    if (this.searchInputRef?.current && open) {
       this.searchInputRef.current.focus();
     }
   }
 
   componentDidMount(): void {
-    if (this.inputRef && this.inputRef.current) {
+    if (this.inputRef?.current) {
       const { data } = this.props;
 
       if (data) {
@@ -215,7 +215,7 @@ class SelectComponent extends Component<IProps, IState> {
   UNSAFE_componentWillMount(): void {
     const { value } = this.props;
 
-    if (this.componentRef && this.componentRef.current) {
+    if (this.componentRef?.current) {
       this.componentRef.current.removeEventListener(
         'keydown',
         this.keyListener,
@@ -285,7 +285,7 @@ class SelectComponent extends Component<IProps, IState> {
       e.preventDefault();
     }
 
-    if (this.componentRef && this.componentRef.current) {
+    if (this.componentRef?.current) {
       if (e.keyCode === 38 && selected > 0) {
         this.setState((state: IState) => ({
           selected: state.selected - 1,
@@ -302,8 +302,7 @@ class SelectComponent extends Component<IProps, IState> {
       }
 
       if (
-        this.activeOptionRef &&
-        this.activeOptionRef.current &&
+        this.activeOptionRef?.current &&
         this.scrollContainerRef &&
         this.scrollContainerRef.current
       ) {
@@ -350,13 +349,11 @@ class SelectComponent extends Component<IProps, IState> {
 
     const { open, needle, value, selected, options } = this.state;
 
-    let selection = '';
+    let selection = actionText;
     if (!value && defaultValue && options![defaultValue]) {
       selection = options![defaultValue];
     } else if (value && options![value]) {
       selection = options![value];
-    } else {
-      selection = actionText;
     }
 
     return (
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index 89e85ac11..fbdef7fc6 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -38,7 +38,7 @@ class TextareaComponent extends Component<IProps> {
   componentDidMount() {
     const { data } = this.props;
 
-    if (this.textareaRef && this.textareaRef.current && data) {
+    if (this.textareaRef?.current && data) {
       Object.keys(data).map(
         key => (this.textareaRef.current!.dataset[key] = data[key]),
       );
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index 828941886..48f68943b 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -16,10 +16,11 @@ interface IProps
   className?: string;
 }
 
-const buttonTransition: string =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'all .5s'
-    : 'none';
+const buttonTransition: string = window?.matchMedia(
+  '(prefers-reduced-motion: no-preference)',
+)
+  ? 'all .5s'
+  : 'none';
 
 const styles = (theme: Theme) => ({
   toggle: {
diff --git a/src/containers/auth/SetupAssistantScreen.tsx b/src/containers/auth/SetupAssistantScreen.tsx
index 0d4c3feec..1a20ab002 100644
--- a/src/containers/auth/SetupAssistantScreen.tsx
+++ b/src/containers/auth/SetupAssistantScreen.tsx
@@ -96,7 +96,7 @@ class SetupAssistantScreen extends Component<IProps, IState> {
       <SetupAssistant
         onSubmit={config => this.setupServices(config)}
         services={this.services}
-        // embed={false} //  TODO - [TS DEBT][PROP NOT USED IN COMPONENT] check legacy services type
+        // embed={false} // TODO: [TS DEBT][PROP NOT USED IN COMPONENT] check legacy services type
         isSettingUpServices={this.state.isSettingUpServices}
       />
     );
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
index 1cffc7ad1..1929492ff 100644
--- a/src/containers/layout/AppLayoutContainer.tsx
+++ b/src/containers/layout/AppLayoutContainer.tsx
@@ -120,10 +120,10 @@ class AppLayoutContainer extends Component<IProps> {
     const servicesContainer = (
       <Services
         services={services.allDisplayedUnordered}
-        // handleIPCMessage={handleIPCMessage} // TODO - - [TECH DEBT] check it later
+        // handleIPCMessage={handleIPCMessage} // TODO: [TECH DEBT] check it later
         setWebviewReference={setWebviewReference}
         detachService={detachService}
-        // openWindow={openWindow} // TODO - - [TECH DEBT] check it later
+        // openWindow={openWindow} // TODO: [TECH DEBT] check it later
         reload={reload}
         openSettings={openSettings}
         update={updateService}
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx
index 3b9d3ee43..ff2076fed 100644
--- a/src/containers/settings/EditServiceScreen.tsx
+++ b/src/containers/settings/EditServiceScreen.tsx
@@ -391,7 +391,7 @@ class EditServiceScreen extends Component<IProps> {
     if (proxy.isEnabled) {
       const serviceProxyConfig: IProxyConfig = service
         ? /*
-          TODO - [TS DEBT] find out why sometimes proxy[service.id] gives undefined
+          TODO: [TS DEBT] find out why sometimes proxy[service.id] gives undefined
           Note in proxy service id exist as key but value is undefined rather that proxy empty object
 
           Temp fix - or-ed {} (to stores.settings.proxy[service.id] ) to avoid undefined proxy in settingStore throw error
@@ -534,9 +534,9 @@ class EditServiceScreen extends Component<IProps> {
           action={action}
           recipe={recipe}
           service={service}
-          // user={user.data} // TODO - [TS DEBT] Need to check why its passed as its not used inside EditServiceForm
+          // user={user.data} // TODO: [TS DEBT] Need to check why its passed as its not used inside EditServiceForm
           form={form}
-          // status={services.actionStatus} // TODO - [TS DEBT] Need to check why its passed as its not used inside EditServiceForm
+          // status={services.actionStatus} // TODO: [TS DEBT] Need to check why its passed as its not used inside EditServiceForm
           isSaving={
             services.updateServiceRequest.isExecuting ||
             services.createServiceRequest.isExecuting
diff --git a/src/containers/settings/ServicesScreen.tsx b/src/containers/settings/ServicesScreen.tsx
index 70eeffed4..6b648f038 100644
--- a/src/containers/settings/ServicesScreen.tsx
+++ b/src/containers/settings/ServicesScreen.tsx
@@ -14,7 +14,7 @@ class ServicesScreen extends Component<IProps> {
     this.props.actions.service.resetStatus();
   }
 
-  // TODO - [TECH DEBT] need to check it
+  // TODO: [TECH DEBT] need to check it
   // deleteService(): void {
   //   this.props.actions.service.deleteService();
   //   this.props.actions.service.resetFilter();
@@ -38,11 +38,11 @@ class ServicesScreen extends Component<IProps> {
     return (
       <ErrorBoundary>
         <ServicesDashboard
-          // user={user.data} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it later
+          // user={user.data} // TODO: [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it later
           services={allServices}
           status={services.actionStatus}
-          // deleteService={() => this.deleteService()} //  TODO - [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it later
-          // toggleService={toggleService} //  TODO - [TECH DEBT][PROPS NOT USED IN COMPONENT] check it later
+          // deleteService={() => this.deleteService()} // TODO: [TECH DEBT][PROPS NOT EXIST IN COMPONENT] check it later
+          // toggleService={toggleService} // TODO: [TECH DEBT][PROPS NOT USED IN COMPONENT] check it later
           isLoading={isLoading}
           filterServices={filter}
           resetFilter={resetFilter}
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index b6e944724..da75bf57b 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -165,12 +165,6 @@ function generateServiceRibbonWidthStyle(
       sidebarSizeBias = 44;
       break;
     }
-    case 55: {
-      fontSize = 11;
-      tabItemHeightBias = 13;
-      sidebarSizeBias = 37;
-      break;
-    }
     case 80: {
       fontSize = 11;
       tabItemHeightBias = 3;
diff --git a/src/features/todos/components/TodosWebview.tsx b/src/features/todos/components/TodosWebview.tsx
index 4b53df956..7b1b17e64 100644
--- a/src/features/todos/components/TodosWebview.tsx
+++ b/src/features/todos/components/TodosWebview.tsx
@@ -196,7 +196,7 @@ class TodosWebview extends Component<IProps, IState> {
         )}
         {isTodoUrlValid && (
           <Webview
-            // className={classes.webview} // TODO - [TS DEBT] style not found
+            // className={classes.webview} // TODO: [TS DEBT] style not found
             onDidAttach={() => {
               const { setTodosWebview } = this.props;
               setTodosWebview(this.webview);
diff --git a/src/features/todos/containers/TodosScreen.tsx b/src/features/todos/containers/TodosScreen.tsx
index 17f61bd95..8941a4b39 100644
--- a/src/features/todos/containers/TodosScreen.tsx
+++ b/src/features/todos/containers/TodosScreen.tsx
@@ -31,7 +31,7 @@ class TodosScreen extends Component<IProps> {
             this.props.stores!.services.isTodosServiceActive || false
           }
           isVisible={todosStore.isTodosPanelVisible}
-          // togglePanel={todoActions.toggleTodosPanel} // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it later
+          // togglePanel={todoActions.toggleTodosPanel} // TODO: [TECH DEBT][PROP NOT USED IN COMPONENT] check it later
           handleClientMessage={todoActions.handleClientMessage}
           setTodosWebview={webview => todoActions.setTodosWebview(webview)}
           width={todosStore.width}
diff --git a/src/features/todos/store.ts b/src/features/todos/store.ts
index 94be4db6a..882fa6a1e 100644
--- a/src/features/todos/store.ts
+++ b/src/features/todos/store.ts
@@ -149,7 +149,7 @@ export default class TodoStore extends FeatureStore {
   @action stop() {
     super.stop();
     debug('TodoStore::stop');
-    // this.reset(); // TODO - [TECH DEBT][PROP NOT IN CLASS] check it later
+    // this.reset(); // TODO: [TECH DEBT][PROP NOT IN CLASS] check it later
     this.isFeatureActive = false;
   }
 
diff --git a/src/features/webControls/components/WebControls.tsx b/src/features/webControls/components/WebControls.tsx
index 74b343948..e76fca6a2 100644
--- a/src/features/webControls/components/WebControls.tsx
+++ b/src/features/webControls/components/WebControls.tsx
@@ -34,10 +34,11 @@ const messages = defineMessages({
   },
 });
 
-const buttonTransition =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'opacity 0.25s'
-    : 'none';
+const buttonTransition = window?.matchMedia(
+  '(prefers-reduced-motion: no-preference)',
+)
+  ? 'opacity 0.25s'
+  : 'none';
 
 const styles = theme => ({
   root: {
@@ -211,7 +212,7 @@ class WebControls extends Component<IProps, IState> {
               });
               navigate(inputUrl);
 
-              if (this.inputRef && this.inputRef.current) {
+              if (this.inputRef?.current) {
                 this.inputRef.current.blur();
               }
             } else if (event.key === 'Escape') {
@@ -220,7 +221,7 @@ class WebControls extends Component<IProps, IState> {
                 inputUrl: url,
               });
 
-              if (this.inputRef && this.inputRef.current) {
+              if (this.inputRef?.current) {
                 this.inputRef.current.blur();
               }
             }
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.tsx b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
index 0ad56d1ae..74ca2797d 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
@@ -19,10 +19,11 @@ const messages = defineMessages({
   },
 });
 
-const itemTransition =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'background-color 300ms ease-out'
-    : 'none';
+const itemTransition = window?.matchMedia(
+  '(prefers-reduced-motion: no-preference)',
+)
+  ? 'background-color 300ms ease-out'
+  : 'none';
 
 const styles = theme => ({
   item: {
diff --git a/src/features/workspaces/components/WorkspaceItem.tsx b/src/features/workspaces/components/WorkspaceItem.tsx
index b097a8298..6c4dd649b 100644
--- a/src/features/workspaces/components/WorkspaceItem.tsx
+++ b/src/features/workspaces/components/WorkspaceItem.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ // TODO - [TS DEBT] Need to check and remove it
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import withStyles, { WithStylesProps } from 'react-jss';
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
index c9af22c96..e1cc0f785 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
@@ -14,10 +14,11 @@ const messages = defineMessages({
   },
 });
 
-const wrapperTransition =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'width 0.5s ease'
-    : 'none';
+const wrapperTransition = window?.matchMedia(
+  '(prefers-reduced-motion: no-preference)',
+)
+  ? 'width 0.5s ease'
+  : 'none';
 
 const styles = theme => ({
   wrapper: {
diff --git a/src/features/workspaces/components/WorkspacesDashboard.tsx b/src/features/workspaces/components/WorkspacesDashboard.tsx
index 06738b38c..c5f8909c1 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.tsx
+++ b/src/features/workspaces/components/WorkspacesDashboard.tsx
@@ -147,7 +147,7 @@ class WorkspacesDashboard extends Component<IProps> {
                   icon="alert"
                   type="danger"
                   ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                  // ctaLoading={getUserWorkspacesRequest.isExecuting} //  TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] need to check and update
+                  // ctaLoading={getUserWorkspacesRequest.isExecuting} // TODO: [TECH DEBT][PROP NOT USED IN COMPONENT] need to check and update
                   ctaOnClick={getUserWorkspacesRequest.retry}
                 >
                   {intl.formatMessage(messages.workspacesRequestFailed)}
diff --git a/src/features/workspaces/store.ts b/src/features/workspaces/store.ts
index d63feb1f8..53e3b62ed 100644
--- a/src/features/workspaces/store.ts
+++ b/src/features/workspaces/store.ts
@@ -28,7 +28,7 @@ export default class WorkspacesStore extends FeatureStore {
 
   @observable nextWorkspace: Workspace | undefined;
 
-  @observable workspaceBeingEdited: any = null; // TODO - [TS DEBT] fix type later
+  @observable workspaceBeingEdited: any = null; // TODO: [TS DEBT] fix type later
 
   @observable isSwitchingWorkspace = false;
 
@@ -36,7 +36,7 @@ export default class WorkspacesStore extends FeatureStore {
 
   @observable isSettingsRouteActive = false;
 
-  stores: any; // TODO - [TS DEBT] fix type later
+  stores: any; // TODO: [TS DEBT] fix type later
 
   actions: Actions | undefined;
 
diff --git a/src/helpers/userAgent-helpers.ts b/src/helpers/userAgent-helpers.ts
index c811b34c9..a89207326 100644
--- a/src/helpers/userAgent-helpers.ts
+++ b/src/helpers/userAgent-helpers.ts
@@ -11,7 +11,7 @@ import {
 } from '../environment';
 
 function macOS() {
-  const version = macosVersion() || '';
+  const version = macosVersion() ?? '';
   let cpuName = cpus()[0].model.split(' ')[0];
   if (cpuName && /\(/.test(cpuName)) {
     cpuName = cpuName.split('(')[0];
diff --git a/src/index.ts b/src/index.ts
index 182a281fa..7ef23415b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -32,6 +32,7 @@ import {
 import { ifUndefined } from './jsUtils';
 
 import { mainIpcHandler as basicAuthHandler } from './features/basicAuth';
+// eslint-disable-next-line import/no-cycle
 import ipcApi from './electron/ipc-api';
 import TrayIcon from './lib/Tray';
 import DBus from './lib/DBus';
diff --git a/src/jsUtils.ts b/src/jsUtils.ts
index 0cc83bb91..47473a538 100644
--- a/src/jsUtils.ts
+++ b/src/jsUtils.ts
@@ -1,7 +1,7 @@
 export const ifUndefined = <T>(
   source: undefined | null | T,
   defaultValue: T,
-): T => (source !== undefined && source !== null ? source : defaultValue);
+): T => source ?? defaultValue;
 
 export const convertToJSON = (data: string | any | undefined | null) =>
   data && typeof data === 'string' && data.length > 0 ? JSON.parse(data) : data;
diff --git a/src/models/Recipe.ts b/src/models/Recipe.ts
index 9a28a59ac..a03d3447f 100644
--- a/src/models/Recipe.ts
+++ b/src/models/Recipe.ts
@@ -56,7 +56,7 @@ export interface IRecipe {
   readonly knownCertificateHosts?: null | Function;
   readonly events?: null | { (key: string): string };
 
-  // TODO - [TS DEBT] Need to check if below properties are needed and where is inherited / implemented from
+  // TODO: [TS DEBT] Need to check if below properties are needed and where is inherited / implemented from
   author?: string[];
   hasDarkMode?: boolean;
   validateUrl?: (url: string) => boolean;
@@ -108,7 +108,7 @@ export default class Recipe implements IRecipe {
   // TODO: Is this being used?
   local = false;
 
-  // TODO - [TS DEBT] introduced to address missing function but need to check how validateUrl is inherited / implemented in recipe
+  // TODO: [TS DEBT] introduced to address missing function but need to check how validateUrl is inherited / implemented in recipe
   validateUrl?: (url: string) => boolean;
 
   // TODO: Need to reconcile which of these are optional/mandatory
diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts
index 18b38799e..82591a2a4 100644
--- a/src/stores/AppStore.ts
+++ b/src/stores/AppStore.ts
@@ -212,7 +212,7 @@ export default class AppStore extends TypedStore {
         }
 
         if (data.error) {
-          if (data.error.message && data.error.message.startsWith('404')) {
+          if (data.error.message?.startsWith('404')) {
             this.updateStatus = this.updateStatusTypes.NOT_AVAILABLE;
             console.warn(
               'Updater warning: there seems to be unpublished pre-release(s) available on GitHub',
@@ -350,7 +350,7 @@ export default class AppStore extends TypedStore {
     if (this.stores.settings.all.app.isAppMuted) return;
 
     // TODO: is there a simple way to use blobs for notifications without storing them on disk?
-    if (options.icon && options.icon.startsWith('blob:')) {
+    if (options.icon?.startsWith('blob:')) {
       delete options.icon;
     }
 
diff --git a/src/stores/GlobalErrorStore.ts b/src/stores/GlobalErrorStore.ts
index be86563d0..8547fec72 100644
--- a/src/stores/GlobalErrorStore.ts
+++ b/src/stores/GlobalErrorStore.ts
@@ -86,7 +86,7 @@ export default class GlobalErrorStore extends TypedStore {
     if (request.isError) {
       this.error = request.error;
 
-      if (request.error && request.error.json) {
+      if (request.error?.json) {
         try {
           this.response = await request.error.json();
         } catch {
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index 9c15d3a07..44f8b277c 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -425,12 +425,12 @@ export default class ServicesStore extends TypedStore {
     return (
       this.allDisplayed.find(
         service => service.isTodosService && service.isEnabled,
-      ) || false
+      ) ?? false
     );
   }
 
   @computed get isTodosServiceActive() {
-    return this.active && this.active.isTodosService;
+    return this.active?.isTodosService;
   }
 
   // TODO: This can actually return undefined as well
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index 6c8f8f20b..7ba8f4222 100644
--- a/src/stores/UserStore.ts
+++ b/src/stores/UserStore.ts
@@ -209,7 +209,7 @@ export default class UserStore extends TypedStore {
     plan,
     currency,
   }): Promise<void> {
-    // TODO - [TS DEBT] Need to find a way proper to implement promise's then and catch in request class
+    // TODO: [TS DEBT] Need to find a way proper to implement promise's then and catch in request class
     // @ts-ignore
     const authToken = await this.signupRequest.execute({
       firstname,
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 8836f2892..f9927d9a3 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -57,7 +57,7 @@ export default (
 
   // Initialize all stores
   for (const name of Object.keys(stores)) {
-    if (stores[name] && stores[name].initialize) {
+    if (stores[name]?.initialize) {
       stores[name].initialize();
     }
   }