diff options
author | 2023-10-27 02:19:31 +0200 | |
---|---|---|
committer | 2023-10-27 01:19:31 +0100 | |
commit | 78cb67c641e5723af59e0cf8a172a443aafa6f33 (patch) | |
tree | ec121e8efecf027717ce4e58b29c72fa93ed3315 /src/components/ui/button/index.tsx | |
parent | 6.5.3-nightly.4 [skip ci] (diff) | |
download | ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.tar.gz ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.tar.zst ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.zip |
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>
Diffstat (limited to 'src/components/ui/button/index.tsx')
-rw-r--r-- | src/components/ui/button/index.tsx | 27 |
1 files changed, 6 insertions, 21 deletions
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index c37a88afa..f8bcf76b2 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -5,7 +5,7 @@ import { Property } from 'csstype'; | |||
5 | import { noop } from 'lodash'; | 5 | import { noop } from 'lodash'; |
6 | import { Component, MouseEventHandler } from 'react'; | 6 | import { Component, MouseEventHandler } from 'react'; |
7 | import withStyles, { WithStylesProps } from 'react-jss'; | 7 | import withStyles, { WithStylesProps } from 'react-jss'; |
8 | import Loader from 'react-loader'; | 8 | import Loader from '../loader/index'; |
9 | import { Theme } from '../../../themes'; | 9 | import { Theme } from '../../../themes'; |
10 | import { IFormField } from '../typings/generic'; | 10 | import { IFormField } from '../typings/generic'; |
11 | 11 | ||
@@ -111,16 +111,8 @@ const styles = (theme: Theme) => ({ | |||
111 | disabled: { | 111 | disabled: { |
112 | opacity: theme.inputDisabledOpacity, | 112 | opacity: theme.inputDisabledOpacity, |
113 | }, | 113 | }, |
114 | loader: { | ||
115 | position: 'relative' as Property.Position, | ||
116 | width: 20, | ||
117 | height: 18, | ||
118 | zIndex: 9999, | ||
119 | }, | ||
120 | loaderContainer: { | 114 | loaderContainer: { |
121 | width: (props: IProps): string => (props.busy ? '40px' : '0'), | ||
122 | height: 20, | 115 | height: 20, |
123 | overflow: 'hidden', | ||
124 | transition: loaderContainerTransition, | 116 | transition: loaderContainerTransition, |
125 | marginLeft: (props: IProps): number => (props.busy ? 20 : 10), | 117 | marginLeft: (props: IProps): number => (props.busy ? 20 : 10), |
126 | marginRight: (props: IProps): number => (props.busy ? -20 : -10), | 118 | marginRight: (props: IProps): number => (props.busy ? -20 : -10), |
@@ -200,18 +192,11 @@ class ButtonComponent extends Component<IProps, IState> { | |||
200 | 192 | ||
201 | const content = ( | 193 | const content = ( |
202 | <> | 194 | <> |
203 | <div className={classes.loaderContainer}> | 195 | {showLoader && ( |
204 | {showLoader && ( | 196 | <div className={classes.loaderContainer}> |
205 | <Loader | 197 | <Loader size={18} color="#FFFFFF" /> |
206 | loaded={false} | 198 | </div> |
207 | width={4} | 199 | )} |
208 | scale={0.45} | ||
209 | // color={theme.buttonLoaderColor[buttonType!]} | ||
210 | // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps> | ||
211 | parentClassName={classes.loader} | ||
212 | /> | ||
213 | )} | ||
214 | </div> | ||
215 | <div className={classes.label}> | 200 | <div className={classes.label}> |
216 | {icon && <Icon path={icon} size={0.8} className={classes.icon} />} | 201 | {icon && <Icon path={icon} size={0.8} className={classes.icon} />} |
217 | {label} | 202 | {label} |