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>

4 files changed, 7 insertions, 7 deletions

diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx
index de323c06e..ffa684458 100644
--- a/src/components/settings/account/AccountDashboard.tsx
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -4,7 +4,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { H1, H2 } from '../../ui/headline';
 
-import Loader from '../../ui/Loader';
+import Loader from '../../ui/loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/infobox/index';
 import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
@@ -123,7 +123,7 @@ class AccountDashboard extends Component<IProp> {
           )}
           {!isUsingWithoutAccount && (
             <>
-              {isLoading && <Loader />}
+              {isLoading && <Loader color="#FFFFFF" />}
 
               {!isLoading && userInfoRequestFailed && (
                 <Infobox
diff --git a/src/components/settings/recipes/RecipesDashboard.tsx b/src/components/settings/recipes/RecipesDashboard.tsx
index 7b7ba19b1..c7aeaa9b3 100644
--- a/src/components/settings/recipes/RecipesDashboard.tsx
+++ b/src/components/settings/recipes/RecipesDashboard.tsx
@@ -10,7 +10,7 @@ import { H1, H2, H3 } from '../../ui/headline';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/infobox/index';
 import RecipeItem from './RecipeItem';
-import Loader from '../../ui/Loader';
+import Loader from '../../ui/loader';
 import Appear from '../../ui/effects/Appear';
 import { FERDIUM_SERVICE_REQUEST } from '../../../config';
 import RecipePreview from '../../../models/RecipePreview';
@@ -219,7 +219,7 @@ class RecipesDashboard extends Component<IProps, IState> {
               <Icon icon={mdiOpenInNew} />
             </a>
           </div>
-          {/* )} */}
+
           {isLoading ? (
             <Loader />
           ) : (
diff --git a/src/components/settings/services/ServicesDashboard.tsx b/src/components/settings/services/ServicesDashboard.tsx
index d64779a36..b8c3ce3f0 100644
--- a/src/components/settings/services/ServicesDashboard.tsx
+++ b/src/components/settings/services/ServicesDashboard.tsx
@@ -5,7 +5,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { To } from 'history';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
-import Loader from '../../ui/Loader';
+import Loader from '../../ui/loader';
 import FAB from '../../ui/FAB';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 77bccb8c3..406656160 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-import Loader from '../../ui/Loader';
+import Loader from '../../ui/loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/Infobox';
 import { H1 } from '../../ui/headline';
@@ -128,7 +128,7 @@ class TeamDashboard extends Component<IProps> {
           </span>
         </div>
         <div className="settings__body">
-          {isLoading && <Loader />}
+          {isLoading && <Loader color="#FFFFFF" />}
 
           {!isLoading && userInfoRequestFailed && (
             <Infobox