Switch assets to use custom rounded rectangle

plugin/src/Assets.lua

@@ -9,22 +9,10 @@ local Assets = {
 		},
 	},
 	Slices = {
-		GrayBox = {
-			asset = sheetAsset,
-			offset = Vector2.new(147, 433),
-			size = Vector2.new(38, 36),
-			center = Rect.new(8, 8, 9, 9),
-		},
-		GrayButton02 = {
-			asset = sheetAsset,
-			offset = Vector2.new(0, 98),
-			size = Vector2.new(190, 45),
-			center = Rect.new(16, 16, 17, 17),
-		},
-		GrayButton07 = {
-			asset = sheetAsset,
-			offset = Vector2.new(195, 0),
-			size = Vector2.new(49, 49),
+		RoundBox = {
+			asset = "rbxassetid://2754309674",
+			offset = Vector2.new(0, 0),
+			size = Vector2.new(0, 0),
 			center = Rect.new(16, 16, 17, 17),
 		},
 	},

plugin/src/Components/ConnectPanel.lua

@@ -12,7 +12,7 @@ local FormButton = require(Plugin.Components.FormButton)
 local FormTextInput = require(Plugin.Components.FormTextInput)
 
 local WhiteCross = Assets.Sprites.WhiteCross
-local GrayBox = Assets.Slices.GrayBox
+local RoundBox = Assets.Slices.RoundBox
 
 local e = Roact.createElement
 
@@ -52,11 +52,11 @@ function ConnectPanel:render()
 	return e(FitList, {
 		containerKind = "ImageLabel",
 		containerProps = {
-			Image = GrayBox.asset,
-			ImageRectOffset = GrayBox.offset,
-			ImageRectSize = GrayBox.size,
+			Image = RoundBox.asset,
+			ImageRectOffset = RoundBox.offset,
+			ImageRectSize = RoundBox.size,
+			SliceCenter = RoundBox.center,
 			ScaleType = Enum.ScaleType.Slice,
-			SliceCenter = GrayBox.center,
 			BackgroundTransparency = 1,
 			Position = UDim2.new(0.5, 0, 0.5, 0),
 			AnchorPoint = Vector2.new(0.5, 0.5),
@@ -135,7 +135,7 @@ function ConnectPanel:render()
 				},
 			}, {
 				Label = e(FitText, {
-					MinSize = Vector2.new(0, 24),
+					MinSize = Vector2.new(0, 28),
 					Kind = "TextLabel",
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
@@ -156,7 +156,7 @@ function ConnectPanel:render()
 
 				Input = e(FormTextInput, {
 					layoutOrder = 2,
-					size = UDim2.new(0, 300, 0, 24),
+					size = UDim2.new(0, 300, 0, 28),
 					value = self.state.address,
 					onValueChange = function(newValue)
 						self:setState({
@@ -177,7 +177,7 @@ function ConnectPanel:render()
 				},
 			}, {
 				Label = e(FitText, {
-					MinSize = Vector2.new(0, 24),
+					MinSize = Vector2.new(0, 28),
 					Kind = "TextLabel",
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
@@ -198,7 +198,7 @@ function ConnectPanel:render()
 
 				Input = e(FormTextInput, {
 					layoutOrder = 2,
-					size = UDim2.new(0, 300, 0, 24),
+					size = UDim2.new(0, 300, 0, 28),
 					value = self.state.port,
 					onValueChange = function(newValue)
 						self:setState({
@@ -234,6 +234,7 @@ function ConnectPanel:render()
 							cancel()
 						end
 					end,
+					secondary = true,
 				}),
 			})
 		})

plugin/src/Components/ConnectionActivePanel.lua

@@ -7,7 +7,7 @@ local FitText = require(script.Parent.FitText)
 
 local e = Roact.createElement
 
-local GrayBox = Assets.Slices.GrayBox
+local RoundBox = Assets.Slices.RoundBox
 
 local ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel")
 
@@ -15,10 +15,10 @@ function ConnectionActivePanel:render()
 	return e(FitList, {
 		containerKind = "ImageButton",
 		containerProps = {
-			Image = GrayBox.asset,
-			ImageRectOffset = GrayBox.offset,
-			ImageRectSize = GrayBox.size,
-			SliceCenter = GrayBox.center,
+			Image = RoundBox.asset,
+			ImageRectOffset = RoundBox.offset,
+			ImageRectSize = RoundBox.size,
+			SliceCenter = RoundBox.center,
 			ScaleType = Enum.ScaleType.Slice,
 			BackgroundTransparency = 1,
 			Position = UDim2.new(0.5, 0, 0, 0),

plugin/src/Components/FormButton.lua

@@ -9,23 +9,26 @@ local FitText = require(Plugin.Components.FitText)
 
 local e = Roact.createElement
 
-local GrayButton07 = Assets.Slices.GrayButton07
+local RoundBox = Assets.Slices.RoundBox
 
 local function FormButton(props)
 	local text = props.text
 	local layoutOrder = props.layoutOrder
 	local onClick = props.onClick
 
+	local imageColor = props.secondary and Color3.new(0.95, 0.95, 0.95) or nil
+
 	return e(FitList, {
 		containerKind = "ImageButton",
 		containerProps = {
 			LayoutOrder = layoutOrder,
 			BackgroundTransparency = 1,
-			Image = GrayButton07.asset,
-			ImageRectOffset = GrayButton07.offset,
-			ImageRectSize = GrayButton07.size,
+			Image = RoundBox.asset,
+			ImageRectOffset = RoundBox.offset,
+			ImageRectSize = RoundBox.size,
+			SliceCenter = RoundBox.center,
 			ScaleType = Enum.ScaleType.Slice,
-			SliceCenter = GrayButton07.center,
+			ImageColor3 = imageColor,
 
 			[Roact.Event.Activated] = function()
 				if onClick ~= nil then

plugin/src/Components/FormTextInput.lua

@@ -7,7 +7,7 @@ local Assets = require(Plugin.Assets)
 
 local e = Roact.createElement
 
-local GrayBox = Assets.Slices.GrayBox
+local RoundBox = Assets.Slices.RoundBox
 
 local function FormTextInput(props)
 	local value = props.value
@@ -17,17 +17,18 @@ local function FormTextInput(props)
 
 	return e("ImageLabel", {
 		LayoutOrder = layoutOrder,
-		Image = GrayBox.asset,
-		ImageRectOffset = GrayBox.offset,
-		ImageRectSize = GrayBox.size,
+		Image = RoundBox.asset,
+		ImageRectOffset = RoundBox.offset,
+		ImageRectSize = RoundBox.size,
 		ScaleType = Enum.ScaleType.Slice,
-		SliceCenter = GrayBox.center,
+		SliceCenter = RoundBox.center,
+		ImageColor3 = Color3.new(0.95, 0.95, 0.95),
 		Size = size,
 		BackgroundTransparency = 1,
 	}, {
 		InputInner = e("TextBox", {
 			BackgroundTransparency = 1,
-			Size = UDim2.new(1, -8, 1, -8),
+			Size = UDim2.new(1, -12, 1, -12),
 			Position = UDim2.new(0.5, 0, 0.5, 0),
 			AnchorPoint = Vector2.new(0.5, 0.5),
 			Font = Enum.Font.SourceSans,