jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-23 19:26:33 +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 { ProgressBar, Provider } = require('rendition')
const { colors, consts } = require('./../../theme') const { colors } = require('./../../theme')
const { StepButton, StepSelection } = require('./../../styled-components') const { StepButton, StepSelection } = require('./../../styled-components')
const darkenForegroundStripes = 0.18 const darkenForegroundStripes = 0.18
@ -51,13 +51,16 @@ const ProgressButtonStripes = keyframes `
const FlashProgressBar = styled(ProgressBar) ` const FlashProgressBar = styled(ProgressBar) `
> div { > div {
width: 200px;
height: 48px;
color: white !important; color: white !important;
text-shadow: none !important; text-shadow: none !important;
} }
width: 100%; width: 200px;
max-width: ${consts.btnMaxWidth}; height: 48px;
margin: auto; font-size: 16px;
line-height: 48px;
background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()}; 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 ` const Div = styled.div `
position: absolute; position: absolute;
top: 45px; top: 45px;
left: 550px; left: 545px;
> span.step-name { > span.step-name {
justify-content: flex-start; justify-content: flex-start;
> span { > span {
margin-left: 5px; margin-left: 10px;
font-weight: normal; }
> 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 { .page-main .button-brick {
min-width: $btn-min-width; min-width: $btn-min-width;
width: 200px;
height: 48px;
font-size: 16px;
} }
.page-main .button-abort-write { .page-main .button-abort-write {
margin-right: -35px; width: 20px;
z-index: 1; height: 20px;
margin: 0;
padding: 0;
font-size: 16px;
position: absolute;
right: -17px;
top: 30%;
} }
%step-border { %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-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-face {
font-family: Roboto; font-family: Roboto;
src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff'); src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff');
@ -106,7 +113,7 @@ body,
position: relative; position: relative;
color: $palette-theme-dark-disabled-foreground; color: $palette-theme-dark-disabled-foreground;
margin: 0 60px 20px 60px; margin: 0 30px 16px 30px;
padding-top: 15px; padding-top: 15px;
border-top: 2px solid $palette-theme-dark-soft-background; border-top: 2px solid $palette-theme-dark-soft-background;
text-align: center; text-align: center;
@ -134,7 +141,6 @@ body,
font-size: 10px; font-size: 10px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 50%;
} }
> span[os-open-external] { > span[os-open-external] {
@ -161,7 +167,7 @@ body,
.wrapper { .wrapper {
height: 100%; height: 100%;
margin: 20px 60px; margin: 20px 50px;
} }
.section-header { .section-header {
@ -187,8 +193,8 @@ featured-project {
height: 360px; height: 360px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
left: 5%; left: 30px;
top: 10%; top: 45px;
border-radius: 7px; border-radius: 7px;
overflow: hidden; 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-foreground: #ddd;
$palette-theme-dark-soft-background: #64686a; $palette-theme-dark-soft-background: #64686a;
$palette-theme-light-soft-foreground: #b3b3b3; $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-dark-disabled-foreground: #787c7f;
$palette-theme-light-disabled-background: #d5d5d5; $palette-theme-light-disabled-background: #d5d5d5;
$palette-theme-light-disabled-foreground: #787c7f; $palette-theme-light-disabled-foreground: #787c7f;

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

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

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

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