fix(color): fix color classname

NAS-Service · Sep 10, 2022 · 4057459 · 4057459
1 parent a09ad67
commit 4057459
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/libs/shared/ui/src/lib/components/chat/chat-settings/tabs-message.tsx b/libs/shared/ui/src/lib/components/chat/chat-settings/tabs-message.tsx
@@ -1,11 +1,9 @@
 import { useState } from 'react';
-import { useState } from 'react';
 import { Control, Controller } from 'react-hook-form';
 import Accordion from '../../accordion/accordion';
 import AccordionItem from '../../accordion/accordion-item';
 import Color from '../../forms/color/color';
-import FontSelect, { fontVariants }, { fontVariants } from '../../forms/font-select/font-select';
-import Select from '../../forms/select/select';
+import FontSelect, { fontVariants } from '../../forms/font-select/font-select';
 import Select from '../../forms/select/select';
 import Slider from '../../forms/slider/slider';
 import Spacing from '../../forms/spacing/spacing';
@@ -18,14 +16,7 @@ export interface TabsGeneralProps {
 
 function TabsMessage(props: TabsGeneralProps) {
   const { control } = props;
-  const [fontVariants, setFontVariants] = useState<fontVariants[]>([
-    { label: 'Thin', value: '100' },
-    { label: 'Light', value: '300' },
-    { label: 'Regular', value: 'regular' },
-    { label: 'Medium', value: '500' },
-    { label: 'Bold', value: '700' },
-    { label: 'Black', value: '900' },
-  ]);
+
   const [fontVariants, setFontVariants] = useState<fontVariants[]>([
     { label: 'Thin', value: '100' },
     { label: 'Light', value: '300' },
@@ -57,7 +48,10 @@ function TabsMessage(props: TabsGeneralProps) {
               <FontSelect
                 label="Font (with Google Fonts)"
                 className="mb-3"
-                onChange={(value) => onChange(value)}
+                onChange={(fontName, variants) => {
+                  setFontVariants(variants);
+                  onChange(fontName);
+                }}
                 defaultValue={{ value: value, label: value }}
               />
             )}

diff --git a/libs/shared/ui/src/lib/components/chat/chat-settings/tabs-name.tsx b/libs/shared/ui/src/lib/components/chat/chat-settings/tabs-name.tsx
@@ -148,7 +148,7 @@ function TabsName(props: TabsGeneralProps) {
               <Color
                 label="Text color"
                 onColorChange={onChange}
-                className="mb-3"
+                containerClassName="mb-3"
                 value={value}
               />
             )}
@@ -161,7 +161,7 @@ function TabsName(props: TabsGeneralProps) {
               <Color
                 label="Background color"
                 onColorChange={onChange}
-                className="mb-3"
+                containerClassName="mb-3"
                 value={value}
               />
             )}
@@ -174,7 +174,6 @@ function TabsName(props: TabsGeneralProps) {
               <Color
                 label="Border color"
                 onColorChange={onChange}
-                className="mb-3"
                 value={value}
               />
             )}

diff --git a/libs/shared/ui/src/lib/components/forms/color/color.tsx b/libs/shared/ui/src/lib/components/forms/color/color.tsx
@@ -47,7 +47,7 @@ export function Color(props: ColorProps) {
   };
 
   const onChangePickerValue = (value: string) => {
-    const newVal = value.substring(7) === "ff" ? value.slice(0,7) : value;
+    const newVal = value.substring(7) === 'ff' ? value.slice(0, 7) : value;
     setVal(newVal);
     onColorChange && onColorChange(newVal);
   };
@@ -67,7 +67,7 @@ export function Color(props: ColorProps) {
   };
 
   return (
-    <label className={`relative ${containerClassName}`}>
+    <label className={`relative block ${containerClassName}`}>
       {label && <Label className={labelClassName}>{label}</Label>}
       <div
         className={`h-10 w-full border-2 border-dark-300 text-sm text-white flex items-center gap-2 bg-dark-500 rounded-md px-4 outline-none focus:border-primary-300 transition ${stateClassName[state]} ${haveValueClassName} ${disabledClassName} ${inputProps.className}`}
@@ -95,7 +95,9 @@ export function Color(props: ColorProps) {
           type="text"
           className="flex grow bg-transparent border-none outline-none"
           maxLength={9}
-          value={val.includes('#') ? val.toUpperCase() : `#${val.toUpperCase()}`}
+          value={
+            val.includes('#') ? val.toUpperCase() : `#${val.toUpperCase()}`
+          }
           onChange={(e) => onChangeTextValue(e)}
         />
         <div onClick={() => setShowPicker(true)}>