@@ -39,9 +42,3 @@ const FlashAnother = (props: any) => {
);
};
-
-FlashAnother.propTypes = {
- onClick: PropTypes.func,
-};
-
-export default FlashAnother;
diff --git a/lib/gui/app/components/flash-another/index.ts b/lib/gui/app/components/flash-another/index.ts
index e9d7d4c8..06626392 100644
--- a/lib/gui/app/components/flash-another/index.ts
+++ b/lib/gui/app/components/flash-another/index.ts
@@ -16,7 +16,7 @@
import * as angular from 'angular';
import { react2angular } from 'react2angular';
-import FlashAnother from './flash-another';
+import { FlashAnother } from './flash-another';
export const MODULE_NAME = 'Etcher.Components.FlashAnother';
const FlashAnotherModule = angular.module(MODULE_NAME, []);
diff --git a/lib/gui/app/components/flash-results/flash-results.tsx b/lib/gui/app/components/flash-results/flash-results.tsx
index 15bac575..90b27e20 100644
--- a/lib/gui/app/components/flash-results/flash-results.tsx
+++ b/lib/gui/app/components/flash-results/flash-results.tsx
@@ -15,7 +15,6 @@
*/
import * as _ from 'lodash';
-import * as PropTypes from 'prop-types';
import * as React from 'react';
import styled from 'styled-components';
import { left, position, space, top } from 'styled-system';
@@ -28,7 +27,7 @@ const Div: any = styled.div
`
${space}
`;
-const FlashResults: any = ({
+export const FlashResults: any = ({
errors,
results,
message,
@@ -64,11 +63,3 @@ const FlashResults: any = ({
);
};
-
-FlashResults.propTypes = {
- results: PropTypes.object,
- message: PropTypes.object,
- errors: PropTypes.func,
-};
-
-export default FlashResults;
diff --git a/lib/gui/app/components/flash-results/index.ts b/lib/gui/app/components/flash-results/index.ts
index 1d85aa52..d5ecb0b4 100644
--- a/lib/gui/app/components/flash-results/index.ts
+++ b/lib/gui/app/components/flash-results/index.ts
@@ -20,7 +20,7 @@
import * as angular from 'angular';
import { react2angular } from 'react2angular';
-import FlashResults from './flash-results';
+import { FlashResults } from './flash-results';
export const MODULE_NAME = 'Etcher.Components.FlashResults';
const FlashResultsModule = angular.module(MODULE_NAME, []);
diff --git a/lib/gui/app/styled-components.tsx b/lib/gui/app/styled-components.tsx
new file mode 100644
index 00000000..449fb665
--- /dev/null
+++ b/lib/gui/app/styled-components.tsx
@@ -0,0 +1,113 @@
+/*
+ * Copyright 2018 resin.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 { Button, Flex, Provider, Txt } from 'rendition';
+import styled from 'styled-components';
+import { space } from 'styled-system';
+
+import { colors } from './theme';
+
+const theme = {
+ // TODO: Standardize how the colors are specified to match with rendition's format.
+ customColors: colors,
+ button: {
+ border: {
+ width: '0',
+ radius: '24px',
+ },
+ disabled: {
+ opacity: 1,
+ },
+ extend: () => `
+ width: 200px;
+ height: 48px;
+ font-size: 16px;
+
+ &:disabled {
+ background-color: ${colors.dark.disabled.background};
+ color: ${colors.dark.disabled.foreground};
+ opacity: 1;
+
+ &:hover {
+ background-color: ${colors.dark.disabled.background};
+ color: ${colors.dark.disabled.foreground};
+ }
+ }
+ `,
+ },
+};
+
+export const ThemedProvider = (props: any) => (
+