New UI, simpler

plugin/src/Components/ConnectionActivePanel.lua

@@ -3,63 +3,42 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact)
 local Plugin = script:FindFirstAncestor("Plugin")
 
 local Theme = require(Plugin.Theme)
-local Assets = require(Plugin.Assets)
 
-local FitList = require(Plugin.Components.FitList)
+local Panel = require(Plugin.Components.Panel)
 local FitText = require(Plugin.Components.FitText)
+local FormButton = require(Plugin.Components.FormButton)
 
 local e = Roact.createElement
 
-local RoundBox = Assets.Slices.RoundBox
-local WhiteCross = Assets.Sprites.WhiteCross
+local ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel")
 
-local function ConnectionActivePanel(props)
-	local stopSession = props.stopSession
+function ConnectionActivePanel:render()
+	local stopSession = self.props.stopSession
 
-	return e(FitList, {
-		containerKind = "ImageLabel",
-		containerProps = {
-			Image = RoundBox.asset,
-			ImageRectOffset = RoundBox.offset + Vector2.new(0, RoundBox.size.Y / 2),
-			ImageRectSize = RoundBox.size * Vector2.new(1, 0.5),
-			SliceCenter = Rect.new(4, 4, 4, 4),
-			ScaleType = Enum.ScaleType.Slice,
-			BackgroundTransparency = 1,
-			Position = UDim2.new(0.5, 0, 0, 0),
-			AnchorPoint = Vector2.new(0.5, 0),
-		},
-		layoutProps = {
-			FillDirection = Enum.FillDirection.Horizontal,
+	return e(Panel, nil, {
+		Layout = Roact.createElement("UIListLayout", {
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
 			VerticalAlignment = Enum.VerticalAlignment.Center,
-		},
-	}, {
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 8),
+		}),
+
 		Text = e(FitText, {
 			Padding = Vector2.new(12, 6),
 			Font = Theme.ButtonFont,
 			TextSize = 18,
-			Text = "Rojo Connected",
+			Text = "Connected to Live-Sync Server",
 			TextColor3 = Theme.PrimaryColor,
 			BackgroundTransparency = 1,
 		}),
 
-		CloseContainer = e("ImageButton", {
-			Size = UDim2.new(0, 30, 0, 30),
-			BackgroundTransparency = 1,
-
-			[Roact.Event.Activated] = function()
+		DisconnectButton = e(FormButton, {
+			layoutOrder = 2,
+			text = "Disconnect",
+			secondary = true,
+			onClick = function()
 				stopSession()
 			end,
-		}, {
-			CloseImage = e("ImageLabel", {
-				Size = UDim2.new(0, 16, 0, 16),
-				Position = UDim2.new(0.5, 0, 0.5, 0),
-				AnchorPoint = Vector2.new(0.5, 0.5),
-				Image = WhiteCross.asset,
-				ImageRectOffset = WhiteCross.offset,
-				ImageRectSize = WhiteCross.size,
-				ImageColor3 = Theme.PrimaryColor,
-				BackgroundTransparency = 1,
-			}),
 		}),
 	})
 end