refactor: various improvements (#1296)

* refactor: various improvements

- enable no-use-before-define eslint rule
- shuffle code to conform to no-use-before-define eslint rule
- remove btoa dependency which is deprecated and replace with Buffer.from(string).toString('base64')
- convert some any types into useful ones
- add type annotations where possible
- remove unused @types/expect.js
- install @types/semver and ts-node which were missing
- repair and rewrite add-crowdin-contributors script
- remove export keyword from variables which are never consumed in another file
- remove unity indicator hack where linked issue was closed
- remove module declaration for kebab-case which is unused
- add missing state interface for certain components
- remove default exports for files which already have a named export
- export IRecipePreview so it can be used throughout codebase
- remove unused removeCacheForCallWith method from CachedRequest.ts
- cleanup unused colors and styles inside legacy theme

* - improve ColorPickerInput
- fix invalid DOM nesting with div inside p in EditSettingsForm
- fix progressbarAccentColor color picker not updating input when using slider
- install missing @types/react-color dependency

3 files changed, 40 insertions, 41 deletions

diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
index ff7c45bb1..9b17e551c 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { IntlShape, defineMessages, injectIntl } from 'react-intl';
 import Markdown from 'markdown-to-jsx';
 import { ferdiumVersion } from '../../../environment-remote';
 import {
@@ -26,14 +26,14 @@ const messages = defineMessages({
 });
 
 interface IProps {
-  intl: any;
+  intl: IntlShape;
 }
 
-class ReleaseNotesDashboard extends Component<IProps> {
-  state = {
-    data: '',
-  };
+interface IState {
+  data: string;
+}
 
+class ReleaseNotesDashboard extends Component<IProps, IState> {
   constructor(props) {
     super(props);
 
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
index bc38aa603..4a6fe54f4 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -19,6 +19,7 @@ const messages = defineMessages({
 
 interface IProps extends WrappedComponentProps {
   actions?: Actions;
+  // eslint-disable-next-line react/no-unused-prop-types
   children?: React.ReactNode;
 }
 
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 11ae63737..099a27ebe 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -333,7 +333,7 @@ class EditSettingsForm extends Component<IProps, IState> {
     }
 
     this.props.form.submit({
-      onSuccess: form => {
+      onSuccess: (form: Form) => {
         const values = form.values();
         const { accentColor } = values;
         if (accentColor.trim().length === 0) {
@@ -386,8 +386,9 @@ class EditSettingsForm extends Component<IProps, IState> {
     const { lockingFeatureEnabled, scheduledDNDEnabled, reloadAfterResume } =
       window['ferdium'].stores.settings.all.app;
 
-    let cacheSize;
-    let notCleared;
+    let cacheSize: string;
+    let notCleared: boolean;
+
     if (this.state.activeSetttingsTab === 'advanced') {
       const cacheSizeBytes = getCacheSize();
       debug('cacheSizeBytes:', cacheSizeBytes);
@@ -740,38 +741,35 @@ class EditSettingsForm extends Component<IProps, IState> {
                     defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor,
                   })}
                 </p>
-                <p>
-                  {intl.formatMessage(messages.overallTheme)}
-                  <div className="settings__settings-group__apply-color">
-                    <ColorPickerInput
-                      {...form.$('accentColor').bind()}
-                      onColorChange={this.submit.bind(this)}
-                      className="color-picker-input"
-                    />
-                  </div>
-                </p>
-                <p>
-                  {intl.formatMessage(messages.progressbarTheme)}
-                  <div className="settings__settings-group__apply-color">
-                    <ColorPickerInput
-                      {...form.$('progressbarAccentColor').bind()}
-                      onColorChange={this.submit.bind(this)}
-                      className="color-picker-input"
-                    />
-                  </div>
-                </p>
-                <p>
-                  <div className="settings__settings-group__apply-color">
-                    <Button
-                      buttonType="secondary"
-                      className="settings__settings-group__apply-color__button"
-                      label="Apply color"
-                      onClick={e => {
-                        this.submit(e);
-                      }}
-                    />
-                  </div>
-                </p>
+                <p>{intl.formatMessage(messages.overallTheme)}</p>
+                <div className="settings__settings-group__apply-color">
+                  <ColorPickerInput
+                    {...form.$('accentColor').bind()}
+                    name="accentColor"
+                    onColorChange={e => this.submit(e)}
+                    className="color-picker-input"
+                  />
+                </div>
+                <p>{intl.formatMessage(messages.progressbarTheme)}</p>
+                <div className="settings__settings-group__apply-color">
+                  <ColorPickerInput
+                    {...form.$('progressbarAccentColor').bind()}
+                    name="progressbarAccentColor"
+                    onColorChange={e => this.submit(e)}
+                    className="color-picker-input"
+                  />
+                </div>
+
+                <div className="settings__settings-group__apply-color">
+                  <Button
+                    buttonType="secondary"
+                    className="settings__settings-group__apply-color__button"
+                    label="Apply color"
+                    onClick={e => {
+                      this.submit(e);
+                    }}
+                  />
+                </div>
                 <HrSections />
 
                 <H2 className="settings__section_header">