diff --git a/assets/round-rect-8px-radius-2px-border.png b/assets/round-rect-8px-radius-2px-border.png new file mode 100644 index 00000000..9c976f19 Binary files /dev/null and b/assets/round-rect-8px-radius-2px-border.png differ diff --git a/plugin/src/Assets.lua b/plugin/src/Assets.lua index b73955ab..ad0b4ee5 100644 --- a/plugin/src/Assets.lua +++ b/plugin/src/Assets.lua @@ -9,22 +9,10 @@ local Assets = { }, }, Slices = { - GrayBox = { - asset = sheetAsset, - offset = Vector2.new(147, 433), - size = Vector2.new(38, 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), + RoundBox = { + asset = "rbxassetid://2754309674", + offset = Vector2.new(0, 0), + size = Vector2.new(0, 0), center = Rect.new(16, 16, 17, 17), }, }, diff --git a/plugin/src/Components/ConnectPanel.lua b/plugin/src/Components/ConnectPanel.lua index adbd8710..1bf7735d 100644 --- a/plugin/src/Components/ConnectPanel.lua +++ b/plugin/src/Components/ConnectPanel.lua @@ -12,7 +12,7 @@ local FormButton = require(Plugin.Components.FormButton) local FormTextInput = require(Plugin.Components.FormTextInput) local WhiteCross = Assets.Sprites.WhiteCross -local GrayBox = Assets.Slices.GrayBox +local RoundBox = Assets.Slices.RoundBox local e = Roact.createElement @@ -52,11 +52,11 @@ function ConnectPanel:render() return e(FitList, { containerKind = "ImageLabel", containerProps = { - Image = GrayBox.asset, - ImageRectOffset = GrayBox.offset, - ImageRectSize = GrayBox.size, + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size, + SliceCenter = RoundBox.center, 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), @@ -135,7 +135,7 @@ function ConnectPanel:render() }, }, { Label = e(FitText, { - MinSize = Vector2.new(0, 24), + MinSize = Vector2.new(0, 28), Kind = "TextLabel", LayoutOrder = 1, BackgroundTransparency = 1, @@ -156,7 +156,7 @@ function ConnectPanel:render() Input = e(FormTextInput, { layoutOrder = 2, - size = UDim2.new(0, 300, 0, 24), + size = UDim2.new(0, 300, 0, 28), value = self.state.address, onValueChange = function(newValue) self:setState({ @@ -177,7 +177,7 @@ function ConnectPanel:render() }, }, { Label = e(FitText, { - MinSize = Vector2.new(0, 24), + MinSize = Vector2.new(0, 28), Kind = "TextLabel", LayoutOrder = 1, BackgroundTransparency = 1, @@ -198,7 +198,7 @@ function ConnectPanel:render() Input = e(FormTextInput, { layoutOrder = 2, - size = UDim2.new(0, 300, 0, 24), + size = UDim2.new(0, 300, 0, 28), value = self.state.port, onValueChange = function(newValue) self:setState({ @@ -234,6 +234,7 @@ function ConnectPanel:render() cancel() end end, + secondary = true, }), }) }) diff --git a/plugin/src/Components/ConnectionActivePanel.lua b/plugin/src/Components/ConnectionActivePanel.lua index 846a10ce..b1d766b6 100644 --- a/plugin/src/Components/ConnectionActivePanel.lua +++ b/plugin/src/Components/ConnectionActivePanel.lua @@ -7,7 +7,7 @@ local FitText = require(script.Parent.FitText) local e = Roact.createElement -local GrayBox = Assets.Slices.GrayBox +local RoundBox = Assets.Slices.RoundBox local ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel") @@ -15,10 +15,10 @@ function ConnectionActivePanel:render() return e(FitList, { containerKind = "ImageButton", containerProps = { - Image = GrayBox.asset, - ImageRectOffset = GrayBox.offset, - ImageRectSize = GrayBox.size, - SliceCenter = GrayBox.center, + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size, + SliceCenter = RoundBox.center, ScaleType = Enum.ScaleType.Slice, BackgroundTransparency = 1, Position = UDim2.new(0.5, 0, 0, 0), diff --git a/plugin/src/Components/FormButton.lua b/plugin/src/Components/FormButton.lua index 17bc8b67..719d27b6 100644 --- a/plugin/src/Components/FormButton.lua +++ b/plugin/src/Components/FormButton.lua @@ -9,23 +9,26 @@ local FitText = require(Plugin.Components.FitText) local e = Roact.createElement -local GrayButton07 = Assets.Slices.GrayButton07 +local RoundBox = Assets.Slices.RoundBox local function FormButton(props) local text = props.text local layoutOrder = props.layoutOrder local onClick = props.onClick + local imageColor = props.secondary and Color3.new(0.95, 0.95, 0.95) or nil + return e(FitList, { containerKind = "ImageButton", containerProps = { LayoutOrder = layoutOrder, BackgroundTransparency = 1, - Image = GrayButton07.asset, - ImageRectOffset = GrayButton07.offset, - ImageRectSize = GrayButton07.size, + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size, + SliceCenter = RoundBox.center, ScaleType = Enum.ScaleType.Slice, - SliceCenter = GrayButton07.center, + ImageColor3 = imageColor, [Roact.Event.Activated] = function() if onClick ~= nil then diff --git a/plugin/src/Components/FormTextInput.lua b/plugin/src/Components/FormTextInput.lua index 0b3016fc..962cb716 100644 --- a/plugin/src/Components/FormTextInput.lua +++ b/plugin/src/Components/FormTextInput.lua @@ -7,7 +7,7 @@ local Assets = require(Plugin.Assets) local e = Roact.createElement -local GrayBox = Assets.Slices.GrayBox +local RoundBox = Assets.Slices.RoundBox local function FormTextInput(props) local value = props.value @@ -17,17 +17,18 @@ local function FormTextInput(props) return e("ImageLabel", { LayoutOrder = layoutOrder, - Image = GrayBox.asset, - ImageRectOffset = GrayBox.offset, - ImageRectSize = GrayBox.size, + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size, ScaleType = Enum.ScaleType.Slice, - SliceCenter = GrayBox.center, + SliceCenter = RoundBox.center, + ImageColor3 = Color3.new(0.95, 0.95, 0.95), Size = size, BackgroundTransparency = 1, }, { InputInner = e("TextBox", { BackgroundTransparency = 1, - Size = UDim2.new(1, -8, 1, -8), + Size = UDim2.new(1, -12, 1, -12), Position = UDim2.new(0.5, 0, 0.5, 0), AnchorPoint = Vector2.new(0.5, 0.5), Font = Enum.Font.SourceSans,