25 files changed, 31 insertions, 119 deletions

diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index a7aa33ab1..61e0aed68 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
 import Select from '../ui/Select';
-import Button from '../ui/Button';
+import Button from '../ui/button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
 import { url, required } from '../../helpers/validation-helpers';
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index e7d5731f9..e43be07a8 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 
 import Form from '../../lib/Form';
 import Toggle from '../ui/Toggle';
-import Button from '../ui/Button';
+import Button from '../ui/button';
 import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 84adb320f..8e1ab514e 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -10,7 +10,7 @@ import Appear from '../ui/effects/Appear';
 import Form from '../../lib/Form';
 import { email } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
-import Button from '../ui/Button';
+import Button from '../ui/button';
 import { H1 } from '../ui/headline';
 
 const messages = defineMessages({
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index 710810f2b..90ee46722 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
-import Button from '../ui/Button';
+import Button from '../ui/button';
 import { H1 } from '../ui/headline';
 import { isMac } from '../../environment';
 
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index f1c58a020..c6b26a21d 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -9,7 +9,7 @@ import { API_VERSION } from '../../environment-remote';
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
-import Button from '../ui/Button';
+import Button from '../ui/button';
 import Link from '../ui/Link';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index 0e87cb028..0daa4c77a 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
-import Button from '../ui/Button';
+import Button from '../ui/button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
 import globalMessages from '../../i18n/globalMessages';
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index 90f6733a6..7658eb1ff 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -6,7 +6,7 @@ import injectSheet from 'react-jss';
 import classnames from 'classnames';
 
 import { Input } from '../ui/input/index';
-import { Button } from '../ui/button/index';
+import Button from '../ui/button';
 import { Badge } from '../ui/badge';
 import Modal from '../ui/Modal';
 import * as Infobox from '../ui/Infobox';
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 930b24491..05b6576fa 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -7,7 +7,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
-import Button from '../ui/Button';
+import Button from '../ui/button';
 import Link from '../ui/Link';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index cdc12b01b..a658bec8b 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 
-import Button from '../../../ui/Button';
+import Button from '../../../ui/button';
 
 import styles from './styles';
 import { H1 } from '../../../ui/headline';
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index da5357bf2..d874a354e 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
 const messages = defineMessages({
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 7e635e9ab..0e6e61be8 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import ms from 'ms';
 
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
 const messages = defineMessages({
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 1d2d7a207..32e82940d 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -6,7 +6,7 @@ import ReactTooltip from 'react-tooltip';
 import { H1, H2 } from '../../ui/headline';
 
 import Loader from '../../ui/Loader';
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 import Infobox from '../../ui/Infobox';
 import { LOCAL_SERVER, LIVE_FRANZ_API, LIVE_FERDI_API } from '../../../config';
 
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index cbfe676fe..7087634d2 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -7,7 +7,7 @@ import { Link } from 'react-router';
 import injectSheet from 'react-jss';
 
 import { mdiOpenInNew } from '@mdi/js';
-import { Button } from '../../ui/button/index';
+import Button from '../../ui/button';
 import { Input } from '../../ui/input/index';
 import { H3, H2, H1 } from '../../ui/headline';
 import SearchInput from '../../ui/SearchInput';
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 8e2696e6b..42e21dbc8 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -14,7 +14,7 @@ import { TabItem } from '../../ui/Tabs/TabItem';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Slider from '../../ui/Slider';
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 import ImageUpload from '../../ui/ImageUpload';
 import Select from '../../ui/Select';
 
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index bcbbca3de..991817175 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Infobox from '../../ui/Infobox';
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index a59314eb7..3a4a48177 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -8,7 +8,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js';
 
 import Form from '../../../lib/Form';
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 import Toggle from '../../ui/Toggle';
 import Select from '../../ui/Select';
 import Input from '../../ui/Input';
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 228796ad9..538a9a10c 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -7,7 +7,7 @@ import injectSheet from 'react-jss';
 import classnames from 'classnames';
 
 import Loader from '../../ui/Loader';
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 import Infobox from '../../ui/Infobox';
 import { H1 } from '../../ui/headline';
 import { LIVE_FRANZ_API } from '../../../config';
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index 4d101730f..fb9ef5c9a 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -6,7 +6,7 @@ import { Link } from 'react-router';
 
 import { Input } from '../../ui/input/index';
 import Form from '../../../lib/Form';
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 import Radio from '../../ui/Radio';
 import Infobox from '../../ui/Infobox';
 import { H2 } from '../../ui/headline';
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
deleted file mode 100644
index 882b39e69..000000000
--- a/src/components/ui/Button.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, inject } from 'mobx-react';
-import Loader from 'react-loader';
-import classnames from 'classnames';
-
-// Can this file be merged into the './/button/index.tsx' file?
-class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func,
-    type: PropTypes.string,
-    buttonType: PropTypes.string,
-    loaded: PropTypes.bool,
-    htmlForm: PropTypes.string,
-    stores: PropTypes.shape({
-      settings: PropTypes.shape({
-        app: PropTypes.shape({
-          accentColor: PropTypes.string.isRequired,
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-  };
-
-  static defaultProps = {
-    className: null,
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    buttonType: '',
-    loaded: true,
-    htmlForm: '',
-  };
-
-  render() {
-    const {
-      label,
-      className,
-      disabled,
-      onClick,
-      type,
-      buttonType,
-      loaded,
-      htmlForm,
-    } = this.props;
-
-    const buttonProps = {
-      className: classnames({
-        'franz-form__button': true,
-        [`franz-form__button--${buttonType}`]: buttonType,
-        [`${className}`]: className,
-      }),
-      type,
-    };
-
-    if (disabled) {
-      buttonProps.disabled = true;
-    }
-
-    if (onClick) {
-      buttonProps.onClick = onClick;
-    }
-
-    if (htmlForm) {
-      buttonProps.form = htmlForm;
-    }
-
-    return (
-      // disabling rule as button has type defined in `buttonProps`
-      /* eslint-disable react/button-has-type */
-      <button {...buttonProps}>
-        <Loader
-          loaded={loaded}
-          lines={10}
-          scale={0.4}
-          color={
-            buttonType !== 'secondary'
-              ? '#FFF'
-              : this.props.stores.settings.app.accentColor
-          }
-          component="span"
-        />
-        {label}
-      </button>
-      /* eslint-enable react/button-has-type */
-    );
-  }
-}
-
-export default inject('stores')(observer(Button));
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 11369dcbd..822ddf48f 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -35,7 +35,11 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> {
 let buttonTransition: string = 'none';
 let loaderContainerTransition: string = 'none';
 
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (
+  typeof window !== 'undefined' &&
+  window &&
+  window.matchMedia('(prefers-reduced-motion: no-preference)')
+) {
   buttonTransition = 'background .5s, opacity 0.3s';
   loaderContainerTransition = 'all 0.3s';
 }
@@ -259,6 +263,6 @@ class ButtonComponent extends Component<IProps> {
   }
 }
 
-export const Button = injectStyle(styles, { injectTheme: true })(
-  ButtonComponent,
-);
+const Button = injectStyle(styles, { injectTheme: true })(ButtonComponent);
+
+export default Button;
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
index 8687cc09f..c1861e5f7 100644
--- a/src/components/util/ErrorBoundary/index.js
+++ b/src/components/util/ErrorBoundary/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import Button from '../../ui/Button';
+import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
 import styles from './styles';
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index ab5c518f8..acba5a90d 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 
 import Modal from '../../components/ui/Modal';
 import Input from '../../components/ui/Input';
-import Button from '../../components/ui/Button';
+import Button from '../../components/ui/button';
 
 import { state, resetState, sendCredentials, cancelLogin } from './store';
 import Form from './Form';
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index ff052a050..c40f8559f 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -7,7 +7,7 @@ import { state as ModalState } from './store';
 
 import { H1 } from '../../components/ui/headline';
 import { sendAuthRequest } from '../../api/utils/auth';
-import Button from '../../components/ui/Button';
+import Button from '../../components/ui/button';
 import { Input } from '../../components/ui/input/index';
 import Modal from '../../components/ui/Modal';
 import { DEBUG_API } from '../../config';
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index 898afb22e..aebe740d0 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 
 import { Input } from '../../../components/ui/input/index';
-import { Button } from '../../../components/ui/button/index';
+import Button from '../../../components/ui/button';
 import Form from '../../../lib/Form';
 import { required } from '../../../helpers/validation-helpers';
 import { workspaceStore } from '../index';
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 6829fddaa..9baa80e98 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -7,7 +7,7 @@ import injectSheet from 'react-jss';
 
 import { Infobox } from '../../../components/ui/infobox/index';
 import { Input } from '../../../components/ui/input/index';
-import { Button } from '../../../components/ui/button/index';
+import Button from '../../../components/ui/button';
 import Workspace from '../models/Workspace';
 import Service from '../../../models/Service';
 import Form from '../../../lib/Form';