New UI (#367)

* Add Flipper

* Remove old UI

* Add boilerplate UI

* Change plugin version

* Merge upstream

* Bunch of new UI changes

Too lazy to list them all in individual commits

* Touch ripple for buttons and a few other things

* Make the close button on the PluginGui work

* Set button state to guiEnabled

* Implement Connecting, NotConnected; add Header; don't update plugin button on render

* Replace mapLerpColor with mapLerp

* Update blendAlpha to be 0 without any values

* Add ActionFillTransparency to Theme.Button

* Suffix all Theme entries

* Update Flipper

* Add disconnect button

* Remove cancel button

* Add settings page

* Add scrollbar and dark theme support to settings

* Include settings in startSession

* Set context default value to nil

I always thought this was the name, lol...

* Add Error page

* Fix preloadAssets

* Fix preloadAssets import

* Update checkbox colors a little

* Add setting descriptions

* Fix scrolling frame in settings panel

* Remove .vscode

* Rename Throbber to Spinner

* Update merge

* Move Spinner images to assets

* Change casing of directories

* Remove old directories

* Add comments to getDerivedStateFromProps

* Account for offset in host TextBox size

* Turn width variables into constants

* Attempt to fix the comments

* Add a missing comma in Settings

* Remove a double space

* Remove Dummy object

* Move most of the Studio logic out of render

* Don't truncate port input

* Replace merge with Dictionary.merge

* Replace "Got it!" with "Okay"

* Add projectName to setStatus call

* Add Flipper to build.rs

plugin/src/App/StatusPages/Connected.lua

@@ -0,0 +1,125 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+
+local Header = require(Plugin.App.Components.Header)
+local IconButton = require(Plugin.App.Components.IconButton)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+
+local e = Roact.createElement
+
+local function ConnectionDetails(props)
+	return Theme.with(function(theme)
+		return e(BorderedContainer, {
+			transparency = props.transparency,
+			size = UDim2.new(1, 0, 0, 70),
+			layoutOrder = props.layoutOrder,
+		}, {
+			TextContainer = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1
+			}, {
+				ProjectName = e("TextLabel", {
+					Text = props.projectName,
+					Font = Enum.Font.GothamBold,
+					TextSize = 20,
+					TextColor3 = theme.ConnectionDetails.ProjectNameColor,
+					TextTransparency = props.transparency,
+					TextXAlignment = Enum.TextXAlignment.Left,
+
+					Size = UDim2.new(1, 0, 0, 20),
+
+					LayoutOrder = 1,
+					BackgroundTransparency = 1,
+				}),
+
+				Address = e("TextLabel", {
+					Text = props.address,
+					Font = Enum.Font.Code,
+					TextSize = 15,
+					TextColor3 = theme.ConnectionDetails.AddressColor,
+					TextTransparency = props.transparency,
+					TextXAlignment = Enum.TextXAlignment.Left,
+
+					Size = UDim2.new(1, 0, 0, 15),
+
+					LayoutOrder = 2,
+					BackgroundTransparency = 1,
+				}),
+
+				Layout = e("UIListLayout", {
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					FillDirection = Enum.FillDirection.Vertical,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 6),
+				}),
+			}),
+
+			Disconnect = e(IconButton, {
+				icon = Assets.Images.Icons.Close,
+				iconSize = 24,
+				color = theme.ConnectionDetails.DisconnectColor,
+				transparency = props.transparency,
+
+				position = UDim2.new(1, 0, 0.5, 0),
+				anchorPoint = Vector2.new(1, 0.5),
+
+				onClick = props.onDisconnect,
+			}),
+
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 17),
+				PaddingRight = UDim.new(0, 15),
+			}),
+		})
+	end)
+end
+
+local ConnectedPage = Roact.Component:extend("ConnectedPage")
+
+function ConnectedPage:render()
+	return Roact.createFragment({
+		Header = e(Header, {
+			transparency = self.props.transparency,
+			layoutOrder = 1,
+		}),
+
+		ConnectionDetails = e(ConnectionDetails, {
+			projectName = self.state.projectName,
+			address = self.state.address,
+			transparency = self.props.transparency,
+			layoutOrder = 2,
+
+			onDisconnect = self.props.onDisconnect,
+		}),
+
+		Layout = e("UIListLayout", {
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 10),
+		}),
+
+		Padding = e("UIPadding", {
+			PaddingLeft = UDim.new(0, 20),
+			PaddingRight = UDim.new(0, 20),
+		}),
+	})
+end
+
+function ConnectedPage.getDerivedStateFromProps(props)
+	-- If projectName or address ever get removed from props, make sure we still have
+	-- the properties! The component still needs to have its data for it to be properly
+	-- animated out without the labels changing.
+
+	return {
+		projectName = props.projectName,
+		address = props.address,
+	}
+end
+
+return ConnectedPage