Browse Source

Remove concept of 'padded' in Button because it's the normal case

master
Gaëtan Renaudeau 7 years ago
parent
commit
e173f316f1
  1. 2
      src/components/AccountPage/EmptyStateAccount.js
  2. 9
      src/components/DashboardPage/EmptyState.js
  3. 2
      src/components/ExportLogsBtn.js
  4. 4
      src/components/ManagerPage/AppsList.js
  5. 4
      src/components/Onboarding/OnboardingFooter.js
  6. 2
      src/components/Onboarding/steps/Finish.js
  7. 4
      src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
  8. 5
      src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js
  9. 2
      src/components/Onboarding/steps/NoDevice.js
  10. 4
      src/components/Onboarding/steps/SetPassword.js
  11. 2
      src/components/Onboarding/steps/Start.js
  12. 2
      src/components/SettingsPage/CleanButton.js
  13. 2
      src/components/SettingsPage/DisablePasswordButton.js
  14. 4
      src/components/SettingsPage/DisablePasswordModal.js
  15. 4
      src/components/SettingsPage/PasswordModal.js
  16. 1
      src/components/SettingsPage/ReleaseNotesButton.js
  17. 2
      src/components/SettingsPage/ResetButton.js
  18. 2
      src/components/SettingsPage/sections/Tools.js
  19. 10
      src/components/base/Button/index.js
  20. 4
      src/components/modals/AccountSettingRenderBody.js
  21. 2
      src/components/modals/OperationDetails.js
  22. 2
      src/components/modals/UpdateFirmware/Disclaimer.js

2
src/components/AccountPage/EmptyStateAccount.js

