diff --git a/plugin/src/App/ConflictAPIPopup.lua b/plugin/src/App/ConflictAPIPopup.lua index 2d2c45f6..c4414e60 100644 --- a/plugin/src/App/ConflictAPIPopup.lua +++ b/plugin/src/App/ConflictAPIPopup.lua @@ -45,8 +45,8 @@ function ConflictAPIPopup:render() Size = UDim2.new(1, 0, 0, 0), AutomaticSize = Enum.AutomaticSize.Y, Text = "There is already a Rojo API exposed by a Rojo plugin. Do you want to overwrite it with this one?", - Font = Enum.Font.GothamMedium, - TextSize = 17, + FontFace = theme.Font.Main, + TextSize = theme.TextSize.Medium, TextColor3 = theme.Setting.NameColor, TextXAlignment = Enum.TextXAlignment.Left, TextWrapped = true, @@ -63,8 +63,8 @@ function ConflictAPIPopup:render() Version.display(self.props.existingAPI.Version), self.props.existingAPI.ProtocolVersion ), - Font = Enum.Font.Gotham, - TextSize = 15, + FontFace = theme.Font.Thin, + TextSize = theme.TextSize.Body, TextColor3 = theme.Setting.DescriptionColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, @@ -80,8 +80,8 @@ function ConflictAPIPopup:render() Version.display(Config.version), Config.protocolVersion ), - Font = Enum.Font.Gotham, - TextSize = 15, + FontFace = theme.Font.Thin, + TextSize = theme.TextSize.Body, TextColor3 = theme.Setting.DescriptionColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, diff --git a/plugin/src/App/PermissionPopup.lua b/plugin/src/App/PermissionPopup.lua index d63cf5d5..dac97314 100644 --- a/plugin/src/App/PermissionPopup.lua +++ b/plugin/src/App/PermissionPopup.lua @@ -68,8 +68,8 @@ function PermissionPopup:render() TextWrapped = true, AutomaticSize = Enum.AutomaticSize.Y, Text = api, - Font = Enum.Font.Gotham, - TextSize = 17, + FontFace = theme.Font.Thin, + TextSize = theme.TextSize.Medium, TextColor3 = theme.Setting.NameColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, @@ -81,8 +81,8 @@ function PermissionPopup:render() TextWrapped = true, AutomaticSize = Enum.AutomaticSize.Y, Text = apiDesc.Description, - Font = Enum.Font.Gotham, - TextSize = 15, + FontFace = theme.Font.Thin, + TextSize = theme.TextSize.Body, TextColor3 = theme.Setting.DescriptionColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, @@ -99,8 +99,8 @@ function PermissionPopup:render() Text = string.format("%s will be able to listen to these events:", self.props.name), TextWrapped = true, AutomaticSize = Enum.AutomaticSize.Y, - Font = Enum.Font.GothamMedium, - TextSize = 17, + FontFace = theme.Font.Main, + TextSize = theme.TextSize.Medium, TextColor3 = theme.Setting.NameColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, @@ -114,8 +114,8 @@ function PermissionPopup:render() Text = string.format("%s will be able to read these properties:", self.props.name), TextWrapped = true, AutomaticSize = Enum.AutomaticSize.Y, - Font = Enum.Font.GothamMedium, - TextSize = 17, + FontFace = theme.Font.Main, + TextSize = theme.TextSize.Medium, TextColor3 = theme.Setting.NameColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, @@ -129,8 +129,8 @@ function PermissionPopup:render() Text = string.format("%s will be able to call these methods:", self.props.name), TextWrapped = true, AutomaticSize = Enum.AutomaticSize.Y, - Font = Enum.Font.GothamMedium, - TextSize = 17, + FontFace = theme.Font.Main, + TextSize = theme.TextSize.Medium, TextColor3 = theme.Setting.NameColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, @@ -196,8 +196,8 @@ function PermissionPopup:render() Size = UDim2.new(1, 0, 0, 0), AutomaticSize = Enum.AutomaticSize.Y, Text = string.format("%s is asking to use the Rojo API", self.props.name or "[Unknown]"), - Font = Enum.Font.GothamBold, - TextSize = 17, + FontFace = theme.Font.Bold, + TextSize = theme.TextSize.Medium, TextColor3 = theme.Setting.NameColor, TextXAlignment = Enum.TextXAlignment.Center, TextWrapped = true, diff --git a/plugin/src/App/StatusPages/Permissions/Listing.lua b/plugin/src/App/StatusPages/Permissions/Listing.lua index ed3f7b35..d82f62e9 100644 --- a/plugin/src/App/StatusPages/Permissions/Listing.lua +++ b/plugin/src/App/StatusPages/Permissions/Listing.lua @@ -8,6 +8,7 @@ local Roact = require(Packages.Roact) local Assets = require(Plugin.Assets) local Theme = require(Plugin.App.Theme) +local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync) local SlicedImage = require(Plugin.App.Components.SlicedImage) @@ -15,15 +16,6 @@ local e = Roact.createElement local DIVIDER_FADE_SIZE = 0.1 -local function getTextBounds(text, textSize, font, lineHeight, bounds) - local textBounds = TextService:GetTextSize(text, textSize, font, bounds) - - local lineCount = textBounds.Y / textSize - local lineHeightAbsolute = textSize * lineHeight - - return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize)) -end - local Listing = Roact.Component:extend("Listing") function Listing:init() @@ -82,8 +74,8 @@ function Listing:render() }, { Name = e("TextLabel", { Text = self.props.name, - Font = Enum.Font.GothamBold, - TextSize = 17, + FontFace = theme.Font.Bold, + TextSize = theme.TextSize.Medium, TextColor3 = theme.Settings.Setting.NameColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, @@ -96,21 +88,22 @@ function Listing:render() Description = e("TextLabel", { Text = self.props.description, - Font = Enum.Font.Gotham, + FontFace = theme.Font.Thin, LineHeight = 1.2, - TextSize = 14, + TextSize = theme.TextSize.Body, TextColor3 = theme.Settings.Setting.DescriptionColor, TextXAlignment = Enum.TextXAlignment.Left, TextTransparency = self.props.transparency, TextWrapped = true, Size = self.containerSize:map(function(value) - local textBounds = getTextBounds( + local textBounds = getTextBoundsAsync( self.props.description, - 14, - Enum.Font.Gotham, - 1.2, - Vector2.new(value.X - 40, math.huge) + theme.Font.Thin, + theme.TextSize.Body, + value.X - 40, + false, + 1.2 ) return UDim2.new(1, -40, 0, textBounds.Y) end), diff --git a/plugin/src/App/StatusPages/Permissions/init.lua b/plugin/src/App/StatusPages/Permissions/init.lua index c895e401..f3117e8f 100644 --- a/plugin/src/App/StatusPages/Permissions/init.lua +++ b/plugin/src/App/StatusPages/Permissions/init.lua @@ -46,8 +46,8 @@ local function Navbar(props) Text = e("TextLabel", { Text = "Permissions", - Font = Enum.Font.Gotham, - TextSize = 18, + FontFace = theme.Font.Thin, + TextSize = theme.TextSize.Large, TextColor3 = theme.TextColor, TextTransparency = props.transparency, @@ -115,8 +115,8 @@ function PermissionsPage:render() if next(sources) == nil then sources.noSources = e("TextLabel", { Text = "No third-party plugins have been granted permissions.", - Font = Enum.Font.Gotham, - TextSize = 18, + FontFace = theme.Font.Thin, + TextSize = theme.TextSize.Large, TextColor3 = theme.Setting.DescriptionColor, TextTransparency = self.props.transparency, TextWrapped = true, diff --git a/plugin/src/App/StatusPages/Settings/Setting.lua b/plugin/src/App/StatusPages/Settings/Setting.lua index 737b5be2..47e7596b 100644 --- a/plugin/src/App/StatusPages/Settings/Setting.lua +++ b/plugin/src/App/StatusPages/Settings/Setting.lua @@ -30,21 +30,6 @@ local TAG_TYPES = { }, } -local function getTextBoundsWithLineHeight( - text: string, - font: Font, - textSize: number, - width: number, - lineHeight: number -) - local textBounds = getTextBoundsAsync(text, font, textSize, width) - - local lineCount = math.ceil(textBounds.Y / textSize) - local lineHeightAbsolute = textSize * lineHeight - - return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize)) -end - local function getThemeColorFromPath(theme, path) local color = theme for _, key in path do @@ -205,11 +190,12 @@ function Setting:render() inputSize = self.inputSize, }):map(function(values) local offset = values.inputSize.X + 5 - local textBounds = getTextBoundsWithLineHeight( + local textBounds = getTextBoundsAsync( self.props.description, theme.Font.Main, theme.TextSize.Body, values.containerSize.X - offset, + true, 1.2 ) return UDim2.new(1, -offset, 0, textBounds.Y) diff --git a/plugin/src/App/getTextBoundsAsync.lua b/plugin/src/App/getTextBoundsAsync.lua index 2813903e..de69d305 100644 --- a/plugin/src/App/getTextBoundsAsync.lua +++ b/plugin/src/App/getTextBoundsAsync.lua @@ -12,7 +12,8 @@ local function getTextBoundsAsync( font: Font, textSize: number, width: number, - richText: boolean? + richText: boolean?, + lineHeight: number? ): Vector2 if type(text) ~= "string" then Log.warn(`Invalid text. Expected string, received {type(text)} instead`) @@ -35,6 +36,13 @@ local function getTextBoundsAsync( return Vector2.zero end + if lineHeight and type(lineHeight) == "number" then + local lineCount = math.ceil(bounds.Y / textSize) + local lineHeightAbsolute = textSize * lineHeight + + return Vector2.new(bounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize)) + end + return bounds end