Minor UI design style revamp

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -37,8 +37,8 @@
 	const dispatch = createEventDispatcher<{ color: Color }>();
 
 	export let color: Color;
+	// export let allowTransparency = false; // TODO: Implement
 	export let allowNone = false;
-	// export let allowTransparency = false; // TODO: Implement this
 	export let direction: MenuDirection = "Bottom";
 	// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
 	export let open: boolean;

frontend/src/components/floating-menus/MenuList.svelte

@@ -237,11 +237,11 @@
 					<TextLabel class="entry-label" styles={{ "font-family": `${!entry.font ? "inherit" : entry.value}` }}>{entry.label}</TextLabel>
 
 					{#if entry.shortcut?.keys.length}
-						<UserInputLabel keysWithLabelsGroups={[entry.shortcut.keys]} requiresLock={entry.shortcutRequiresLock} />
+						<UserInputLabel keysWithLabelsGroups={[entry.shortcut.keys]} requiresLock={entry.shortcutRequiresLock} textOnly={true} />
 					{/if}
 
 					{#if entry.children?.length}
-						<div class="submenu-arrow" />
+						<IconLabel class="submenu-arrow" icon="DropdownArrow" />
 					{:else}
 						<div class="no-submenu-arrow" />
 					{/if}
@@ -261,7 +261,7 @@
 
 <style lang="scss" global>
 	.menu-list {
-		.floating-menu-container .floating-menu-content {
+		.floating-menu-container .floating-menu-content.floating-menu-content {
 			padding: 4px 0;
 
 			.separator div {
@@ -278,8 +278,10 @@
 				white-space: nowrap;
 				position: relative;
 				flex: 0 0 auto;
+				border-radius: 2px;
+				margin: 0 4px;
 
-				& > * {
+				> * {
 					flex: 0 0 auto;
 				}
 
@@ -289,42 +291,34 @@
 
 				.no-icon {
 					width: 16px;
+					height: 16px;
 				}
 
 				.entry-label {
 					flex: 1 1 100%;
-					margin-left: 8px;
+					margin: 0 4px;
 				}
 
 				.entry-icon,
 				.no-icon {
-					margin: 0 4px;
-
-					& + .entry-label {
-						margin-left: 0;
-					}
+					margin-left: 4px;
 				}
 
 				.user-input-label {
-					margin-left: 16px;
+					margin-left: 12px;
 				}
 
 				.submenu-arrow {
-					width: 0;
-					height: 0;
-					border-style: solid;
-					border-width: 3px 0 3px 6px;
-					border-color: transparent transparent transparent var(--color-e-nearwhite);
+					transform: rotate(270deg);
 				}
 
 				.no-submenu-arrow {
-					width: 6px;
+					width: 12px;
+					height: 12px;
 				}
 
-				.submenu-arrow,
-				.no-submenu-arrow {
-					margin-left: 6px;
-					margin-right: 4px;
+				> .menu-list {
+					margin-right: -4px;
 				}
 
 				&:hover,