From 07c554fc1e71dbc8421057d9a0b424b4697c5485 Mon Sep 17 00:00:00 2001
From: Jeesun Kim <jeesunkim@Jeesuns-MBP.localdomain>
Date: Thu, 14 Mar 2024 11:40:06 -0700
Subject: [PATCH] fix layout padding

---
 src/app/(sidebar)/account/create/page.tsx | 18 +++++++++++++++++-
 src/app/(sidebar)/account/styles.scss     |  2 +-
 src/components/GenerateKeypair.tsx        | 16 +---------------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
index 691732df..71122543 100644
--- 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
index 8ddb5824..afd4a844 100644
--- 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
index c591d3c8..b151e4fa 100644
--- 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