Categorize frontend widgets to match design system

client/web/src/components/widgets/floating-menus/MenuList.vue

@@ -124,7 +124,7 @@
 import { defineComponent, PropType } from "vue";
 import { keyboardLockApiSupported } from "@/utilities/fullscreen";
 import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/Separator.vue";
+import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/separators/Separator.vue";
 import Icon from "@/components/widgets/labels/Icon.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 

client/web/src/components/widgets/inputs/SwatchPair.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="working-colors">
+	<div class="swatch-pair">
 		<SwatchPairInput />
 		<div class="swap-and-reset">
 			<IconButton @click="swapColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
@@ -9,7 +9,7 @@
 </template>
 
 <style lang="scss">
-.working-colors {
+.swatch-pair {
 	.swap-and-reset {
 		font-size: 0;
 	}