UI visual tweaks

plugin/src/Components/FormTextInput.lua

@@ -10,11 +10,15 @@ local e = Roact.createElement
 
 local RoundBox = Assets.Slices.RoundBox
 
+local TEXT_SIZE = 22
+local PADDING = 8
+
 local function FormTextInput(props)
 	local value = props.value
+	local placeholderValue = props.placeholderValue
 	local onValueChange = props.onValueChange
 	local layoutOrder = props.layoutOrder
-	local size = props.size
+	local width = props.width
 
 	return e("ImageLabel", {
 		LayoutOrder = layoutOrder,
@@ -24,20 +28,22 @@ local function FormTextInput(props)
 		ScaleType = Enum.ScaleType.Slice,
 		SliceCenter = RoundBox.center,
 		ImageColor3 = Theme.SecondaryColor,
-		Size = size,
+		Size = UDim2.new(width.Scale, width.Offset, 0, TEXT_SIZE + PADDING * 2),
 		BackgroundTransparency = 1,
 	}, {
 		InputInner = e("TextBox", {
 			BackgroundTransparency = 1,
-			Size = UDim2.new(1, -12, 1, -12),
+			Size = UDim2.new(1, -PADDING * 2, 1, -PADDING * 2),
 			Position = UDim2.new(0.5, 0, 0.5, 0),
 			AnchorPoint = Vector2.new(0.5, 0.5),
 			Font = Theme.InputFont,
 			ClearTextOnFocus = false,
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextSize = 18,
+			TextXAlignment = Enum.TextXAlignment.Center,
+			TextSize = TEXT_SIZE,
 			Text = value,
-			TextColor3 = Theme.PrimaryColor,
+			PlaceholderText = placeholderValue,
+			PlaceholderColor3 = Theme.AccentLightColor,
+			TextColor3 = Theme.AccentColor,
 
 			[Roact.Change.Text] = function(rbx)
 				onValueChange(rbx.Text)