Propeties StyleCheck + Temporal use Current Time stamp state is shared between all temporal FIXED

src/components/process/processStepTwo/tagProperties/TagProperties.tsx

@@ -143,6 +143,21 @@ const TagProperties: React.FC<DroppedItemProps> = (
         setDropDownToggle(null)
     }
 
+    {/* Font */ }
+    const smeFonts = [
+        "Arial",
+        "Helvetica",
+        "Times New Roman",
+        "Georgia",
+        "Verdana",
+        "Tahoma",
+        "Trebuchet MS",
+        "Courier New",
+        "Lucida Console",
+        "Impact",
+    ];
+
+
     // useEffect(() => {
     //     if (selectedTag.label == "temporal" && !("dateFormat" in selectedTag)) {
     //         handlePropertyChange("dateFormat", TEMPORAL.DATE);
@@ -360,7 +375,11 @@ const TagProperties: React.FC<DroppedItemProps> = (
 
                     {
                         selectedTag.type.toLowerCase() == TagsTypes.TEMPORAL &&
-                        <CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />
+                        <CurrTimeStampAttr
+                            type={selectedTag.type}
+                            currentTimeStamp={selectedTag.currentTimeStamp ?? false}
+                            handlePropertyChange={handlePropertyChange}
+                        />
                     }
 
                     <LabelAttr label={selectedTag.label ?? ""} handlePropertyChange={handlePropertyChange} />
@@ -451,66 +470,104 @@ const TagProperties: React.FC<DroppedItemProps> = (
                                     className="block mb-2 font-medium">Styles</label>
                                 <IoIosArrowDown className={`${styleOpen ? "rotate-[-90deg]" : ""} transition-all`} />
                             </div>
-                            {
+                            {styleOpen && (
-                                styleOpen && <>
+                                <div className="rounded-sm border border-slate-200 bg-white p-4 shadow-sm">
-                                    {/* Font */}
+                                    <div className="flex flex-wrap items-center gap-3">
-                                    <div className="mb-2">
+                                        {/* Font */}
-                                        <label className="mr-2">Font</label>
+                                        <div className="flex flex-col min-w-[140px] flex-1">
-                                        <input
+                                            <label className="text-xs font-medium text-slate-500 mb-1">
-                                            type="text"
+                                                Font
-                                            placeholder="e.g. Arial"
+                                            </label>
-                                            className="outline-none border-1 rounded px-2 py-1 border-slate-200"
+                                            <select
-                                            value={styles.font}
+                                                className="h-10 rounded-sm border border-slate-300 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                            onChange={(e) => handleStyleChange("font", e.target.value)}
+                                                value={styles.font}
-                                        />
+                                                onChange={(e) => handleStyleChange("font", e.target.value)}
-                                    </div>
+                                            >
+                                                {smeFonts.map((font) => (
+                                                    <option key={font} value={font}>
+                                                        {font}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        </div>
 
-                                    {/* Text Size */}
+                                        {/* Font Size */}
-                                    <div className="mb-2">
+                                        <div className="flex flex-col w-24">
-                                        <label className="mr-2">Text Size</label>
+                                            <label className="text-xs font-medium text-slate-500 mb-1">
-                                        <input
+                                                Size
-                                            // value={}
+                                            </label>
-                                            type="number"
+                                            <select
-                                            className="outline-none border-1 rounded px-2 py-1 border-slate-200"
+                                                className="h-10 rounded-sm border border-slate-300 px-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                            value={styles.textSize}
+                                                value={styles.textSize}
-                                            onChange={(e) =>
-                                                handleStyleChange("textSize", parseInt(e.target.value, 10) || 0)
-                                            }
-                                        />
-                                    </div>
-
-                                    {/* Color */}
-                                    <div className="mb-2">
-                                        <label className="mr-2">Color</label>
-                                        <input
-                                            type="color"
-                                            className="outline-none border-1 rounded px-2 py-1 border-slate-200 w-10 h-8"
-                                            value={styles.color}
-                                            onChange={(e) => handleStyleChange("color", e.target.value)}
-                                        />
-                                    </div>
-
-                                    {/* Toggles for Bold, Italic, Underline */}
-                                    <div className="flex gap-4 items-center mt-2">
-                                        <label className="flex gap-1 items-center">
-                                            <input type="checkbox" checked={styles.bold}
-                                                onChange={(e) => handleStyleChange("bold", e.target.checked)} />
-                                            Bold
-                                        </label>
-                                        <label className="flex gap-1 items-center">
-                                            <input type="checkbox" checked={styles.italic} onChange={(e) => handleStyleChange("italic", e.target.checked)} />
-                                            Italic
-                                        </label>
-                                        <label className="flex gap-1 items-center">
-                                            <input type="checkbox" checked={styles.underline}
                                                 onChange={(e) =>
-                                                    handleStyleChange("underline", e.target.checked)
+                                                    handleStyleChange("textSize", Number(e.target.value))
-                                                } />
+                                                }
-                                            Underline
+                                            >
-                                        </label>
+                                                {[7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 38, 72].map(
+                                                    (size) => (
+                                                        <option key={size} value={size}>
+                                                            {size}
+                                                        </option>
+                                                    )
+                                                )}
+                                            </select>
+                                        </div>
+
+                                        {/* Color */}
+                                        <div className="flex flex-col">
+                                            <label className="text-xs font-medium text-slate-500 mb-1">
+                                                Color
+                                            </label>
+                                            <input
+                                                type="color"
+                                                className="h-10 w-14 cursor-pointer rounded-sm border border-slate-300 bg-white"
+                                                value={styles.color}
+                                                onChange={(e) =>
+                                                    handleStyleChange("color", e.target.value)
+                                                }
+                                            />
+                                        </div>
                                     </div>
-                                </>
+
-                            }
+                                    {/* Style Buttons */}
+                                    <div className="mt-4 flex flex-wrap gap-2">
+                                        <button
+                                            type="button"
+                                            onClick={() => handleStyleChange("bold", !styles.bold)}
+                                            className={`h-10 w-10 rounded-sm border transition ${styles.bold
+                                                ? "bg-blue-600 text-white border-blue-600"
+                                                : "bg-white border-slate-300 hover:bg-slate-100"
+                                                }`}
+                                        >
+                                            <strong>B</strong>
+                                        </button>
+
+                                        <button
+                                            type="button"
+                                            onClick={() => handleStyleChange("italic", !styles.italic)}
+                                            className={`h-10 w-10 rounded-sm border transition ${styles.italic
+                                                ? "bg-blue-600 text-white border-blue-600"
+                                                : "bg-white border-slate-300 hover:bg-slate-100"
+                                                }`}
+                                        >
+                                            <em>I</em>
+                                        </button>
+
+                                        <button
+                                            type="button"
+                                            onClick={() =>
+                                                handleStyleChange("underline", !styles.underline)
+                                            }
+                                            className={`h-10 w-10 rounded-sm border transition ${styles.underline
+                                                ? "bg-blue-600 text-white border-blue-600"
+                                                : "bg-white border-slate-300 hover:bg-slate-100"
+                                                }`}
+                                        >
+                                            <span className="underline">U</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
                         </div>
                     }
 

src/components/process/processStepTwo/tagProperties/attributes/CurrTimeStampAttr.tsx

@@ -1,37 +1,42 @@
-import React, { useState } from 'react'
-
 interface CurrTimeStampAttrInt {
     type: string;
-    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
+    currentTimeStamp?: boolean;
+    handlePropertyChange: (
+        changeTo: string,
+        changeWith: string | boolean | number
+    ) => void;
 }
 
-const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({ type, handlePropertyChange}) => {
+const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({
-
+    type,
-    const [isCurrentTimeStamp, setIsCurrentTimeStamp] = useState<boolean>(true);
+    currentTimeStamp = false,
-
+    handlePropertyChange,
+}) => {
     const handleIsCurrentTimeStamp = (checked: boolean) => {
-        if (type.toLowerCase() == "temporal") {
+        if (type.toLowerCase() === "temporal") {
-            setIsCurrentTimeStamp(checked)
             handlePropertyChange("currentTimeStamp", checked);
         }
-    }
+    };
 
     return (
-        <div className="flex justify-between items-center border-1 p-1.5 rounded-sm border-slate-200">
+        <div className="flex justify-between items-center border p-1.5 rounded-sm border-slate-200">
             <label
-                className="text-slate-600 transitions-all duration-150 font-medium"
+                className="text-slate-600 font-medium"
                 htmlFor="use_current_timestamp"
             >
                 Use Current Timestamp
             </label>
+
             <input
-                checked={isCurrentTimeStamp ? isCurrentTimeStamp : false}
-                onChange={(e) => handleIsCurrentTimeStamp(e.target.checked)}
                 id="use_current_timestamp"
                 type="checkbox"
+                checked={currentTimeStamp}
+                onChange={(e) =>
+                    handleIsCurrentTimeStamp(e.target.checked)
+                }
             />
         </div>
-    )
+    );
-}
+};
 
-export default CurrTimeStampAttr
+export default CurrTimeStampAttr;