diff --git a/lib/gui/app/components/featured-project/featured-project.tsx b/lib/gui/app/components/featured-project/featured-project.tsx
index ef4a80ef..9ed36346 100644
--- a/lib/gui/app/components/featured-project/featured-project.tsx
+++ b/lib/gui/app/components/featured-project/featured-project.tsx
@@ -45,19 +45,13 @@ export class FeaturedProject extends React.Component<
public async componentDidMount() {
try {
- let endpoint =
+ const url = new URL(
(await settings.get('featuredProjectEndpoint')) ||
- 'https://assets.balena.io/etcher-featured/index.html';
- const efpParams = {
- borderRight: false,
- darkBackground: true,
- };
- let params = '?';
- for (const [param, value] of Object.entries(efpParams)) {
- params += `${param}=${value}&`;
- }
- endpoint += params;
- this.setState({ endpoint });
+ 'https://assets.balena.io/etcher-featured/index.html',
+ );
+ url.searchParams.append('borderRight', 'false');
+ url.searchParams.append('darkBackground', 'true');
+ this.setState({ endpoint: url.toString() });
} catch (error) {
analytics.logException(error);
}
diff --git a/lib/gui/app/components/finish/finish.tsx b/lib/gui/app/components/finish/finish.tsx
index 7c4b1b51..6484461f 100644
--- a/lib/gui/app/components/finish/finish.tsx
+++ b/lib/gui/app/components/finish/finish.tsx
@@ -16,6 +16,7 @@
import * as _ from 'lodash';
import * as React from 'react';
+import { Flex } from 'rendition';
import { v4 as uuidV4 } from 'uuid';
import * as flashState from '../../models/flash-state';
@@ -56,50 +57,45 @@ function formattedErrors() {
function FinishPage({ goToMain }: { goToMain: () => void }) {
const results = flashState.getFlashResults().results || {};
return (
-
-
-
-
+
+
+
- {
- restart(goToMain);
- }}
+ {
+ restart(goToMain);
+ }}
+ />
+
+
+
+
+ Thanks for using
+
+ openExternal('https://balena.io/etcher?ref=etcher_offline_banner')
+ }
/>
-
-
-
-
-
- Thanks for using
-
- openExternal(
- 'https://balena.io/etcher?ref=etcher_offline_banner',
- )
- }
- >
-
-
-
-
- made with
-
- by
-
- openExternal('https://balena.io?ref=etcher_success')
- }
- >
-
-
-
-
-
-
-
+
+
+ made with
+
+ by
+ openExternal('https://balena.io?ref=etcher_success')}
+ />
+
+
+
);
}
diff --git a/lib/gui/app/components/flash-another/flash-another.tsx b/lib/gui/app/components/flash-another/flash-another.tsx
index 9157bdb1..5efc25b4 100644
--- a/lib/gui/app/components/flash-another/flash-another.tsx
+++ b/lib/gui/app/components/flash-another/flash-another.tsx
@@ -15,24 +15,17 @@
*/
import * as React from 'react';
-import styled from 'styled-components';
import { BaseButton } from '../../styled-components';
-const FlashAnotherButton = styled(BaseButton)`
- position: absolute;
- right: 152px;
- top: 60px;
-`;
-
export interface FlashAnotherProps {
onClick: () => void;
}
export const FlashAnother = (props: FlashAnotherProps) => {
return (
-
+
Flash Another
-
+
);
};
diff --git a/lib/gui/app/components/flash-results/flash-results.tsx b/lib/gui/app/components/flash-results/flash-results.tsx
index a3e55d4b..aefff367 100644
--- a/lib/gui/app/components/flash-results/flash-results.tsx
+++ b/lib/gui/app/components/flash-results/flash-results.tsx
@@ -16,6 +16,7 @@
import { faCheckCircle, faCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as _ from 'lodash';
import outdent from 'outdent';
import * as React from 'react';
import { Txt, Flex } from 'rendition';
@@ -39,17 +40,21 @@ export function FlashResults({
};
}) {
const allDevicesFailed = results.devices.successful === 0;
- const effectiveSpeed = bytesToMegabytes(
- results.sourceMetadata.size /
- (results.bytesWritten / results.averageFlashingSpeed),
- ).toFixed(1);
+ const effectiveSpeed = _.round(
+ bytesToMegabytes(
+ results.sourceMetadata.size /
+ (results.bytesWritten / results.averageFlashingSpeed),
+ ),
+ 1,
+ );
return (
@@ -66,12 +71,10 @@ export function FlashResults({
Flash Complete!
-
- {Object.keys(results.devices).map((type: 'failed' | 'successful') => {
- const quantity = results.devices[type];
+
+ {Object.entries(results.devices).map(([type, quantity]) => {
return quantity ? (
@@ -86,7 +89,6 @@ export function FlashResults({
})}
{!allDevicesFailed && (
{middleEllipsis(this.props.imageName, 16)}
@@ -64,7 +64,7 @@ export class ReducedFlashingInfos extends React.Component<
-
+
{middleEllipsis(this.props.driveTitle, 16)}
diff --git a/lib/gui/app/pages/finish/styles/_finish.scss b/lib/gui/app/pages/finish/styles/_finish.scss
deleted file mode 100644
index ce4a12a6..00000000
--- a/lib/gui/app/pages/finish/styles/_finish.scss
+++ /dev/null
@@ -1,103 +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.
- */
-
-.page-finish {
- margin-top: 60px;
-}
-
-.page-finish .title,
-.page-finish .title h3 {
- color: $palette-theme-dark-foreground;
- font-weight: bold;
-}
-
-.page-finish .center {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.page-finish .box > div > button {
- margin-right: 20px;
-}
-
-.page-finish webview {
- width: 800px;
- height: 300px;
- position: absolute;
- top: 80px;
- left: 0;
- z-index: 9001;
-}
-
-.page-finish .fallback-banner {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- position: absolute;
- bottom: 0;
- color: white;
- height: 320px;
- width: 100vw;
- left: 0;
-
- > * {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .caption {
- display: flex;
- font-weight: 500;
- }
-
- .caption-big {
- font-size: 28px;
- font-weight: bold;
- position: absolute;
- top: 75px;
- }
-
- .caption-small {
- font-size: 12px;
- }
-
- .fallback-footer {
- font-size: 12px;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- position: absolute;
- bottom: 0;
- max-height: 21px;
- margin-bottom: 17px;
- }
-
- .section-footer {
- position: absolute;
- right: 0;
- bottom: 0;
-
- .footer-right {
- color: #7e8085;
- font-size: 12px;
- margin-right: 30px;
- }
- }
-}
diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx
index 737baad4..bbbd5a67 100644
--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@@ -161,17 +161,21 @@ export class MainPage extends React.Component<
!this.state.isFlashing || !this.state.isWebviewShowing;
return (
<>
-
+
+
{this.state.hideSettings ? null : (
{
@@ -320,15 +322,23 @@ export class MainPage extends React.Component<
private renderSuccess() {
return (
-
+
{
flashState.resetState();
this.setState({ current: 'main' });
}}
/>
-
-
+
+
);
}
diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss
deleted file mode 100644
index 600d71e1..00000000
--- a/lib/gui/app/pages/main/styles/_main.scss
+++ /dev/null
@@ -1,19 +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.
- */
-
-.disabled {
- opacity: $disabled-opacity;
-}
diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss
index e520c0b6..84b6cc64 100644
--- a/lib/gui/app/scss/main.scss
+++ b/lib/gui/app/scss/main.scss
@@ -14,17 +14,9 @@
* limitations under the License.
*/
-$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
-$font-size-base: 16px;
-$cursor-disabled: initial;
-$link-hover-decoration: none;
-$btn-min-width: 170px;
-$link-color: #ddd;
$disabled-opacity: 0.2;
@import "./modules/theme";
-@import "../pages/main/styles/main";
-@import "../pages/finish/styles/finish";
@import "./desktop";
@font-face {
@@ -46,9 +38,11 @@ $disabled-opacity: 0.2;
// Prevent white flash when running application
html {
background-color: $palette-theme-dark-background;
+ margin: 0;
}
body {
+ margin: 0;
background-color: $palette-theme-dark-background;
letter-spacing: 0.1px;
display: flex;
@@ -104,3 +98,7 @@ body {
overflow: hidden;
}
}
+
+.disabled {
+ opacity: $disabled-opacity;
+}