Profile: use ColorInput for background

Fixes #3384

pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx

@@ -11,6 +11,7 @@ import {
 import GlobalApi from "~/logic/api/global";
 import { S3State } from "~/types";
 import { ImageInput } from "~/views/components/ImageInput";
+import {ColorInput} from "~/views/components/ColorInput";
 
 export type BgType = "none" | "url" | "color";
 
@@ -48,7 +49,7 @@ export function BackgroundPicker({
       <Row {...rowSpace}>
         <Radio label="Color" id="color" {...radioProps} />
         {bgType === "color" && (
-          <Input ml={4} type="text" label="Color" id="bgColor" />
+          <ColorInput id="bgColor" label="Color" /> 
         )}
       </Row>
       <Radio label="None" id="none" {...radioProps} />

pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx

@@ -9,6 +9,7 @@ import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 
 import GlobalApi from '~/logic/api/global';
+import { uxToHex } from '~/logic/lib/util';
 import { S3State, BackgroundConfig } from '~/types';
 import { BackgroundPicker, BgType } from './BackgroundPicker';
 
@@ -17,7 +18,7 @@ const formSchema = Yup.object().shape({
     .oneOf(['none', 'color', 'url'], 'invalid')
     .required('Required'),
   bgUrl: Yup.string().url(),
-  bgColor: Yup.string().matches(/#([A-F]|[a-f]|[0-9]){6}/, 'Invalid color'),
+  bgColor: Yup.string(),
   avatars: Yup.boolean(),
   nicknames: Yup.boolean()
 });
@@ -57,7 +58,7 @@ export default function DisplayForm(props: DisplayFormProps) {
       initialValues={
         {
           bgType,
-          bgColor,
+          bgColor: bgColor || '',
           bgUrl,
           avatars: hideAvatars,
           nicknames: hideNicknames
@@ -66,7 +67,7 @@ export default function DisplayForm(props: DisplayFormProps) {
       onSubmit={(values, actions) => {
         const bgConfig: BackgroundConfig =
           values.bgType === 'color'
-            ? { type: 'color', color: values.bgColor || '' }
+            ? { type: 'color', color: `#${uxToHex(values.bgColor || '0x0')}` }
             : values.bgType === 'url'
             ? { type: 'url', url: values.bgUrl || '' }
             : undefined;

pkg/interface/src/views/components/ColorInput.tsx

@@ -15,7 +15,7 @@ import { uxToHex, hexToUx } from "~/logic/lib/util";
 type ColorInputProps = Parameters<typeof Col>[0] & {
   id: string;
   label: string;
-  disabled: boolean;
+  disabled?: boolean;
 };
 
 export function ColorInput(props: ColorInputProps) {
@@ -36,9 +36,10 @@ export function ColorInput(props: ColorInputProps) {
     const result = hexToUx(newValue);
     setValue(result);
   };
+  
 
   return (
-    <Box display="flex" flexDirection="column" {...props}>
+    <Box display="flex" flexDirection="column" {...rest}>
       <Label htmlFor={id}>{label}</Label>
       {caption ? (
         <Label mt="2" gray>