From 4325dcf02e9b3bc3bb3c0b37e2c4bdb9831b3c9a Mon Sep 17 00:00:00 2001 From: Lewis Crichton Date: Mon, 25 Sep 2023 18:27:49 +0100 Subject: [PATCH] feat: make the color picker look prettier based on switch --- src/components/ThemeSettings/ThemesTab.tsx | 2 +- .../components/SettingColorComponent.tsx | 24 +++++++++++++------ .../ThemeSettings/components/colorStyles.css | 24 +++++++++++++++++++ 3 files changed, 42 insertions(+), 8 deletions(-) diff --git a/src/components/ThemeSettings/ThemesTab.tsx b/src/components/ThemeSettings/ThemesTab.tsx index 366c2387..91868e36 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 bec185e4..9c300e7f 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 53a88e95..887e3f71 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; +}