Remove unused styles

Changelog-entry: Remove unused styles
Change-type: patch

lib/gui/app/components/finish/finish.tsx

@@ -67,7 +67,7 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
 
 				<div className="box center">
 					<div className="fallback-banner">
-						<div className="caption caption-big">
+						<div className="caption-big">
 							Thanks for using
 							<span
 								style={{ cursor: 'pointer' }}
@@ -84,7 +84,7 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
 								></SVGIcon>
 							</span>
 						</div>
-						<div className="caption caption-small fallback-footer">
+						<div className="caption-small fallback-footer">
 							made with
 							<SVGIcon
 								paths={['love.svg']}

lib/gui/app/pages/main/Flash.tsx

@@ -14,10 +14,14 @@
  * limitations under the License.
  */
 
+import { faTimes } 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 { Modal, Txt } from 'rendition';
+import { Button, Modal, Txt } from 'rendition';
+import styled from 'styled-components';
+
 import * as constraints from '../../../../shared/drive-constraints';
 import * as messages from '../../../../shared/messages';
 import { DriveSelectorModal } from '../../components/drive-selector/DriveSelectorModal';
@@ -145,6 +149,12 @@ const formatSeconds = (totalSeconds: number) => {
 	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<FlashStepProps, FlashStepState> {
 									this.tryFlash();
 								}}
 							/>
+							{isFlashing && (
+								<IconButton
+									icon={<FontAwesomeIcon icon={faTimes} />}
+									plain
+									onClick={imageWriter.cancel}
+									color="#fff"
+								/>
+							)}
 						</StepSelection>
 
-						{isFlashing && (
-							<button
-								className="button button-link button-abort-write"
-								onClick={imageWriter.cancel}
-							>
-								<span className="glyphicon glyphicon-remove-sign"></span>
-							</button>
-						)}
 						{!_.isNil(state.speed) &&
 							state.percentage !== COMPLETED_PERCENTAGE && (
 								<p className="step-footer step-footer-split">

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,

lib/gui/app/scss/components/_badge.scss

@@ -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;
-}

lib/gui/app/scss/components/_button.scss

@@ -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");
-  }
-}

lib/gui/app/scss/components/_caption.scss

@@ -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;
-}

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";

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;
-}
-