From ad0ce41b2cdfb2d4748c453b7d508c04c9dc656a Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Fri, 22 Dec 2023 16:35:43 +0530
Subject: [PATCH 1/3] feat: make account settings and settings component
 responsive

---
 src/app/components/Setting/index.tsx      |  2 +-
 src/app/screens/Accounts/Detail/index.tsx | 42 +++++++++++------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/app/components/Setting/index.tsx b/src/app/components/Setting/index.tsx
index a0c3ed0fdd..4adab6f055 100644
--- a/src/app/components/Setting/index.tsx
+++ b/src/app/components/Setting/index.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 function Setting({ title, subtitle, children }: Props) {
   return (
-    <div className="py-4 flex justify-between items-center">
+    <div className="flex flex-col sm:flex-row justify-between items-center py-4">
       <div>
         <span className="text-black dark:text-white font-medium">{title}</span>
         <p className="text-gray-600 mr-1 dark:text-neutral-400 text-sm">
diff --git a/src/app/screens/Accounts/Detail/index.tsx b/src/app/screens/Accounts/Detail/index.tsx
index e0df33cead..03d54494a1 100644
--- a/src/app/screens/Accounts/Detail/index.tsx
+++ b/src/app/screens/Accounts/Detail/index.tsx
@@ -189,9 +189,9 @@ function AccountDetail() {
                 updatedAccount.name = accountName;
                 setAccount(updatedAccount);
               }}
-              className="flex justify-between items-end"
+              className="flex flex-col sm:flex-row justify-between items-center"
             >
-              <div className="w-7/12">
+              <div className="sm:w-7/12 w-full">
                 <TextField
                   id="name"
                   label={t("name.title")}
@@ -204,7 +204,7 @@ function AccountDetail() {
                 />
               </div>
               <div className="w-1/5 flex-none mx-4 d-none"></div>
-              <div className="w-1/5 flex-none">
+              <div className="flex-none sm:w-1/5 w-full pt-4 sm:pt-0">
                 <Button
                   type="submit"
                   label={tCommon("actions.save")}
@@ -217,8 +217,8 @@ function AccountDetail() {
             {account.connectorType == "lndhub" && (
               <>
                 <MenuDivider />
-                <div className="flex justify-between items-end">
-                  <div className="w-9/12">
+                <div className="flex flex-col sm:flex-row justify-between items-center">
+                  <div className="sm:w-9/12 w-full">
                     <p className="text-black dark:text-white font-medium">
                       {t("export.title")}
                     </p>
@@ -244,7 +244,7 @@ function AccountDetail() {
                     </p>
                   </div>
 
-                  <div className="w-1/5 flex-none">
+                  <div className="flex-none sm:w-1/5 w-full pt-4 sm:pt-0">
                     {exportAccount && account.connectorType === "lndhub" && (
                       <>
                         <Button
@@ -316,8 +316,8 @@ function AccountDetail() {
               <Alert type="warn">{t("mnemonic.backup.warning")}</Alert>
             )}
 
-            <div className="flex justify-between items-end">
-              <div className="w-9/12">
+            <div className="flex flex-col sm:flex-row justify-between items-center">
+              <div className="sm:w-9/12 w-full">
                 <p className="text-black dark:text-white font-medium">
                   {t(
                     hasMnemonic
@@ -334,7 +334,7 @@ function AccountDetail() {
                 </p>
               </div>
 
-              <div className="w-1/5 flex-none">
+              <div className="flex-none sm:w-1/5 w-full pt-4 sm:pt-0">
                 <Link to={`secret-key/${hasMnemonic ? "backup" : "new"}`}>
                   <Button
                     label={t(
@@ -351,8 +351,8 @@ function AccountDetail() {
             {!hasMnemonic && (
               <>
                 <MenuDivider />
-                <div className="flex justify-between items-end">
-                  <div className="w-7/12">
+                <div className="flex flex-col sm:flex-row justify-between items-center">
+                  <div className="sm:w-7/12 w-full">
                     <p className="text-black dark:text-white font-medium">
                       {t("mnemonic.import.title")}
                     </p>
@@ -361,7 +361,7 @@ function AccountDetail() {
                     </p>
                   </div>
 
-                  <div className="w-1/5 flex-none">
+                  <div className="flex-none sm:w-1/5 w-full pt-4 sm:pt-0">
                     <Link to="secret-key/import">
                       <Button
                         label={t("mnemonic.import.button")}
@@ -374,8 +374,8 @@ function AccountDetail() {
               </>
             )}
             <MenuDivider />
-            <div className="flex justify-between items-center">
-              <div className="w-7/12">
+            <div className="flex flex-col sm:flex-row justify-between items-center">
+              <div className="sm:w-7/12 w-full">
                 <div className="flex flex-col">
                   <TextField
                     id="nostrPublicKey"
@@ -400,7 +400,7 @@ function AccountDetail() {
                   </div>
                 )}
               </div>
-              <div className="w-1/5 flex-none">
+              <div className="flex-none sm:w-1/5 w-full pt-4 sm:pt-0">
                 <Link to="nostr/settings">
                   <Button label={t("nostr.settings.label")} primary fullWidth />
                 </Link>
@@ -430,8 +430,8 @@ function AccountDetail() {
                 !hasMnemonic && "opacity-30"
               )}
             >
-              <div className="flex justify-between items-end">
-                <div className="w-7/12 flex flex-col gap-2">
+              <div className="flex flex-col sm:flex-row justify-between items-center">
+                <div className="sm:w-7/12 w-full flex flex-col gap-2">
                   <p className="text-black dark:text-white font-medium">
                     {t("network.title")}
                   </p>
@@ -440,7 +440,7 @@ function AccountDetail() {
                   </p>
                 </div>
 
-                <div className="w-1/5 flex-none">
+                <div className="flex-none sm:w-1/5 w-full pt-4 sm:pt-0">
                   <Select
                     name="network"
                     value={account.bitcoinNetwork}
@@ -470,7 +470,7 @@ function AccountDetail() {
                 </div>
               </div>
               <MenuDivider />
-              <div className="flex justify-between items-end">
+              <div className="flex justify-between items-center">
                 <div className="w-7/12 flex flex-col gap-2">
                   <p className="text-black dark:text-white font-medium">
                     {t("mnemonic.lnurl.title")}
@@ -515,7 +515,7 @@ function AccountDetail() {
                 title={t("remove_secretkey.title")}
                 subtitle={t("remove_secretkey.subtitle")}
               >
-                <div className="w-64">
+                <div className="sm:w-64 flex-none w-full pt-4 sm:pt-0">
                   <Button
                     onClick={() => {
                       removeMnemonic({
@@ -530,7 +530,7 @@ function AccountDetail() {
               </Setting>
             )}
             <Setting title={t("remove.title")} subtitle={t("remove.subtitle")}>
-              <div className="w-64">
+              <div className="sm:w-64 flex-none w-full pt-4 sm:pt-0">
                 <Button
                   onClick={() => {
                     removeAccount({

From 25e4d65afec5a59a23a74b139129bd8b62450dce Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 30 Jan 2024 16:36:52 +0530
Subject: [PATCH 2/3] feat: responsive settings page add new property to keep
 few settings inline optionally such as toggle

---
 src/app/components/Setting/index.tsx | 14 +++++++++++---
 src/app/screens/Settings/index.tsx   | 10 ++++++++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Setting/index.tsx b/src/app/components/Setting/index.tsx
index 4adab6f055..dd7fbd9909 100644
--- a/src/app/components/Setting/index.tsx
+++ b/src/app/components/Setting/index.tsx
@@ -1,19 +1,27 @@
+import { classNames } from "~/app/utils";
+
 type Props = {
   title: string;
   subtitle: string | React.ReactNode;
   children: React.ReactNode;
+  inline?: boolean;
 };
 
-function Setting({ title, subtitle, children }: Props) {
+function Setting({ title, subtitle, children, inline }: Props) {
   return (
-    <div className="flex flex-col sm:flex-row justify-between items-center py-4">
+    <div
+      className={classNames(
+        inline ? "" : "flex-col sm:flex-row",
+        "flex justify-between py-4"
+      )}
+    >
       <div>
         <span className="text-black dark:text-white font-medium">{title}</span>
         <p className="text-gray-600 mr-1 dark:text-neutral-400 text-sm">
           {subtitle}
         </p>
       </div>
-      {children}
+      <div className="flex items-center">{children}</div>
     </div>
   );
 }
diff --git a/src/app/screens/Settings/index.tsx b/src/app/screens/Settings/index.tsx
index 4be2213b70..229c8ecdf5 100644
--- a/src/app/screens/Settings/index.tsx
+++ b/src/app/screens/Settings/index.tsx
@@ -68,6 +68,7 @@ function Settings() {
         <Setting
           title={t("browser_notifications.title")}
           subtitle={t("browser_notifications.subtitle")}
+          inline={true}
         >
           {!isLoading && (
             <Toggle
@@ -83,6 +84,7 @@ function Settings() {
         <Setting
           title={t("website_enhancements.title")}
           subtitle={t("website_enhancements.subtitle")}
+          inline={true}
         >
           {!isLoading && (
             <Toggle
@@ -102,6 +104,7 @@ function Settings() {
           {!cameraPermissionsGranted ? (
             <Button
               label={t("camera_access.allow")}
+              className="sm:w-64 flex-none w-full pt-4 sm:pt-0"
               onClick={async () => {
                 try {
                   await Html5Qrcode.getCameras();
@@ -135,13 +138,13 @@ function Settings() {
             />
           }
         >
-          <div className="w-64">
+          <div className="sm:w-64 flex-none w-full pt-4 sm:pt-0">
             <LocaleSwitcher />
           </div>
         </Setting>
         <Setting title={t("theme.title")} subtitle={t("theme.subtitle")}>
           {!isLoading && (
-            <div className="w-64">
+            <div className="sm:w-64 flex-none w-full pt-4 sm:pt-0">
               <Select
                 name="theme"
                 value={settings.theme}
@@ -182,6 +185,7 @@ function Settings() {
         <Setting
           title={t("show_fiat.title")}
           subtitle={t("show_fiat.subtitle")}
+          inline={true}
         >
           {!isLoading && (
             <Toggle
@@ -383,6 +387,7 @@ function Settings() {
         <Setting
           title={t("lnurl_auth.legacy_lnurl_auth_202207.title")}
           subtitle={t("lnurl_auth.legacy_lnurl_auth_202207.subtitle")}
+          inline={true}
         >
           {!isLoading && (
             <Toggle
@@ -400,6 +405,7 @@ function Settings() {
         <Setting
           title={t("lnurl_auth.legacy_lnurl_auth.title")}
           subtitle={t("lnurl_auth.legacy_lnurl_auth.subtitle")}
+          inline={true}
         >
           {!isLoading && (
             <Toggle

From fde79e21e0f17f52e80f423ed948e93f76156afb Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Tue, 27 Feb 2024 19:45:49 +0530
Subject: [PATCH 3/3] chore: design fixes

---
 src/app/screens/Settings/index.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/screens/Settings/index.tsx b/src/app/screens/Settings/index.tsx
index 72dad08866..3973027ccd 100644
--- a/src/app/screens/Settings/index.tsx
+++ b/src/app/screens/Settings/index.tsx
@@ -104,7 +104,7 @@ function Settings() {
           {!cameraPermissionsGranted ? (
             <Button
               label={t("camera_access.allow")}
-              className="sm:w-64 flex-none w-full pt-4 sm:pt-0"
+              className="sm:w-64 flex-none w-full mt-4 sm:mt-0"
               onClick={async () => {
                 try {
                   await Html5Qrcode.getCameras();
@@ -115,7 +115,7 @@ function Settings() {
               }}
             />
           ) : (
-            <p className="text-green-500 font-medium">
+            <p className="text-green-500 font-medium pt-2 sm:pt-0">
               {t("camera_access.granted")}
             </p>
           )}
@@ -138,7 +138,7 @@ function Settings() {
             />
           }
         >
-          <div className="w-64">
+          <div className="sm:w-64 w-full pt-4 sm:pt-0">
             <LocaleSwitcher className="w-full border-gray-300 rounded-md shadow-sm text-gray-700 bg-white dark:bg-surface-00dp dark:text-neutral-200 dark:border-neutral-800" />
           </div>
         </Setting>
@@ -167,7 +167,7 @@ function Settings() {
           subtitle={t("change_password.subtitle")}
         >
           {!isLoading && (
-            <div className="w-64">
+            <div className="sm:w-64 w-full pt-4 sm:pt-0">
               <Button
                 onClick={() => {
                   setModalIsOpen(true);
@@ -206,7 +206,7 @@ function Settings() {
               subtitle={t("currency.subtitle")}
             >
               {!isLoading && (
-                <div className="w-64">
+                <div className="sm:w-64 w-full pt-4 sm:pt-0">
                   <Select
                     name="currency"
                     value={settings.currency}
@@ -231,7 +231,7 @@ function Settings() {
               subtitle={t("exchange.subtitle")}
             >
               {!isLoading && (
-                <div className="w-64">
+                <div className="sm:w-64 w-full pt-4 sm:pt-0">
                   <Select
                     name="exchange"
                     value={settings.exchange}
@@ -264,7 +264,7 @@ function Settings() {
       <div className="shadow bg-white rounded-md sm:overflow-hidden px-6 py-2 divide-y divide-black/10 dark:divide-white/10 dark:bg-surface-02dp">
         <Setting title={t("name.title")} subtitle={t("name.subtitle")}>
           {!isLoading && (
-            <div className="w-64">
+            <div className="sm:w-64 w-full mt-1 sm:mt-0">
               <Input
                 placeholder={t("name.placeholder")}
                 value={settings.userName}
@@ -280,7 +280,7 @@ function Settings() {
 
         <Setting title={t("email.title")} subtitle={t("email.subtitle")}>
           {!isLoading && (
-            <div className="w-64">
+            <div className="sm:w-64 w-full mt-1 sm:mt-0">
               <Input
                 placeholder={t("email.placeholder")}
                 type="email"
@@ -347,7 +347,7 @@ function Settings() {
           title={t("nostr.private_key.title")}
           subtitle={t("nostr.private_key.subtitle")}
         >
-          <div className="w-64">
+          <div className="sm:w-64 w-full pt-4 sm:pt-0">
             <Button
               label={t("nostr.private_key.go_to")}
               primary