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/Components/Checkbox.lua

@@ -0,0 +1,96 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.Flipper)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local SlicedImage = require(script.Parent.SlicedImage)
+
+local e = Roact.createElement
+
+local Checkbox = Roact.Component:extend("Checkbox")
+
+function Checkbox:init()
+	self.motor = Flipper.SingleMotor.new(self.props.active and 1 or 0)
+	self.binding = bindingUtil.fromMotor(self.motor)
+end
+
+function Checkbox:didUpdate(lastProps)
+	if lastProps.active ~= self.props.active then
+		self.motor:setGoal(
+			Flipper.Spring.new(self.props.active and 1 or 0, {
+				frequency = 6,
+				dampingRatio = 1.1,
+			})
+		)
+	end
+end
+
+function Checkbox:render()
+	return Theme.with(function(theme)
+		theme = theme.Checkbox
+
+		local activeTransparency = Roact.joinBindings({
+			self.binding:map(function(value)
+				return 1 - value
+			end),
+			self.props.transparency,
+		}):map(bindingUtil.blendAlpha)
+
+		return e("ImageButton", {
+			Size = UDim2.new(0, 28, 0, 28),
+			Position = self.props.position,
+			AnchorPoint = self.props.anchorPoint,
+			LayoutOrder = self.props.layoutOrder,
+			ZIndex = self.props.zIndex,
+			BackgroundTransparency = 1,
+
+			[Roact.Event.Activated] = self.props.onClick,
+		}, {
+			Active = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBackground,
+				color = theme.Active.BackgroundColor,
+				transparency = activeTransparency,
+				size = UDim2.new(1, 0, 1, 0),
+				zIndex = 2,
+			}, {
+				Icon = e("ImageLabel", {
+					Image = Assets.Images.Checkbox.Active,
+					ImageColor3 = theme.Active.IconColor,
+					ImageTransparency = activeTransparency,
+
+					Size = UDim2.new(0, 16, 0, 16),
+					Position = UDim2.new(0.5, 0, 0.5, 0),
+					AnchorPoint = Vector2.new(0.5, 0.5),
+
+					BackgroundTransparency = 1,
+				}),
+			}),
+
+			Inactive = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBorder,
+				color = theme.Inactive.BorderColor,
+				transparency = self.props.transparency,
+				size = UDim2.new(1, 0, 1, 0),
+			}, {
+				Icon = e("ImageLabel", {
+					Image = Assets.Images.Checkbox.Inactive,
+					ImageColor3 = theme.Inactive.IconColor,
+					ImageTransparency = self.props.transparency,
+
+					Size = UDim2.new(0, 16, 0, 16),
+					Position = UDim2.new(0.5, 0, 0.5, 0),
+					AnchorPoint = Vector2.new(0.5, 0.5),
+
+					BackgroundTransparency = 1,
+				}),
+			}),
+		})
+	end)
+end
+
+return Checkbox