diff --git a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx
deleted file mode 100644
index 05a9855a..00000000
--- a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx
+++ /dev/null
@@ -1,82 +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 styled = require('styled-components').default
-const { color } = require('styled-system')
-
-const { SVGIcon } = require('../svg-icon/svg-icon')
-
-const Div = styled.div `
- position: absolute;
- top: 45px;
- left: 545px;
-
- > span.step-name {
- justify-content: flex-start;
-
- > span {
- margin-left: 10px;
- }
-
- > span:nth-child(2) {
- font-weight: 500;
- }
-
- > span:nth-child(3) {
- font-weight: 400;
- font-style: italic;
- }
- }
-
- .svg-icon[disabled] {
- opacity: 0.4;
- }
-`
-
-const Span = styled.span `
- ${color}
-`
-
-const ReducedFlashingInfos = (props) => {
- return (props.shouldShow) ? (
-
-
-
- { props.imageName }
- { props.imageSize }
-
-
-
-
- { props.driveTitle }
-
-
- ) : null
-}
-
-ReducedFlashingInfos.propTypes = {
- imageLogo: propTypes.string,
- imageName: propTypes.string,
- imageSize: propTypes.string,
- driveTitle: propTypes.string,
- shouldShow: propTypes.bool
-}
-
-module.exports = ReducedFlashingInfos
diff --git a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx
new file mode 100644
index 00000000..7cc2d86a
--- /dev/null
+++ b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx
@@ -0,0 +1,95 @@
+/*
+ * 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 React from 'react';
+import { default as styled } from 'styled-components';
+import { color } from 'styled-system';
+
+import { SVGIcon } from '../svg-icon/svg-icon';
+
+const Div = styled.div`
+ position: absolute;
+ top: 45px;
+ left: 545px;
+
+ > span.step-name {
+ justify-content: flex-start;
+
+ > span {
+ margin-left: 10px;
+ }
+
+ > span:nth-child(2) {
+ font-weight: 500;
+ }
+
+ > span:nth-child(3) {
+ font-weight: 400;
+ font-style: italic;
+ }
+ }
+
+ .svg-icon[disabled] {
+ opacity: 0.4;
+ }
+`;
+
+const Span = styled.span`
+ ${color}
+`;
+
+interface ReducedFlashingInfosProps {
+ imageLogo: string;
+ imageName: string;
+ imageSize: string;
+ driveTitle: string;
+ shouldShow: boolean;
+}
+
+export class ReducedFlashingInfos extends React.Component<
+ ReducedFlashingInfosProps
+> {
+ constructor(props: ReducedFlashingInfosProps) {
+ super(props);
+ this.state = {};
+ }
+
+ public render() {
+ return this.props.shouldShow ? (
+
+
+
+ {this.props.imageName}
+ {this.props.imageSize}
+
+
+
+
+ {this.props.driveTitle}
+
+
+ ) : null;
+ }
+}
diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx
index 392c6cb9..a6bceb06 100644
--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@@ -16,6 +16,7 @@
import { faCog, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as _ from 'lodash';
import * as path from 'path';
import * as React from 'react';
import { Button } from 'rendition';
@@ -23,7 +24,7 @@ import { Button } from 'rendition';
import { FeaturedProject } from '../../components/featured-project/featured-project';
import FinishPage from '../../components/finish/finish';
import * as ImageSelector from '../../components/image-selector/image-selector';
-import * as ReducedFlashingInfos from '../../components/reduced-flashing-infos/reduced-flashing-infos';
+import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos';
import * as SafeWebview from '../../components/safe-webview/safe-webview';
import { SettingsModal } from '../../components/settings/settings';
import { SVGIcon } from '../../components/svg-icon/svg-icon';
@@ -226,7 +227,11 @@ export class MainPage extends React.Component<