feat: responsive account settings + settings page (#2958)

* feat: make account settings and settings component responsive * feat: responsive settings page add new property to keep few settings inline optionally such as toggle * chore: design fixes --------- Co-authored-by: René Aaron <[email protected]> Co-authored-by: im-adithya <[email protected]>
getAlby · Feb 29, 2024 · 097c181 · 097c181
1 parent 34ebf14
commit 097c181
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 33 deletions.
diff --git 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="py-4 flex justify-between items-center">
+    <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/Accounts/Detail/index.tsx b/src/app/screens/Accounts/Detail/index.tsx
@@ -191,9 +191,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")}
@@ -206,7 +206,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")}
@@ -219,8 +219,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>
@@ -246,7 +246,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
@@ -318,8 +318,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
@@ -336,7 +336,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(
@@ -353,8 +353,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>
@@ -363,7 +363,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")}
@@ -376,8 +376,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"
@@ -402,7 +402,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>
@@ -432,8 +432,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>
@@ -442,7 +442,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}
@@ -472,7 +472,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")}
@@ -517,7 +517,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({
@@ -532,7 +532,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({

diff --git 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 mt-4 sm:mt-0"
               onClick={async () => {
                 try {
                   await Html5Qrcode.getCameras();
@@ -112,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>
           )}
@@ -135,13 +138,13 @@ 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>
         <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}
@@ -164,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);
@@ -182,6 +185,7 @@ function Settings() {
         <Setting
           title={t("show_fiat.title")}
           subtitle={t("show_fiat.subtitle")}
+          inline={true}
         >
           {!isLoading && (
             <Toggle
@@ -202,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}
@@ -227,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}
@@ -260,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}
@@ -276,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"
@@ -343,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
@@ -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