HTML auto direction for specific textual content (#286)

src/Pages/ProfilePage.tsx

@@ -150,10 +150,10 @@ export default function ProfilePage() {
 
   function bio() {
     return (
-      aboutText.length > 0 && (
-        <>
-          <div className="details">{about}</div>
-        </>
+      aboutText.length && (
+        <div dir="auto" className="details">
+          {about}
+        </div>
       )
     );
   }

src/Pages/new/DiscoverFollows.tsx

@@ -13,7 +13,7 @@ export default function DiscoverFollows() {
   }, []);
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress"></div>
       </div>
@@ -26,7 +26,7 @@ export default function DiscoverFollows() {
       <h3>
         <FormattedMessage {...messages.PopularAccounts} />
       </h3>
-      {sortedReccomends.length > 0 && <FollowListBase pubkeys={sortedReccomends} />}
+      <div dir="ltr">{sortedReccomends.length > 0 && <FollowListBase pubkeys={sortedReccomends} />}</div>
     </div>
   );
 }

src/Pages/new/GetVerified.tsx

@@ -24,7 +24,7 @@ export default function GetVerified() {
   };
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress progress-third"></div>
       </div>

src/Pages/new/ImportFollows.tsx

@@ -49,7 +49,7 @@ export default function ImportFollows() {
   }
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress progress-last"></div>
       </div>
@@ -84,16 +84,18 @@ export default function ImportFollows() {
         </AsyncButton>
       </div>
       {error.length > 0 && <b className="error">{error}</b>}
-      {sortedTwitterFollows.length > 0 && (
-        <FollowListBase
-          title={
-            <h2>
-              <FormattedMessage {...messages.FollowsOnNostr} values={{ username: twitterUsername }} />
-            </h2>
-          }
-          pubkeys={sortedTwitterFollows}
-        />
-      )}
+      <div dir="ltr">
+        {sortedTwitterFollows.length > 0 && (
+          <FollowListBase
+            title={
+              <h2>
+                <FormattedMessage {...messages.FollowsOnNostr} values={{ username: twitterUsername }} />
+              </h2>
+            }
+            pubkeys={sortedTwitterFollows}
+          />
+        )}
+      </div>
 
       <div className="next-actions">
         <button className="secondary" type="button" onClick={() => navigate("/new/discover")}>

src/Pages/new/NewUserFlow.tsx

@@ -71,7 +71,7 @@ export default function NewUserFlow() {
   const navigate = useNavigate();
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress progress-first"></div>
       </div>

src/Pages/new/NewUsername.tsx

@@ -22,7 +22,7 @@ export default function NewUserName() {
   };
 
   return (
-    <div className="main-content new-user">
+    <div className="main-content new-user" dir="auto">
       <div className="progress-bar">
         <div className="progress progress-second"></div>
       </div>