From 31cde43278f6497aa72443b68f30c08ae1e09696 Mon Sep 17 00:00:00 2001
From: Ahmed Rowaihi <ahmedrowaihi1@gmail.com>
Date: Mon, 13 Feb 2023 08:52:32 +0300
Subject: [PATCH 1/4] HTML auto direction for specific textual content

---
 src/Element/Text.tsx      |  2 +-
 src/Element/Textarea.tsx  |  1 +
 src/Pages/ProfilePage.tsx | 12 +++++++-----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/Element/Text.tsx b/src/Element/Text.tsx
index a7ab2c4d..a460b674 100644
--- a/src/Element/Text.tsx
+++ b/src/Element/Text.tsx
@@ -128,7 +128,7 @@ export default function Text({ content, tags, creator, users }: TextProps) {
   function transformParagraph(frag: TextFragment) {
     const fragments = transformText(frag);
     if (fragments.every(f => typeof f === "string")) {
-      return <p>{fragments}</p>;
+      return <p dir="auto">{fragments}</p>;
     }
     return <>{fragments}</>;
   }
diff --git a/src/Element/Textarea.tsx b/src/Element/Textarea.tsx
index 7d5923e2..0c012758 100644
--- a/src/Element/Textarea.tsx
+++ b/src/Element/Textarea.tsx
@@ -72,6 +72,7 @@ const Textarea = (props: TextareaProps) => {
   return (
     // @ts-expect-error If anybody can figure out how to type this, please do
     <ReactTextareaAutocomplete
+      dir="auto"
       {...props}
       loadingComponent={() => <span>Loading...</span>}
       placeholder={formatMessage(messages.NotePlaceholder)}
diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx
index 26bce38f..a4a85ba5 100644
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@@ -1,5 +1,5 @@
 import "./ProfilePage.css";
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
@@ -150,10 +150,12 @@ export default function ProfilePage() {
 
   function bio() {
     return (
-      aboutText.length > 0 && (
-        <>
-          <div className="details">{about}</div>
-        </>
+      aboutText.length && (
+        <React.Fragment>
+          <div dir="auto" className="details">
+            {about}
+          </div>
+        </React.Fragment>
       )
     );
   }
-- 
2.45.2


From 24bf31342037e0547c94e7fbcfcf71dece8635ff Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 13 Feb 2023 11:10:53 +0100
Subject: [PATCH 2/4] fix: remove unneeded fragment

---
 src/Pages/ProfilePage.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx
index a4a85ba5..da2d5994 100644
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@@ -151,11 +151,9 @@ export default function ProfilePage() {
   function bio() {
     return (
       aboutText.length && (
-        <React.Fragment>
-          <div dir="auto" className="details">
-            {about}
-          </div>
-        </React.Fragment>
+        <div dir="auto" className="details">
+          {about}
+        </div>
       )
     );
   }
-- 
2.45.2


From 5d7481e1bb4609bd58524e635c38f0690668b0af Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 13 Feb 2023 11:28:29 +0100
Subject: [PATCH 3/4] fix: onboarding lang settings

---
 src/Element/Collapsed.tsx         | 26 ++++++++++----------------
 src/Pages/new/DiscoverFollows.tsx |  4 ++--
 src/Pages/new/GetVerified.tsx     |  2 +-
 src/Pages/new/ImportFollows.tsx   | 24 +++++++++++++-----------
 src/Pages/new/NewUserFlow.tsx     |  2 +-
 src/Pages/new/NewUsername.tsx     |  2 +-
 src/index.css                     |  8 ++++----
 7 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/Element/Collapsed.tsx b/src/Element/Collapsed.tsx
index c96202d7..04593766 100644
--- a/src/Element/Collapsed.tsx
+++ b/src/Element/Collapsed.tsx
@@ -22,19 +22,11 @@ const Collapsed = ({ text, children, collapsed, setCollapsed }: CollapsedProps)
 
 interface CollapsedIconProps {
   icon: ReactNode;
-  children: ReactNode;
   collapsed: boolean;
 }
 
-export const CollapsedIcon = ({ icon, children, collapsed }: CollapsedIconProps) => {
-  return collapsed ? (
-    <div className="collapsed">{icon}</div>
-  ) : (
-    <div className="uncollapsed">
-      {icon}
-      {children}
-    </div>
-  );
+export const CollapsedIcon = ({ icon, collapsed }: CollapsedIconProps) => {
+  return collapsed ? <div className="collapsed">{icon}</div> : <div className="uncollapsed">{icon}</div>;
 };
 
 interface CollapsedSectionProps {
@@ -50,12 +42,14 @@ export const CollapsedSection = ({ title, children }: CollapsedSectionProps) =>
     </div>
   );
   return (
-    <div className="collapsable-section">
-      <h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
-      <CollapsedIcon icon={icon} collapsed={collapsed}>
-        {children}
-      </CollapsedIcon>
-    </div>
+    <>
+      <div className="collapsable-section">
+        <h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
+        <CollapsedIcon icon={icon} collapsed={collapsed} />
+      </div>
+
+      {collapsed ? null : children}
+    </>
   );
 };
 
diff --git a/src/Pages/new/DiscoverFollows.tsx b/src/Pages/new/DiscoverFollows.tsx
index 9bd8993b..32c3d72f 100644
--- a/src/Pages/new/DiscoverFollows.tsx
+++ b/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>
   );
 }
diff --git a/src/Pages/new/GetVerified.tsx b/src/Pages/new/GetVerified.tsx
index 166be02a..1b68db13 100644
--- a/src/Pages/new/GetVerified.tsx
+++ b/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>
diff --git a/src/Pages/new/ImportFollows.tsx b/src/Pages/new/ImportFollows.tsx
index 94922cea..45d57bd3 100644
--- a/src/Pages/new/ImportFollows.tsx
+++ b/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")}>
diff --git a/src/Pages/new/NewUserFlow.tsx b/src/Pages/new/NewUserFlow.tsx
index 37d67c0c..b8ae70b0 100644
--- a/src/Pages/new/NewUserFlow.tsx
+++ b/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>
diff --git a/src/Pages/new/NewUsername.tsx b/src/Pages/new/NewUsername.tsx
index 0b512b88..7601f387 100644
--- a/src/Pages/new/NewUsername.tsx
+++ b/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>
diff --git a/src/index.css b/src/index.css
index d7a9ccf5..9efe3be6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -551,7 +551,10 @@ button.tall {
 }
 
 .collapsable-section {
-  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .collapsable-section h3,
@@ -560,9 +563,6 @@ button.tall {
 }
 
 .collapsable-section .collapse-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
   transition: transform 300ms ease-in-out;
 }
 
-- 
2.45.2


From 35e99409d7c0121ce69480ae0fc0c6f5b296c8ea Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 13 Feb 2023 11:29:46 +0100
Subject: [PATCH 4/4] remove import

---
 src/Pages/ProfilePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx
index da2d5994..8feab8ce 100644
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@@ -1,5 +1,5 @@
 import "./ProfilePage.css";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
-- 
2.45.2