Chore: Desktop: Use SCSS instead of styled-components for plugin dialogs and toolbar buttons (#11189)

.eslintignore

@@ -442,7 +442,6 @@ packages/app-desktop/gui/ToggleEditorsButton/ToggleEditorsButton.js
 packages/app-desktop/gui/ToggleEditorsButton/styles/index.js
 packages/app-desktop/gui/ToolbarBase.js
 packages/app-desktop/gui/ToolbarButton/ToolbarButton.js
-packages/app-desktop/gui/ToolbarButton/styles/index.js
 packages/app-desktop/gui/ToolbarSpace.js
 packages/app-desktop/gui/TrashNotification/TrashNotification.js
 packages/app-desktop/gui/UpdateNotification/UpdateNotification.js

.gitignore

@@ -419,7 +419,6 @@ packages/app-desktop/gui/ToggleEditorsButton/ToggleEditorsButton.js
 packages/app-desktop/gui/ToggleEditorsButton/styles/index.js
 packages/app-desktop/gui/ToolbarBase.js
 packages/app-desktop/gui/ToolbarButton/ToolbarButton.js
-packages/app-desktop/gui/ToolbarButton/styles/index.js
 packages/app-desktop/gui/ToolbarSpace.js
 packages/app-desktop/gui/TrashNotification/TrashNotification.js
 packages/app-desktop/gui/UpdateNotification/UpdateNotification.js

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

@@ -5,30 +5,6 @@ import { ChangeEvent, useCallback, useRef } from 'react';
 import NoteToolbar from '../../NoteToolbar/NoteToolbar';
 import { buildStyle } from '@joplin/lib/theme';
 import time from '@joplin/lib/time';
-import styled from 'styled-components';
-
-const StyledRoot = styled.div`
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	padding-left: ${props => props.theme.editorPaddingLeft}px;
-
-	@media (max-width: 800px) {
-		flex-direction: column;
-		align-items: flex-start;
-	}
-`;
-
-const InfoGroup = styled.div`
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	@media (max-width: 800px) {
-		border-top: 1px solid ${props => props.theme.dividerColor};
-		width: 100%;
-	}
-`;
 
 interface Props {
 	themeId: number;
@@ -130,7 +106,7 @@ export default function NoteTitleBar(props: Props) {
 	}
 
 	return (
-		<StyledRoot>
+		<div className='note-title-wrapper'>
 			<input
 				className="title-input"
 				type="text"
@@ -144,10 +120,10 @@ export default function NoteTitleBar(props: Props) {
 				onBlur={onTitleBlur}
 				value={props.noteTitle}
 			/>
-			<InfoGroup>
+			<div className='note-title-info-group'>
 				{renderTitleBarDate()}
 				{renderNoteToolbar()}
-			</InfoGroup>
+			</div>
-		</StyledRoot>
+		</div>
 	);
 }

packages/app-desktop/gui/NoteEditor/style.scss

@@ -1,3 +1,5 @@
 
 @use "./styles/warning-banner.scss";
 @use "./styles/warning-banner-link.scss";
+@use "./styles/note-title-info-group.scss";
+@use "./styles/note-title-wrapper.scss";

packages/app-desktop/gui/NoteEditor/styles/note-title-info-group.scss

@@ -0,0 +1,11 @@
+
+.note-title-info-group {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	@media (max-width: 800px) {
+		border-top: 1px solid var(--joplin-divider-color);
+		width: 100%;
+	}
+}

packages/app-desktop/gui/NoteEditor/styles/note-title-wrapper.scss

@@ -0,0 +1,12 @@
+
+.note-title-wrapper {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding-left: var(--joplin-editor-padding-left);
+
+	@media (max-width: 800px) {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { ToolbarButtonInfo } from '@joplin/lib/services/commands/ToolbarButtonUtils';
-import { StyledIconSpan, StyledIconI } from './styles';
 
 interface Props {
 	readonly themeId: number;
@@ -36,8 +35,12 @@ export default function ToolbarButton(props: Props) {
 	let icon = null;
 	const iconName = getProp(props, 'iconName');
 	if (iconName) {
-		const IconClass = isFontAwesomeIcon(iconName) ? StyledIconI : StyledIconSpan;
+		const iconProps: React.HTMLProps<HTMLDivElement> = {
-		icon = <IconClass className={iconName} aria-label='' hasTitle={!!title} role='img'/>;
+			'aria-label': '',
+			role: 'img',
+			className: `toolbar-icon ${title ? '-has-title' : ''} ${iconName}`,
+		};
+		icon = isFontAwesomeIcon(iconName) ? <i {...iconProps} /> : <span {...iconProps} />;
 	}
 
 	// Keep this for legacy compatibility but for consistency we should use "disabled" prop

packages/app-desktop/gui/ToolbarButton/styles/index.ts

@@ -1,19 +0,0 @@
-import { ThemeStyle } from '@joplin/lib/theme';
-
-const styled = require('styled-components').default;
-const { css } = require('styled-components');
-
-interface IconProps {
-	readonly theme: ThemeStyle;
-	readonly hasTitle: boolean;
-}
-
-const iconStyle = css<IconProps>`
-	font-size: ${(props: IconProps) => props.theme.toolbarIconSize}px;
-	color: ${(props: IconProps) => props.theme.color3};
-	margin-right: ${(props: IconProps) => props.hasTitle ? 5 : 0}px;
-	pointer-events: none; /* Need this to get button tooltip to work */
-`;
-
-export const StyledIconI = styled.i`${iconStyle}`;
-export const StyledIconSpan = styled.span`${iconStyle}`;

packages/app-desktop/gui/styles/dialog-anchor-node.scss

@@ -0,0 +1,4 @@
+
+.dialog-anchor-node {
+	display: none;
+}

packages/app-desktop/gui/styles/index.scss

@@ -5,4 +5,7 @@
 @use './flat-button.scss';
 @use './help-text.scss';
 @use './toolbar-button.scss';
+@use './toolbar-icon.scss';
 @use './editor-toolbar.scss';
+@use './user-webview-dialog-container.scss';
+@use './dialog-anchor-node.scss';

packages/app-desktop/gui/styles/toolbar-icon.scss

@@ -0,0 +1,11 @@
+
+.toolbar-icon {
+	font-size: var(--joplin-toolbar-icon-size);
+	color: var(--joplin-color3);
+	margin-right: 0px;
+	pointer-events: none; /* Need this to get button tooltip to work */
+
+	&.-has-title {
+		margin-right: 5px;
+	}
+}

packages/app-desktop/gui/styles/user-webview-dialog-container.scss

@@ -0,0 +1,11 @@
+
+.user-webview-dialog-container {
+	display: flex;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+	box-sizing: border-box;
+}

packages/app-desktop/services/plugins/UserWebview.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef, useImperativeHandle, forwardRef, useEffect } from 'react';
+import { useRef, useImperativeHandle, forwardRef, useEffect, useMemo } from 'react';
 import useViewIsReady from './hooks/useViewIsReady';
 import useThemeCss from './hooks/useThemeCss';
 import useContentSize from './hooks/useContentSize';
@@ -8,14 +8,10 @@ import useHtmlLoader from './hooks/useHtmlLoader';
 import useWebviewToPluginMessages from './hooks/useWebviewToPluginMessages';
 import useScriptLoader from './hooks/useScriptLoader';
 import Logger from '@joplin/utils/Logger';
-import styled from 'styled-components';
 import { focus } from '@joplin/lib/utils/focusHandler';
 
 const logger = Logger.create('UserWebview');
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-type StyleProps = any;
-
 export interface Props {
 	html: string;
 	scripts: string[];
@@ -36,15 +32,6 @@ export interface Props {
 	onReady?: Function;
 }
 
-const StyledFrame = styled.iframe<{ fitToContent: boolean; borderBottom: boolean }>`
-	padding: 0;
-	margin: 0;
-	width: ${(props: StyleProps) => props.fitToContent ? `${props.width}px` : '100%'};
-	height: ${(props: StyleProps) => props.fitToContent ? `${props.height}px` : '100%'};
-	border: none;
-	border-bottom: ${(props: StyleProps) => props.borderBottom ? `1px solid ${props.theme.dividerColor}` : 'none'};
-`;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 function serializeForm(form: any) {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -153,15 +140,18 @@ function UserWebview(props: Props, ref: any) {
 		cssFilePath,
 	);
 
-	return <StyledFrame
+	const style = useMemo(() => ({
+		'--content-width': `${contentSize.width}px`,
+		'--content-height': `${contentSize.height}px`,
+	} as React.CSSProperties), [contentSize.width, contentSize.height]);
+
+	return <iframe
 		id={props.viewId}
-		width={contentSize.width}
+		style={style}
-		height={contentSize.height}
+		className={`plugin-user-webview ${props.fitToContent ? '-fit-to-content' : ''} ${props.borderBottom ? '-border-bottom' : ''}`}
-		fitToContent={props.fitToContent}
 		ref={viewRef}
 		src="services/plugins/UserWebviewIndex.html"
-		borderBottom={props.borderBottom}
+	></iframe>;
-	></StyledFrame>;
 }
 
 export default forwardRef(UserWebview);

packages/app-desktop/services/plugins/UserWebviewDialog.tsx

@@ -7,18 +7,12 @@ import UserWebview, { Props as UserWebviewProps } from './UserWebview';
 import UserWebviewDialogButtonBar from './UserWebviewDialogButtonBar';
 import { focus } from '@joplin/lib/utils/focusHandler';
 import Dialog from '../../gui/Dialog';
-const styled = require('styled-components').default;
 
 interface Props extends UserWebviewProps {
 	buttons: ButtonSpec[];
 	fitToContent: boolean;
 }
 
-const UserWebViewWrapper = styled.div`
-	display: flex;
-	flex: 1;
-`;
-
 function defaultButtons(): ButtonSpec[] {
 	return [
 		{
@@ -84,7 +78,7 @@ export default function UserWebviewDialog(props: Props) {
 
 	return (
 		<Dialog className={`user-webview-dialog ${props.fitToContent ? '-fit' : ''}`}>
-			<UserWebViewWrapper>
+			<div className='user-dialog-wrapper'>
 				<UserWebview
 					ref={webviewRef}
 					html={props.html}
@@ -98,7 +92,7 @@ export default function UserWebviewDialog(props: Props) {
 					onDismiss={onDismiss}
 					onReady={onReady}
 				/>
-			</UserWebViewWrapper>
+			</div>
 			<UserWebviewDialogButtonBar buttons={buttons}/>
 		</Dialog>
 	);

packages/app-desktop/services/plugins/UserWebviewDialogButtonBar.tsx

@@ -5,20 +5,10 @@ import { ButtonSpec } from '@joplin/lib/services/plugins/api/types';
 const styled = require('styled-components').default;
 const { space } = require('styled-system');
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-type StyleProps = any;
-
 interface Props {
 	buttons: ButtonSpec[];
 }
 
-const StyledRoot = styled.div`
-	display: flex;
-	width: 100%;
-	box-sizing: border-box;
-	justify-content: flex-end;
-	padding-top: ${(props: StyleProps) => props.theme.mainPadding}px;
-`;
 
 const StyledButton = styled(Button)`${space}`;
 
@@ -48,8 +38,8 @@ export default function UserWebviewDialogButtonBar(props: Props) {
 	}
 
 	return (
-		<StyledRoot>
+		<div className='user-dialog-button-bar'>
 			{renderButtons()}
-		</StyledRoot>
+		</div>
 	);
 }

packages/app-desktop/services/plugins/styles/index.scss

@@ -0,0 +1,3 @@
+@use './plugin-user-webview.scss';
+@use './user-dialog-wrapper.scss';
+@use './user-dialog-button-bar.scss';

packages/app-desktop/services/plugins/styles/plugin-user-webview.scss

@@ -0,0 +1,17 @@
+
+.plugin-user-webview {
+	padding: 0;
+	margin: 0;
+	border: none;
+	width: 100%;
+	height: 100%;
+
+	&.-border-bottom {
+		border-bottom: 1px solid var(--joplin-divider-color);
+	}
+
+	&.-fit-to-content {
+		width: var(--content-width);
+		height: var(--content-height);
+	}
+}

packages/app-desktop/services/plugins/styles/user-dialog-button-bar.scss

@@ -0,0 +1,8 @@
+
+.user-dialog-button-bar {
+	display: flex;
+	width: 100%;
+	box-sizing: border-box;
+	justify-content: flex-end;
+	padding-top: var(--joplin-main-padding);
+}

packages/app-desktop/services/plugins/styles/user-dialog-wrapper.scss

@@ -0,0 +1,5 @@
+
+.user-dialog-wrapper {
+	display: flex;
+	flex: 1;
+}

packages/app-desktop/style.scss

@@ -11,6 +11,7 @@
 @use 'gui/UpdateNotification/style.scss' as update-notification;
 @use 'gui/TrashNotification/style.scss' as trash-notification;
 @use 'gui/Sidebar/style.scss' as sidebar-styles;
-@use 'gui/styles/index.scss';
+@use 'gui/NoteEditor/style.scss' as note-editor-styles;
-@use 'gui/NoteEditor/style.scss';
+@use 'services/plugins/styles/index.scss' as plugins-styles;
+@use 'gui/styles/index.scss' as gui-styles;
 @use 'main.scss' as main;