Revamp UI using Kenney UI assets

assets/kenney-ui-gray-sheet.xml

@@ -0,0 +1,41 @@
+<TextureAtlas imagePath="sheet.png">
+	<SubTexture name="grey_arrowDownGrey.png" x="78" y="498" width="15" height="10"/>
+	<SubTexture name="grey_arrowDownWhite.png" x="123" y="496" width="15" height="10"/>
+	<SubTexture name="grey_arrowUpGrey.png" x="108" y="498" width="15" height="10"/>
+	<SubTexture name="grey_arrowUpWhite.png" x="93" y="498" width="15" height="10"/>
+	<SubTexture name="grey_box.png" x="147" y="433" width="38" height="36"/>
+	<SubTexture name="grey_boxCheckmark.png" x="147" y="469" width="38" height="36"/>
+	<SubTexture name="grey_boxCross.png" x="185" y="433" width="38" height="36"/>
+	<SubTexture name="grey_boxTick.png" x="190" y="198" width="36" height="36"/>
+	<SubTexture name="grey_button00.png" x="0" y="143" width="190" height="45"/>
+	<SubTexture name="grey_button01.png" x="0" y="188" width="190" height="49"/>
+	<SubTexture name="grey_button02.png" x="0" y="98" width="190" height="45"/>
+	<SubTexture name="grey_button03.png" x="0" y="331" width="190" height="49"/>
+	<SubTexture name="grey_button04.png" x="0" y="286" width="190" height="45"/>
+	<SubTexture name="grey_button05.png" x="0" y="0" width="195" height="49"/>
+	<SubTexture name="grey_button06.png" x="0" y="49" width="191" height="49"/>
+	<SubTexture name="grey_button07.png" x="195" y="0" width="49" height="49"/>
+	<SubTexture name="grey_button08.png" x="240" y="49" width="49" height="49"/>
+	<SubTexture name="grey_button09.png" x="98" y="433" width="49" height="45"/>
+	<SubTexture name="grey_button10.png" x="191" y="49" width="49" height="49"/>
+	<SubTexture name="grey_button11.png" x="0" y="433" width="49" height="45"/>
+	<SubTexture name="grey_button12.png" x="244" y="0" width="49" height="49"/>
+	<SubTexture name="grey_button13.png" x="49" y="433" width="49" height="45"/>
+	<SubTexture name="grey_button14.png" x="0" y="384" width="190" height="49"/>
+	<SubTexture name="grey_button15.png" x="0" y="237" width="190" height="49"/>
+	<SubTexture name="grey_checkmarkGrey.png" x="99" y="478" width="21" height="20"/>
+	<SubTexture name="grey_checkmarkWhite.png" x="78" y="478" width="21" height="20"/>
+	<SubTexture name="grey_circle.png" x="185" y="469" width="36" height="36"/>
+	<SubTexture name="grey_crossGrey.png" x="120" y="478" width="18" height="18"/>
+	<SubTexture name="grey_crossWhite.png" x="190" y="318" width="18" height="18"/>
+	<SubTexture name="grey_panel.png" x="190" y="98" width="100" height="100"/>
+	<SubTexture name="grey_sliderDown.png" x="190" y="234" width="28" height="42"/>
+	<SubTexture name="grey_sliderEnd.png" x="138" y="478" width="8" height="10"/>
+	<SubTexture name="grey_sliderHorizontal.png" x="0" y="380" width="190" height="4"/>
+	<SubTexture name="grey_sliderLeft.png" x="0" y="478" width="39" height="31"/>
+	<SubTexture name="grey_sliderRight.png" x="39" y="478" width="39" height="31"/>
+	<SubTexture name="grey_sliderUp.png" x="190" y="276" width="28" height="42"/>
+	<SubTexture name="grey_sliderVertical.png" x="208" y="318" width="4" height="100"/>
+	<SubTexture name="grey_tickGrey.png" x="190" y="336" width="17" height="17"/>
+	<SubTexture name="grey_tickWhite.png" x="190" y="353" width="17" height="17"/>
+</TextureAtlas>

plugin/src/Assets.lua

