feat: change loader component (#1410)

* CHANGED react-loater to react-loader-spinner

* CHANGED brandColor to primary

* feat: change loader component

- remove redundant /index path from Loader imports in multiple files
- remove commented out braces in RecipesDashboard
- remove redundant color which is default from Loader in InfoBar
- update size of Loader in InfoBar to be the same as InfoBox
- change passed size prop from string to number in Button component
- add slight gap for FullscreenLoader to styles.ts
- fix Loader to check for color primary which is passed rather than brandColor
- remove hardcoded width and height from WorkspaceSwitchingIndicator which lead to elements not being vertically centered
- remove color prop from Loader in WorkspaceSwitchingIndicator since white is already the default
- remove switchingIndicator.spinnerColor from default theme since white is already the default

* implement PR feedback

* re-add color to WorkspaceSwitchingIndicator

---------

Co-authored-by: MCMXC <16797721+mcmxcdev@users.noreply.github.com>

2 files changed, 7 insertions, 13 deletions

diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
index e1cc0f785..0fce811e5 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
@@ -3,9 +3,8 @@ import { observer } from 'mobx-react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import Loader from '../../../components/ui/loader/index';
+import Loader from '../../../components/ui/loader';
 import { workspaceStore } from '../index';
-import { Theme } from '../../../themes';
 
 const messages = defineMessages({
   switchingTo: {
@@ -41,8 +40,6 @@ const styles = theme => ({
     zIndex: 200,
   },
   spinner: {
-    width: 40,
-    height: 40,
     marginRight: 10,
   },
   message: {
@@ -52,14 +49,14 @@ const styles = theme => ({
   },
 });
 
-interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
-  theme?: Theme;
-}
+interface IProps
+  extends WithStylesProps<typeof styles>,
+    WrappedComponentProps {}
 
 @observer
 class WorkspaceSwitchingIndicator extends Component<IProps> {
   render(): ReactElement | null {
-    const { classes, intl, theme } = this.props;
+    const { classes, intl } = this.props;
     const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
 
     if (!isSwitchingWorkspace) {
@@ -73,10 +70,7 @@ class WorkspaceSwitchingIndicator extends Component<IProps> {
     return (
       <div className={classnames([classes.wrapper])}>
         <div className={classes.component}>
-          <Loader
-            className={classes.spinner}
-            color={theme?.workspaces.switchingIndicator.spinnerColor}
-          />
+          <Loader className={classes.spinner} color="#FFFFFF" />
           <p className={classes.message}>
             {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`}
           </p>
diff --git a/src/features/workspaces/components/WorkspacesDashboard.tsx b/src/features/workspaces/components/WorkspacesDashboard.tsx
index ba06730a0..0a417bffd 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.tsx
+++ b/src/features/workspaces/components/WorkspacesDashboard.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import withStyles, { WithStylesProps } from 'react-jss';
 import Infobox from '../../../components/ui/infobox/index';
-import Loader from '../../../components/ui/Loader';
+import Loader from '../../../components/ui/loader';
 import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';