Partial plugin retheme

plugin/src/Assets.lua

@@ -9,11 +9,17 @@ local Assets = {
 		},
 	},
 	Slices = {
-		RoundBox = {
+		RoundBoxWithBorder = {
 			asset = "rbxassetid://2754309674",
 			offset = Vector2.new(0, 0),
-			size = Vector2.new(0, 0),
+			size = Vector2.new(32, 32),
-			center = Rect.new(16, 16, 17, 17),
+			center = Rect.new(15, 15, 16, 16),
+		},
+		RoundBox = {
+			asset = "rbxassetid://2773074100",
+			offset = Vector2.new(0, 0),
+			size = Vector2.new(32, 32),
+			center = Rect.new(15, 15, 16, 16),
 		},
 	},
 	StartSession = "",

plugin/src/Components/ConnectPanel.lua

@@ -5,6 +5,7 @@ local Roact = require(Rojo.Roact)
 
 local Config = require(Plugin.Config)
 local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.Theme)
 
 local FitList = require(Plugin.Components.FitList)
 local FitText = require(Plugin.Components.FitText)
@@ -65,7 +66,13 @@ function ConnectPanel:render()
 			HorizontalAlignment = Enum.HorizontalAlignment.Center,
 		},
 	}, {
-		Head = e("Frame", {
+		Head = e("ImageLabel", {
+			Image = RoundBox.asset,
+			ImageRectOffset = RoundBox.offset,
+			ImageRectSize = RoundBox.size * Vector2.new(1, 0.5),
+			SliceCenter = RoundBox.center,
+			ScaleType = Enum.ScaleType.Slice,
+			ImageColor3 = Theme.SecondaryColor,
 			LayoutOrder = 1,
 			Size = UDim2.new(1, 0, 0, 36),
 			BackgroundTransparency = 1,
@@ -102,20 +109,14 @@ function ConnectPanel:render()
 			}),
 		}),
 
-		Border = e("Frame", {
+		Inputs = e(FitList, {
-			BorderSizePixel = 0,
-			BackgroundColor3 = Color3.new(0.7, 0.7, 0.7),
-			Size = UDim2.new(1, -4, 0, 2),
-			LayoutOrder = 2,
-		}),
-
-		Body = e(FitList, {
 			containerProps = {
 				BackgroundTransparency = 1,
-				LayoutOrder = 3,
+				LayoutOrder = 2,
 			},
 			layoutProps = {
-				Padding = UDim.new(0, 8),
+				FillDirection = Enum.FillDirection.Horizontal,
+				Padding = UDim.new(0, 12),
 			},
 			paddingProps = {
 				PaddingTop = UDim.new(0, 8),
@@ -130,12 +131,11 @@ function ConnectPanel:render()
 					BackgroundTransparency = 1,
 				},
 				layoutProps = {
-					FillDirection = Enum.FillDirection.Horizontal,
+					Padding = UDim.new(0, 4),
-					Padding = UDim.new(0, 8),
 				},
 			}, {
 				Label = e(FitText, {
-					MinSize = Vector2.new(0, 28),
+					MinSize = Vector2.new(0, 20),
 					Kind = "TextLabel",
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
@@ -156,7 +156,7 @@ function ConnectPanel:render()
 
 				Input = e(FormTextInput, {
 					layoutOrder = 2,
-					size = UDim2.new(0, 300, 0, 28),
+					size = UDim2.new(0, 160, 0, 28),
 					value = self.state.address,
 					onValueChange = function(newValue)
 						self:setState({
@@ -172,12 +172,11 @@ function ConnectPanel:render()
 					BackgroundTransparency = 1,
 				},
 				layoutProps = {
-					FillDirection = Enum.FillDirection.Horizontal,
+					Padding = UDim.new(0, 4),
-					Padding = UDim.new(0, 8),
 				},
 			}, {
 				Label = e(FitText, {
-					MinSize = Vector2.new(0, 28),
+					MinSize = Vector2.new(0, 20),
 					Kind = "TextLabel",
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
@@ -198,7 +197,7 @@ function ConnectPanel:render()
 
 				Input = e(FormTextInput, {
 					layoutOrder = 2,
-					size = UDim2.new(0, 300, 0, 28),
+					size = UDim2.new(0, 70, 0, 28),
 					value = self.state.port,
 					onValueChange = function(newValue)
 						self:setState({
@@ -207,36 +206,47 @@ function ConnectPanel:render()
 					end,
 				}),
 			}),
+		}),
 
-			Buttons = e(FitList, {
+		Buttons = e(FitList, {
-				containerProps = {
+			fitAxes = "Y",
-					LayoutOrder = 3,
+			containerProps = {
-					BackgroundTransparency = 1,
+				BackgroundTransparency = 1,
-				},
+				LayoutOrder = 3,
-				layoutProps = {
+				Size = UDim2.new(1, 0, 0, 0),
-					FillDirection = Enum.FillDirection.Horizontal,
+			},
-					Padding = UDim.new(0, 8),
+			layoutProps = {
-				},
+				FillDirection = Enum.FillDirection.Horizontal,
-			}, {
+				HorizontalAlignment = Enum.HorizontalAlignment.Right,
-				e(FormButton, {
+				Padding = UDim.new(0, 8),
-					text = "Start",
+			},
-					onClick = function()
+			paddingProps = {
-						if startSession ~= nil then
+				PaddingTop = UDim.new(0, 0),
-							startSession(self.state.address, self.state.port)
+				PaddingBottom = UDim.new(0, 8),
-						end
+				PaddingLeft = UDim.new(0, 8),
-					end,
+				PaddingRight = UDim.new(0, 8),
-				}),
+			},
+		}, {
+			e(FormButton, {
+				layoutOrder = 1,
+				text = "Cancel",
+				onClick = function()
+					if cancel ~= nil then
+						cancel()
+					end
+				end,
+				secondary = true,
+			}),
 
-				e(FormButton, {
+			e(FormButton, {
-					text = "Cancel",
+				layoutOrder = 2,
-					onClick = function()
+				text = "Connect",
-						if cancel ~= nil then
+				onClick = function()
-							cancel()
+					if startSession ~= nil then
-						end
+						startSession(self.state.address, self.state.port)
-					end,
+					end
-					secondary = true,
+				end,
-				}),
+			}),
-			})
 		})
 	})
 end

plugin/src/Components/FitList.lua

@@ -12,6 +12,7 @@ end
 
 function FitList:render()
 	local containerKind = self.props.containerKind or "Frame"
+	local fitAxes = self.props.fitAxes or "XY"
 	local containerProps = self.props.containerProps
 	local layoutProps = self.props.layoutProps
 	local paddingProps = self.props.paddingProps
@@ -25,15 +26,31 @@ function FitList:render()
 		["$Layout"] = e("UIListLayout", Dictionary.merge({
 			SortOrder = Enum.SortOrder.LayoutOrder,
 			[Roact.Change.AbsoluteContentSize] = function(instance)
-				local size = instance.AbsoluteContentSize
+				local contentSize = instance.AbsoluteContentSize
 
 				if paddingProps ~= nil then
-					size = size + Vector2.new(
+					contentSize = contentSize + Vector2.new(
 						paddingProps.PaddingLeft.Offset + paddingProps.PaddingRight.Offset,
 						paddingProps.PaddingTop.Offset + paddingProps.PaddingBottom.Offset)
 				end
 
-				self.setSize(UDim2.new(0, size.X, 0, size.Y))
+				local combinedSize
+
+				if fitAxes == "X" then
+					combinedSize = UDim2.new(0, contentSize.X, containerProps.Size.Y.Scale, containerProps.Size.Y.Offset)
+				elseif fitAxes == "Y" then
+					combinedSize = UDim2.new(containerProps.Size.X.Scale, containerProps.Size.X.Offset, 0, contentSize.Y)
+				elseif fitAxes == "XY" then
+					combinedSize = UDim2.new(0, contentSize.X, 0, contentSize.Y)
+				else
+					error("Invalid fitAxes value")
+				end
+
+				if fitAxes ~= "XY" then
+					print("combinedSize", combinedSize)
+				end
+
+				self.setSize(combinedSize)
 			end,
 		}, layoutProps)),
 

plugin/src/Components/FormButton.lua

@@ -4,6 +4,7 @@ local Plugin = Rojo.Plugin
 local Roact = require(Rojo.Roact)
 
 local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.Theme)
 local FitList = require(Plugin.Components.FitList)
 local FitText = require(Plugin.Components.FitText)
 
@@ -16,7 +17,16 @@ local function FormButton(props)
 	local layoutOrder = props.layoutOrder
 	local onClick = props.onClick
 
-	local imageColor = props.secondary and Color3.new(0.95, 0.95, 0.95) or nil
+	local textColor
+	local backgroundColor
+
+	if props.secondary then
+		textColor = Theme.AccentColor
+		backgroundColor = Theme.SecondaryColor
+	else
+		textColor = Theme.SecondaryColor
+		backgroundColor = Theme.AccentColor
+	end
 
 	return e(FitList, {
 		containerKind = "ImageButton",
@@ -28,7 +38,7 @@ local function FormButton(props)
 			ImageRectSize = RoundBox.size,
 			SliceCenter = RoundBox.center,
 			ScaleType = Enum.ScaleType.Slice,
-			ImageColor3 = imageColor,
+			ImageColor3 = backgroundColor,
 
 			[Roact.Event.Activated] = function()
 				if onClick ~= nil then
@@ -41,9 +51,9 @@ local function FormButton(props)
 			Kind = "TextLabel",
 			Text = text,
 			TextSize = 22,
-			Font = Enum.Font.SourceSansBold,
+			TextColor3 = textColor,
+			Font = Theme.ButtonFont,
 			Padding = Vector2.new(14, 6),
-			TextColor3 = Color3.new(0.05, 0.05, 0.05),
 			BackgroundTransparency = 1,
 		}),
 	})

plugin/src/Components/FormTextInput.lua

@@ -4,6 +4,7 @@ local Plugin = Rojo.Plugin
 local Roact = require(Rojo.Roact)
 
 local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.Theme)
 
 local e = Roact.createElement
 
@@ -22,7 +23,7 @@ local function FormTextInput(props)
 		ImageRectSize = RoundBox.size,
 		ScaleType = Enum.ScaleType.Slice,
 		SliceCenter = RoundBox.center,
-		ImageColor3 = Color3.new(0.95, 0.95, 0.95),
+		ImageColor3 = Theme.SecondaryColor,
 		Size = size,
 		BackgroundTransparency = 1,
 	}, {
@@ -36,7 +37,7 @@ local function FormTextInput(props)
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextSize = 20,
 			Text = value,
-			TextColor3 = Color3.new(0.05, 0.05, 0.05),
+			TextColor3 = Theme.PrimaryColor,
 
 			[Roact.Change.Text] = function(rbx)
 				onValueChange(rbx.Text)

plugin/src/Theme.lua

@@ -0,0 +1,16 @@
+local Theme = {
+	ButtonFont = Enum.Font.SourceSansSemibold,
+	TitleFont = Enum.Font.SourceSansSemibold,
+	MainFont = Enum.Font.SourceSans,
+	AccentColor = Color3.fromRGB(136, 0, 27),
+	PrimaryColor = Color3.fromRGB(20, 20, 20),
+	SecondaryColor = Color3.fromRGB(240, 240, 240),
+}
+
+setmetatable(Theme, {
+	__index = function(_, key)
+		error(("%s is not a valid member of Theme"):format(key), 2)
+	end
+})
+
+return Theme