jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-23 11:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(GUI): Fix styling issues with buttons

Browse Source 
Change-type: patch
Changelog-entry: Moved back the write cancel button
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>
This commit is contained in:
Lorenzo Alberto Maria Ambrosi 2018-11-23 16:28:06 +01:00
parent 76af6e975e
commit afd888e14d
No known key found for this signature in database
GPG Key ID: 0D424CCA84D4C9D4
7 changed files with 69 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
lib/gui/app/components/progress-button/progress-button.jsx
View File

@ -24,7 +24,7 @@ const { default: styled, keyframes } = require('styled-components')
const { ProgressBar, Provider } = require('rendition')
const { colors, consts } = require('./../../theme')
const { colors } = require('./../../theme')
const { StepButton, StepSelection } = require('./../../styled-components')
const darkenForegroundStripes = 0.18
@ -51,13 +51,16 @@ const ProgressButtonStripes = keyframes `
const FlashProgressBar = styled(ProgressBar) `
> div {
width: 200px;
height: 48px;
color: white !important;
text-shadow: none !important;
}
width: 100%;
max-width: ${consts.btnMaxWidth};
margin: auto;
width: 200px;
height: 48px;
font-size: 16px;
line-height: 48px;
background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()};
`

14
lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx
View File

@ -24,14 +24,22 @@ const SvgIcon = require('../svg-icon/svg-icon.jsx')
const Div = styled.div `
position: absolute;
top: 45px;
left: 550px;
left: 545px;
> span.step-name {
justify-content: flex-start;
> span {
margin-left: 5px;
font-weight: normal;
margin-left: 10px;
}
> span:nth-child(2) {
font-weight: 500;
}
> span:nth-child(3) {
font-weight: 400;
font-style: italic;
}
}

13
lib/gui/app/pages/main/styles/_main.scss
View File

@ -48,11 +48,20 @@ svg-icon > img[disabled] {
.page-main .button-brick {
min-width: $btn-min-width;
width: 200px;
height: 48px;
font-size: 16px;
}
.page-main .button-abort-write {
margin-right: -35px;
z-index: 1;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
font-size: 16px;
position: absolute;
right: -17px;
top: 30%;
}
%step-border {

16
lib/gui/app/scss/main.scss
View File

@ -67,6 +67,13 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free-webfonts/web
font-style: normal;
}
@font-face {
font-family: Roboto;
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: Roboto;
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff');
@ -106,7 +113,7 @@ body,
position: relative;
color: $palette-theme-dark-disabled-foreground;
margin: 0 60px 20px 60px;
margin: 0 30px 16px 30px;
padding-top: 15px;
border-top: 2px solid $palette-theme-dark-soft-background;
text-align: center;
@ -134,7 +141,6 @@ body,
font-size: 10px;
position: absolute;
right: 0;
top: 50%;
}
> span[os-open-external] {
@ -161,7 +167,7 @@ body,
.wrapper {
height: 100%;
margin: 20px 60px;
margin: 20px 50px;
}
.section-header {
@ -187,8 +193,8 @@ featured-project {
height: 360px;
position: absolute;
z-index: 1;
left: 5%;
top: 10%;
left: 30px;
top: 45px;
border-radius: 7px;
overflow: hidden;
}

2
lib/gui/app/scss/modules/_theme.scss
View File

@ -21,7 +21,7 @@ $palette-theme-light-background: #fff;
$palette-theme-dark-soft-foreground: #ddd;
$palette-theme-dark-soft-background: #64686a;
$palette-theme-light-soft-foreground: #b3b3b3;
$palette-theme-dark-disabled-background: #313339;
$palette-theme-dark-disabled-background: #3a3c41;
$palette-theme-dark-disabled-foreground: #787c7f;
$palette-theme-light-disabled-background: #d5d5d5;
$palette-theme-light-disabled-foreground: #787c7f;

8
lib/gui/app/styled-components.js
View File

@ -17,14 +17,15 @@
'use strict'
const styled = require('styled-components').default
const { colors, consts } = require('./theme')
const { colors } = require('./theme')
const {
Button, Txt, Flex
} = require('rendition')
exports.StepButton = styled(Button) `
width: 100%;
max-width: ${consts.btnMaxWidth};
width: 200px;
height: 48px;
font-size: 16px;
margin: auto;
overflow: hidden;
@ -39,7 +40,6 @@ exports.StepButton = styled(Button) `
`
exports.ChangeButton = styled(Button) `
font-size: 12px;
color: ${colors.primary.background};
padding: 0;
width: 100%;

34
lib/gui/css/main.css
View File

@ -6075,7 +6075,7 @@ body {
top: 2px;
margin-right: 2px; }
.button[disabled] {
background-color: #313339;
background-color: #3a3c41;
color: #787c7f; }
.button-block {
@ -6425,11 +6425,20 @@ svg-icon > img[disabled] {
position: relative; }
.page-main .button-brick {
min-width: 170px; }
min-width: 170px;
width: 200px;
height: 48px;
font-size: 16px; }
.page-main .button-abort-write {
margin-right: -35px;
z-index: 1; }
width: 20px;
height: 20px;
margin: 0;
padding: 0;
font-size: 16px;
position: absolute;
right: -17px;
top: 30%; }
.page-main .step-border-left, .page-main .step-border-right {
height: 2px;
@ -9872,6 +9881,12 @@ readers do not read off random characters that represent icons */
font-weight: 400;
font-style: normal; }
@font-face {
font-family: Roboto;
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff");
font-weight: 500;
font-style: normal; }
@font-face {
font-family: Roboto;
src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff");
@ -9901,7 +9916,7 @@ body,
justify-content: center;
position: relative;
color: #787c7f;
margin: 0 60px 20px 60px;
margin: 0 30px 16px 30px;
padding-top: 15px;
border-top: 2px solid #64686a;
text-align: center; }
@ -9917,8 +9932,7 @@ body,
.section-footer .footer-right {
font-size: 10px;
position: absolute;
right: 0;
top: 50%; }
right: 0; }
.section-footer > span[os-open-external] {
display: flex; }
@ -9937,7 +9951,7 @@ body,
.wrapper {
height: 100%;
margin: 20px 60px; }
margin: 20px 50px; }
.section-header {
text-align: right;
@ -9957,7 +9971,7 @@ featured-project.fp-visible webview {
height: 360px;
position: absolute;
z-index: 1;
left: 5%;
top: 10%;
left: 30px;
top: 45px;
border-radius: 7px;
overflow: hidden; }