diff --git a/lib/gui/app/components/progress-button/progress-button.jsx b/lib/gui/app/components/progress-button/progress-button.jsx
deleted file mode 100644
index 27481ef9..00000000
--- a/lib/gui/app/components/progress-button/progress-button.jsx
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const React = require('react')
-const propTypes = require('prop-types')
-const Color = require('color')
-
-const {
- default: styled,
- css,
- keyframes
-} = require('styled-components')
-
-const { ProgressBar } = require('rendition')
-
-const { colors } = require('./../../theme')
-const { StepButton, StepSelection } = require('./../../styled-components')
-
-const darkenForegroundStripes = 0.18
-const desaturateForegroundStripes = 0.2
-const progressButtonStripesForegroundColor = Color(colors.primary.background)
- .darken(darkenForegroundStripes)
- .desaturate(desaturateForegroundStripes)
- .string()
-
-const desaturateBackgroundStripes = 0.05
-const progressButtonStripesBackgroundColor = Color(colors.primary.background)
- .desaturate(desaturateBackgroundStripes)
- .string()
-
-const ProgressButtonStripes = keyframes `
- 0% {
- background-position: 0 0;
- }
-
- 100% {
- background-position: 20px 20px;
- }
-`
-
-const ProgressButtonStripesRule = css `
- ${ProgressButtonStripes} 1s linear infinite;
-`
-
-const FlashProgressBar = styled(ProgressBar) `
- > div {
- width: 200px;
- height: 48px;
- color: white !important;
- text-shadow: none !important;
- }
-
- width: 200px;
- height: 48px;
- font-size: 16px;
- line-height: 48px;
-
- background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()};
-`
-
-const FlashProgressBarValidating = styled(FlashProgressBar) `
-
- // Notice that we add 0.01 to certain gradient stop positions.
- // That workarounds a Chrome rendering issue where diagonal
- // lines look spiky.
- // See https://github.com/balena-io/etcher/issues/472
-
- background-image: -webkit-gradient(linear, 0 0, 100% 100%,
- color-stop(0.25, ${progressButtonStripesForegroundColor}),
- color-stop(0.26, ${progressButtonStripesBackgroundColor}),
- color-stop(0.50, ${progressButtonStripesBackgroundColor}),
- color-stop(0.51, ${progressButtonStripesForegroundColor}),
- color-stop(0.75, ${progressButtonStripesForegroundColor}),
- color-stop(0.76 , ${progressButtonStripesBackgroundColor}),
- to(${progressButtonStripesBackgroundColor}));
-
- background-color: white;
-
- animation: ${ProgressButtonStripesRule};
- overflow: hidden;
-
- background-size: 20px 20px;
-`
-
-/**
- * Progress Button component
- */
-class ProgressButton extends React.Component {
- render () {
- if (this.props.active) {
- if (this.props.striped) {
- return (
-
-
- { this.props.label }
-
-
- )
- }
-
- return (
-
-
- { this.props.label }
-
-
- )
- }
-
- return (
-
-
- {this.props.label}
-
-
- )
- }
-}
-
-ProgressButton.propTypes = {
- striped: propTypes.bool,
- active: propTypes.bool,
- percentage: propTypes.number,
- label: propTypes.string,
- disabled: propTypes.bool,
- callback: propTypes.func
-}
-
-module.exports = ProgressButton
diff --git a/lib/gui/app/components/progress-button/progress-button.tsx b/lib/gui/app/components/progress-button/progress-button.tsx
new file mode 100644
index 00000000..31869572
--- /dev/null
+++ b/lib/gui/app/components/progress-button/progress-button.tsx
@@ -0,0 +1,145 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Color from 'color';
+import * as React from 'react';
+import { ProgressBar } from 'rendition';
+import { css, default as styled, keyframes } from 'styled-components';
+
+import { StepButton, StepSelection } from '../../styled-components';
+import { colors } from '../../theme';
+
+const darkenForegroundStripes = 0.18;
+const desaturateForegroundStripes = 0.2;
+const progressButtonStripesForegroundColor = Color(colors.primary.background)
+ .darken(darkenForegroundStripes)
+ .desaturate(desaturateForegroundStripes)
+ .string();
+
+const desaturateBackgroundStripes = 0.05;
+const progressButtonStripesBackgroundColor = Color(colors.primary.background)
+ .desaturate(desaturateBackgroundStripes)
+ .string();
+
+const ProgressButtonStripes = keyframes`
+ 0% {
+ background-position: 0 0;
+ }
+
+ 100% {
+ background-position: 20px 20px;
+ }
+`;
+
+const ProgressButtonStripesRule = css`
+ ${ProgressButtonStripes} 1s linear infinite;
+`;
+
+const FlashProgressBar = styled(ProgressBar)`
+ > div {
+ width: 200px;
+ height: 48px;
+ color: white !important;
+ text-shadow: none !important;
+ }
+
+ width: 200px;
+ height: 48px;
+ font-size: 16px;
+ line-height: 48px;
+
+ background: ${Color(colors.warning.background)
+ .darken(darkenForegroundStripes)
+ .string()};
+`;
+
+const FlashProgressBarValidating = styled(FlashProgressBar)`
+ // Notice that we add 0.01 to certain gradient stop positions.
+ // That workarounds a Chrome rendering issue where diagonal
+ // lines look spiky.
+ // See https://github.com/balena-io/etcher/issues/472
+
+ background-image: -webkit-gradient(
+ linear,
+ 0 0,
+ 100% 100%,
+ color-stop(0.25, ${progressButtonStripesForegroundColor}),
+ color-stop(0.26, ${progressButtonStripesBackgroundColor}),
+ color-stop(0.5, ${progressButtonStripesBackgroundColor}),
+ color-stop(0.51, ${progressButtonStripesForegroundColor}),
+ color-stop(0.75, ${progressButtonStripesForegroundColor}),
+ color-stop(0.76, ${progressButtonStripesBackgroundColor}),
+ to(${progressButtonStripesBackgroundColor})
+ );
+
+ background-color: white;
+
+ animation: ${ProgressButtonStripesRule};
+ overflow: hidden;
+
+ background-size: 20px 20px;
+`;
+
+interface ProgressButtonProps {
+ striped: boolean;
+ active: boolean;
+ percentage: number;
+ label: string;
+ disabled: boolean;
+ callback: () => any;
+}
+
+/**
+ * Progress Button component
+ */
+export class ProgressButton extends React.Component {
+ public render() {
+ if (this.props.active) {
+ if (this.props.striped) {
+ return (
+
+
+ {this.props.label}
+
+
+ );
+ }
+
+ return (
+
+
+ {this.props.label}
+
+
+ );
+ }
+
+ return (
+
+
+ {this.props.label}
+
+
+ );
+ }
+}
diff --git a/lib/gui/app/pages/main/Flash.tsx b/lib/gui/app/pages/main/Flash.tsx
index d83bb075..426ca527 100644
--- a/lib/gui/app/pages/main/Flash.tsx
+++ b/lib/gui/app/pages/main/Flash.tsx
@@ -21,7 +21,7 @@ import { Modal, Txt } from 'rendition';
import * as constraints from '../../../../shared/drive-constraints';
import * as messages from '../../../../shared/messages';
import * as DriveSelectorModal from '../../components/drive-selector/DriveSelectorModal.jsx';
-import * as ProgressButton from '../../components/progress-button/progress-button.jsx';
+import { ProgressButton } from '../../components/progress-button/progress-button';
import { SVGIcon } from '../../components/svg-icon/svg-icon';
import * as availableDrives from '../../models/available-drives';
import * as flashState from '../../models/flash-state';
@@ -230,7 +230,6 @@ export const Flash = ({ shouldFlashStepBeDisabled, goToSuccess }: any) => {