@@ -0,0 +1,52 @@
+local sheetAsset = "rbxassetid://2738712459"
+
+local Assets = {
+	Sprites = {
+		WhiteCross = {
+			asset = sheetAsset,
+			offset = Vector2.new(190, 318),
+			size = Vector2.new(18, 18),
+		},
+	},
+	Slices = {
+		GrayBox = {
+			asset = sheetAsset,
+			offset = Vector2.new(148, 433),
+			size = Vector2.new(36, 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),
+			center = Rect.new(16, 16, 17, 17),
+		},
+	},
+	StartSession = "",
+	SessionActive = "",
+	Configure = "",
+}
+
+local function guardForTypos(name, map)
+	setmetatable(map, {
+		__index = function(_, key)
+			error(("%q is not a valid member of %s"):format(tostring(key), name), 2)
+		end
+	})
+
+	for key, child in pairs(map) do
+		if type(child) == "table" then
+			guardForTypos(("%s.%s"):format(name, key), child)
+		end
+	end
+end
+
+guardForTypos("Assets", Assets)
+
+return Assets

plugin/src/Components/App.lua

@@ -2,7 +2,7 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact)
 
 local Plugin = script:FindFirstAncestor("Plugin")
 
-local Icons = require(Plugin.Icons)
+local Assets = require(Plugin.Assets)
 local Session = require(Plugin.Session)
 local Config = require(Plugin.Config)
 local Version = require(Plugin.Version)
@@ -123,7 +123,10 @@ function App:render()
 		}
 	end
 
-	return e("ScreenGui", nil, children)
+	return e("ScreenGui", {
+		AutoLocalize = false,
+		ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
+	}, children)
 end
 
 function App:didMount()
