diff options
author | 2019-02-06 20:28:15 +0100 | |
---|---|---|
committer | 2019-02-06 20:28:15 +0100 | |
commit | 14b151cad6a5a849bb476aaa3fc53bf1eead7f4b (patch) | |
tree | 8daa38d28fe21e1745093962526dd36744be4274 /packages/forms/src/button/index.tsx | |
parent | update versions (diff) | |
download | ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.tar.gz ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.tar.zst ferdium-app-14b151cad6a5a849bb476aaa3fc53bf1eead7f4b.zip |
cleanup
Diffstat (limited to 'packages/forms/src/button/index.tsx')
-rw-r--r-- | packages/forms/src/button/index.tsx | 14 |
1 files changed, 11 insertions, 3 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index b7cca7fa4..90eda21e7 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -3,7 +3,6 @@ import Icon from '@mdi/react'; | |||
3 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '@meetfranz/theme'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import CSS from 'csstype'; | 5 | import CSS from 'csstype'; |
6 | import { observer } from 'mobx-react'; | ||
7 | import React, { Component } from 'react'; | 6 | import React, { Component } from 'react'; |
8 | import injectStyle from 'react-jss'; | 7 | import injectStyle from 'react-jss'; |
9 | import Loader from 'react-loader'; | 8 | import Loader from 'react-loader'; |
@@ -37,7 +36,7 @@ const styles = (theme: Theme) => ({ | |||
37 | border: 'none', | 36 | border: 'none', |
38 | display: 'inline-flex', | 37 | display: 'inline-flex', |
39 | position: 'relative' as CSS.PositionProperty, | 38 | position: 'relative' as CSS.PositionProperty, |
40 | transition: 'background .5s', | 39 | transition: 'background .5s, opacity 0.3s', |
41 | textAlign: 'center' as CSS.TextAlignProperty, | 40 | textAlign: 'center' as CSS.TextAlignProperty, |
42 | outline: 'none', | 41 | outline: 'none', |
43 | alignItems: 'center', | 42 | alignItems: 'center', |
@@ -45,6 +44,14 @@ const styles = (theme: Theme) => ({ | |||
45 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, | 44 | width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>, |
46 | fontSize: theme.uiFontSize, | 45 | fontSize: theme.uiFontSize, |
47 | textDecoration: 'none', | 46 | textDecoration: 'none', |
47 | |||
48 | '&:hover': { | ||
49 | opacity: 0.8, | ||
50 | }, | ||
51 | '&:active': { | ||
52 | opacity: 0.5, | ||
53 | transition: 'none', | ||
54 | }, | ||
48 | }, | 55 | }, |
49 | label: { | 56 | label: { |
50 | margin: '10px 20px', | 57 | margin: '10px 20px', |
@@ -126,7 +133,6 @@ const styles = (theme: Theme) => ({ | |||
126 | }, | 133 | }, |
127 | }); | 134 | }); |
128 | 135 | ||
129 | @observer | ||
130 | class ButtonComponent extends Component<IProps> { | 136 | class ButtonComponent extends Component<IProps> { |
131 | public static defaultProps = { | 137 | public static defaultProps = { |
132 | type: 'button', | 138 | type: 'button', |
@@ -237,6 +243,7 @@ class ButtonComponent extends Component<IProps> { | |||
237 | [`${className}`]: className, | 243 | [`${className}`]: className, |
238 | })} | 244 | })} |
239 | disabled={disabled} | 245 | disabled={disabled} |
246 | data-type="franz-button" | ||
240 | > | 247 | > |
241 | {content} | 248 | {content} |
242 | </button> | 249 | </button> |
@@ -253,6 +260,7 @@ class ButtonComponent extends Component<IProps> { | |||
253 | [`${className}`]: className, | 260 | [`${className}`]: className, |
254 | })} | 261 | })} |
255 | rel={target === '_blank' ? 'noopener' : ''} | 262 | rel={target === '_blank' ? 'noopener' : ''} |
263 | data-type="franz-button" | ||
256 | > | 264 | > |
257 | {content} | 265 | {content} |
258 | </a> | 266 | </a> |