fix #4

package.json

@@ -16,7 +16,7 @@
     "moment-hijri": "^2.1.2",
     "moment-jalaali": "^0.10.0",
     "persian-rex": "^2.3.3",
-    "plasmo": "0.84.2",
+    "plasmo": "0.84.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.12.0",
@@ -28,5 +28,17 @@
     "@types/react-dom": "18.2.18",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4"
+  },
+  "manifest": {
+    "web_accessible_resources": [
+      {
+        "resources": [
+          "Vazirmatn.ttf"      
+        ],
+        "matches": [
+          "https://x.com/*"
+        ]
+      }
+    ]
   }
-}
+}

src/contents/ProfileNote.tsx

@@ -65,7 +65,7 @@ const ProfileNote = () => {
   const isNoteChanged = note !== originalNote;
 
   return (
-    <div className="relative w-full">
+    <div className="relative w-full font-[Vazirmatn]">
       <textarea
         className="w-full shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] p-3 rounded-md mt-2"
         style={{ direction: isPersian ? "rtl" : "ltr", border: "none" }}
@@ -78,18 +78,18 @@ const ProfileNote = () => {
       {isNoteChanged && (
         <>
           <button
-            className={`mt-2 px-4 py-1 bg-[#299cee] text-white rounded ${isPersian ? 'mr-auto' : 'ml-auto'} block`}
+            className={`mt-2 px-4 pt-1 bg-[#299cee] text-white rounded ${isPersian ? 'mr-auto' : 'ml-auto'} block`}
             onClick={saveNote}
           >
             Save
           </button>
-          <div className={`absolute bottom-2 ${isPersian ? 'right-2' : 'left-2'} text-xs px-2 py-1`}>
+          <div className={`absolute bottom-2 ${isPersian ? 'right-0' : 'left-0'} text-xs px-2 py-1`}>
             {remainingLength}
           </div>
         </>
       )}
       {showToast && (
-        <div className={`absolute bottom-2 ${isPersian ? 'left-2' : 'right-2'} text-xs px-2 py-1`}>
+        <div className={`absolute bottom-2 ${isPersian ? 'left-0' : 'right-0'} text-xs px-2 py-1`}>
           Saved
         </div>
       )}

src/contents/ProfileNoteAlert.tsx

@@ -24,8 +24,9 @@ const ProfileNoteAlert = ({anchor}) => {
   const [isPersian, setIsPersian] = useState(false);
 
   const username = anchor.element.querySelector('div[data-testid="User-Name"] > div:nth-child(2) > div > div').textContent.replace("@","");
-
+  
   useEffect(() => {
+
     utils.getProfileNote(username).then((value) => {
       if (typeof value === 'string' && value.trim() !== ''){
         setNote(value);
@@ -36,7 +37,7 @@ const ProfileNoteAlert = ({anchor}) => {
 
 
   return (
-    <span title={note} style={{ direction: isPersian ? "rtl" : "ltr", border: "none" }} className="font-bold text-sm">
+    <span title={note} style={{ direction: isPersian ? "rtl" : "ltr", border: "none", fontFamily:"Vazirmatn" }} className="font-light text-sm">
       {truncateString(note, 50)}
     </span>
   );

src/contents/index.ts

@@ -10,9 +10,26 @@ import {
 import * as utils from "~utils"
 
 export const config = {
-  matches: ["https://twitter.com/*", "https://x.com/*"]
+  matches: ["https://twitter.com/*", "https://x.com/*"],
 }
 
+// Create a style element
+var fa = document.createElement('style');
+fa.textContent = `
+    @font-face {
+        font-family: 'Vazirmatn';
+        src: url('${chrome.runtime.getURL('Vazirmatn.ttf')}') format('truetype');
+        font-weight: 100 900;;        
+    }
+    div[data-testid="tweetText"], [data-testid="UserDescription"] {
+        font-family: Vazirmatn, TwitterChirp, sans-serif !important;
+        font-weight: 400;
+    }
+`;
+
+// Append the style element to the document head
+document.head.appendChild(fa);
+
 const items = [
   //global
   {