Minor UI design style revamp

frontend/src/components/widgets/inputs/ColorInput.svelte

@@ -13,8 +13,10 @@
 	let open = false;
 
 	export let value: Color;
-	// export let noTransparency = false; // TODO: Rename to allowTransparency, also implement allowNone
-	// export let disabled = false; // TODO: Design and implement
+	// TODO: Implement
+	// export let allowTransparency = false;
+	// export let allowNone = false;
+	// export let disabled = false;
 	export let tooltip: string | undefined = undefined;
 	export let sharpRightCorners = false;
 

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -114,6 +114,7 @@
 
 			.dropdown-icon {
 				margin: 4px;
+				margin-left: 8px;
 				flex: 0 0 auto;
 
 				& + .dropdown-label {
@@ -122,7 +123,7 @@
 			}
 
 			.dropdown-arrow {
-				margin: 6px 2px;
+				margin: 4px;
 				flex: 0 0 auto;
 			}
 
@@ -139,10 +140,6 @@
 				}
 			}
 
-			&.open {
-				border-radius: 2px 2px 0 0;
-			}
-
 			&.disabled {
 				background: var(--color-2-mildblack);
 

frontend/src/components/widgets/inputs/FieldInput.svelte

@@ -117,7 +117,6 @@
 		position: relative;
 		border-radius: 2px;
 		background: var(--color-1-nearblack);
-		overflow: hidden;
 		flex-direction: row-reverse;
 
 		label {

frontend/src/components/widgets/inputs/LayerReferenceInput.svelte

@@ -43,10 +43,6 @@
 			dispatch("value", layerPath);
 		}
 	}
-
-	function getLayerTypeData(layerType: LayerType): LayerTypeData {
-		return layerTypeData(layerType) || { name: "Error", icon: "Info" };
-	}
 </script>
 
 <LayoutRow
@@ -62,8 +58,8 @@
 		<TextLabel italic={true}>{droppable ? "Drop" : "Drag"} Layer Here</TextLabel>
 	{:else}
 		{#if layerName !== undefined && layerType}
-			<IconLabel icon={getLayerTypeData(layerType).icon} class="layer-icon" />
-			<TextLabel italic={layerName === ""} class="layer-name">{layerName || getLayerTypeData(layerType).name}</TextLabel>
+			<IconLabel icon={layerTypeData(layerType).icon} class="layer-icon" />
+			<TextLabel italic={layerName === ""} class="layer-name">{layerName || `Untitled ${layerTypeData(layerType).name}`}</TextLabel>
 		{:else}
 			<TextLabel bold={true} italic={true} class="missing">Layer Missing</TextLabel>
 		{/if}
@@ -81,7 +77,7 @@
 
 		.drop-zone {
 			pointer-events: none;
-			border: 1px dashed var(--color-5-dullgray);
+			border: 1px dashed var(--color-4-dimgray);
 			border-radius: 1px;
 			position: absolute;
 			top: 2px;

frontend/src/components/widgets/inputs/MenuBarInput.svelte

@@ -128,22 +128,11 @@
 				background: none;
 				border: 0;
 				margin: 0;
-
-				svg {
-					fill: var(--color-e-nearwhite);
-				}
+				border-radius: 2px;
 
 				&:hover,
 				&.open {
-					background: var(--color-6-lowergray);
-
-					svg {
-						fill: var(--color-f-white);
-					}
-
-					span {
-						color: var(--color-f-white);
-					}
+					background: var(--color-5-dullgray);
 				}
 			}
 		}

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -317,18 +317,11 @@
 				margin: 0;
 				padding: 9px 0;
 				border: none;
+				border-radius: 2px;
 				background: rgba(var(--color-1-nearblack-rgb), 0.75);
 
 				&:hover {
-					background: var(--color-6-lowergray);
-
-					&.right::before {
-						border-color: transparent transparent transparent var(--color-f-white);
-					}
-
-					&.left::after {
-						border-color: transparent var(--color-f-white) transparent transparent;
-					}
+					background: var(--color-5-dullgray);
 				}
 
 				&.right {