Dialog redesign and content revamp (#1409)

* Revamp the content and design of dialogs

* Add the Licenses dialog

frontend/src/components/widgets/WidgetRow.svelte

@@ -69,13 +69,6 @@
 		editor.instance.updateLayout(layoutTarget, widgets[index].widgetId, value);
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	// function exclude<T extends Record<string, any>>(props: T, additional?: (keyof T)[]): Pick<T, Exclude<keyof T, "kind" | (typeof additional extends Array<infer K> ? K : never)>> {
-	// 	const exclusions = ["kind", ...(additional || [])];
-
-	// 	return Object.fromEntries(Object.entries(props).filter((entry) => !exclusions.includes(entry[0]))) as any;
-	// }
-
 	// TODO: This seems to work, but verify the correctness and terseness of this, it's adapted from https://stackoverflow.com/a/67434028/775283
 	function exclude<T extends object>(props: T, additional?: (keyof T)[]): Omit<T, typeof additional extends Array<infer K> ? K : never> {
 		const exclusions = ["kind", ...(additional || [])];

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -7,6 +7,7 @@
 	export let label: string;
 	export let icon: IconName | undefined = undefined;
 	export let emphasized = false;
+	export let noBackground = false;
 	export let minWidth = 0;
 	export let disabled = false;
 	export let tooltip: string | undefined = undefined;
@@ -21,6 +22,7 @@
 	class="text-button"
 	class:emphasized
 	class:disabled
+	class:no-background={noBackground}
 	class:sharp-right-corners={sharpRightCorners}
 	style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
 	title={tooltip}
@@ -76,10 +78,26 @@
 			}
 		}
 
-		&.text-button + .text-button {
+		&.no-background {
+			&:not(:hover) {
+				background: none;
+			}
+
+			.icon-label {
+				margin-right: 4px;
+			}
+		}
+
+		.widget-row > & + .text-button,
+		.layout-row > & + .text-button {
 			margin-left: 8px;
 		}
 
+		.widget-column > & + .text-button,
+		.layout-column > & + .text-button {
+			margin-top: 8px;
+		}
+
 		.icon-label {
 			position: relative;
 			left: -4px;