Restyle modals

Change-type: patch
Changelog-entry: Restyle modals
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>

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 (
-		<Modal
+		<SmallModal
 			title={confirmLabel}
 			action={confirmLabel}
 			cancel={cancel}
@@ -54,7 +55,7 @@ const WarningModal = ({
 			primaryButtonProps={{ warning: true }}
 		>
 			{message}
-		</Modal>
+		</SmallModal>
 	);
 };
 
@@ -91,6 +92,7 @@ async function getSettingsList(): Promise<Setting[]> {
 		{
 			name: 'updatesEnabled',
 			label: 'Auto-updates enabled',
+			hide: _.includes(['rpm', 'deb'], packageType),
 		},
 	];
 }
@@ -160,18 +162,21 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
 
 	return (
 		<Modal
-			id="settings-modal"
+			titleElement={
-			title="Settings"
+				<Txt fontSize={24} mb={24}>
+					Settings
+				</Txt>
+			}
 			done={() => toggleModal(false)}
 			style={{
 				width: 780,
 				height: 420,
 			}}
 		>
-			<div>
+			<Flex flexDirection="column">
 				{_.map(settingsList, (setting: Setting, i: number) => {
 					return setting.hide ? null : (
-						<div key={setting.name}>
+						<Flex key={setting.name}>
 							<Checkbox
 								toggle
 								tabIndex={6 + i}
@@ -179,21 +184,27 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
 								checked={currentSettings[setting.name]}
 								onChange={() => toggleSetting(setting.name, setting.options)}
 							/>
-						</div>
+						</Flex>
 					);
 				})}
-				<div>
+				<Flex
-					<span
+					mt={28}
-						onClick={() =>
+					alignItems="center"
-							openExternal(
+					color="#00aeef"
-								'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
+					style={{
-							)
+						width: 'fit-content',
-						}
+						cursor: 'pointer',
-					>
+					}}
-						<FontAwesomeIcon icon={faGithub} /> {version}
+					onClick={() =>
-					</span>
+						openExternal(
-				</div>
+							'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
-			</div>
+						)
+					}
+				>
+					<FontAwesomeIcon icon={faGithub} style={{ marginRight: 8 }} />
+					<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>
+				</Flex>
+			</Flex>
 
 			{warning === undefined ? null : (
 				<WarningModal

lib/gui/app/components/source-selector/source-selector.tsx

@@ -30,7 +30,7 @@ import {
 	ButtonProps,
 	Card as BaseCard,
 	Input,
-	Modal,
+	Modal as SmallModal,
 	Txt,
 	Flex,
 } from 'rendition';
@@ -49,6 +49,7 @@ import { replaceWindowsNetworkDriveLetter } from '../../os/windows-network-drive
 import {
 	ChangeButton,
 	DetailsText,
+	Modal,
 	StepButton,
 	StepNameButton,
 } from '../../styled-components';
@@ -114,7 +115,13 @@ function getState() {
 	};
 }
 
-const URLSelector = ({ done }: { done: (imageURL: string) => 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 (
 		<Modal
+			cancel={cancel}
 			primaryButtonProps={{
-				disabled: loading,
+				disabled: loading || !imageURL,
 			}}
 			done={async () => {
 				setLoading(true);
@@ -143,8 +151,8 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => {
 				await done(imageURL);
 			}}
 		>
-			<label style={{ width: '100%' }}>
+			<Flex style={{ width: '100%' }} flexDirection="column">
-				<Txt mb="10px" fontSize="20px">
+				<Txt mb="10px" fontSize="24px">
 					Use Image URL
 				</Txt>
 				<Input
@@ -155,10 +163,10 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => {
 						setImageURL(evt.target.value)
 					}
 				/>
-			</label>
+			</Flex>
 			{!_.isEmpty(recentImages) && (
-				<div>
+				<Flex flexDirection="column">
-					Recent
+					<Txt fontSize={18}>Recent</Txt>
 					<Card
 						style={{ padding: '10px 15px' }}
 						rows={_.map(recentImages, (recent) => (
@@ -174,7 +182,7 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => {
 							</Txt>
 						))}
 					/>
-				</div>
+				</Flex>
 			)}
 		</Modal>
 	);
@@ -529,7 +537,7 @@ export class SourceSelector extends React.Component<
 				</Flex>
 
 				{this.state.warning != null && (
-					<Modal
+					<SmallModal
 						titleElement={
 							<span>
 								<FontAwesomeIcon
@@ -552,11 +560,11 @@ export class SourceSelector extends React.Component<
 						<ModalText
 							dangerouslySetInnerHTML={{ __html: this.state.warning.message }}
 						/>
-					</Modal>
+					</SmallModal>
 				)}
 
 				{showImageDetails && (
-					<Modal
+					<SmallModal
 						title="Image"
 						done={() => {
 							this.setState({ showImageDetails: false });
@@ -570,11 +578,16 @@ export class SourceSelector extends React.Component<
 							<Txt.span bold>Path: </Txt.span>
 							<Txt.span>{imagePath}</Txt.span>
 						</Txt.p>
-					</Modal>
+					</SmallModal>
 				)}
 
 				{showURLSelector && (
 					<URLSelector
+						cancel={() => {
+							this.setState({
+								showURLSelector: false,
+							});
+						}}
 						done={async (imageURL: string) => {
 							// Avoid analytics and selection state changes
 							// if no file was resolved from the dialog.

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) => (
-	<Provider theme={theme} {...props}></Provider>
+	<Provider theme={defaultTheme} {...props}></Provider>
 );
 
 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 (
-		<ModalBase
+		<Provider
-			cancelButtonProps={{
+			theme={{
-				style: {
+				...defaultTheme,
-					marginRight: '20px',
+				header: {
-					border: 'solid 1px #2a506f',
+					height: '50px',
+				},
+				layer: {
+					extend: () => `
+					${defaultTheme.layer.extend()}
+
+					> div:last-child {
+						top: 0;
+					}
+				`,
 				},
 			}}
-			{...props}
+		>
-		/>
+			<ModalBase
+				position="top"
+				width={780}
+				cancelButtonProps={{
+					style: {
+						marginRight: '20px',
+						border: 'solid 1px #2a506f',
+					},
+				}}
+				style={style}
+				{...props}
+			/>
+		</Provider>
 	);
 })`
 	> 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;

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};