@ -50,7 +50,7 @@ class EmptyStateAccount extends PureComponent<Props, *> {
{'app is installed to receive funds.'}
</Trans>
</Description>
<Button mt={5} padded primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
<Button mt={5} primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
<Box horizontal flow={1} alignItems="center">
<IconReceive size={12} />
<Box>{t('app:account.emptyState.buttons.receiveFunds')}</Box>

9
src/components/DashboardPage/EmptyState.js

@ -50,15 +50,10 @@ class EmptyState extends PureComponent<Props, *> {
{t('app:emptyState.dashboard.desc')}
</Description>
<Box mt={5} horizontal style={{ width: 300 }} flow={3} justify="center">
<Button padded primary style={{ minWidth: 120 }} onClick={this.handleInstallApp}>
<Button primary style={{ minWidth: 120 }} onClick={this.handleInstallApp}>
{t('app:emptyState.dashboard.buttons.installApp')}
</Button>
<Button
padded
outline
style={{ minWidth: 120 }}
onClick={() => openModal(MODAL_ADD_ACCOUNTS)}
>
<Button outline style={{ minWidth: 120 }} onClick={() => openModal(MODAL_ADD_ACCOUNTS)}>
{t('app:emptyState.dashboard.buttons.addAccount')}
</Button>
</Box>

2
src/components/ExportLogsBtn.js

@ -71,7 +71,7 @@ class ExportLogsBtn extends Component<{
return hookToShortcut ? (
<KeyHandler keyValue="e" onKeyHandle={this.onKeyHandle} />
) : (
<Button primary event="ExportLogs" onClick={this.handleExportLogs}>
<Button small primary event="ExportLogs" onClick={this.handleExportLogs}>
{t('app:settings.exportLogs.btn')}
</Button>
)

4
src/components/ManagerPage/AppsList.js

@ -226,7 +226,7 @@ class AppsList extends PureComponent<Props, State> {
</Box>
</ModalContent>
<ModalFooter horizontal justifyContent="flex-end" style={{ width: '100%' }}>
<Button primary padded onClick={this.handleCloseModal}>
<Button primary onClick={this.handleCloseModal}>
{t('app:common.close')}
</Button>
</ModalFooter>
@ -254,7 +254,7 @@ class AppsList extends PureComponent<Props, State> {
</Box>
</ModalContent>
<ModalFooter horizontal justifyContent="flex-end" style={{ width: '100%' }}>
<Button primary padded onClick={this.handleCloseModal}>
<Button primary onClick={this.handleCloseModal}>
{t('app:common.close')}
</Button>
</ModalFooter>

4
src/components/Onboarding/OnboardingFooter.js

@ -23,10 +23,10 @@ const OnboardingFooter = ({
...props
}: Props) => (
<OnboardingFooterWrapper {...props}>
<Button padded outlineGrey onClick={() => prevStep()}>
<Button outlineGrey onClick={() => prevStep()}>
{t('app:common.back')}
</Button>
<Button padded disabled={isContinueDisabled} primary onClick={() => nextStep()} ml="auto">
<Button disabled={isContinueDisabled} primary onClick={() => nextStep()} ml="auto">
{t('app:common.continue')}
</Button>
</OnboardingFooterWrapper>

2
src/components/Onboarding/steps/Finish.js

@ -102,7 +102,7 @@ export default class Finish extends Component<StepProps, *> {
<Description>{t('onboarding:finish.desc')}</Description>
</Box>
<Box p={5}>
<Button primary padded onClick={() => finish()}>
<Button primary onClick={() => finish()}>
{t('onboarding:finish.openAppButton')}
</Button>
</Box>

4
src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js

@ -53,10 +53,10 @@ export function GenuineCheckErrorPage({
)}
</Box>
<OnboardingFooterWrapper>
<Button padded outlineGrey onClick={() => redoGenuineCheck()}>
<Button outlineGrey onClick={() => redoGenuineCheck()}>
{t('app:common.back')}
</Button>
<Button padded danger onClick={() => contactSupport()} ml="auto">
<Button danger onClick={() => contactSupport()} ml="auto">
{t('onboarding:genuineCheck.buttons.contactSupport')}
</Button>
</OnboardingFooterWrapper>

5
src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js

@ -26,12 +26,11 @@ export function GenuineCheckUnavailableFooter({
}) {
return (
<OnboardingFooterWrapper>
<Button padded outlineGrey onClick={() => prevStep()}>
<Button outlineGrey onClick={() => prevStep()}>
{t('app:common.back')}
</Button>
<Box horizontal ml="auto">
<Button
padded
disabled={false}
event="Onboarding Skip Genuine Check"
onClick={() => nextStep()}
@ -39,7 +38,7 @@ export function GenuineCheckUnavailableFooter({
>
{t('app:common.skipThisStep')}
</Button>
<Button padded onClick={nextStep} disabled primary>
<Button onClick={nextStep} disabled primary>
{t('app:common.continue')}
</Button>
</Box>

2
src/components/Onboarding/steps/NoDevice.js

@ -65,7 +65,7 @@ class NoDevice extends PureComponent<StepProps, *> {
</Box>
</GrowScroll>
<OnboardingFooterWrapper>
<Button padded outlineGrey onClick={() => prevStep()} mr="auto">
<Button outlineGrey onClick={() => prevStep()} mr="auto">
{t('app:common.back')}
</Button>
</OnboardingFooterWrapper>

4
src/components/Onboarding/steps/SetPassword.js

@ -131,12 +131,11 @@ class SetPassword extends PureComponent<StepProps, State> {
</StepContainerInner>
<OnboardingFooterWrapper>
<Button padded outlineGrey onClick={() => prevStep()}>
<Button outlineGrey onClick={() => prevStep()}>
{t('app:common.back')}
</Button>
<Box horizontal ml="auto">
<Button
padded
event="Onboarding Skip Password"
onClick={() => nextStep()}
disabled={false}
@ -145,7 +144,6 @@ class SetPassword extends PureComponent<StepProps, State> {
{t('app:common.skipThisStep')}
</Button>
<Button
padded
onClick={this.handleSave}
disabled={!this.isValid() || !newPassword.length || !confirmPassword.length}
primary

2
src/components/Onboarding/steps/Start.js

@ -23,7 +23,7 @@ export default (props: StepProps) => {
<Box my={5}>
<Title>{t('onboarding:start.title')}</Title>
</Box>
<Button padded primary onClick={() => jumpStep('init')}>
<Button primary onClick={() => jumpStep('init')}>
{t('onboarding:start.startBtn')}
</Button>
</Box>

2
src/components/SettingsPage/CleanButton.js

@ -45,7 +45,7 @@ class CleanButton extends PureComponent<Props, State> {
const { opened } = this.state
return (
<Fragment>
<Button primary onClick={this.open} event="ClearCacheIntent">
<Button small primary onClick={this.open} event="ClearCacheIntent">
{t('app:settings.profile.softReset')}
</Button>

2
src/components/SettingsPage/DisablePasswordButton.js

@ -96,7 +96,7 @@ class DisablePasswordButton extends PureComponent<Props, State> {
<Box horizontal flow={2} align="center">
{isPasswordEnabled && (
<Button onClick={this.handleOpenPasswordModal}>
<Button small onClick={this.handleOpenPasswordModal}>
{t('app:settings.profile.changePassword')}
</Button>
)}

4
src/components/SettingsPage/DisablePasswordModal.js

@ -98,12 +98,12 @@ class DisablePasswordModal extends PureComponent<Props, State> {
</Box>
</ModalContent>
<ModalFooter horizontal align="center" justify="flex-end" flow={2}>
<Button type="button" padded onClick={onClose}>
<Button small type="Button small" onClick={onClose}>
{t('app:common.cancel')}
</Button>
<Button
small
primary
padded
onClick={this.disablePassword}
disabled={!currentPassword && !incorrectPassword}
>

4
src/components/SettingsPage/PasswordModal.js

@ -111,11 +111,11 @@ class PasswordModal extends PureComponent<Props, State> {
/>
</ModalContent>
<ModalFooter horizontal align="center" justify="flex-end" flow={2}>
<Button type="button" padded onClick={onClose}>
<Button small type="Button small" onClick={onClose}>
{t('app:common.cancel')}
</Button>
<Button
padded
small
primary
onClick={this.handleSave}
disabled={!this.isValid() || !newPassword.length || !confirmPassword.length}

1
src/components/SettingsPage/ReleaseNotesButton.js

@ -26,6 +26,7 @@ class ReleaseNotesButton extends PureComponent<Props> {
const version = __APP_VERSION__
return (
<Button
small
primary
onClick={() => {
openModal(MODAL_RELEASES_NOTES, version)

2
src/components/SettingsPage/ResetButton.js

@ -44,7 +44,7 @@ class ResetButton extends PureComponent<Props, State> {
const { opened, pending } = this.state
return (
<Fragment>
<Button danger onClick={this.open} event="HardResetIntent">
<Button small danger onClick={this.open} event="HardResetIntent">
{t('app:settings.profile.hardReset')}
</Button>

2
src/components/SettingsPage/sections/Tools.js

@ -37,7 +37,7 @@ class TabProfile extends PureComponent<*, *> {
return (
<Card flow={3}>
<Box horizontal>
<Button onClick={this.onQRCodeMobileExport} primary>
<Button small onClick={this.onQRCodeMobileExport} primary>
QRCode Mobile Export
</Button>

10
src/components/base/Button/index.js

@ -140,9 +140,9 @@ function getStyles(props, state) {
const Base = styled.button.attrs({
ff: 'Museo Sans|Regular',
fontSize: p => p.fontSize || 3,
px: p => (p.padded ? 4 : 2),
py: p => (p.padded ? 2 : 0),
fontSize: p => p.fontSize || (!p.small ? 4 : 3),
px: p => (!p.small ? 4 : 3),
py: p => (!p.small ? 2 : 0),
color: 'grey',
bg: 'transparent',
})`
@ -154,7 +154,7 @@ const Base = styled.button.attrs({
border: none;
border-radius: ${p => p.theme.radii[1]}px;
cursor: ${p => (p.disabled ? 'default' : 'pointer')};
height: ${p => (p.small ? 30 : p.padded ? 40 : 36)}px;
height: ${p => (p.small ? 34 : 40)}px;
pointer-events: ${p => (p.disabled ? 'none' : '')};
outline: none;
@ -179,7 +179,6 @@ type Props = {
disabled?: boolean,
onClick?: Function,
small?: boolean,
padded?: boolean,
isLoading?: boolean,
event?: string,
eventProperties?: Object,
@ -195,7 +194,6 @@ class Button extends PureComponent<
onClick: noop,
primary: false,
small: false,
padded: false,
danger: false,
}

4
src/components/modals/AccountSettingRenderBody.js

@ -275,10 +275,10 @@ class HelperComp extends PureComponent<Props, State> {
</Spoiler>
</ModalContent>
<ModalFooter horizontal>
<Button padded danger type="button" onClick={this.handleOpenRemoveAccountModal}>
<Button danger type="button" onClick={this.handleOpenRemoveAccountModal}>
{t('app:common.delete')}
</Button>
<Button padded ml="auto" type="submit" primary>
<Button ml="auto" type="submit" primary>
{t('app:common.apply')}
</Button>
</ModalFooter>

2
src/components/modals/OperationDetails.js

@ -229,7 +229,7 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
{url && (
<ModalFooter horizontal justify="flex-end" flow={2}>
<Button primary padded onClick={() => shell.openExternal(url)}>
<Button primary onClick={() => shell.openExternal(url)}>
{t('app:operationDetails.viewOperation')}
</Button>
</ModalFooter>

2
src/components/modals/UpdateFirmware/Disclaimer.js

@ -67,7 +67,7 @@ class DisclaimerModal extends PureComponent<Props, State> {
<GradientBox />
</ModalContent>
<ModalFooter horizontal justifyContent="flex-end" style={{ width: '100%' }}>
<Button primary padded onClick={goToNextStep}>
<Button primary onClick={goToNextStep}>
{t('app:manager.firmware.continue')}
</Button>
</ModalFooter>

Loading…
Cancel
Save