Redesign settings UI in plugin (#886)

plugin/src/App/StatusPages/Settings/Setting.lua

@@ -13,10 +13,23 @@ local Theme = require(Plugin.App.Theme)
 local Checkbox = require(Plugin.App.Components.Checkbox)
 local Dropdown = require(Plugin.App.Components.Dropdown)
 local IconButton = require(Plugin.App.Components.IconButton)
+local Tag = require(Plugin.App.Components.Tag)
 
 local e = Roact.createElement
 
 local DIVIDER_FADE_SIZE = 0.1
+local TAG_TYPES = {
+	unstable = {
+		text = "UNSTABLE",
+		icon = Assets.Images.Icons.Warning,
+		color = { "Settings", "Setting", "UnstableColor" },
+	},
+	debug = {
+		text = "DEBUG",
+		icon = Assets.Images.Icons.Debug,
+		color = { "Settings", "Setting", "DebugColor" },
+	},
+}
 
 local function getTextBounds(text, textSize, font, lineHeight, bounds)
 	local textBounds = TextService:GetTextSize(text, textSize, font, bounds)
@@ -27,6 +40,17 @@ local function getTextBounds(text, textSize, font, lineHeight, bounds)
 	return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize))
 end
 
+local function getThemeColorFromPath(theme, path)
+	local color = theme
+	for _, key in path do
+		if color[key] == nil then
+			return theme.BrandColor
+		end
+		color = color[key]
+	end
+	return color
+end
+
 local Setting = Roact.Component:extend("Setting")
 
 function Setting:init()
@@ -51,11 +75,11 @@ end
 
 function Setting:render()
 	return Theme.with(function(theme)
-		theme = theme.Settings
+		local settingsTheme = theme.Settings
 
 		return e("Frame", {
 			Size = self.contentSize:map(function(value)
-				return UDim2.new(1, 0, 0, 20 + value.Y + 20)
+				return UDim2.new(1, 0, 0, value.Y + 20)
 			end),
 			LayoutOrder = self.props.layoutOrder,
 			ZIndex = -self.props.layoutOrder,
@@ -106,7 +130,7 @@ function Setting:render()
 					then e(IconButton, {
 						icon = Assets.Images.Icons.Reset,
 						iconSize = 24,
-						color = theme.BackButtonColor,
+						color = settingsTheme.BackButtonColor,
 						transparency = self.props.transparency,
 						visible = self.props.showReset,
 						layoutOrder = -1,
@@ -120,37 +144,49 @@ function Setting:render()
 				Size = UDim2.new(1, 0, 1, 0),
 				BackgroundTransparency = 1,
 			}, {
-				Name = e("TextLabel", {
-					Text = (
-						if self.props.experimental
-							then '<font color="#FF8E3C">⚠ </font>'
-							elseif
-								self.props.developerDebug
-							then '<font family="rbxasset://fonts/families/Guru.json" color="#35B5FF">⚑ </font>' -- Guru is the only font with the flag emoji
-							else ""
-					) .. self.props.name,
-					Font = Enum.Font.GothamBold,
-					TextSize = 17,
-					TextColor3 = theme.Setting.NameColor,
-					TextXAlignment = Enum.TextXAlignment.Left,
-					TextTransparency = self.props.transparency,
-					RichText = true,
-
-					Size = UDim2.new(1, 0, 0, 17),
-
-					LayoutOrder = 1,
+				Heading = e("Frame", {
+					Size = UDim2.new(1, 0, 0, 16),
 					BackgroundTransparency = 1,
+				}, {
+					Layout = e("UIListLayout", {
+						VerticalAlignment = Enum.VerticalAlignment.Center,
+						FillDirection = Enum.FillDirection.Horizontal,
+						SortOrder = Enum.SortOrder.LayoutOrder,
+						Padding = UDim.new(0, 5),
+					}),
+					Tag = if self.props.tag and TAG_TYPES[self.props.tag]
+						then e(Tag, {
+							layoutOrder = 1,
+							transparency = self.props.transparency,
+							text = TAG_TYPES[self.props.tag].text,
+							icon = TAG_TYPES[self.props.tag].icon,
+							color = getThemeColorFromPath(theme, TAG_TYPES[self.props.tag].color),
+						})
+						else nil,
+					Name = e("TextLabel", {
+						Text = self.props.name,
+						Font = Enum.Font.GothamBold,
+						TextSize = 16,
+						TextColor3 = if self.props.tag and TAG_TYPES[self.props.tag]
+							then getThemeColorFromPath(theme, TAG_TYPES[self.props.tag].color)
+							else settingsTheme.Setting.NameColor,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextTransparency = self.props.transparency,
+						RichText = true,
+
+						Size = UDim2.new(1, 0, 0, 16),
+
+						LayoutOrder = 2,
+						BackgroundTransparency = 1,
+					}),
 				}),
 
 				Description = e("TextLabel", {
-					Text = (if self.props.experimental
-						then '<font color="#FF8E3C">[Experimental] </font>'
-						elseif self.props.developerDebug then '<font color="#35B5FF">[Dev Debug] </font>'
-						else "") .. self.props.description,
+					Text = self.props.description,
 					Font = Enum.Font.Gotham,
 					LineHeight = 1.2,
 					TextSize = 14,
-					TextColor3 = theme.Setting.DescriptionColor,
+					TextColor3 = settingsTheme.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 					TextWrapped = true,
@@ -160,11 +196,9 @@ function Setting:render()
 						containerSize = self.containerSize,
 						inputSize = self.inputSize,
 					}):map(function(values)
-						local desc = (if self.props.experimental then "[Experimental] " else "")
-							.. self.props.description
 						local offset = values.inputSize.X + 5
 						local textBounds = getTextBounds(
-							desc,
+							self.props.description,
 							14,
 							Enum.Font.Gotham,
 							1.2,
@@ -173,7 +207,7 @@ function Setting:render()
 						return UDim2.new(1, -offset, 0, textBounds.Y)
 					end),
 
-					LayoutOrder = 2,
+					LayoutOrder = 3,
 					BackgroundTransparency = 1,
 				}),
 
@@ -181,21 +215,16 @@ function Setting:render()
 					VerticalAlignment = Enum.VerticalAlignment.Center,
 					FillDirection = Enum.FillDirection.Vertical,
 					SortOrder = Enum.SortOrder.LayoutOrder,
-					Padding = UDim.new(0, 6),
+					Padding = UDim.new(0, 5),
 
 					[Roact.Change.AbsoluteContentSize] = function(object)
 						self.setContentSize(object.AbsoluteContentSize)
 					end,
 				}),
-
-				Padding = e("UIPadding", {
-					PaddingTop = UDim.new(0, 20),
-					PaddingBottom = UDim.new(0, 20),
-				}),
 			}),
 
 			Divider = e("Frame", {
-				BackgroundColor3 = theme.DividerColor,
+				BackgroundColor3 = settingsTheme.DividerColor,
 				BackgroundTransparency = self.props.transparency,
 				Size = UDim2.new(1, 0, 0, 1),
 				BorderSizePixel = 0,