diff --git a/src/components/ThemeSettings/ThemesTab.tsx b/src/components/ThemeSettings/ThemesTab.tsx index 366c23878..91868e36d 100644 --- a/src/components/ThemeSettings/ThemesTab.tsx +++ b/src/components/ThemeSettings/ThemesTab.tsx @@ -22,6 +22,7 @@ import { Settings, useSettings } from "@api/Settings"; import { classNameFactory } from "@api/Styles"; import { ErrorCard } from "@components/ErrorCard"; import { Flex } from "@components/Flex"; +import { CogWheel } from "@components/Icons"; import { Link } from "@components/Link"; import { AddonCard } from "@components/VencordSettings/AddonCard"; import { SettingsTab, wrapTab } from "@components/VencordSettings/shared"; @@ -52,7 +53,6 @@ type FileInput = ComponentType<{ const InviteActions = findByPropsLazy("resolveInvite"); const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999"); -const CogWheel = findByCodeLazy("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"); const FileInput: FileInput = findByCodeLazy("activateUploadDialogue="); const TextAreaProps = findLazy(m => typeof m.textarea === "string"); diff --git a/src/components/ThemeSettings/components/SettingColorComponent.tsx b/src/components/ThemeSettings/components/SettingColorComponent.tsx index bec185e44..9c300e7f6 100644 --- a/src/components/ThemeSettings/components/SettingColorComponent.tsx +++ b/src/components/ThemeSettings/components/SettingColorComponent.tsx @@ -24,7 +24,15 @@ const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType="); const cl = classNameFactory("vc-usercss-settings-color-"); -const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]'); +// const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]'); + +function EditPencil({ className, color }) { + return ( + + + + ); +} function ColorPicker(props: ColorPickerProps) { const [color, setColor] = useState(props.value); @@ -73,12 +81,14 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) { return ( - {label} - +
+ {label} + +
); } diff --git a/src/components/ThemeSettings/components/colorStyles.css b/src/components/ThemeSettings/components/colorStyles.css index 53a88e959..887e3f713 100644 --- a/src/components/ThemeSettings/components/colorStyles.css +++ b/src/components/ThemeSettings/components/colorStyles.css @@ -18,3 +18,27 @@ width: 14px; height: 14px; } + +.vc-usercss-settings-color-swatch-row { + display: flex; + flex-direction: row; + width: 100%; + align-items: center; +} + +.vc-usercss-settings-color-swatch-row > span { + display: block; + flex: 1; + overflow: hidden; + margin-top: 0; + margin-bottom: 0; + color: var(--header-primary); + line-height: 24px; + font-size: 16px; + font-weight: 500; + word-wrap: break-word; +} + +.vc-usercss-settings-color-swatch-row > .vc-usercss-settings-color-swatch { + flex: 0 0 auto; +}