diff --git a/lib/gui/app/components/finish/finish.tsx b/lib/gui/app/components/finish/finish.tsx index c950e572..176949b3 100644 --- a/lib/gui/app/components/finish/finish.tsx +++ b/lib/gui/app/components/finish/finish.tsx @@ -67,7 +67,7 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
-
+
Thanks for using void }) { >
-
+
made with { return `${minutes}m${seconds}s`; }; +const IconButton = styled(Button)` + && { + width: 20px; + } +`; + interface FlashStepProps { shouldFlashStepBeDisabled: boolean; goToSuccess: () => void; @@ -248,16 +258,16 @@ export class FlashStep extends React.Component { this.tryFlash(); }} /> + {isFlashing && ( + } + plain + onClick={imageWriter.cancel} + color="#fff" + /> + )} - {isFlashing && ( - - )} {!_.isNil(state.speed) && state.percentage !== COMPLETED_PERCENTAGE && (

diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index db861478..0326e30c 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -23,10 +23,10 @@ import * as React from 'react'; import { Flex } from 'rendition'; import styled from 'styled-components'; +import { SafeWebview } from '../../components/safe-webview/safe-webview'; import { FeaturedProject } from '../../components/featured-project/featured-project'; import FinishPage from '../../components/finish/finish'; import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos'; -import { SafeWebview } from '../../components/safe-webview/safe-webview'; import { SettingsModal } from '../../components/settings/settings'; import { SourceOptions, diff --git a/lib/gui/app/scss/components/_badge.scss b/lib/gui/app/scss/components/_badge.scss deleted file mode 100644 index 46831ee3..00000000 --- a/lib/gui/app/scss/components/_badge.scss +++ /dev/null @@ -1,24 +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. - */ - -.badge { - border: 2px solid; - border-radius: 50%; - padding: 7px 10px; - position: relative; - z-index: 10; - letter-spacing: 0; -} diff --git a/lib/gui/app/scss/components/_button.scss b/lib/gui/app/scss/components/_button.scss deleted file mode 100644 index 4251c5f8..00000000 --- a/lib/gui/app/scss/components/_button.scss +++ /dev/null @@ -1,99 +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. - */ - -.button { - @extend .btn; - - padding: 10px; - padding-top: 11px; - - border-radius: 24px; - border: 0; - - letter-spacing: .5px; - outline: none; - - position: relative; - - > .glyphicon { - top: 0; - width: 24px; - height: 24px; - } - - &.button-primary{ - width: 200px; - height: 48px; - } - - &[disabled] { - @extend .button-no-hover; - background-color: $palette-theme-dark-disabled-background; - color: $palette-theme-dark-disabled-foreground; - opacity: 1; - } -} - -.button-link { - @extend .btn-link; -} - -.button-block { - display: block; - width: 100%; -} - -.button-no-hover { - pointer-events: none; -} - -// Create map from Bootstrap `.btn` type styles -// since its not possible to perform variable -// interpolation (e.g: `$btn-${type}-bg`). -// See https://github.com/sass/sass/issues/132 -$button-types-styles: ( - default: ( - bg: $palette-theme-default-background, - color: $palette-theme-default-foreground - ), - primary: ( - bg: $palette-theme-primary-background, - color: $palette-theme-primary-foreground - ), - danger: ( - bg: $palette-theme-danger-background, - color: $palette-theme-danger-foreground - ), - warning: ( - bg: $palette-theme-warning-background, - color: $palette-theme-danger-foreground - ) -); - -@each $style in map-keys($button-types-styles) { - $button-styles: map-get($button-types-styles, $style); - - .button-#{$style} { - background-color: map-get($button-styles, "bg"); - color: map-get($button-styles, "color"); - } - - .button-#{$style}:focus, - .button-#{$style}:hover { - background-color: darken(map-get($button-styles, "bg"), 10%); - color: map-get($button-styles, "color"); - } -} diff --git a/lib/gui/app/scss/components/_caption.scss b/lib/gui/app/scss/components/_caption.scss deleted file mode 100644 index 50f8f4ee..00000000 --- a/lib/gui/app/scss/components/_caption.scss +++ /dev/null @@ -1,21 +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. - */ - -.caption { - font-weight: bold; - font-size: 11px; - margin-bottom: 0; -} diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss index 5806a514..76ffb808 100644 --- a/lib/gui/app/scss/main.scss +++ b/lib/gui/app/scss/main.scss @@ -28,9 +28,6 @@ $disabled-opacity: 0.2; @import "./modules/bootstrap"; @import "./modules/space"; @import "./components/label"; -@import "./components/badge"; -@import "./components/caption"; -@import "./components/button"; @import "./components/tick"; @import "../components/drive-selector/styles/drive-selector"; @import "../pages/main/styles/main"; diff --git a/lib/gui/app/scss/modules/_bootstrap.scss b/lib/gui/app/scss/modules/_bootstrap.scss index c49095f4..b49adddb 100644 --- a/lib/gui/app/scss/modules/_bootstrap.scss +++ b/lib/gui/app/scss/modules/_bootstrap.scss @@ -25,18 +25,3 @@ html { body { background-color: $palette-theme-dark-background; } - -// Fix slight checkbox vertical alignment issue -.checkbox input[type="checkbox"] { - position: initial; - margin-right: 2px; -} - -[uib-tooltip] { - cursor: default; -} - -.tooltip { - word-wrap: break-word; -} -