mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-24 11:46:31 +00:00
Refactor styles
Change-type: patch Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
This commit is contained in:
Lorenzo Alberto Maria Ambrosi
parent
af9d3ba9f1
commit
7aec8a4ae2
@ -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 (
|
||||
<Div position="absolute" left="153px" top="66px">
|
||||
<div className="inline-flex title">
|
||||
<span
|
||||
className={`tick tick--${
|
||||
allDevicesFailed ? 'error' : 'success'
|
||||
} space-right-medium`}
|
||||
></span>
|
||||
<h3>Flash Complete!</h3>
|
||||
</div>
|
||||
<Flex alignItems="center">
|
||||
<FontAwesomeIcon
|
||||
icon={faCheckCircle}
|
||||
color={allDevicesFailed ? '#c6c8c9' : '#1ac135'}
|
||||
style={{
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
margin: '0 15px 0 0',
|
||||
}}
|
||||
/>
|
||||
<Txt fontSize={24} color="#fff">
|
||||
Flash Complete!
|
||||
</Txt>
|
||||
</Flex>
|
||||
<Div className="results" mr="0" mb="0" ml="40px">
|
||||
{_.map(results.devices, (quantity, type) => {
|
||||
return quantity ? (
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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};
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user