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;
+}