update design setting

src/pages/settings/components/DesignSettings.tsx

@@ -70,11 +70,7 @@ const DesignSettings: FC = () => {
 
           <div className="mt-7">
             <div className="flex gap-2 items-center">
-              <Radio
+              <Radio isActive={backgroundType === "pattern"} value="pattern" onChange={(value) => setBackgroundType(value as BackgroundType)} />
-                isActive={backgroundType === "pattern"}
-                value="pattern"
-                onChange={(value) => setBackgroundType(value as BackgroundType)}
-              />
               <div className="text-sm">انتخاب پس زمینه</div>
             </div>
 
@@ -85,15 +81,9 @@ const DesignSettings: FC = () => {
                     key={pattern.id}
                     type="button"
                     onClick={() => setSelectedPatternId(pattern.id)}
-                    className={clx(
+                    className={clx("relative w-16 h-[139px] rounded-lg bg-white border overflow-hidden", selectedPatternId === pattern.id ? "border-black" : "border-border")}
-                      "relative w-16 h-[139px] rounded-lg bg-white border overflow-hidden",
-                      selectedPatternId === pattern.id ? "border-black" : "border-border",
-                    )}
                   >
-                    <div
+                    <div className="absolute inset-0" style={{ backgroundColor: appliedColor, opacity: PATTERN_BACKGROUND_OPACITY }} />
-                      className="absolute inset-0"
-                      style={{ backgroundColor: appliedColor, opacity: PATTERN_BACKGROUND_OPACITY }}
-                    />
                     <img src={pattern.image} alt={pattern.name} className="relative scale-200 w-full h-full object-cover" />
                   </button>
                 ))}
@@ -103,29 +93,17 @@ const DesignSettings: FC = () => {
 
           <div className="mt-7">
             <div className="flex gap-2 items-center">
-              <Radio
+              <Radio isActive={backgroundType === "custom"} value="custom" onChange={(value) => setBackgroundType(value as BackgroundType)} />
-                isActive={backgroundType === "custom"}
-                value="custom"
-                onChange={(value) => setBackgroundType(value as BackgroundType)}
-              />
               <div className="text-sm">تصویر پس زمینه دلخواه</div>
             </div>
 
             {backgroundType === "custom" && (
               <div className="mt-2">
                 {!customImagePreview ? (
-                  <div
+                  <div {...getRootProps()} className={clx(UPLOAD_BOX_CLASS, "flex flex-col items-center justify-center gap-3 cursor-pointer bg-white")}>
-                    {...getRootProps()}
-                    className={clx(
-                      UPLOAD_BOX_CLASS,
-                      "flex flex-col items-center justify-center gap-3 cursor-pointer bg-white",
-                    )}
-                  >
                     <input {...getInputProps()} />
                     <Gallery className="size-8" color="#8C90A3" />
-                    <div className="text-description text-xs text-center leading-5 px-4">
+                    <div className="text-description text-xs text-center leading-5 px-4">تصویر مورد نظر را آپلود کنید</div>
-                      تصویر مورد نظر را آپلود کنید
-                    </div>
                     <div className="flex items-center gap-1">
                       <DocumentUpload className="size-4" color="black" />
                       <div className="text-xs">آپلود</div>
@@ -143,12 +121,7 @@ const DesignSettings: FC = () => {
                           filter: `blur(${imageBlur * 0.2}px)`,
                         }}
                       />
-                      {overlayDarkness > 0 && (
+                      {overlayDarkness > 0 && <div className="absolute inset-0 bg-black pointer-events-none" style={{ opacity: overlayDarkness / 100 }} />}
-                        <div
-                          className="absolute inset-0 bg-black pointer-events-none"
-                          style={{ opacity: overlayDarkness / 100 }}
-                        />
-                      )}
                       <button
                         type="button"
                         onClick={handleRemoveImage}