@@ -134,7 +137,7 @@ function App:didMount()
 	self.connectButton = toolbar:CreateButton(
 		"Connect",
 		"Connect to a running Rojo session",
-		Icons.StartSession)
+		Assets.StartSession)
 	self.connectButton.ClickableWhenViewportHidden = false
 	self.connectButton.Click:Connect(function()
 		checkUpgrade(self.props.plugin)
@@ -166,7 +169,7 @@ function App:didMount()
 	self.configButton = toolbar:CreateButton(
 		"Configure",
 		"Configure the Rojo plugin",
-		Icons.Configure)
+		Assets.Configure)
 	self.configButton.ClickableWhenViewportHidden = false
 	self.configButton.Click:Connect(function()
 		self.configButton:SetActive(false)
@@ -180,9 +183,9 @@ function App:didUpdate()
 	self.connectButton:SetActive(connectActive)
 
 	if self.state.sessionStatus == SessionStatus.Connected then
-		self.connectButton.Icon = Icons.SessionActive
+		self.connectButton.Icon = Assets.SessionActive
 	else
-		self.connectButton.Icon = Icons.StartSession
+		self.connectButton.Icon = Assets.StartSession
 	end
 end
 

plugin/src/Components/ConnectPanel.lua

@@ -1,12 +1,21 @@
-local Roact = require(script:FindFirstAncestor("Rojo").Roact)
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
 
-local Config = require(script.Parent.Parent.Config)
+local Roact = require(Rojo.Roact)
 
-local FitList = require(script.Parent.FitList)
-local FitText = require(script.Parent.FitText)
+local Config = require(Plugin.Config)
+local Assets = require(Plugin.Assets)
+
+local FitList = require(Plugin.Components.FitList)
+local FitText = require(Plugin.Components.FitText)
+local FormButton = require(Plugin.Components.FormButton)
+
+local WhiteCross = Assets.Sprites.WhiteCross
+local GrayBox = Assets.Slices.GrayBox
 
 local e = Roact.createElement
 
+local TEXT_COLOR = Color3.new(0.05, 0.05, 0.05)
 local FORM_TEXT_SIZE = 20
 
 local ConnectPanel = Roact.Component:extend("ConnectPanel")
@@ -40,34 +49,69 @@ function ConnectPanel:render()
 	local cancel = self.props.cancel
 
 	return e(FitList, {
+		containerKind = "ImageLabel",
 		containerProps = {
-			BackgroundColor3 = Color3.fromRGB(32, 32, 32),
-			BorderColor3 = Color3.fromRGB(64, 64, 64),
-			Position = UDim2.new(0.5, 0, 0, 0),
-			AnchorPoint = Vector2.new(0.5, 0),
+			Image = GrayBox.asset,
+			ImageRectOffset = GrayBox.offset,
+			ImageRectSize = GrayBox.size,
+			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),
+		},
+		layoutProps = {
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
 		},
 	}, {
-		Title = e("TextLabel", {
+		Head = e("Frame", {
 			LayoutOrder = 1,
-			Font = Enum.Font.SourceSans,
-			TextSize = 22,
-			Text = "Start New Rojo Session",
-			Size = UDim2.new(1, 0, 0, 28),
+			Size = UDim2.new(1, 0, 0, 36),
 			BackgroundTransparency = 1,
-			TextColor3 = Color3.new(1, 1, 1),
 		}, {
-			BottomBorder = e("Frame", {
-				BorderSizePixel = 0,
-				BackgroundColor3 = Color3.fromRGB(48, 48, 48),
-				Size = UDim2.new(1, 0, 0, 1),
-				Position = UDim2.new(0, 0, 1, -1),
+			Padding = e("UIPadding", {
+				PaddingTop = UDim.new(0, 8),
+				PaddingBottom = UDim.new(0, 8),
+				PaddingLeft = UDim.new(0, 8),
+				PaddingRight = UDim.new(0, 8),
 			}),
+
+			Title = e("TextLabel", {
+				Font = Enum.Font.SourceSansBold,
+				TextSize = 22,
+				Text = "Start New Rojo Session",
+				Size = UDim2.new(1, 0, 1, 0),
+				TextXAlignment = Enum.TextXAlignment.Left,
+				BackgroundTransparency = 1,
+				TextColor3 = TEXT_COLOR,
+			}),
+
+			Close = e("ImageButton", {
+				Image = WhiteCross.asset,
+				ImageRectOffset = WhiteCross.offset,
+				ImageRectSize = WhiteCross.size,
+				Size = UDim2.new(0, 18, 0, 18),
+				Position = UDim2.new(1, 0, 0.5, 0),
+				AnchorPoint = Vector2.new(1, 0.5),
+				ImageColor3 = TEXT_COLOR,
+				BackgroundTransparency = 1,
+				[Roact.Event.Activated] = function()
+					cancel()
+				end,
+			}),
+		}),
+
+		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, {
 			containerProps = {
 				BackgroundTransparency = 1,
-				LayoutOrder = 2,
+				LayoutOrder = 3,
 			},
 			layoutProps = {
 				Padding = UDim.new(0, 8),
@@ -95,10 +139,10 @@ function ConnectPanel:render()
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
 					TextXAlignment = Enum.TextXAlignment.Left,
-					Font = Enum.Font.SourceSans,
+					Font = Enum.Font.SourceSansBold,
 					TextSize = FORM_TEXT_SIZE,
 					Text = "Address",
-					TextColor3 = Color3.fromRGB(245, 245, 245),
+					TextColor3 = TEXT_COLOR,
 
 					[Roact.Change.AbsoluteSize] = function(rbx)
 						self:updateLabelSize("address", rbx.AbsoluteSize)
@@ -109,11 +153,15 @@ function ConnectPanel:render()
 					}),
 				}),
 
-				InputOuter = e("Frame", {
+				InputOuter = e("ImageLabel", {
 					LayoutOrder = 2,
+					Image = GrayBox.asset,
+					ImageRectOffset = GrayBox.offset,
+					ImageRectSize = GrayBox.size,
+					ScaleType = Enum.ScaleType.Slice,
+					SliceCenter = GrayBox.center,
 					Size = UDim2.new(0, 300, 0, 24),
-					BackgroundColor3 = Color3.fromRGB(32, 32, 32),
-					BorderColor3 = Color3.fromRGB(64, 64, 64),
+					BackgroundTransparency = 1,
 				}, {
 					InputInner = e("TextBox", {
 						BackgroundTransparency = 1,
@@ -125,7 +173,7 @@ function ConnectPanel:render()
 						TextXAlignment = Enum.TextXAlignment.Left,
 						TextSize = FORM_TEXT_SIZE,
 						Text = self.state.address,
-						TextColor3 = Color3.fromRGB(245, 245, 245),
+						TextColor3 = TEXT_COLOR,
 
 						[Roact.Change.Text] = function(rbx)
 							self:setState({
@@ -152,10 +200,10 @@ function ConnectPanel:render()
 					LayoutOrder = 1,
 					BackgroundTransparency = 1,
 					TextXAlignment = Enum.TextXAlignment.Left,
-					Font = Enum.Font.SourceSans,
+					Font = Enum.Font.SourceSansBold,
 					TextSize = FORM_TEXT_SIZE,
 					Text = "Port",
-					TextColor3 = Color3.fromRGB(245, 245, 245),
+					TextColor3 = TEXT_COLOR,
 
 					[Roact.Change.AbsoluteSize] = function(rbx)
 						self:updateLabelSize("port", rbx.AbsoluteSize)
@@ -166,11 +214,15 @@ function ConnectPanel:render()
 					}),
 				}),
 
-				InputOuter = e("Frame", {
+				InputOuter = e("ImageLabel", {
 					LayoutOrder = 2,
+					Image = GrayBox.asset,
+					ImageRectOffset = GrayBox.offset,
+					ImageRectSize = GrayBox.size,
+					ScaleType = Enum.ScaleType.Slice,
+					SliceCenter = GrayBox.center,
 					Size = UDim2.new(0, 300, 0, 24),
-					BackgroundColor3 = Color3.fromRGB(32, 32, 32),
-					BorderColor3 = Color3.fromRGB(64, 64, 64),
+					BackgroundTransparency = 1,
 				}, {
 					InputInner = e("TextBox", {
 						BackgroundTransparency = 1,
@@ -182,7 +234,7 @@ function ConnectPanel:render()
 						TextXAlignment = Enum.TextXAlignment.Left,
 						TextSize = FORM_TEXT_SIZE,
 						Text = self.state.port,
-						TextColor3 = Color3.fromRGB(245, 245, 245),
+						TextColor3 = TEXT_COLOR,
 
 						[Roact.Change.Text] = function(rbx)
 							self:setState({
@@ -203,36 +255,18 @@ function ConnectPanel:render()
 					Padding = UDim.new(0, 8),
 				},
 			}, {
-				e(FitText, {
-					Kind = "TextButton",
-					LayoutOrder = 1,
-					BackgroundColor3 = Color3.fromRGB(32, 32, 32),
-					BorderColor3 = Color3.fromRGB(64, 64, 64),
-					TextColor3 = Color3.fromRGB(245, 245, 245),
-					Text = "Start",
-					Font = Enum.Font.SourceSans,
-					TextSize = FORM_TEXT_SIZE,
-					Padding = Vector2.new(12, 3),
-
-					[Roact.Event.Activated] = function()
+				e(FormButton, {
+					text = "Start",
+					onClick = function()
 						if startSession ~= nil then
 							startSession(self.state.address, self.state.port)
 						end
 					end,
 				}),
 
-				e(FitText, {
-					Kind = "TextButton",
-					LayoutOrder = 2,
-					BackgroundColor3 = Color3.fromRGB(32, 32, 32),
-					BorderColor3 = Color3.fromRGB(64, 64, 64),
-					TextColor3 = Color3.fromRGB(245, 245, 245),
-					Text = "Cancel",
-					Font = Enum.Font.SourceSans,
-					TextSize = FORM_TEXT_SIZE,
-					Padding = Vector2.new(12, 3),
-
-					[Roact.Event.Activated] = function()
+				e(FormButton, {
+					text = "Cancel",
+					onClick = function()
 						if cancel ~= nil then
 							cancel()
 						end

plugin/src/Components/ConnectionActivePanel.lua

@@ -1,24 +1,38 @@
 local Roact = require(script:FindFirstAncestor("Rojo").Roact)
 
+local Assets = require(script.Parent.Parent.Assets)
+
+local FitList = require(script.Parent.FitList)
 local FitText = require(script.Parent.FitText)
 
 local e = Roact.createElement
 
+local GrayBox = Assets.Slices.GrayBox
+
 local ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel")
 
 function ConnectionActivePanel:render()
-	return e(FitText, {
-		Kind = "TextLabel",
-		Padding = Vector2.new(4, 4),
-		Font = Enum.Font.SourceSans,
-		TextSize = 16,
-		Text = "Rojo Connected",
-		TextColor3 = Color3.new(1, 1, 1),
-		BackgroundColor3 = Color3.new(0, 0, 0),
-		BorderSizePixel = 0,
-		BackgroundTransparency = 0.6,
-		Position = UDim2.new(0.5, 0, 0, 0),
-		AnchorPoint = Vector2.new(0.5, 0),
+	return e(FitList, {
+		containerKind = "ImageButton",
+		containerProps = {
+			Image = GrayBox.asset,
+			ImageRectOffset = GrayBox.offset,
+			ImageRectSize = GrayBox.size,
+			SliceCenter = GrayBox.center,
+			ScaleType = Enum.ScaleType.Slice,
+			BackgroundTransparency = 1,
+			Position = UDim2.new(0.5, 0, 0, 0),
+			AnchorPoint = Vector2.new(0.5, 0),
+		},
+	}, {
+		Text = e(FitText, {
+			Padding = Vector2.new(12, 6),
+			Font = Enum.Font.SourceSans,
+			TextSize = 18,
+			Text = "Rojo Connected",
+			TextColor3 = Color3.new(0.05, 0.05, 0.05),
+			BackgroundTransparency = 1,
+		}),
 	})
 end
 

plugin/src/Components/FitList.lua

@@ -11,6 +11,7 @@ function FitList:init()
 end
 
 function FitList:render()
+	local containerKind = self.props.containerKind or "Frame"
 	local containerProps = self.props.containerProps
 	local layoutProps = self.props.layoutProps
 	local paddingProps = self.props.paddingProps
@@ -43,7 +44,7 @@ function FitList:render()
 		Size = self.sizeBinding,
 	})
 
-	return e("Frame", fullContainerProps, children)
+	return e(containerKind, fullContainerProps, children)
 end
 
 return FitList

plugin/src/Components/FitText.lua

@@ -13,7 +13,7 @@ function FitText:init()
 end
 
 function FitText:render()
-	local kind = self.props.Kind
+	local kind = self.props.Kind or "TextLabel"
 
 	local containerProps = Dictionary.merge(self.props, {
 		Kind = Dictionary.None,

plugin/src/Components/FormButton.lua

@@ -0,0 +1,49 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Assets = require(Plugin.Assets)
+local FitList = require(Plugin.Components.FitList)
+local FitText = require(Plugin.Components.FitText)
+
+local e = Roact.createElement
+
+local GrayButton07 = Assets.Slices.GrayButton07
+
+local function FormButton(props)
+	local text = props.text
+	local layoutOrder = props.layoutOrder
+	local onClick = props.onClick
+
+	return e(FitList, {
+		containerKind = "ImageButton",
+		containerProps = {
+			LayoutOrder = layoutOrder,
+			BackgroundTransparency = 1,
+			Image = GrayButton07.asset,
+			ImageRectOffset = GrayButton07.offset,
+			ImageRectSize = GrayButton07.size,
+			ScaleType = Enum.ScaleType.Slice,
+			SliceCenter = GrayButton07.center,
+
+			[Roact.Event.Activated] = function()
+				if onClick ~= nil then
+					onClick()
+				end
+			end,
+		},
+	}, {
+		Text = e(FitText, {
+			Kind = "TextLabel",
+			Text = text,
+			TextSize = 22,
+			Font = Enum.Font.SourceSansBold,
+			Padding = Vector2.new(14, 6),
+			TextColor3 = Color3.new(0.05, 0.05, 0.05),
+			BackgroundTransparency = 1,
+		}),
+	})
+end
+
+return FormButton

plugin/src/Icons.lua

@@ -1,13 +0,0 @@
-local Icons = {
-	StartSession = "",
-	SessionActive = "",
-	Configure = "",
-}
-
-setmetatable(Icons, {
-	__index = function(_, key)
-		error(("%q is not a valid member of Icons"):format(tostring(key)), 2)
-	end
-})
-
-return Icons