feat: Initial clean release of CHM

packages/app-desktop/gui/ConfigScreen/ButtonBar.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import Button, { ButtonLevel } from '../Button/Button';
+import { _ } from '@joplin/lib/locale';
+import styled from 'styled-components';
+
+interface StyleProps {
+	theme: {
+		backgroundColor3: string;
+		configScreenPadding: number;
+		dividerColor: string;
+	};
+}
+
+interface Props {
+	backButtonTitle?: string;
+	hasChanges?: boolean;
+	onCancelClick: ()=> void;
+	onSaveClick?: ()=> void;
+	onApplyClick?: ()=> void;
+}
+
+const StyledRoot = styled.nav`
+	display: flex;
+	align-items: center;
+	min-height: 72px;
+	padding: 12px clamp(24px, 3vw, 48px);
+	background-color: ${(props: StyleProps) => props.theme.backgroundColor3};
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-top-color: ${(props: StyleProps) => props.theme.dividerColor};
+`;
+
+export default function ButtonBar(props: Props) {
+	function renderOkButton() {
+		if (!props.onSaveClick) return null;
+		return <Button style={{ marginRight: 10 }} level={ButtonLevel.Primary} disabled={!props.hasChanges} onClick={props.onSaveClick} title={_('OK')}/>;
+	}
+
+	function renderApplyButton() {
+		if (!props.onApplyClick) return null;
+		return <Button level={ButtonLevel.Primary} disabled={!props.hasChanges} onClick={props.onApplyClick} title={_('Apply')}/>;
+	}
+
+	return (
+		<StyledRoot className='button-bar'>
+			<Button
+				onClick={props.onCancelClick}
+				level={ButtonLevel.Secondary}
+				iconName="fa fa-chevron-left"
+				title={props.backButtonTitle ? props.backButtonTitle : _('Back')}
+			/>
+			{ (props.onApplyClick || props.onSaveClick) && (
+				<div style={{ display: 'flex', flexDirection: 'row', marginLeft: 30 }}>
+					{renderOkButton()}
+					{renderApplyButton()}
+				</div>
+			)}
+		</StyledRoot>
+	);
+}