fix layout padding

stellar · Mar 14, 2024 · 07c554f · 07c554f
1 parent 1499bbb
commit 07c554f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
@@ -1,15 +1,27 @@
 "use client";
 import { useRouter } from "next/navigation";
 import { Card, Text, Button } from "@stellar/design-system";
+import { Keypair } from "stellar-sdk";
 
 import { GenerateKeypair } from "@/components/GenerateKeypair";
 import { Routes } from "@/constants/routes";
+import { useStore } from "@/store/useStore";
 
 import "../styles.scss";
 
 export default function CreateAccount() {
+  const { account } = useStore();
   const router = useRouter();
 
+  const generateKeypair = () => {
+    let keypair = Keypair.random();
+
+    account.updateKeypair({
+      publicKey: keypair.publicKey(),
+      secretKey: keypair.secret(),
+    });
+  };
+
   return (
     <div className="Account">
       <Card>
@@ -26,7 +38,9 @@ export default function CreateAccount() {
             </Text>
           </div>
           <div className="Account__CTA">
-            <GenerateKeypair />
+            <Button size="md" variant="tertiary" onClick={generateKeypair}>
+              Generate keypair
+            </Button>
 
             <Button
               size="md"
@@ -36,6 +50,8 @@ export default function CreateAccount() {
               Fund account with Friendbot
             </Button>
           </div>
+
+          <GenerateKeypair />
         </div>
       </Card>
     </div>

diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss
@@ -13,7 +13,7 @@
 
   &__CTA {
     display: flex;
-    gap: pxToRem(18px);
+    gap: pxToRem(18px) pxToRem(8px);
   }
   &__keypair {
     display: flex;

diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx
@@ -1,25 +1,11 @@
-import { Button, Icon, Input } from "@stellar/design-system";
-import { Keypair } from "stellar-sdk";
+import { Icon, Input } from "@stellar/design-system";
 import { useStore } from "@/store/useStore";
 
 export const GenerateKeypair = () => {
   const { account } = useStore();
 
-  const generateKeypair = () => {
-    let keypair = Keypair.random();
-
-    account.updateKeypair({
-      publicKey: keypair.publicKey(),
-      secretKey: keypair.secret(),
-    });
-  };
-
   return (
     <div className="Account__keypair">
-      <Button size="md" variant="tertiary" onClick={generateKeypair}>
-        Generate keypair
-      </Button>
-
       {account.keypair.publicKey && (
         <Input
           readOnly