Revert "remove duplicate Button component"

This reverts commit bbde4a9d54d9c7dc03f34ca4113061a605dd5040.

25 files changed, 119 insertions, 31 deletions

diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 61e0aed68..a7aa33ab1 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 e43be07a8..e7d5731f9 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 8e1ab514e..84adb320f 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 90ee46722..710810f2b 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 c6b26a21d..f1c58a020 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 0daa4c77a..0e87cb028 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 7658eb1ff..90f6733a6 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';
+import { Button } from '../ui/button/index';
 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 05b6576fa..930b24491 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 a658bec8b..cdc12b01b 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 d874a354e..da5357bf2 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 0e6e61be8..7e635e9ab 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 32e82940d..1d2d7a207 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 ba363ffa9..ef41119c1 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';
+import { Button } from '../../ui/button/index';
 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 42e21dbc8..8e2696e6b 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 991817175..bcbbca3de 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 3a4a48177..a59314eb7 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 538a9a10c..228796ad9 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 fb9ef5c9a..4d101730f 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
new file mode 100644
index 000000000..882b39e69
--- /dev/null
+++ b/src/components/ui/Button.js
@@ -0,0 +1,92 @@
+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 822ddf48f..11369dcbd 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -35,11 +35,7 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> {
 let buttonTransition: string = 'none';
 let loaderContainerTransition: string = 'none';
 
-if (
-  typeof window !== 'undefined' &&
-  window &&
-  window.matchMedia('(prefers-reduced-motion: no-preference)')
-) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   buttonTransition = 'background .5s, opacity 0.3s';
   loaderContainerTransition = 'all 0.3s';
 }
@@ -263,6 +259,6 @@ class ButtonComponent extends Component<IProps> {
   }
 }
 
-const Button = injectStyle(styles, { injectTheme: true })(ButtonComponent);
-
-export default Button;
+export const Button = injectStyle(styles, { injectTheme: true })(
+  ButtonComponent,
+);
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
index c1861e5f7..8687cc09f 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 acba5a90d..ab5c518f8 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 c40f8559f..ff052a050 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 aebe740d0..898afb22e 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';
+import { Button } from '../../../components/ui/button/index';
 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 9baa80e98..6829fddaa 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';
+import { Button } from '../../../components/ui/button/index';
 import Workspace from '../models/Workspace';
 import Service from '../../../models/Service';
 import Form from '../../../lib/Form';