diff --git a/lib/gui/app/components/flash-another/flash-another.jsx b/lib/gui/app/components/flash-another/flash-another.jsx new file mode 100644 index 00000000..ec349e04 --- /dev/null +++ b/lib/gui/app/components/flash-another/flash-another.jsx @@ -0,0 +1,36 @@ +/* + * Copyright 2016 resin.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. + */ + +'use strict' + +const React = require('react') +const propTypes = require('prop-types') + +const FlashAnother = (props) => { + return ( +
+ +
+ ) +} + +FlashAnother.propTypes = { + onClick: propTypes.func +} + +module.exports = FlashAnother diff --git a/lib/gui/app/components/flash-another/index.js b/lib/gui/app/components/flash-another/index.js new file mode 100644 index 00000000..d0545718 --- /dev/null +++ b/lib/gui/app/components/flash-another/index.js @@ -0,0 +1,34 @@ +/* + * Copyright 2018 resin.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. + */ + +'use strict' + +/** + * @module Etcher.Components.FlashAnother + */ + +const angular = require('angular') +const { react2angular } = require('react2angular') + +const MODULE_NAME = 'Etcher.Components.FlashAnother' +const FlashAnother = angular.module(MODULE_NAME, []) + +FlashAnother.component( + 'flashAnother', + react2angular(require('./flash-another.jsx')) +) + +module.exports = MODULE_NAME diff --git a/lib/gui/app/pages/finish/templates/success.tpl.html b/lib/gui/app/pages/finish/templates/success.tpl.html index 56dfbc91..c3ea8652 100644 --- a/lib/gui/app/pages/finish/templates/success.tpl.html +++ b/lib/gui/app/pages/finish/templates/success.tpl.html @@ -15,11 +15,8 @@ -
- -
+ +
diff --git a/lib/gui/app/pages/main/main.js b/lib/gui/app/pages/main/main.js index 8d2f07c6..bbf369c3 100644 --- a/lib/gui/app/pages/main/main.js +++ b/lib/gui/app/pages/main/main.js @@ -42,6 +42,7 @@ const MainPage = angular.module(MODULE_NAME, [ require('../../components/file-selector'), require('../../components/featured-project'), require('../../components/reduced-flashing-infos'), + require('../../components/flash-another'), require('../../os/open-external/open-external'), require('../../os/dropzone/dropzone'), diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index 08a9aca4..1243507b 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/lib/gui/app/pages/main/styles/_main.scss @@ -47,7 +47,6 @@ svg-icon > img[disabled] { } .page-main .button-brick { - min-width: $btn-min-width; width: 200px; height: 48px; font-size: 16px; @@ -64,6 +63,12 @@ svg-icon > img[disabled] { top: 30%; } +.button-brick { + width: 200px; + height: 48px; + font-size: 16px; +} + %step-border { height: 2px; background-color: $palette-theme-dark-foreground; diff --git a/lib/gui/app/scss/components/_button.scss b/lib/gui/app/scss/components/_button.scss index b797aeff..11f4dddb 100644 --- a/lib/gui/app/scss/components/_button.scss +++ b/lib/gui/app/scss/components/_button.scss @@ -37,6 +37,7 @@ @extend .button-no-hover; background-color: $palette-theme-dark-disabled-background; color: $palette-theme-dark-disabled-foreground; + opacity: 1; } } diff --git a/lib/gui/app/styled-components.js b/lib/gui/app/styled-components.js index 4dd95771..5ba0f1c1 100644 --- a/lib/gui/app/styled-components.js +++ b/lib/gui/app/styled-components.js @@ -32,6 +32,7 @@ exports.StepButton = styled(Button) ` &:disabled { background-color: ${colors.dark.disabled.background}; color: ${colors.dark.disabled.foreground}; + opacity: 1; &:hover { background-color: ${colors.dark.disabled.background}; color: ${colors.dark.disabled.foreground}; diff --git a/lib/gui/app/theme.js b/lib/gui/app/theme.js index 4ceb4dce..206dcf51 100644 --- a/lib/gui/app/theme.js +++ b/lib/gui/app/theme.js @@ -26,7 +26,7 @@ exports.colors = { }, disabled: { foreground: '#787c7f', - background: '#313339' + background: '#3a3c41' } }, light: { diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index 05bec5f5..2053e943 100644 --- a/lib/gui/css/main.css +++ b/lib/gui/css/main.css @@ -6076,7 +6076,8 @@ body { margin-right: 2px; } .button[disabled] { background-color: #3a3c41; - color: #787c7f; } + color: #787c7f; + opacity: 1; } .button-block { display: block; @@ -6425,7 +6426,6 @@ svg-icon > img[disabled] { position: relative; } .page-main .button-brick { - min-width: 170px; width: 200px; height: 48px; font-size: 16px; } @@ -6440,6 +6440,11 @@ svg-icon > img[disabled] { right: -17px; top: 30%; } +.button-brick { + width: 200px; + height: 48px; + font-size: 16px; } + .page-main .step-border-left, .page-main .step-border-right { height: 2px; background-color: #fff;