UI visual tweaks

plugin/src/Components/ConnectPanel.lua

@@ -33,13 +33,13 @@ function ConnectPanel:init()
 			self.footerVersionSize,
 		},
 		function(container, other)
-			return UDim2.new(0, container.X - other.X - 16, 0, 18)
+			return UDim2.new(0, container.X - other.X - 16, 0, 32)
 		end
 	)
 
 	self:setState({
-		address = Config.defaultHost,
+		address = "",
-		port = Config.defaultPort,
+		port = "",
 	})
 end
 
@@ -73,10 +73,10 @@ function ConnectPanel:render()
 				Padding = UDim.new(0, 8),
 			},
 			paddingProps = {
-				PaddingTop = UDim.new(0, 8),
+				PaddingTop = UDim.new(0, 20),
-				PaddingBottom = UDim.new(0, 8),
+				PaddingBottom = UDim.new(0, 10),
-				PaddingLeft = UDim.new(0, 8),
+				PaddingLeft = UDim.new(0, 24),
-				PaddingRight = UDim.new(0, 8),
+				PaddingRight = UDim.new(0, 24),
 			},
 		}, {
 			Address = e(FitList, {
@@ -89,7 +89,6 @@ function ConnectPanel:render()
 				},
 			}, {
 				Label = e(FitText, {
-					MinSize = Vector2.new(0, 20),
 					Kind = "TextLabel",
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
@@ -102,8 +101,9 @@ function ConnectPanel:render()
 
 				Input = e(FormTextInput, {
 					layoutOrder = 2,
-					size = UDim2.new(0, 200, 0, 28),
+					width = UDim.new(0, 220),
 					value = self.state.address,
+					placeholderValue = Config.defaultHost,
 					onValueChange = function(newValue)
 						self:setState({
 							address = newValue,
@@ -122,7 +122,6 @@ function ConnectPanel:render()
 				},
 			}, {
 				Label = e(FitText, {
-					MinSize = Vector2.new(0, 20),
 					Kind = "TextLabel",
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
@@ -135,8 +134,9 @@ function ConnectPanel:render()
 
 				Input = e(FormTextInput, {
 					layoutOrder = 2,
-					size = UDim2.new(0, 65, 0, 28),
+					width = UDim.new(0, 80),
 					value = self.state.port,
+					placeholderValue = Config.defaultPort,
 					onValueChange = function(newValue)
 						self:setState({
 							port = newValue,
@@ -160,9 +160,9 @@ function ConnectPanel:render()
 			},
 			paddingProps = {
 				PaddingTop = UDim.new(0, 0),
-				PaddingBottom = UDim.new(0, 8),
+				PaddingBottom = UDim.new(0, 20),
-				PaddingLeft = UDim.new(0, 8),
+				PaddingLeft = UDim.new(0, 24),
-				PaddingRight = UDim.new(0, 8),
+				PaddingRight = UDim.new(0, 24),
 			},
 		}, {
 			e(FormButton, {
@@ -181,7 +181,17 @@ function ConnectPanel:render()
 				text = "Connect",
 				onClick = function()
 					if startSession ~= nil then
-						startSession(self.state.address, self.state.port)
+						local address = self.state.address
+						if address:len() == 0 then
+							address = Config.defaultHost
+						end
+
+						local port = self.state.port
+						if port:len() == 0 then
+							port = Config.defaultPort
+						end
+
+						startSession(address, port)
 					end
 				end,
 			}),
@@ -208,6 +218,7 @@ function ConnectPanel:render()
 			layoutProps = {
 				FillDirection = Enum.FillDirection.Horizontal,
 				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
 			},
 			paddingProps = {
 				PaddingTop = UDim.new(0, 4),
@@ -223,10 +234,10 @@ function ConnectPanel:render()
 			}, {
 				Logo = e("ImageLabel", {
 					Image = Assets.Images.Logo,
-					Size = UDim2.new(0, 60, 0, 40),
+					Size = UDim2.new(0, 80, 0, 40),
 					ScaleType = Enum.ScaleType.Fit,
 					BackgroundTransparency = 1,
-					Position = UDim2.new(0, 0, 1, 0),
+					Position = UDim2.new(0, 0, 1, -10),
 					AnchorPoint = Vector2.new(0, 1),
 				}),
 			}),

plugin/src/Components/FormButton.lua

@@ -53,7 +53,7 @@ local function FormButton(props)
 			TextSize = 18,
 			TextColor3 = textColor,
 			Font = Theme.ButtonFont,
-			Padding = Vector2.new(16, 6),
+			Padding = Vector2.new(16, 8),
 			BackgroundTransparency = 1,
 		}),
 	})

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,
+			TextXAlignment = Enum.TextXAlignment.Center,
-			TextSize = 18,
+			TextSize = TEXT_SIZE,
 			Text = value,
-			TextColor3 = Theme.PrimaryColor,
+			PlaceholderText = placeholderValue,
+			PlaceholderColor3 = Theme.AccentLightColor,
+			TextColor3 = Theme.AccentColor,
 
 			[Roact.Change.Text] = function(rbx)
 				onValueChange(rbx.Text)

plugin/src/Theme.lua

@@ -1,10 +1,11 @@
 local Theme = {
 	ButtonFont = Enum.Font.GothamSemibold,
-	InputFont = Enum.Font.Gotham,
+	InputFont = Enum.Font.Code,
 	TitleFont = Enum.Font.GothamBold,
 	MainFont = Enum.Font.Gotham,
 
 	AccentColor = Color3.fromRGB(136, 0, 27),
+	AccentLightColor = Color3.fromRGB(210, 145, 157),
 	PrimaryColor = Color3.fromRGB(20, 20, 20),
 	SecondaryColor = Color3.fromRGB(235, 235, 235),
 	LightTextColor = Color3.fromRGB(140, 140, 140),