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>

1 files changed, 0 insertions, 46 deletions

diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
deleted file mode 100644
index d4457ae5f..000000000
--- a/src/components/ui/Loader.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Component, ReactElement, ReactNode } from 'react';
-import { observer, inject } from 'mobx-react';
-import Loader from 'react-loader';
-
-import { FerdiumStores } from '../../@types/stores.types';
-
-interface IProps {
-  className?: string;
-  color?: string;
-  loaded?: boolean;
-  stores?: FerdiumStores;
-  children?: ReactNode;
-}
-
-// TODO: Can this file be merged into the './loader/index.tsx' file?
-@inject('stores')
-@observer
-class LoaderComponent extends Component<IProps> {
-  render(): ReactElement {
-    const {
-      loaded = false,
-      color = 'ACCENT',
-      className,
-      children,
-    } = this.props;
-
-    const loaderColor =
-      color === 'ACCENT' ? this.props.stores!.settings.app.accentColor : color;
-
-    return (
-      // @ts-expect-error Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>'
-      <Loader
-        loaded={loaded}
-        width={4}
-        scale={0.6}
-        color={loaderColor}
-        component="span"
-        className={className}
-      >
-        {children}
-      </Loader>
-    );
-  }
-}
-
-export default LoaderComponent;