updating scss to use 'gap'

stellar · Mar 5, 2024 · c6609a4 · c6609a4
1 parent cfd1f56
commit c6609a4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
@@ -8,21 +8,24 @@ export default function CreateAccount() {
   return (
     <div className="Account">
       <Card>
-        <div className="CardText">
-          <Text size="lg" as="h1" weight="medium">
-            Keypair Generator
-          </Text>
+        <div className="Account__Card">
+          <div className="CardText">
+            <Text size="lg" as="h1" weight="medium">
+              Keypair Generator
+            </Text>
 
-          <Text size="sm" as="p">
-            These keypairs can be used on the Stellar network where one is
-            required. For example, it can be used as an account master key,
-            account signer, and/or as a stellar-core node key.
-          </Text>
-        </div>
-        <div className="CardText__button">
-          <Button size="md" variant="tertiary">
-            Generate keypair
-          </Button>
+            <Text size="sm" as="p">
+              These keypairs can be used on the Stellar network where one is
+              required. For example, it can be used as an account master key,
+              account signer, and/or as a stellar-core node key.
+            </Text>
+          </div>
+          <div className="Account__CTA">
+            <Button size="md" variant="tertiary">
+              Generate keypair
+            </Button>
+            <div>hai</div>
+          </div>
         </div>
       </Card>
     </div>

diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss
@@ -1,7 +1,13 @@
 @use "../../../styles/utils.scss" as *;
 
 .Account {
-    .CardText__button{
-        padding-top: pxToRem(30px);
-    }
+  &__Card {
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(24px);
+  }
+
+  .CardText__button {
+    align-self: flex-start;
+  }
 }