diff --git a/lib/gui/app/components/flash-results/flash-results.tsx b/lib/gui/app/components/flash-results/flash-results.tsx index a171d6bf..4c7000a5 100644 --- a/lib/gui/app/components/flash-results/flash-results.tsx +++ b/lib/gui/app/components/flash-results/flash-results.tsx @@ -14,10 +14,12 @@ * limitations under the License. */ +import { faCheckCircle } 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 } from 'rendition'; +import { Txt, Flex } from 'rendition'; import styled from 'styled-components'; import { left, position, space, top } from 'styled-system'; @@ -57,14 +59,20 @@ export function FlashResults({ ); return (
-
- -

Flash Complete!

-
+ + + + Flash Complete! + +
{_.map(results.devices, (quantity, type) => { return quantity ? ( diff --git a/lib/gui/app/scss/components/_label.scss b/lib/gui/app/scss/components/_label.scss deleted file mode 100644 index 19f76a83..00000000 --- a/lib/gui/app/scss/components/_label.scss +++ /dev/null @@ -1,35 +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. - */ - -.label { - font-size: 9px; - margin-right: 4.5px; -} - -.label-big { - font-size: 11px; - padding: 8px 25px; -} - -.label-inset { - background-color: darken($palette-theme-dark-background, 10%); - color: darken($palette-theme-dark-foreground, 43%); -} - -.label-danger { - background-color: $palette-theme-danger-background; - color: $palette-theme-danger-foreground; -} diff --git a/lib/gui/app/scss/components/_tick.scss b/lib/gui/app/scss/components/_tick.scss deleted file mode 100644 index 9a9519ec..00000000 --- a/lib/gui/app/scss/components/_tick.scss +++ /dev/null @@ -1,47 +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. - */ - -.tick { - @extend .glyphicon; - - display: inline-block; - border-radius: 50%; - padding: 3px; - font-size: 18px; - border: 2px solid; - - &[disabled] { - color: $palette-theme-dark-soft-foreground; - border-color: $palette-theme-dark-soft-foreground; - background-color: transparent; - } -} - -.tick--success { - @extend .glyphicon-ok; - - color: $palette-theme-success-foreground; - background-color: $palette-theme-success-background; - border-color: $palette-theme-success-background; -} - -.tick--error { - @extend .glyphicon-remove; - - color: $palette-theme-danger-foreground; - background-color: $palette-theme-danger-background; - border-color: $palette-theme-danger-background; -} diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss index b111f354..ee934aa3 100644 --- a/lib/gui/app/scss/main.scss +++ b/lib/gui/app/scss/main.scss @@ -25,16 +25,13 @@ $disabled-opacity: 0.2; @import "../../../../node_modules/flexboxgrid/dist/flexboxgrid.css"; @import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; @import "./modules/theme"; -@import "./modules/bootstrap"; @import "./modules/space"; -@import "./components/label"; -@import "./components/tick"; @import "../pages/main/styles/main"; @import "../pages/finish/styles/finish"; @import "./desktop"; @font-face { - font-family: "SourceSansPro"; + font-family: "Source Sans Pro"; src: url("./fonts/SourceSansPro-Regular.ttf") format("truetype"); font-weight: 500; font-style: normal; @@ -42,14 +39,20 @@ $disabled-opacity: 0.2; } @font-face { - font-family: "SourceSansPro"; + font-family: "Source Sans Pro"; src: url("./fonts/SourceSansPro-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: block; } +// Prevent white flash when running application +html { + background-color: $palette-theme-dark-background; +} + body { + background-color: $palette-theme-dark-background; letter-spacing: 0.1px; display: flex; flex-direction: column; diff --git a/lib/gui/app/scss/modules/_bootstrap.scss b/lib/gui/app/scss/modules/_bootstrap.scss deleted file mode 100644 index 3ad54144..00000000 --- a/lib/gui/app/scss/modules/_bootstrap.scss +++ /dev/null @@ -1,44 +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. - */ - -// This file is meant to hold Bootstrap modifications -// that don't qualify as separate UI components. - -// Prevent white flash when running application -html { - background-color: $palette-theme-dark-background; -} - -body { - background-color: $palette-theme-dark-background; -} - -// Fix slight checkbox vertical alignment issue -input[type="checkbox"] { - margin: 0; -} - -label { - margin: 0; -} - -[uib-tooltip] { - cursor: default; -} - -.tooltip { - word-wrap: break-word; -} diff --git a/lib/gui/app/styled-components.tsx b/lib/gui/app/styled-components.tsx index 50b4361d..be711f99 100644 --- a/lib/gui/app/styled-components.tsx +++ b/lib/gui/app/styled-components.tsx @@ -18,7 +18,6 @@ import * as React from 'react'; import { Button, ButtonProps, - Flex, Modal as ModalBase, Provider, Txt, @@ -94,11 +93,6 @@ export const StepNameButton = styled(BaseButton)` } `; -export const StepSelection = styled(Flex)` - flex-wrap: wrap; - justify-content: center; -`; - export const Footer = styled(Txt)` margin-top: 10px; color: ${colors.dark.disabled.foreground}; diff --git a/lib/gui/app/theme.ts b/lib/gui/app/theme.ts index a2184782..46e744f9 100644 --- a/lib/gui/app/theme.ts +++ b/lib/gui/app/theme.ts @@ -14,8 +14,6 @@ * limitations under the License. */ -const font = 'SourceSansPro'; - export const colors = { dark: { foreground: '#fff', @@ -68,13 +66,6 @@ export const colors = { }; export const theme = { - font, - titleFont: font, - global: { - font: { - family: font, - }, - }, colors, button: { border: {