Desktop: Add classnames to DOM elements for theming purposes (#4933)

packages/app-desktop/gui/EncryptionConfigScreen.jsx

@@ -256,7 +256,7 @@ class EncryptionConfigScreenComponent extends React.Component {
 			<div>
 				<div style={containerStyle}>
 					{
-						<div style={{ backgroundColor: theme.warningBackgroundColor, paddingLeft: 10, paddingRight: 10, paddingTop: 2, paddingBottom: 2 }}>
+						<div className="alert alert-warning" style={{ backgroundColor: theme.warningBackgroundColor, paddingLeft: 10, paddingRight: 10, paddingTop: 2, paddingBottom: 2 }}>
 							<p style={theme.textStyle}>
 								<span>{_('For more information about End-To-End Encryption (E2EE) and advice on how to enable it please check the documentation:')}</span>{' '}
 								<a

packages/app-desktop/gui/NoteEditor/NoteEditor.tsx

@@ -549,7 +549,7 @@ function NoteEditor(props: NoteEditorProps) {
 				<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
 					{renderSearchBar()}
 				</div>
-				<div style={{ paddingLeft: theme.editorPaddingLeft, display: 'flex', flexDirection: 'row', alignItems: 'center', height: 40 }}>
+				<div className="tag-bar" style={{ paddingLeft: theme.editorPaddingLeft, display: 'flex', flexDirection: 'row', alignItems: 'center', height: 40 }}>
 					{renderTagButton()}
 					{renderTagBar()}
 				</div>

packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx

@@ -91,7 +91,7 @@ export default function NoteTitleBar(props: Props) {
 	}, []);
 
 	function renderTitleBarDate() {
-		return <span style={styles.titleDate}>{time.formatMsToLocal(props.noteUserUpdatedTime)}</span>;
+		return <span className="updated-time-label" style={styles.titleDate}>{time.formatMsToLocal(props.noteUserUpdatedTime)}</span>;
 	}
 
 	function renderNoteToolbar() {
@@ -104,6 +104,7 @@ export default function NoteTitleBar(props: Props) {
 	return (
 		<StyledRoot>
 			<input
+				className="title-input"
 				type="text"
 				ref={props.titleInputRef}
 				placeholder={props.isProvisional ? _('Creating new %s...', props.noteIsTodo ? _('to-do') : _('note')) : ''}

packages/app-desktop/gui/NoteListControls/NoteListControls.tsx

@@ -54,12 +54,14 @@ export default function NoteListControls(props: Props) {
 		return (
 			<ButtonContainer>
 				<StyledButton
+					className="new-todo-button"
 					tooltip={CommandService.instance().label('newTodo')}
 					iconName="far fa-check-square"
 					level={ButtonLevel.Primary}
 					onClick={onNewTodoButtonClick}
 				/>
 				<StyledButton
+					className="new-note-button"
 					tooltip={CommandService.instance().label('newNote')}
 					iconName="icon-note"
 					level={ButtonLevel.Primary}

packages/app-desktop/gui/NoteListItem.tsx

@@ -150,12 +150,21 @@ function NoteListItem(props: NoteListItemProps, ref: any) {
 		color: theme.color,
 	};
 	const watchedIcon = props.isWatched ? null : <i style={watchedIconStyle} className={'fa fa-share-square'}></i>;
+	const classNames = [
+		'list-item-container',
+		props.isSelected && 'selected',
+		item.todo_completed && 'todo-completed',
+		item.is_todo ? 'todo-list-item' : 'note-list-item',
+		(props.index + 1) % 2 === 0 ? 'even' : 'odd',
+	]
+		.filter(e => !!e)
+		.join(' ');
 
 	// Need to include "todo_completed" in key so that checkbox is updated when
 	// item is changed via sync.
 	return (
 		<StyledRoot
-			className="list-item-container"
+			className={classNames}
 			onDragOver={props.onNoteDragOver}
 			onDrop={props.onNoteDrop}
 			width={props.width}

packages/app-desktop/gui/NoteSearchBar.jsx

@@ -158,7 +158,7 @@ class NoteSearchBarComponent extends React.Component {
 		);
 
 		return (
-			<div style={this.props.style}>
+			<div className="note-search-bar" style={this.props.style}>
 				<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
 					{closeButton}
 					<input

packages/app-desktop/gui/PromptDialog.jsx

@@ -221,11 +221,11 @@ class PromptDialog extends React.Component {
 		let inputComp = null;
 
 		if (this.props.inputType === 'datetime') {
-			inputComp = <Datetime value={this.state.answer} inputProps={{ style: styles.input }} dateFormat={time.dateFormat()} timeFormat={time.timeFormat()} onChange={momentObject => onDateTimeChange(momentObject)} />;
+			inputComp = <Datetime className="datetime-picker" value={this.state.answer} inputProps={{ style: styles.input }} dateFormat={time.dateFormat()} timeFormat={time.timeFormat()} onChange={momentObject => onDateTimeChange(momentObject)} />;
 		} else if (this.props.inputType === 'tags') {
-			inputComp = <CreatableSelect styles={styles.select} theme={styles.selectTheme} ref={this.answerInput_} value={this.state.answer} placeholder="" components={makeAnimated()} isMulti={true} isClearable={false} backspaceRemovesValue={true} options={this.props.autocomplete} onChange={onSelectChange} onKeyDown={event => onKeyDown(event)} />;
+			inputComp = <CreatableSelect className="tag-selector" styles={styles.select} theme={styles.selectTheme} ref={this.answerInput_} value={this.state.answer} placeholder="" components={makeAnimated()} isMulti={true} isClearable={false} backspaceRemovesValue={true} options={this.props.autocomplete} onChange={onSelectChange} onKeyDown={event => onKeyDown(event)} />;
 		} else if (this.props.inputType === 'dropdown') {
-			inputComp = <Select styles={styles.select} theme={styles.selectTheme} ref={this.answerInput_} components={makeAnimated()} value={this.props.answer} defaultValue={this.props.defaultValue} isClearable={false} options={this.props.autocomplete} onChange={onSelectChange} onKeyDown={event => onKeyDown(event)} />;
+			inputComp = <Select className="item-selector" styles={styles.select} theme={styles.selectTheme} ref={this.answerInput_} components={makeAnimated()} value={this.props.answer} defaultValue={this.props.defaultValue} isClearable={false} options={this.props.autocomplete} onChange={onSelectChange} onKeyDown={event => onKeyDown(event)} />;
 		} else {
 			inputComp = <input style={styles.input} ref={this.answerInput_} value={this.state.answer} type="text" onChange={event => onChange(event)} onKeyDown={event => onKeyDown(event)} />;
 		}
@@ -254,8 +254,8 @@ class PromptDialog extends React.Component {
 		}
 
 		return (
-			<div style={styles.modalLayer}>
+			<div className="modal-layer" style={styles.modalLayer}>
-				<div style={styles.promptDialog}>
+				<div className="modal-dialog" style={styles.promptDialog}>
 					<label style={styles.label}>{this.props.label ? this.props.label : ''}</label>
 					<div style={{ display: 'inline-block', color: 'black', backgroundColor: theme.backgroundColor }}>
 						{inputComp}

packages/app-desktop/gui/SearchBar/SearchBar.tsx

@@ -126,7 +126,7 @@ function SearchBar(props: Props) {
 	}, [props.notesParentType, onExitSearch]);
 
 	return (
-		<Root>
+		<Root className="search-bar">
 			<SearchInput
 				inputRef={props.inputRef}
 				value={query}

packages/app-desktop/gui/Sidebar/Sidebar.tsx

@@ -77,12 +77,12 @@ function ExpandLink(props: any) {
 function FolderItem(props: any) {
 	const { hasChildren, isExpanded, parentId, depth, selected, folderId, folderTitle, anchorRef, noteCount, onFolderDragStart_, onFolderDragOver_, onFolderDrop_, itemContextMenu, folderItem_click, onFolderToggleClick_, shareId } = props;
 
-	const noteCountComp = noteCount ? <StyledNoteCount>{noteCount}</StyledNoteCount> : null;
+	const noteCountComp = noteCount ? <StyledNoteCount className="note-count-label">{noteCount}</StyledNoteCount> : null;
 
 	const shareIcon = shareId && !parentId ? <StyledShareIcon className="fas fa-share-alt"></StyledShareIcon> : null;
 
 	return (
-		<StyledListItem depth={depth} selected={selected} className={`list-item-container list-item-depth-${depth}`} onDragStart={onFolderDragStart_} onDragOver={onFolderDragOver_} onDrop={onFolderDrop_} draggable={true} data-folder-id={folderId}>
+		<StyledListItem depth={depth} selected={selected} className={`list-item-container list-item-depth-${depth} ${selected ? 'selected' : ''}`} onDragStart={onFolderDragStart_} onDragOver={onFolderDragOver_} onDrop={onFolderDrop_} draggable={true} data-folder-id={folderId}>
 			<ExpandLink themeId={props.themeId} hasChildren={hasChildren} folderId={folderId} onClick={onFolderToggleClick_} isExpanded={isExpanded}/>
 			<StyledListItemAnchor
 				ref={anchorRef}
@@ -100,7 +100,8 @@ function FolderItem(props: any) {
 				}}
 				onDoubleClick={onFolderToggleClick_}
 			>
-				{folderTitle} {shareIcon} {noteCountComp}
+				<span className="title">{folderTitle}</span>
+				{shareIcon} {noteCountComp}
 			</StyledListItemAnchor>
 		</StyledListItem>
 	);
@@ -382,7 +383,7 @@ class SidebarComponent extends React.Component<Props, State> {
 	}
 
 	renderNoteCount(count: number) {
-		return count ? <StyledNoteCount>{count}</StyledNoteCount> : null;
+		return count ? <StyledNoteCount className="note-count-label">{count}</StyledNoteCount> : null;
 	}
 
 	renderExpandIcon(isExpanded: boolean, isVisible: boolean = true) {
@@ -394,7 +395,7 @@ class SidebarComponent extends React.Component<Props, State> {
 
 	renderAllNotesItem(selected: boolean) {
 		return (
-			<StyledListItem key="allNotesHeader" selected={selected} className={'list-item-container list-item-depth-0'} isSpecialItem={true}>
+			<StyledListItem key="allNotesHeader" selected={selected} className={'list-item-container list-item-depth-0 all-notes'} isSpecialItem={true}>
 				<StyledExpandLink>{this.renderExpandIcon(false, false)}</StyledExpandLink>
 				<StyledAllNotesIcon className="icon-notes"/>
 				<StyledListItemAnchor
@@ -451,7 +452,12 @@ class SidebarComponent extends React.Component<Props, State> {
 		const noteCount = Setting.value('showNoteCounts') ? this.renderNoteCount(tag.note_count) : '';
 
 		return (
-			<StyledListItem selected={selected} className={'list-item-container'} key={tag.id} onDrop={this.onTagDrop_} data-tag-id={tag.id}>
+			<StyledListItem selected={selected}
+				className={`list-item-container ${selected ? 'selected' : ''}`}
+				key={tag.id}
+				onDrop={this.onTagDrop_}
+				data-tag-id={tag.id}
+			>
 				<StyledExpandLink>{this.renderExpandIcon(false, false)}</StyledExpandLink>
 				<StyledListItemAnchor
 					ref={anchorRef}
@@ -465,7 +471,8 @@ class SidebarComponent extends React.Component<Props, State> {
 						this.tagItem_click(tag);
 					}}
 				>
-					{Tag.displayTitle(tag)} {noteCount}
+					<span className="tag-label">{Tag.displayTitle(tag)}</span>
+					{noteCount}
 				</StyledListItemAnchor>
 			</StyledListItem>
 		);
@@ -657,7 +664,11 @@ class SidebarComponent extends React.Component<Props, State> {
 			const folderItems = [this.renderAllNotesItem(allNotesSelected)].concat(result.items);
 			this.folderItemsOrder_ = result.order;
 			items.push(
-				<div className="folders" key="folder_items" style={{ display: this.state.folderHeaderIsExpanded ? 'block' : 'none', paddingBottom: 10 }}>
+				<div
+					className={`folders ${this.state.folderHeaderIsExpanded ? 'expanded' : ''}`}
+					key="folder_items"
+					style={{ display: this.state.folderHeaderIsExpanded ? 'block' : 'none', paddingBottom: 10 }}
+				>
 					{folderItems}
 				</div>
 			);

packages/app-desktop/gui/ToggleEditorsButton/ToggleEditorsButton.tsx

@@ -17,7 +17,16 @@ export default function ToggleEditorsButton(props: Props) {
 	const style = styles_(props);
 
 	return (
-		<button style={style.button} disabled={!props.toolbarButtonInfo.enabled} aria-label={props.toolbarButtonInfo.tooltip} title={props.toolbarButtonInfo.tooltip} type="button" className="tox-tbtn" aria-pressed="false" onClick={props.toolbarButtonInfo.onClick}>
+		<button
+			style={style.button}
+			disabled={!props.toolbarButtonInfo.enabled}
+			aria-label={props.toolbarButtonInfo.tooltip}
+			title={props.toolbarButtonInfo.tooltip}
+			type="button"
+			className={`tox-tbtn ${props.value}-active`}
+			aria-pressed="false"
+			onClick={props.toolbarButtonInfo.onClick}
+		>
 			<div style={style.leftInnerButton}>
 				<i style={style.leftIcon} className="fab fa-markdown"></i>
 			</div>

packages/app-desktop/plugins/GotoAnything.tsx

@@ -432,7 +432,8 @@ class Dialog extends React.PureComponent<Props, State> {
 	renderItem(item: SearchResult) {
 		const theme = themeStyle(this.props.themeId);
 		const style = this.style();
-		const rowStyle = item.id === this.state.selectedItemId ? style.rowSelected : style.row;
+		const isSelected = item.id === this.state.selectedItemId;
+		const rowStyle = isSelected ? style.rowSelected : style.row;
 		const titleHtml = item.fragments
 			? `<span style="font-weight: bold; color: ${theme.colorBright};">${item.title}</span>`
 			: surroundKeywords(this.state.keywords, item.title, `<span style="font-weight: bold; color: ${theme.colorBright};">`, '</span>', { escapeHtml: true });
@@ -444,7 +445,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		const fragmentComp = !fragmentsHtml ? null : <div style={style.rowFragments} dangerouslySetInnerHTML={{ __html: (fragmentsHtml) }}></div>;
 
 		return (
-			<div key={item.id} style={rowStyle} onClick={this.listItem_onClick} data-id={item.id} data-parent-id={item.parent_id} data-type={item.type}>
+			<div key={item.id} className={isSelected ? 'selected' : null} style={rowStyle} onClick={this.listItem_onClick} data-id={item.id} data-parent-id={item.parent_id} data-type={item.type}>
 				<div style={style.rowTitle} dangerouslySetInnerHTML={{ __html: titleHtml }}></div>
 				{fragmentComp}
 				{pathComp}
@@ -521,11 +522,11 @@ class Dialog extends React.PureComponent<Props, State> {
 	render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = this.style();
-		const helpComp = !this.state.showHelp ? null : <div style={style.help}>{_('Type a note title or part of its content to jump to it. Or type # followed by a tag name, or @ followed by a notebook name. Or type : to search for commands.')}</div>;
+		const helpComp = !this.state.showHelp ? null : <div className="help-text" style={style.help}>{_('Type a note title or part of its content to jump to it. Or type # followed by a tag name, or @ followed by a notebook name. Or type : to search for commands.')}</div>;
 
 		return (
-			<div onClick={this.modalLayer_onClick} style={theme.dialogModalLayer}>
+			<div className="modal-layer" onClick={this.modalLayer_onClick} style={theme.dialogModalLayer}>
-				<div style={style.dialogBox}>
+				<div className="modal-dialog" style={style.dialogBox}>
 					{helpComp}
 					<div style={style.inputHelpWrapper}>
 						<input autoFocus type="text" style={style.input} ref={this.inputRef} value={this.state.query} onChange={this.input_onChange} onKeyDown={this.input_onKeyDown} />