diff --git a/lib/gui/app/components/settings/settings.tsx b/lib/gui/app/components/settings/settings.tsx index 9b1bf1a2..115431e5 100644 --- a/lib/gui/app/components/settings/settings.tsx +++ b/lib/gui/app/components/settings/settings.tsx @@ -19,12 +19,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as _ from 'lodash'; import * as os from 'os'; import * as React from 'react'; -import { Checkbox, Modal } from 'rendition'; +import { Checkbox, Flex, Modal as SmallModal, Txt } from 'rendition'; -import { version } from '../../../../../package.json'; +import { version, packageType } from '../../../../../package.json'; import * as settings from '../../models/settings'; import * as analytics from '../../modules/analytics'; import { open as openExternal } from '../../os/open-external/services/open-external'; +import { Modal } from '../../styled-components'; const platform = os.platform(); @@ -42,7 +43,7 @@ const WarningModal = ({ done, }: WarningModalProps) => { return ( - {message} - + ); }; @@ -91,6 +92,7 @@ async function getSettingsList(): Promise { { name: 'updatesEnabled', label: 'Auto-updates enabled', + hide: _.includes(['rpm', 'deb'], packageType), }, ]; } @@ -160,18 +162,21 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) { return ( + Settings + + } done={() => toggleModal(false)} style={{ width: 780, height: 420, }} > -
+ {_.map(settingsList, (setting: Setting, i: number) => { return setting.hide ? null : ( -
+ toggleSetting(setting.name, setting.options)} /> -
+
); })} -
- - openExternal( - 'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md', - ) - } - > - {version} - -
-
+ + openExternal( + 'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md', + ) + } + > + + {version} + + {warning === undefined ? null : ( void }) => { +const URLSelector = ({ + done, + cancel, +}: { + done: (imageURL: string) => void; + cancel: () => void; +}) => { const [imageURL, setImageURL] = React.useState(''); const [recentImages, setRecentImages]: [ string[], @@ -130,8 +137,9 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => { }, []); return ( { setLoading(true); @@ -143,8 +151,8 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => { await done(imageURL); }} > - + {!_.isEmpty(recentImages) && ( -
- Recent + + Recent ( @@ -174,7 +182,7 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => { ))} /> -
+ )}
); @@ -529,7 +537,7 @@ export class SourceSelector extends React.Component< {this.state.warning != null && ( - - + )} {showImageDetails && ( - { this.setState({ showImageDetails: false }); @@ -570,11 +578,16 @@ export class SourceSelector extends React.Component< Path: {imagePath} - + )} {showURLSelector && ( { + this.setState({ + showURLSelector: false, + }); + }} done={async (imageURL: string) => { // Avoid analytics and selection state changes // if no file was resolved from the dialog. diff --git a/lib/gui/app/styled-components.tsx b/lib/gui/app/styled-components.tsx index edeee4ef..362b02e3 100644 --- a/lib/gui/app/styled-components.tsx +++ b/lib/gui/app/styled-components.tsx @@ -23,14 +23,27 @@ import { Txt, Flex, FlexProps, + Theme as renditionTheme, } from 'rendition'; import styled from 'styled-components'; import { space } from 'styled-system'; import { colors, theme } from './theme'; +const defaultTheme = { + ...renditionTheme, + ...theme, + layer: { + extend: () => ` + > div:first-child { + background-color: transparent; + } + `, + }, +}; + export const ThemedProvider = (props: any) => ( - + ); export const BaseButton = styled(Button)` @@ -109,16 +122,38 @@ export const DetailsText = (props: FlexProps) => ( ); export const Modal = styled((props) => { + const { style = { height: 420 } } = props; return ( - ` + ${defaultTheme.layer.extend()} + + > div:last-child { + top: 0; + } + `, }, }} - {...props} - /> + > + + ); })` > div { @@ -130,6 +165,7 @@ export const Modal = styled((props) => { } > div:last-child { + border-radius: 0 0 7px 7px; height: 80px; background-color: #fff; justify-content: center; diff --git a/lib/gui/app/theme.ts b/lib/gui/app/theme.ts index 122ada09..13a18949 100644 --- a/lib/gui/app/theme.ts +++ b/lib/gui/app/theme.ts @@ -89,6 +89,7 @@ export const theme = { && { width: 200px; height: 48px; + font-size: 16px; :disabled { background-color: ${colors.dark.disabled.background};