From 578abfabb341620af18a458b095812e96cad0add Mon Sep 17 00:00:00 2001
From: Lucien Greathouse <me@lpghatguy.com>
Date: Mon, 21 Jan 2019 16:02:51 -0800
Subject: [PATCH] Partial plugin retheme

---
 assets/round-rect-8px-radius.png        | Bin 0 -> 251 bytes
 plugin/src/Assets.lua                   |  12 ++-
 plugin/src/Components/ConnectPanel.lua  | 104 +++++++++++++-----------
 plugin/src/Components/FitList.lua       |  23 +++++-
 plugin/src/Components/FormButton.lua    |  18 +++-
 plugin/src/Components/FormTextInput.lua |   5 +-
 plugin/src/Theme.lua                    |  16 ++++
 7 files changed, 119 insertions(+), 59 deletions(-)
 create mode 100644 assets/round-rect-8px-radius.png
 create mode 100644 plugin/src/Theme.lua

diff --git a/assets/round-rect-8px-radius.png b/assets/round-rect-8px-radius.png
new file mode 100644
index 0000000000000000000000000000000000000000..55d1ac410e5b0af42a273cc4777b7c30dccf12c2
GIT binary patch
literal 251
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=ffJL!K^<Ar*7pPT$CT$UuN$ewXD7
ziGweL+B7d&3E$KWR#A<;(a^&bx?}qkj!TPvXx3ah89z@|{NG`l^P3JPc5m&N^PywE
z(L-OCbrr{_<~lg^R|{=Cd?ekWpZ8h90q%8-jJD5Il9n^}CAx5H@ow1h*Xc?F`(a7l
z872=-7PxT7Nll1bD5|=EWlDok0F##k=Z|iN&-|S~r|TG0Y*EN+NS3(R<i%`}D=vJ_
x1#IH_t2v4bj@x$LNKBGmV3D(N8qe#W(p}6G-flX!=oip844$rjF6*2UngD`uWgGwi

literal 0
HcmV?d00001

diff --git a/plugin/src/Assets.lua b/plugin/src/Assets.lua
index ad0b4ee5..51f0934c 100644
--- a/plugin/src/Assets.lua
+++ b/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),
-			center = Rect.new(16, 16, 17, 17),
+			size = Vector2.new(32, 32),
+			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 = "",
diff --git a/plugin/src/Components/ConnectPanel.lua b/plugin/src/Components/ConnectPanel.lua
index 1bf7735d..e9da6d01 100644
--- a/plugin/src/Components/ConnectPanel.lua
+++ b/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", {
-			BorderSizePixel = 0,
-			BackgroundColor3 = Color3.new(0.7, 0.7, 0.7),
-			Size = UDim2.new(1, -4, 0, 2),
-			LayoutOrder = 2,
-		}),
-
-		Body = e(FitList, {
+		Inputs = 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, 8),
+					Padding = UDim.new(0, 4),
 				},
 			}, {
 				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, 8),
+					Padding = UDim.new(0, 4),
 				},
 			}, {
 				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, {
-				containerProps = {
-					LayoutOrder = 3,
-					BackgroundTransparency = 1,
-				},
-				layoutProps = {
-					FillDirection = Enum.FillDirection.Horizontal,
-					Padding = UDim.new(0, 8),
-				},
-			}, {
-				e(FormButton, {
-					text = "Start",
-					onClick = function()
-						if startSession ~= nil then
-							startSession(self.state.address, self.state.port)
-						end
-					end,
-				}),
+		Buttons = e(FitList, {
+			fitAxes = "Y",
+			containerProps = {
+				BackgroundTransparency = 1,
+				LayoutOrder = 3,
+				Size = UDim2.new(1, 0, 0, 0),
+			},
+			layoutProps = {
+				FillDirection = Enum.FillDirection.Horizontal,
+				HorizontalAlignment = Enum.HorizontalAlignment.Right,
+				Padding = UDim.new(0, 8),
+			},
+			paddingProps = {
+				PaddingTop = UDim.new(0, 0),
+				PaddingBottom = UDim.new(0, 8),
+				PaddingLeft = UDim.new(0, 8),
+				PaddingRight = UDim.new(0, 8),
+			},
+		}, {
+			e(FormButton, {
+				layoutOrder = 1,
+				text = "Cancel",
+				onClick = function()
+					if cancel ~= nil then
+						cancel()
+					end
+				end,
+				secondary = true,
+			}),
 
-				e(FormButton, {
-					text = "Cancel",
-					onClick = function()
-						if cancel ~= nil then
-							cancel()
-						end
-					end,
-					secondary = true,
-				}),
-			})
+			e(FormButton, {
+				layoutOrder = 2,
+				text = "Connect",
+				onClick = function()
+					if startSession ~= nil then
+						startSession(self.state.address, self.state.port)
+					end
+				end,
+			}),
 		})
 	})
 end
diff --git a/plugin/src/Components/FitList.lua b/plugin/src/Components/FitList.lua
index 50d2f581..aa14fc03 100644
--- a/plugin/src/Components/FitList.lua
+++ b/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)),
 
diff --git a/plugin/src/Components/FormButton.lua b/plugin/src/Components/FormButton.lua
index 719d27b6..2833e04e 100644
--- a/plugin/src/Components/FormButton.lua
+++ b/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,
 		}),
 	})
diff --git a/plugin/src/Components/FormTextInput.lua b/plugin/src/Components/FormTextInput.lua
index 962cb716..63142b8a 100644
--- a/plugin/src/Components/FormTextInput.lua
+++ b/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)
diff --git a/plugin/src/Theme.lua b/plugin/src/Theme.lua
new file mode 100644
index 00000000..2129f063
--- /dev/null
+++ b/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
\ No newline at end of file